yjs / y-quill

Quill Editor binding for Yjs
https://demos.yjs.dev/quill/quill.html
MIT License
80 stars 18 forks source link

Awareness of two quill instance on the same page #5

Open csbenjamin opened 4 years ago

csbenjamin commented 4 years ago

Is your feature request related to a problem? Please describe. I want to have multiple instance of quill editors on a single page. Currently, if I want to use cursors, I need to use multiple providers (one for each quill instance), because all quill instances will try to use the same field ('cursor') on the awareness state.

Describe the solution you'd like Being able to choose another fields from awareness state instead 'cursor' would be enough. For example, if I have two instances of quill editors on my page, I could set 'cursor1' for the first instance and 'cursor2' for the second one.

gustavotoyota commented 2 years ago

I solved this problem with these changes:

diff --git a/node_modules/y-quill/src/y-quill.js b/node_modules/y-quill/src/y-quill.js
index e668115..684f889 100644
--- a/node_modules/y-quill/src/y-quill.js
+++ b/node_modules/y-quill/src/y-quill.js
@@ -122,11 +122,7 @@ export class QuillBinding {
       if (awareness && quillCursors) {
         const sel = quill.getSelection()
         const aw = /** @type {any} */ (awareness.getLocalState())
-        if (sel === null) {
-          if (awareness.getLocalState() !== null) {
-            awareness.setLocalStateField('cursor', /** @type {any} */ (null))
-          }
-        } else {
+        if (sel !== null) {
           const anchor = Y.createRelativePositionFromTypeIndex(type, sel.index)
           const head = Y.createRelativePositionFromTypeIndex(type, sel.index + sel.length)
           if (!aw || !aw.cursor || !Y.compareRelativePositions(anchor, aw.cursor.anchor) || !Y.compareRelativePositions(head, aw.cursor.head)) {
@@ -155,6 +151,16 @@ export class QuillBinding {
       })
       awareness.on('change', this._awarenessChange)
     }
+
+    let focused = false
+    quill.on('selection-change', (range) => {
+      if (range) {
+        focused = true
+      } else if (focused) {
+        focused = false
+        awareness.setLocalStateField('cursor', null)
+      }
+    })
   }
   destroy () {
     this.type.unobserve(this._typeObserver)

This works for 0.1.4. I'm having problems with 0.1.5 so I don't know about it.