slate-react 0.88.2 → 0.89.0-20230315644

package/dist/components/editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AA2CrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBAs+C5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACzB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,OAAO,EAEP,SAAS,EAET,KAAK,EACL,IAAI,EAEL,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,OAAO,EAGL,QAAQ,EAMT,MAAM,cAAc,CAAA;AA4CrB;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE;QACV,iBAAiB,EAAE,SAAS,CAAA;QAC5B,mBAAmB,CAAC,EAAE,IAAI,CAAA;QAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAA;QACxB,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,GAAG,EAAE,GAAG,CAAA;KACT,CAAA;CACF;AAED;;GAEG;AAEH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE;QACV,iBAAiB,EAAE,IAAI,CAAA;KACxB,CAAA;CACF;AAED;;GAEG;AAEH,oBAAY,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;IACpD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,GAAG,CAAC,OAAO,CAAA;IAClE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,GAAG,KAAK,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAA;AAEhD;;GAEG;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,gBA0+C5C,CAAA;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG;IACnC,QAAQ,EAAE,GAAG,CAAA;IACb,UAAU,EAAE;QACV,wBAAwB,EAAE,OAAO,CAAA;QACjC,GAAG,CAAC,EAAE,KAAK,CAAA;QACX,eAAe,EAAE,OAAO,CAAA;QACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QACzB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,CAAA;CACF,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,kBAAkB,8BAG5B,sBAAsB,gBAOxB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,EAAa,CAAA;AA4BtE;;GAEG;AAEH,eAAO,MAAM,cAAc,gHAIO,IAAI,GAAG,OAAO,yBAc/C,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,uDAEJ,IAAI,GAAG,OAAO,yBAevC,CAAA"}

package/dist/components/leaf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAOrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AA2HpE,QAAA,MAAM,YAAY;YAnHR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBAwHV,CAAA;AAEF,eAAO,MAAM,WAAW,UAAW,eAAe,gBAGjD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"leaf.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/leaf.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQrC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AA8HpE,QAAA,MAAM,YAAY;YArHR,OAAO;UACT,IAAI;YACF,OAAO;+BACY,sBAAsB,KAAK,WAAW;0BAC5C,eAAe,KAAK,WAAW;UAC9C,IAAI;kBA0HV,CAAA;AAEF,eAAO,MAAM,WAAW,UAAW,eAAe,gBAGjD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/index.es.js

@@ -3,7 +3,8 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import React, { useLayoutEffect, useEffect, useRef, createContext, useContext, useCallback, Component, useState, useReducer, useMemo } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import { Editor, Scrubber, Transforms, Range, Path, Node, Text as Text$1, Element as Element$1, Point } from 'slate';
+import { Editor, Scrubber, Transforms, Range, Element as Element$1, Path, Node, Text as Text$1, Point } from 'slate';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { isKeyHotkey } from 'is-hotkey';
 import ReactDOM from 'react-dom';
 
@@ -751,7 +752,7 @@ var ReactEditor = {
     // next or previous node, depending on which side the `x` and `y`
     // coordinates are closest to.
 
-    if (Editor.isVoid(editor, node)) {
+    if (Element$1.isElement(node) && 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 = Editor.point(editor, path, {
@@ -992,6 +993,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 = Editor.isEnd(editor, anchor, anchor.path);
+      var isStart = Editor.isStart(editor, focus, focus.path);
+
+      if (isEnd) {
+        var after = Editor.after(editor, anchor); // Editor.after() might return undefined
+
+        anchor = after || anchor;
+      }
+
+      if (isStart) {
+        var before = Editor.before(editor, focus);
+        focus = before || focus;
+      }
+    }
 
     var range = {
       anchor: anchor,
@@ -1050,7 +1091,7 @@ var ReactEditor = {
   isTargetInsideNonReadonlyVoid(editor, target) {
     if (IS_READ_ONLY.get(editor)) return false;
     var slateNode = ReactEditor.hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
-    return Editor.isVoid(editor, slateNode);
+    return Element$1.isElement(slateNode) && Editor.isVoid(editor, slateNode);
   },
 
   /**
@@ -1255,6 +1296,22 @@ var 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.
  */
@@ -1293,7 +1350,8 @@ var Leaf = props => {
       if (placeholderEl) placeholderResizeObserver.current.observe(placeholderEl);
     } else if (placeholderEl) {
       // Create a new observer and observe the placeholder element.
-      placeholderResizeObserver.current = new ResizeObserver(_ref => {
+      var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+      placeholderResizeObserver.current = new ResizeObserver$1(_ref => {
         var [{
           target
         }] = _ref;
@@ -1301,8 +1359,9 @@ var 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);
@@ -2054,7 +2113,7 @@ function normalizePoint(editor, point) {
   }
 
   var parentBlock = Editor.above(editor, {
-    match: n => Editor.isBlock(editor, n),
+    match: n => Element$1.isElement(n) && Editor.isBlock(editor, n),
     at: path
   });
 
@@ -3439,7 +3498,7 @@ var Editable = props => {
         if (native && node.parentElement && (window === null || window === void 0 ? void 0 : (_window$getComputedSt = window.getComputedStyle(node.parentElement)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.whiteSpace) === 'pre') {
           var block = Editor.above(editor, {
             at: anchor.path,
-            match: n => Editor.isBlock(editor, n)
+            match: n => Element$1.isElement(n) && Editor.isBlock(editor, n)
           });
 
           if (block && Node.string(block[0]).includes('\t')) {
@@ -3735,12 +3794,13 @@ var 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);
     }
 
@@ -3888,11 +3948,11 @@ var Editable = props => {
         if (event.detail === TRIPLE_CLICK && path.length >= 1) {
           var blockPath = path;
 
-          if (!Editor.isBlock(editor, node)) {
+          if (!(Element$1.isElement(node) && Editor.isBlock(editor, node))) {
             var _block$;
 
             var block = Editor.above(editor, {
-              match: n => Editor.isBlock(editor, n),
+              match: n => Element$1.isElement(n) && Editor.isBlock(editor, n),
               at: path
             });
             blockPath = (_block$ = block === null || block === void 0 ? void 0 : block[1]) !== null && _block$ !== void 0 ? _block$ : path.slice(0, 1);
@@ -3988,7 +4048,7 @@ var Editable = props => {
           }
 
           var inline = Editor.above(editor, {
-            match: n => Editor.isInline(editor, n),
+            match: n => Element$1.isElement(n) && Editor.isInline(editor, n),
             mode: 'highest'
           });
 
@@ -4040,7 +4100,7 @@ var Editable = props => {
         // default, and calling `preventDefault` hides the cursor.
         var node = ReactEditor.toSlateNode(editor, event.target);
 
-        if (Editor.isVoid(editor, node)) {
+        if (Element$1.isElement(node) && Editor.isVoid(editor, node)) {
           event.preventDefault();
         }
       }
@@ -4049,7 +4109,7 @@ var 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 = Editor.isVoid(editor, node) || Editor.void(editor, {
+        var voidMatch = Element$1.isElement(node) && Editor.isVoid(editor, node) || Editor.void(editor, {
           at: path,
           voids: true
         }); // If starting a drag on a void node, make sure it is selected
@@ -4688,8 +4748,8 @@ var Slate = props => {
     }));
     handleSelectorChange(editor);
   }, [onChange]);
-  EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
   useEffect(() => {
+    EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
     return () => {
       EDITOR_TO_ON_CHANGE.set(editor, () => {});
       unmountRef.current = true;
@@ -4876,7 +4936,7 @@ var withReact = editor => {
 
     if (e.selection && Range.isCollapsed(e.selection)) {
       var parentBlockEntry = Editor.above(e, {
-        match: n => Editor.isBlock(e, n),
+        match: n => Element$1.isElement(n) && Editor.isBlock(e, n),
         at: e.selection
       });