Quill: Quill inside nw.js: Cursor does not move forward when typing at the end of a line.

Created on 15 Jun 2017 · 7Comments · Source: quilljs/quill

I embedded quill in a node-webkit (nw.js) application. When trying to type at the end of a line, the cursor does not move forward but stays in front of the typed letter.

Steps for Reproduction

Initialize an empty directory as a nw.js application and import quill: run

npm init -y
npm install --save quill

Create a minimal html page named "index.html" that loads quill with this script:

and make it the start point:

"main": "index.html"

in package.json.

Run the nw command in the directory to start and try typing into the empty line of the quill element.

Expected behavior:

Cursor moves along with the line end when expanding a line by typing.

Actual behavior:

The cursor stays in front of the first typed letter, then moves normally as it is no longer at the end of the line. E. g. typing "Quill" yields "uillQ".

Platforms:

nw.js on Ubuntu 16.10 ("sdk build flavor" of nw.js)

Version:

1.2.6

Source

jomuel

Most helpful comment

I've experienced this as well without the context of nw.js.

Example video: http://d.pr/v/eFa1n2

erikreagan on 10 Jul 2017

👍3

All 7 comments

We're going to need the help of members of the community who use nw.js to help make it work with Quill. Some steps to start are 1) steps to set up a development environment 2) get the Quill test suite to run on it 3) automate testing.

jhchen on 4 Jul 2017

I've experienced this as well without the context of nw.js.

Example video: http://d.pr/v/eFa1n2

erikreagan on 10 Jul 2017

👍3

What browser + OS is that in @erikreagan?

jhchen on 11 Jul 2017

I'm seeing the same behavior (exactly the same as the video above)? has there been a resolution to this issue?

thanks

John

Additional Information
Chrome: Version 62.0.3202.75 (Official Build) (64-bit)

Seems to only happy where I have multiple quill editors initialized and on screen. I have other instances of single editors that do not show this problem.

Microsoft Edge - could not replicate problem

IE11 - could not select the text to edit. The icon for moving the div pops up and that all I can do. It will only allow me to move the ql-editor container rather than editing the contents.

f1hornet on 2 Nov 2017

👍1

I use Quill extensively in NWJS and I haven't experienced this problem. However, my project structure is somewhat different.

You're probably experiencing some weirdness because of difference between browser-context and node-context. NWJS has two different execution contexts for javascript, and you have to carefully manage the boundary between those contexts.

Rather than installing Quill with NPM, I downloaded a tarball from the releases page and unpacked it into a vendor directory. Then I use a script tag to include the Quill javascript into my main index.html file.

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <!-- jquery -->
  <script src="vendor/jquery-3.1.1.min.js"></script>
  <script src="vendor/jquery-ui-1.12.1.min.js"></script>

  <!-- quilljs -->
  <link rel="stylesheet" href="vendor/quill.core-1.3.3.css">
  <script src="vendor/quill-1.3.3.js"></script>

  <!-- custom css -->
  <link rel="stylesheet" href="my-app.css">

  <!-- application startup script -->
  <script src="main.js"></script>

</head>
<body>
</body>
</html>

My own main.js file is also included via a script tag, so that I can capture all the browser globals, and then pass them into my Application.js, which uses the nwjs require to build its own module hierarchy

main.js

var Application = require('./lib/Application');

$(document).ready(function () {
  Application.initialize({
    "JQUERY" : $,
    "WINDOW" : window,
    "DOCUMENT" : document,
    "QUILL" : Quill
  });
});

And finally, my Application.js module manages access to those browser globals, builds the GUI, etc.

Application.js

var Application = (function() {

  var $, window, document, Quill;

  function initialize(BROWSER_GLOBALS) {

    $ = BROWSER_GLOBALS.JQUERY;
    window = BROWSER_GLOBALS.WINDOW;
    document = BROWSER_GLOBALS.DOCUMENT;
    Quill = BROWSER_GLOBALS.QUILL;

    setTimeout(startup, 1);
  }

  function startup() {
    // LOTS OF OTHER STUFF HERE...
    createQuillEditor("my-document-id");
    // LOTS OF OTHER STUFF HERE...
  }

  function createQuillEditor(documentId) {
    var editor = new Quill("div#editor-" + documentId);
    editor.on("text-change", function(delta, before, source) {
      onDocumentTextChanged(documentId, delta, before, source);
    });
  }

  function onDocumentTextChanged(documentId, delta, before, source) {
    // LOTS OF OTHER STUFF HERE...
  }

  exports.initialize = initialize;
})();

Try that out, and see if it works for you... In my experience, NWJS and Quill work really well together already!