Merge pull request #7 from miroapp/MDOCS-1385

MDOCS-1385 hide cursor on compositionupdate events
slab · Nov 14, 2024 · d684abf · d684abf
2 parents 2f1efb8 + 16a1cd0
commit d684abf
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 3 deletions.
diff --git a/packages/quill/src/blots/cursor.ts b/packages/quill/src/blots/cursor.ts
@@ -73,7 +73,7 @@ class Cursor extends EmbedBlot {
   }
 
   restore(): EmbedContextRange | null {
-    if (this.selection.composing || this.parent == null) return null;
+    if (this.parent == null) return null;
     const range = this.selection.getNativeRange();
     // Browser may push down styles/nodes inside the cursor blot.
     // https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#push-down-values

diff --git a/packages/quill/src/core/composition.ts b/packages/quill/src/core/composition.ts
@@ -19,6 +19,12 @@ class Composition {
       }
     });
 
+    this.scroll.domNode.addEventListener('compositionupdate', () => {
+      if (!this.scroll.batch) {
+        this.handleCompositionUpdate();
+      }
+    });
+
     this.scroll.domNode.addEventListener('compositionend', (event) => {
       if (this.isComposing) {
         // Webkit makes DOM changes after compositionend, so we use microtask to
@@ -45,6 +51,10 @@ class Composition {
     }
   }
 
+  private handleCompositionUpdate() {
+    this.emitter.emit(Emitter.events.COMPOSITION_UPDATE);
+  }
+
   private handleCompositionEnd(event: CompositionEvent) {
     this.emitter.emit(Emitter.events.COMPOSITION_BEFORE_END, event);
     // HACK: There is a bug in the safari browser in mobile devices and when we finish typing

diff --git a/packages/quill/src/core/emitter.ts b/packages/quill/src/core/emitter.ts
@@ -29,6 +29,7 @@ class Emitter extends EventEmitter<string> {
     TEXT_CHANGE: 'text-change',
     COMPOSITION_BEFORE_START: 'composition-before-start',
     COMPOSITION_START: 'composition-start',
+    COMPOSITION_UPDATE: 'composition-update',
     COMPOSITION_BEFORE_END: 'composition-before-end',
     COMPOSITION_END: 'composition-end',
   } as const;

diff --git a/packages/quill/src/core/selection.ts b/packages/quill/src/core/selection.ts
@@ -114,6 +114,18 @@ class Selection {
     this.emitter.on(Emitter.events.COMPOSITION_BEFORE_START, () => {
       this.composing = true;
     });
+    this.emitter.on(Emitter.events.COMPOSITION_UPDATE, () => {
+      if (this.cursor.parent) {
+        const range = this.cursor.restore();
+        if (!range) return;
+        this.setNativeRange(
+          range.startNode,
+          range.startOffset,
+          range.endNode,
+          range.endOffset,
+        );
+      }
+    });
     this.emitter.on(Emitter.events.COMPOSITION_END, () => {
       this.composing = false;
       if (this.cursor.parent) {

diff --git a/packages/quill/test/unit/ui/picker.spec.ts b/packages/quill/test/unit/ui/picker.spec.ts
@@ -88,11 +88,11 @@ describe('Picker', () => {
     ).toEqual('false');
   });
 
-  test('aria attributes toggle correctly when the picker is opened via mousedown', () => {
+  test('aria attributes toggle correctly when the picker is opened via pointerdown', () => {
     const { pickerSelector } = setup();
     const pickerLabel = pickerSelector.querySelector('.ql-picker-label');
     pickerLabel?.dispatchEvent(
-      new Event('mousedown', {
+      new Event('pointerdown', {
         bubbles: true,
         cancelable: true,
       }),