slate-react 0.97.2 → 0.98.0

package/dist/index.js

@@ -1146,15 +1146,37 @@ var ReactEditor = {
 
     if (el) {
       if (isDOMSelection(domRange)) {
-        anchorNode = domRange.anchorNode;
-        anchorOffset = domRange.anchorOffset;
-        focusNode = domRange.focusNode;
-        focusOffset = domRange.focusOffset; // COMPAT: There's a bug in chrome that always returns `true` for
+        // COMPAT: In firefox the normal seletion way does not work
+        // (https://github.com/ianstormtaylor/slate/pull/5486#issue-1820720223)
+        if (IS_FIREFOX && domRange.rangeCount > 1) {
+          focusNode = domRange.focusNode; // Focus node works fine
+
+          var firstRange = domRange.getRangeAt(0);
+          var lastRange = domRange.getRangeAt(domRange.rangeCount - 1); // Right to left
+
+          if (firstRange.startContainer === focusNode) {
+            anchorNode = lastRange.endContainer;
+            anchorOffset = lastRange.endOffset;
+            focusOffset = firstRange.startOffset;
+          } else {
+            // Left to right
+            anchorNode = firstRange.startContainer;
+            anchorOffset = firstRange.endOffset;
+            focusOffset = lastRange.startOffset;
+          }
+        } else {
+          anchorNode = domRange.anchorNode;
+          anchorOffset = domRange.anchorOffset;
+          focusNode = domRange.focusNode;
+          focusOffset = domRange.focusOffset;
+        } // COMPAT: There's a bug in chrome that always returns `true` for
         // `isCollapsed` for a Selection that comes from a ShadowRoot.
         // (2020/08/08)
         // https://bugs.chromium.org/p/chromium/issues/detail?id=447523
+        // IsCollapsed might not work in firefox, but this will
+
 
-        if (IS_CHROME && hasShadowRoot(anchorNode)) {
+        if (IS_CHROME && hasShadowRoot(anchorNode) || IS_FIREFOX) {
           isCollapsed = domRange.anchorNode === domRange.focusNode && domRange.anchorOffset === domRange.focusOffset;
         } else {
           isCollapsed = domRange.isCollapsed;
@@ -1199,46 +1221,6 @@ var ReactEditor = {
     if (!focus) {
       return null;
     }
-    /**
-     * suppose we have this document:
-     *
-     * { type: 'paragraph',
-     *   children: [
-     *     { text: 'foo ' },
-     *     { text: 'bar' },
-     *     { text: ' baz' }
-     *   ]
-     * }
-     *
-     * a double click on "bar" on chrome will create this range:
-     *
-     * anchor -> [0,1] offset 0
-     * focus  -> [0,1] offset 3
-     *
-     * while on firefox will create this range:
-     *
-     * anchor -> [0,0] offset 4
-     * focus  -> [0,2] offset 0
-     *
-     * let's try to fix it...
-     */
-
-
-    if (IS_FIREFOX && !isCollapsed && anchorNode !== focusNode) {
-      var isEnd = slate.Editor.isEnd(editor, anchor, anchor.path);
-      var isStart = slate.Editor.isStart(editor, focus, focus.path);
-
-      if (isEnd) {
-        var after = slate.Editor.after(editor, anchor); // Editor.after() might return undefined
-
-        anchor = after || anchor;
-      }
-
-      if (isStart) {
-        var before = slate.Editor.before(editor, focus);
-        focus = before || focus;
-      }
-    }
 
     var range = {
       anchor: anchor,
@@ -3806,13 +3788,32 @@ var Editable = function Editable(props) {
 
       if (!selection && !hasDomSelection) {
         return;
+      } // Get anchorNode and focusNode
+
+
+      var focusNode = domSelection.focusNode;
+      var anchorNode; // COMPAT: In firefox the normal seletion way does not work
+      // (https://github.com/ianstormtaylor/slate/pull/5486#issue-1820720223)
+
+      if (IS_FIREFOX && domSelection.rangeCount > 1) {
+        var firstRange = domSelection.getRangeAt(0);
+        var lastRange = domSelection.getRangeAt(domSelection.rangeCount - 1); // Right to left
+
+        if (firstRange.startContainer === focusNode) {
+          anchorNode = lastRange.endContainer;
+        } else {
+          // Left to right
+          anchorNode = firstRange.startContainer;
+        }
+      } else {
+        anchorNode = domSelection.anchorNode;
       } // verify that the dom selection is in the editor
 
 
       var editorElement = EDITOR_TO_ELEMENT.get(editor);
       var hasDomSelectionInEditor = false;
 
-      if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
+      if (editorElement.contains(anchorNode) && editorElement.contains(focusNode)) {
         hasDomSelectionInEditor = true;
       } // If the DOM selection is in the editor and the editor selection is already correct, we're done.
 
@@ -3826,16 +3827,14 @@ var Editable = function Editable(props) {
         });
 
         if (slateRange && slate.Range.equals(slateRange, selection)) {
-          var _anchorNode$parentEle;
+          var _anchorNode, _anchorNode$parentEle;
 
           if (!state.hasMarkPlaceholder) {
             return;
           } // Ensure selection is inside the mark placeholder
 
 
-          var anchorNode = domSelection.anchorNode;
-
-          if (anchorNode !== null && anchorNode !== void 0 && (_anchorNode$parentEle = anchorNode.parentElement) !== null && _anchorNode$parentEle !== void 0 && _anchorNode$parentEle.hasAttribute('data-slate-mark-placeholder')) {
+          if ((_anchorNode = anchorNode) !== null && _anchorNode !== void 0 && (_anchorNode$parentEle = _anchorNode.parentElement) !== null && _anchorNode$parentEle !== void 0 && _anchorNode$parentEle.hasAttribute('data-slate-mark-placeholder')) {
             return;
           }
         }
@@ -3872,20 +3871,17 @@ var Editable = function Editable(props) {
       }
 
       return newDomRange;
-    };
+    }; // In firefox if there is more then 1 range and we call setDomSelection we remove the ability to select more cells in a table
+
+
+    if (domSelection.rangeCount <= 1) {
+      setDomSelection();
+    }
 
-    var newDomRange = setDomSelection();
     var ensureSelection = ((_androidInputManagerR2 = androidInputManagerRef.current) === null || _androidInputManagerR2 === void 0 ? void 0 : _androidInputManagerR2.isFlushing()) === 'action';
 
     if (!IS_ANDROID || !ensureSelection) {
       setTimeout(function () {
-        // COMPAT: In Firefox, it's not enough to create a range, you also need
-        // to focus the contenteditable element too. (2016/11/16)
-        if (newDomRange && IS_FIREFOX) {
-          var el = ReactEditor.toDOMNode(editor, editor);
-          el.focus();
-        }
-
         state.isUpdatingSelection = false;
       });
       return;