fix: change shadow selection polyfill implementation (slab#2)

Co-authored-by: diegocardoso <[email protected]>
robrez · Sep 16, 2021 · 1cfe249 · 1cfe249
1 parent 1b51673
commit 1cfe249
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 387 deletions.
diff --git a/core/emitter.js b/core/emitter.js
@@ -1,10 +1,8 @@
 import EventEmitter from 'eventemitter3';
 import logger from './logger';
-import { SHADOW_SELECTIONCHANGE } from './shadow-selection-polyfill';
 
-let debug = logger('quill:events');
-
-const EVENTS = [SHADOW_SELECTIONCHANGE, 'mousedown', 'mouseup', 'click'];
+const debug = logger('quill:events');
+const EVENTS = ['selectionchange', 'mousedown', 'mouseup', 'click'];
 const EMITTERS = [];
 const supportsRootNode = ('getRootNode' in document);
 

diff --git a/core/selection.js b/core/selection.js
@@ -3,10 +3,9 @@ import clone from 'clone';
 import equal from 'deep-equal';
 import Emitter from './emitter';
 import logger from './logger';
-import { SHADOW_SELECTIONCHANGE, getRange, addRange, usePolyfill } from './shadow-selection-polyfill';
-
-let debug = logger('quill:selection');
+import { ShadowSelection } from './shadow-selection-polyfill';
 
+const debug = logger('quill:selection');
 
 class Range {
   constructor(index, length = 0) {
@@ -29,28 +28,43 @@ class Selection {
     this.lastRange = this.savedRange = new Range(0, 0);
     this.handleComposition();
     this.handleDragging();
-    if (!usePolyfill) {
-      this.emitter.listenDOM(SHADOW_SELECTIONCHANGE, document, () => {
-        if (!this.mouseDown) {
-          setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
-        }
-      });
-    }
-    this.emitter.on(Emitter.events.EDITOR_CHANGE, (type, delta) => {
-      if (type === Emitter.events.TEXT_CHANGE && delta.length() > 0) {
-        this.update(Emitter.sources.SILENT);
+    this.emitter.listenDOM('selectionchange', document, () => {
+      if (!this.mouseDown && !this.composing) {
+        setTimeout(this.update.bind(this, Emitter.sources.USER), 1);
       }
     });
-    this.emitter.on(Emitter.events.SCROLL_BEFORE_UPDATE, () => {
+    this.emitter.on(Emitter.events.SCROLL_BEFORE_UPDATE, (_, mutations) => {
       if (!this.hasFocus()) return;
-      let native = this.getNativeRange();
+      const native = this.getNativeRange();
+
       if (native == null) return;
+
+      // We might need to hack the offset on Safari, when we are dealing with the first character of a row.
+      // This likely happens because of a race condition between quill's update method being called before the
+      // selectionchange event being fired in the selection polyfill.
+      const hackOffset = (native.start.offset === 0 &&
+                          native.start.offset === native.end.offset &&
+                          this.rootDocument.getSelection() instanceof ShadowSelection &&
+                          mutations.some((a) => a.type === 'characterData' && a.oldValue === '')) ? 1 : 0;
       if (native.start.node === this.cursor.textNode) return;  // cursor.restore() will handle
       // TODO unclear if this has negative side effects
       this.emitter.once(Emitter.events.SCROLL_UPDATE, () => {
         try {
-          this.setNativeRange(native.start.node, native.start.offset, native.end.node, native.end.offset);
-        } catch (ignored) {}
+          if (
+            this.root.contains(native.start.node) &&
+            this.root.contains(native.end.node)
+          ) {
+            this.setNativeRange(
+              native.start.node,
+              native.start.offset + hackOffset,
+              native.end.node,
+              native.end.offset + hackOffset
+            );
+          }
+          this.update(Emitter.sources.SILENT);
+        } catch (ignored) {
+          // ignore
+        }
       });
     });
     this.emitter.on(Emitter.events.SCROLL_OPTIMIZE, (mutations, context) => {
@@ -161,7 +175,9 @@ class Selection {
   }
 
   getNativeRange() {
-    let nativeRange = getRange(this.rootDocument);
+    const selection = this.rootDocument.getSelection();
+    if (selection == null || selection.rangeCount <= 0) return null;
+    const nativeRange = selection.getRangeAt(0);
     if (nativeRange == null) return null;
     let range = this.normalizeNative(nativeRange);
     debug.info('getNativeRange', range);
@@ -270,7 +286,7 @@ class Selection {
     if (startNode != null && (this.root.parentNode == null || startNode.parentNode == null || endNode.parentNode == null)) {
       return;
     }
-    let selection = typeof this.rootDocument.getSelection === 'function' ? this.rootDocument.getSelection() : document.getSelection();
+    const selection = this.rootDocument.getSelection();
     if (selection == null) return;
     if (startNode != null) {
       if (!this.hasFocus()) this.root.focus();
@@ -292,7 +308,8 @@ class Selection {
         let range = document.createRange();
         range.setStart(startNode, startOffset);
         range.setEnd(endNode, endOffset);
-        addRange(this.rootDocument, selection, range);
+        selection.removeAllRanges();
+        selection.addRange(range);
       }
     } else {
       selection.removeAllRanges();