slate-react 0.66.6 → 0.67.0-202191204438

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # slate-react
 
+## 0.67.0-202191204438
+
+### Minor Changes
+
+- [#4540](https://github.com/ianstormtaylor/slate/pull/4540) [`11ef83b4`](https://github.com/ianstormtaylor/slate/commit/11ef83b47fca84d1f908b5c9eeefada516fe9fed) Thanks [@bryanph](https://github.com/bryanph)! - The Slate Provider's "value" prop is now only used as initial state for editor.children as was intended before. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - slate@0.66.5-202191204438
+
+## 0.66.7
+
+### Patch Changes
+
+- [#4588](https://github.com/ianstormtaylor/slate/pull/4588) [`ae65ae5f`](https://github.com/ianstormtaylor/slate/commit/ae65ae5f717c877eee0e3f839b76fc18d8b44999) Thanks [@jaked](https://github.com/jaked)! - revert #4455 / #4512; fix triple-click by unhanging range with void
+
 ## 0.66.6
 
 ### Patch Changes

package/dist/index.es.js

@@ -2594,61 +2594,11 @@ var ReactEditor = {
         anchorNode = domRange.anchorNode;
         anchorOffset = domRange.anchorOffset;
         focusNode = domRange.focusNode;
-        focusOffset = domRange.focusOffset; // When triple clicking a block, Chrome will return a selection object whose
-        // focus node is the next element sibling and focusOffset is 0.
-        // This will highlight the corresponding toolbar button for the sibling
-        // block even though users just want to target the previous block.
-        // (2021/08/24)
-        // Signs of a triple click in Chrome
-        // - anchor node will be a text node but focus node won't
-        // - both anchorOffset and focusOffset are 0
-        // - focusNode value will be null since Chrome tries to extend to just the
-        // beginning of the next block
-
-        if (IS_CHROME && anchorNode && focusNode && anchorNode.nodeType !== focusNode.nodeType && domRange.anchorOffset === 0 && domRange.focusOffset === 0 && focusNode.nodeValue == null) {
-          // If an anchorNode is an element node when triple clicked, then the focusNode
-          //  should also be the same as anchorNode when triple clicked.
-          // Otherwise, anchorNode is a text node and we need to
-          // - climb up the DOM tree to get the farthest element node that receives
-          //   triple click. It should have atribute 'data-slate-node' = "element"
-          // - get the last child of that element node
-          // - climb down the DOM tree to get the text node of the last child
-          // - this is also the end of the selection aka the focusNode
-          var anchorElement = anchorNode.parentNode;
-          var selectedBlock = anchorElement.closest('[data-slate-node="element"]');
-
-          if (selectedBlock) {
-            // The Slate Text nodes are leaf-level and contains document's text.
-            // However, when represented in the DOM, they are actually Element nodes
-            // and different from the DOM's Text nodes
-            var {
-              childElementCount: slateTextNodeCount
-            } = selectedBlock;
-
-            if (slateTextNodeCount === 1) {
-              focusNode = anchorNode;
-              focusOffset = focusNode.length;
-            } else if (slateTextNodeCount > 1) {
-              // A element with attribute data-slate-node="element" can have multiple
-              // children with attribute data-slate-node="text". But these children only have
-              // one child at each level.
-              // <span data-slate-node="text">
-              //   <span data-slate-leaf="">
-              //     <span data-slate-string=""></span>
-              //   </span>
-              // </span>
-              var focusElement = selectedBlock.lastElementChild;
-              var nodeIterator = document.createNodeIterator(focusElement, NodeFilter.SHOW_TEXT);
-              focusNode = nodeIterator.nextNode();
-              focusOffset = focusNode.length;
-            }
-          }
-        } // COMPAT: There's a bug in chrome that always returns `true` for
+        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
 
-
         if (IS_CHROME && hasShadowRoot()) {
           isCollapsed = domRange.anchorNode === domRange.focusNode && domRange.anchorOffset === domRange.focusOffset;
         } else {
@@ -2679,10 +2629,24 @@ var ReactEditor = {
       return null;
     }
 
-    return {
-      anchor,
-      focus
-    };
+    var range = {
+      anchor: anchor,
+      focus: focus
+    }; // if the selection is a hanging range that ends in a void
+    // and the DOM focus is an Element
+    // (meaning that the selection ends before the element)
+    // unhang the range to avoid mistakenly including the void
+
+    if (Range.isExpanded(range) && Range.isForward(range) && isDOMElement(focusNode) && Editor.void(editor, {
+      at: range.focus,
+      mode: 'highest'
+    })) {
+      range = Editor.unhangRange(editor, range, {
+        voids: true
+      });
+    }
+
+    return range;
   },
 
   hasRange(editor, range) {
@@ -3720,8 +3684,7 @@ var Slate = props => {
   } = props,
       rest = _objectWithoutProperties(props, _excluded);
 
-  var [key, setKey] = useState(0);
-  var context = useMemo(() => {
+  var [context, setContext] = React.useState(() => {
     if (!Node.isNodeList(value)) {
       throw new Error("[Slate] value is invalid! Expected a list of elements" + "but got: ".concat(JSON.stringify(value)));
     }
@@ -3733,11 +3696,11 @@ var Slate = props => {
     editor.children = value;
     Object.assign(editor, rest);
     return [editor];
-  }, [key, value, ...Object.values(rest)]);
+  });
   var onContextChange = useCallback(() => {
     onChange(editor.children);
-    setKey(key + 1);
-  }, [key, onChange]);
+    setContext([editor]);
+  }, [onChange]);
   EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
   useEffect(() => {
     return () => {