slate-react 0.88.2 → 0.89.0-20230315644

package/dist/index.js

@@ -8,6 +8,7 @@ var throttle = require('lodash/throttle');
 var React = require('react');
 var scrollIntoView = require('scroll-into-view-if-needed');
 var slate = require('slate');
+var resizeObserver = require('@juggle/resize-observer');
 var isHotkey = require('is-hotkey');
 var ReactDOM = require('react-dom');
 
@@ -990,7 +991,7 @@ var ReactEditor = {
     // next or previous node, depending on which side the `x` and `y`
     // coordinates are closest to.
 
-    if (slate.Editor.isVoid(editor, node)) {
+    if (slate.Element.isElement(node) && slate.Editor.isVoid(editor, node)) {
       var rect = target.getBoundingClientRect();
       var isPrev = editor.isInline(node) ? x - rect.left < rect.left + rect.width - x : y - rect.top < rect.top + rect.height - y;
       var edge = slate.Editor.point(editor, path, {
@@ -1232,6 +1233,46 @@ 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,
@@ -1287,7 +1328,7 @@ var ReactEditor = {
   isTargetInsideNonReadonlyVoid: function isTargetInsideNonReadonlyVoid(editor, target) {
     if (IS_READ_ONLY.get(editor)) return false;
     var slateNode = ReactEditor.hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
-    return slate.Editor.isVoid(editor, slateNode);
+    return slate.Element.isElement(slateNode) && slate.Editor.isVoid(editor, slateNode);
   },
 
   /**
@@ -1497,6 +1538,22 @@ var useSlateStatic = function useSlateStatic() {
   return editor;
 };
 
+/**
+ * Returns a set of rules that use the `:where` selector if it is supported,
+ * otherwise it falls back to the provided selector on its own.
+ *
+ * The `:where` selector is used to give a selector a lower specificity,
+ * allowing the rule to be overridden by a user-defined stylesheet.
+ *
+ * Older browsers do not support the `:where` selector.
+ * If it is not supported, the selector will be used without `:where`,
+ * which means that the rule will have a higher specificity and a user-defined
+ * stylesheet will not be able to override it easily.
+ */
+function whereIfSupported(selector, styles) {
+  return "@supports (selector(:where(".concat(selector, "))) {") + ":where(".concat(selector, ") { ").concat(styles, " }") + "}" + "@supports not (selector(:where(".concat(selector, "))) {") + "".concat(selector, " { ").concat(styles, " }") + "}";
+}
+
 /**
  * Individual leaves in a text node with unique formatting.
  */
@@ -1536,6 +1593,7 @@ var Leaf = function Leaf(props) {
       if (placeholderEl) placeholderResizeObserver.current.observe(placeholderEl);
     } else if (placeholderEl) {
       // Create a new observer and observe the placeholder element.
+      var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
       placeholderResizeObserver.current = new ResizeObserver(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 1),
             target = _ref2[0].target;
@@ -1544,8 +1602,9 @@ var Leaf = function Leaf(props) {
 
         if (styleElement) {
           // Make the min-height the height of the placeholder.
-          var minHeight = "".concat(target.clientHeight, "px");
-          styleElement.innerHTML = ":where([data-slate-editor-id=\"".concat(editor.id, "\"]) { min-height: ").concat(minHeight, "; }");
+          var selector = "[data-slate-editor-id=\"".concat(editor.id, "\"]");
+          var styles = "min-height: ".concat(target.clientHeight, "px;");
+          styleElement.innerHTML = whereIfSupported(selector, styles);
         }
       });
       placeholderResizeObserver.current.observe(placeholderEl);
@@ -2465,7 +2524,7 @@ function normalizePoint(editor, point) {
 
   var parentBlock = slate.Editor.above(editor, {
     match: function match(n) {
-      return slate.Editor.isBlock(editor, n);
+      return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
     },
     at: path
   });
@@ -3918,7 +3977,7 @@ var Editable = function Editable(props) {
           var block = slate.Editor.above(editor, {
             at: anchor.path,
             match: function match(n) {
-              return slate.Editor.isBlock(editor, n);
+              return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
             }
           });
 
@@ -4209,12 +4268,13 @@ var Editable = function Editable(props) {
       // Set global default styles for editors.
       var defaultStylesElement = document.createElement('style');
       defaultStylesElement.setAttribute('data-slate-default-styles', 'true');
-      defaultStylesElement.innerHTML = // :where is used to give these rules lower specificity so user stylesheets can override them.
-      ":where([data-slate-editor]) {" + // Allow positioning relative to the editable element.
+      var selector = '[data-slate-editor]';
+      var defaultStyles = // Allow positioning relative to the editable element.
       "position: relative;" + // Prevent the default outline styles.
       "outline: none;" + // Preserve adjacent whitespace and new lines.
       "white-space: pre-wrap;" + // Allow words to break if they are too long.
-      "word-wrap: break-word;" + "}";
+      "word-wrap: break-word;";
+      defaultStylesElement.innerHTML = whereIfSupported(selector, defaultStyles);
       document.head.appendChild(defaultStylesElement);
     }
 
@@ -4370,12 +4430,12 @@ var Editable = function Editable(props) {
         if (event.detail === TRIPLE_CLICK && path.length >= 1) {
           var blockPath = path;
 
-          if (!slate.Editor.isBlock(editor, node)) {
+          if (!(slate.Element.isElement(node) && slate.Editor.isBlock(editor, node))) {
             var _block$;
 
             var block = slate.Editor.above(editor, {
               match: function match(n) {
-                return slate.Editor.isBlock(editor, n);
+                return slate.Element.isElement(n) && slate.Editor.isBlock(editor, n);
               },
               at: path
             });
@@ -4471,7 +4531,7 @@ var Editable = function Editable(props) {
 
           var inline = slate.Editor.above(editor, {
             match: function match(n) {
-              return slate.Editor.isInline(editor, n);
+              return slate.Element.isElement(n) && slate.Editor.isInline(editor, n);
             },
             mode: 'highest'
           });
@@ -4523,7 +4583,7 @@ var Editable = function Editable(props) {
         // default, and calling `preventDefault` hides the cursor.
         var node = ReactEditor.toSlateNode(editor, event.target);
 
-        if (slate.Editor.isVoid(editor, node)) {
+        if (slate.Element.isElement(node) && slate.Editor.isVoid(editor, node)) {
           event.preventDefault();
         }
       }
@@ -4532,7 +4592,7 @@ var Editable = function Editable(props) {
       if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
         var path = ReactEditor.findPath(editor, node);
-        var voidMatch = slate.Editor.isVoid(editor, node) || slate.Editor["void"](editor, {
+        var voidMatch = slate.Element.isElement(node) && slate.Editor.isVoid(editor, node) || slate.Editor["void"](editor, {
           at: path,
           voids: true
         }); // If starting a drag on a void node, make sure it is selected
@@ -5186,8 +5246,8 @@ var Slate = function Slate(props) {
     });
     handleSelectorChange(editor);
   }, [onChange]);
-  EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
   React.useEffect(function () {
+    EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
     return function () {
       EDITOR_TO_ON_CHANGE.set(editor, function () {});
       unmountRef.current = true;
@@ -5388,7 +5448,7 @@ var withReact = function withReact(editor) {
     if (e.selection && slate.Range.isCollapsed(e.selection)) {
       var parentBlockEntry = slate.Editor.above(e, {
         match: function match(n) {
-          return slate.Editor.isBlock(e, n);
+          return slate.Element.isElement(n) && slate.Editor.isBlock(e, n);
         },
         at: e.selection
       });