slate-react 0.83.2 → 0.86.0-20221017162519

package/dist/components/editable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Element, NodeEntry, Range, Text } from 'slate';
 import { ReactEditor } from '../plugin/react-editor';
-import { DOMNode, DOMRange } from '../utils/dom';
+import { DOMRange } from '../utils/dom';
 /**
  * `RenderElementProps` are passed to the `renderElement` handler.
  */
@@ -68,18 +68,6 @@ export declare const DefaultPlaceholder: ({ attributes, children, }: RenderPlace
  * A default memoized decorate function.
  */
 export declare const defaultDecorate: (entry: NodeEntry) => Range[];
-/**
- * Check if the target is in the editor.
- */
-export declare const hasTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
-/**
- * Check if the target is editable and in the editor.
- */
-export declare const hasEditableTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
-/**
- * Check if the target is inside void and in an non-readonly editor.
- */
-export declare const isTargetInsideNonReadonlyVoid: (editor: ReactEditor, target: EventTarget | null) => boolean;
 /**
  * Check if an event is overrided by a handler.
  */

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":"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"}
+{"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;AAwCrB;;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,gBAy8C5C,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;AA2BtE;;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/index.es.js

@@ -1012,6 +1012,38 @@ var ReactEditor = {
     return Editor.hasPath(editor, anchor.path) && Editor.hasPath(editor, focus.path);
   },
 
+  /**
+   * Check if the target is in the editor.
+   */
+  hasTarget(editor, target) {
+    return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
+  },
+
+  /**
+   * Check if the target is editable and in the editor.
+   */
+  hasEditableTarget(editor, target) {
+    return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
+      editable: true
+    });
+  },
+
+  /**
+   * Check if the target can be selectable
+   */
+  hasSelectableTarget(editor, target) {
+    return ReactEditor.hasEditableTarget(editor, target) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, target);
+  },
+
+  /**
+   * Check if the target is inside void and in an non-readonly editor.
+   */
+  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);
+  },
+
   /**
    * Experimental and android specific: Flush all pending diffs and cancel composition at the next possible time.
    */
@@ -3104,8 +3136,8 @@ var Editable = props => {
         anchorNode,
         focusNode
       } = domSelection;
-      var anchorNodeSelectable = hasEditableTarget(editor, anchorNode) || isTargetInsideNonReadonlyVoid(editor, anchorNode);
-      var focusNodeSelectable = hasEditableTarget(editor, focusNode) || isTargetInsideNonReadonlyVoid(editor, focusNode);
+      var anchorNodeSelectable = ReactEditor.hasEditableTarget(editor, anchorNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, anchorNode);
+      var focusNodeSelectable = ReactEditor.hasEditableTarget(editor, focusNode) || ReactEditor.isTargetInsideNonReadonlyVoid(editor, focusNode);
 
       if (anchorNodeSelectable && focusNodeSelectable) {
         var range = ReactEditor.toSlateRange(editor, domSelection, {
@@ -3289,7 +3321,7 @@ var Editable = props => {
   var onDOMBeforeInput = useCallback(event => {
     onUserInput();
 
-    if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
+    if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
       var _EDITOR_TO_USER_SELEC;
 
       // COMPAT: BeforeInput events aren't cancelable on android, so we have to handle them differently using the android input manager.
@@ -3691,7 +3723,7 @@ var Editable = props => {
       // COMPAT: Certain browsers don't support the `beforeinput` event, so we
       // fall back to React's leaky polyfill instead just for it. It
       // only works for the `insertText` input type.
-      if (!HAS_BEFORE_INPUT_SUPPORT && !readOnly && !isEventHandled(event, attributes.onBeforeInput) && hasEditableTarget(editor, event.target)) {
+      if (!HAS_BEFORE_INPUT_SUPPORT && !readOnly && !isEventHandled(event, attributes.onBeforeInput) && ReactEditor.hasSelectableTarget(editor, event.target)) {
         event.preventDefault();
 
         if (!ReactEditor.isComposing(editor)) {
@@ -3717,7 +3749,7 @@ var Editable = props => {
       deferredOperations.current = [];
     }, []),
     onBlur: useCallback(event => {
-      if (readOnly || state.isUpdatingSelection || !hasEditableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
+      if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
       } // COMPAT: If the current `activeElement` is still the previous
       // one, this is due to the window being blurred when the tab
@@ -3770,7 +3802,7 @@ var Editable = props => {
       IS_FOCUSED.delete(editor);
     }, [readOnly, attributes.onBlur]),
     onClick: useCallback(event => {
-      if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
+      if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
         var node = ReactEditor.toSlateNode(editor, event.target);
         var path = ReactEditor.findPath(editor, node); // At this time, the Slate document may be arbitrarily different,
         // because onClick handlers can change the document before we get here.
@@ -3821,7 +3853,7 @@ var Editable = props => {
       }
     }, [readOnly, attributes.onClick]),
     onCompositionEnd: useCallback(event => {
-      if (hasEditableTarget(editor, event.target)) {
+      if (ReactEditor.hasSelectableTarget(editor, event.target)) {
         if (ReactEditor.isComposing(editor)) {
           setIsComposing(false);
           IS_COMPOSING.set(editor, false);
@@ -3857,7 +3889,7 @@ var Editable = props => {
       }
     }, [attributes.onCompositionEnd]),
     onCompositionUpdate: useCallback(event => {
-      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
+      if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
         if (!ReactEditor.isComposing(editor)) {
           setIsComposing(true);
           IS_COMPOSING.set(editor, true);
@@ -3865,7 +3897,7 @@ var Editable = props => {
       }
     }, [attributes.onCompositionUpdate]),
     onCompositionStart: useCallback(event => {
-      if (hasEditableTarget(editor, event.target)) {
+      if (ReactEditor.hasSelectableTarget(editor, event.target)) {
         androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleCompositionStart(event);
 
         if (isEventHandled(event, attributes.onCompositionStart) || IS_ANDROID) {
@@ -3903,13 +3935,13 @@ var Editable = props => {
       }
     }, [attributes.onCompositionStart]),
     onCopy: useCallback(event => {
-      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
+      if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData, 'copy');
       }
     }, [attributes.onCopy]),
     onCut: useCallback(event => {
-      if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
+      if (!readOnly && ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
         event.preventDefault();
         ReactEditor.setFragmentData(editor, event.clipboardData, 'cut');
         var {
@@ -3930,7 +3962,7 @@ var Editable = props => {
       }
     }, [readOnly, attributes.onCut]),
     onDragOver: useCallback(event => {
-      if (hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
+      if (ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragOver)) {
         // Only when the target is void, call `preventDefault` to signal
         // that drops are allowed. Editable content is droppable by
         // default, and calling `preventDefault` hides the cursor.
@@ -3942,7 +3974,7 @@ var Editable = props => {
       }
     }, [attributes.onDragOver]),
     onDragStart: useCallback(event => {
-      if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDragStart)) {
+      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, {
@@ -3961,7 +3993,7 @@ var Editable = props => {
       }
     }, [readOnly, attributes.onDragStart]),
     onDrop: useCallback(event => {
-      if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDrop)) {
+      if (!readOnly && ReactEditor.hasTarget(editor, event.target) && !isEventHandled(event, attributes.onDrop)) {
         event.preventDefault(); // Keep a reference to the dragged range before updating selection
 
         var draggedRange = editor.selection; // Find the range where the drop happened
@@ -3992,7 +4024,7 @@ var Editable = props => {
       state.isDraggingInternally = false;
     }, [readOnly, attributes.onDrop]),
     onDragEnd: useCallback(event => {
-      if (!readOnly && state.isDraggingInternally && attributes.onDragEnd && hasTarget(editor, event.target)) {
+      if (!readOnly && state.isDraggingInternally && attributes.onDragEnd && ReactEditor.hasTarget(editor, event.target)) {
         attributes.onDragEnd(event);
       } // When dropping on a different droppable element than the current editor,
       // `onDrop` is not called. So we need to clean up in `onDragEnd` instead.
@@ -4002,7 +4034,7 @@ var Editable = props => {
       state.isDraggingInternally = false;
     }, [readOnly, attributes.onDragEnd]),
     onFocus: useCallback(event => {
-      if (!readOnly && !state.isUpdatingSelection && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
+      if (!readOnly && !state.isUpdatingSelection && ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onFocus)) {
         var el = ReactEditor.toDOMNode(editor, editor);
         var root = ReactEditor.findDocumentOrShadowRoot(editor);
         state.latestElement = root.activeElement; // COMPAT: If the editor has nested editable elements, the focus
@@ -4018,7 +4050,7 @@ var Editable = props => {
       }
     }, [readOnly, attributes.onFocus]),
     onKeyDown: useCallback(event => {
-      if (!readOnly && hasEditableTarget(editor, event.target)) {
+      if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target)) {
         androidInputManager === null || androidInputManager === void 0 ? void 0 : androidInputManager.handleKeyDown(event);
         var {
           nativeEvent
@@ -4309,7 +4341,7 @@ var Editable = props => {
       }
     }, [readOnly, attributes.onKeyDown]),
     onPaste: useCallback(event => {
-      if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
+      if (!readOnly && ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onPaste)) {
         // COMPAT: Certain browsers don't support the `beforeinput` event, so we
         // fall back to React's `onPaste` here instead.
         // COMPAT: Firefox, Chrome and Safari don't emit `beforeinput` events
@@ -4367,36 +4399,11 @@ var defaultScrollSelectionIntoView = (editor, domRange) => {
     delete leafEl.getBoundingClientRect;
   }
 };
-/**
- * Check if the target is in the editor.
- */
-
-
-var hasTarget = (editor, target) => {
-  return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target);
-};
-/**
- * Check if the target is editable and in the editor.
- */
-
-var hasEditableTarget = (editor, target) => {
-  return isDOMNode(target) && ReactEditor.hasDOMNode(editor, target, {
-    editable: true
-  });
-};
-/**
- * Check if the target is inside void and in an non-readonly editor.
- */
-
-var isTargetInsideNonReadonlyVoid = (editor, target) => {
-  if (IS_READ_ONLY.get(editor)) return false;
-  var slateNode = hasTarget(editor, target) && ReactEditor.toSlateNode(editor, target);
-  return Editor.isVoid(editor, slateNode);
-};
 /**
  * Check if an event is overrided by a handler.
  */
 
+
 var isEventHandled = (event, handler) => {
   if (!handler) {
     return false;
@@ -4580,11 +4587,11 @@ var Slate = props => {
   var unmountRef = useRef(false);
   var [context, setContext] = React.useState(() => {
     if (!Node.isNodeList(value)) {
-      throw new Error("[Slate] value is invalid! Expected a list of elements" + "but got: ".concat(Scrubber.stringify(value)));
+      throw new Error("[Slate] value is invalid! Expected a list of elements but got: ".concat(Scrubber.stringify(value)));
     }
 
     if (!Editor.isEditor(editor)) {
-      throw new Error("[Slate] editor is invalid! you passed:" + "".concat(Scrubber.stringify(editor)));
+      throw new Error("[Slate] editor is invalid! You passed: ".concat(Scrubber.stringify(editor)));
     }
 
     editor.children = value;