@portabletext/editor 1.44.4 → 1.44.5

package/lib/index.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), selector_isOverlappingSelection = require("./_chunks-cjs/selector.is-overlapping-selection.cjs"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_getFocusInlineObject = require("./_chunks-cjs/selector.get-focus-inline-object.cjs"), slateDom = require("slate-dom"), util_isSelectionCollapsed = require("./_chunks-cjs/util.is-selection-collapsed.cjs"), parseBlocks = require("./_chunks-cjs/parse-blocks.cjs"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), useEffectEvent = require("use-effect-event");
+var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), selector_isOverlappingSelection = require("./_chunks-cjs/selector.is-overlapping-selection.cjs"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_getFocusInlineObject = require("./_chunks-cjs/selector.get-focus-inline-object.cjs"), slateDom = require("slate-dom"), util_isSelectionCollapsed = require("./_chunks-cjs/util.is-selection-collapsed.cjs"), parseBlocks = require("./_chunks-cjs/parse-blocks.cjs"), isEqual = require("lodash/isEqual.js"), selector_isSelectingEntireBlocks = require("./_chunks-cjs/selector.is-selecting-entire-blocks.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), xstate = require("xstate"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var isEqual__default = /* @__PURE__ */ _interopDefaultCompat(isEqual), noop__default = /* @__PURE__ */ _interopDefaultCompat(noop), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq);
+var noop__default = /* @__PURE__ */ _interopDefaultCompat(noop), isEqual__default = /* @__PURE__ */ _interopDefaultCompat(isEqual), uniq__default = /* @__PURE__ */ _interopDefaultCompat(uniq);
 function getCompoundClientRect(nodes) {
   if (nodes.length === 0)
     return new DOMRect(0, 0, 0, 0);
@@ -710,18 +710,232 @@ function createWithHotkeys(editorActor, portableTextEditor, hotkeysFromOptions)
     }, editor;
   };
 }
-function withSyncRangeDecorations({
-  editorActor,
-  slateEditor,
-  syncRangeDecorations
-}) {
-  const originalApply = slateEditor.apply;
-  return slateEditor.apply = (op) => {
-    originalApply(op), !editorActor.getSnapshot().matches({
-      "edit mode": "read only"
-    }) && op.type !== "set_selection" && syncRangeDecorations(op);
+const slateOperationCallback = ({
+  input,
+  sendBack
+}) => {
+  const originalApply = input.slateEditor.apply;
+  return input.slateEditor.apply = (op) => {
+    op.type !== "set_selection" && sendBack({
+      type: "slate operation",
+      operation: op
+    }), originalApply(op);
   }, () => {
-    slateEditor.apply = originalApply;
+    input.slateEditor.apply = originalApply;
+  };
+}, rangeDecorationsMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    "update pending range decorations": xstate.assign({
+      pendingRangeDecorations: ({
+        event
+      }) => (xstate.assertEvent(event, "range decorations updated"), event.rangeDecorations)
+    }),
+    "set up initial range decorations": xstate.assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        xstate.assertEvent(event, "ready");
+        const rangeDecorationState = [];
+        for (const rangeDecoration of context.pendingRangeDecorations) {
+          const slateRange = editorProvider.toSlateRange(rangeDecoration.selection, context.slateEditor);
+          if (!slate.Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange
+          });
+        }
+        return rangeDecorationState;
+      }
+    }),
+    "update range decorations": xstate.assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        xstate.assertEvent(event, "range decorations updated");
+        const rangeDecorationState = [];
+        for (const rangeDecoration of event.rangeDecorations) {
+          const slateRange = editorProvider.toSlateRange(rangeDecoration.selection, context.slateEditor);
+          if (!slate.Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange
+          });
+        }
+        return rangeDecorationState;
+      }
+    }),
+    "move range decorations": xstate.assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        xstate.assertEvent(event, "slate operation");
+        const rangeDecorationState = [];
+        for (const decoratedRange of context.decoratedRanges) {
+          const slateRange = editorProvider.toSlateRange(decoratedRange.rangeDecoration.selection, context.slateEditor);
+          if (!slate.Range.isRange(slateRange)) {
+            decoratedRange.rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration: decoratedRange.rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          let newRange;
+          if (newRange = editorProvider.moveRangeByOperation(slateRange, event.operation), newRange && newRange !== slateRange || newRange === null && slateRange) {
+            const newRangeSelection = newRange ? editorProvider.slateRangeToSelection({
+              schema: context.schema,
+              editor: context.slateEditor,
+              range: newRange
+            }) : null;
+            decoratedRange.rangeDecoration.onMoved?.({
+              newSelection: newRangeSelection,
+              rangeDecoration: decoratedRange.rangeDecoration,
+              origin: "local"
+            });
+          }
+          newRange !== null && rangeDecorationState.push({
+            ...newRange || slateRange,
+            rangeDecoration: decoratedRange.rangeDecoration
+          });
+        }
+        return rangeDecorationState;
+      }
+    }),
+    "assign readOnly": xstate.assign({
+      readOnly: ({
+        event
+      }) => (xstate.assertEvent(event, "update read only"), event.readOnly)
+    })
+  },
+  actors: {
+    "slate operation listener": xstate.fromCallback(slateOperationCallback)
+  },
+  guards: {
+    "has range decorations": ({
+      context
+    }) => context.decoratedRanges.length > 0,
+    "has different decorations": ({
+      context,
+      event
+    }) => (xstate.assertEvent(event, "range decorations updated"), !isEqual__default.default(context.pendingRangeDecorations, event.rangeDecorations)),
+    "not read only": ({
+      context
+    }) => !context.readOnly
+  }
+}).createMachine({
+  id: "range decorations",
+  context: ({
+    input
+  }) => ({
+    readOnly: input.readOnly,
+    pendingRangeDecorations: input.rangeDecorations,
+    decoratedRanges: [],
+    schema: input.schema,
+    slateEditor: input.slateEditor
+  }),
+  invoke: {
+    src: "slate operation listener",
+    input: ({
+      context
+    }) => ({
+      slateEditor: context.slateEditor
+    })
+  },
+  on: {
+    "update read only": {
+      actions: ["assign readOnly"]
+    }
+  },
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        "range decorations updated": {
+          actions: ["update pending range decorations"]
+        },
+        ready: {
+          target: "ready",
+          actions: ["set up initial range decorations"]
+        }
+      }
+    },
+    ready: {
+      initial: "idle",
+      on: {
+        "range decorations updated": {
+          target: ".idle",
+          guard: "has different decorations",
+          actions: ["update range decorations", "update pending range decorations"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            "slate operation": {
+              target: "moving range decorations",
+              guard: xstate.and(["has range decorations", "not read only"])
+            }
+          }
+        },
+        "moving range decorations": {
+          entry: ["move range decorations"],
+          always: {
+            target: "idle"
+          }
+        }
+      }
+    }
+  }
+});
+function createDecorate(rangeDecorationActor) {
+  return function([, path]) {
+    if (editorProvider.isEqualToEmptyEditor(rangeDecorationActor.getSnapshot().context.slateEditor.children, rangeDecorationActor.getSnapshot().context.schema))
+      return [{
+        anchor: {
+          path: [0, 0],
+          offset: 0
+        },
+        focus: {
+          path: [0, 0],
+          offset: 0
+        },
+        placeholder: !0
+      }];
+    if (path.length === 0)
+      return [];
+    const result = rangeDecorationActor.getSnapshot().context.decoratedRanges.filter((item) => slate.Range.isCollapsed(item) ? path.length !== 2 ? !1 : slate.Path.equals(item.focus.path, path) && slate.Path.equals(item.anchor.path, path) : slate.Range.intersection(item, {
+      anchor: {
+        path,
+        offset: 0
+      },
+      focus: {
+        path,
+        offset: 0
+      }
+    }) || slate.Range.includes(item, path));
+    return result.length > 0 ? result : [];
   };
 }
 const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
@@ -759,11 +973,30 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     scrollSelectionIntoView,
     spellCheck,
     ...restProps
-  } = props, portableTextEditor = editorProvider.usePortableTextEditor(), ref = React.useRef(null), [editableElement, setEditableElement] = React.useState(null), [hasInvalidValue, setHasInvalidValue] = React.useState(!1), [rangeDecorationState, setRangeDecorationsState] = React.useState([]);
+  } = props, portableTextEditor = editorProvider.usePortableTextEditor(), ref = React.useRef(null), [editableElement, setEditableElement] = React.useState(null), [hasInvalidValue, setHasInvalidValue] = React.useState(!1);
   React.useImperativeHandle(forwardedRef, () => ref.current);
-  const rangeDecorationsRef = React.useRef(rangeDecorations), editorActor = React.useContext(editorProvider.EditorActorContext), readOnly = react.useSelector(editorActor, (s) => s.matches({
+  const editorActor = React.useContext(editorProvider.EditorActorContext), readOnly = react.useSelector(editorActor, (s) => s.matches({
     "edit mode": "read only"
-  })), schemaTypes = react.useSelector(editorActor, (s_0) => s_0.context.schema), slateEditor = slateReact.useSlate(), blockTypeName = schemaTypes.block.name;
+  })), schemaTypes = react.useSelector(editorActor, (s_0) => s_0.context.schema), slateEditor = slateReact.useSlate(), rangeDecorationsActor = react.useActorRef(rangeDecorationsMachine, {
+    input: {
+      readOnly,
+      slateEditor,
+      schema: schemaTypes,
+      rangeDecorations: rangeDecorations ?? []
+    }
+  }), decorate = React.useMemo(() => createDecorate(rangeDecorationsActor), [rangeDecorationsActor]);
+  React.useEffect(() => {
+    rangeDecorationsActor.send({
+      type: "update read only",
+      readOnly
+    });
+  }, [rangeDecorationsActor, readOnly]), React.useEffect(() => {
+    rangeDecorationsActor.send({
+      type: "range decorations updated",
+      rangeDecorations: rangeDecorations ?? []
+    });
+  }, [rangeDecorationsActor, rangeDecorations]);
+  const blockTypeName = schemaTypes.block.name;
   React.useMemo(() => {
     if (readOnly)
       return debug("Editable is in read only mode"), slateEditor;
@@ -797,46 +1030,12 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
         }), slateEditor.onChange());
       }
     }
-  }, [blockTypeName, editorActor, propsSelection, slateEditor]), syncRangeDecorations = React.useCallback((operation) => {
-    if (rangeDecorations && rangeDecorations.length > 0) {
-      const newSlateRanges = [];
-      if (rangeDecorations.forEach((rangeDecorationItem) => {
-        const slateRange_0 = editorProvider.toSlateRange(rangeDecorationItem.selection, slateEditor);
-        if (!slate.Range.isRange(slateRange_0)) {
-          rangeDecorationItem.onMoved && rangeDecorationItem.onMoved({
-            newSelection: null,
-            rangeDecoration: rangeDecorationItem,
-            origin: "local"
-          });
-          return;
-        }
-        let newRange;
-        if (operation && (newRange = editorProvider.moveRangeByOperation(slateRange_0, operation), newRange && newRange !== slateRange_0 || newRange === null && slateRange_0)) {
-          const newRangeSelection = newRange ? editorProvider.slateRangeToSelection({
-            schema: schemaTypes,
-            editor: slateEditor,
-            range: newRange
-          }) : null;
-          rangeDecorationItem.onMoved && rangeDecorationItem.onMoved({
-            newSelection: newRangeSelection,
-            rangeDecoration: rangeDecorationItem,
-            origin: "local"
-          });
-        }
-        newRange !== null && newSlateRanges.push({
-          ...newRange || slateRange_0,
-          rangeDecoration: rangeDecorationItem
-        });
-      }), newSlateRanges.length > 0) {
-        setRangeDecorationsState(newSlateRanges);
-        return;
-      }
-    }
-    setRangeDecorationsState((rangeDecorationState_0) => rangeDecorationState_0.length > 0 ? [] : rangeDecorationState_0);
-  }, [rangeDecorations, schemaTypes, slateEditor]);
+  }, [blockTypeName, editorActor, propsSelection, slateEditor]);
   React.useEffect(() => {
     const onReady = editorActor.on("ready", () => {
-      syncRangeDecorations(), restoreSelectionFromProps();
+      rangeDecorationsActor.send({
+        type: "ready"
+      }), restoreSelectionFromProps();
     }), onInvalidValue = editorActor.on("invalid value", () => {
       setHasInvalidValue(!0);
     }), onValueChanged = editorActor.on("value changed", () => {
@@ -845,22 +1044,9 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
     return () => {
       onReady.unsubscribe(), onInvalidValue.unsubscribe(), onValueChanged.unsubscribe();
     };
-  }, [editorActor, restoreSelectionFromProps, syncRangeDecorations]), React.useEffect(() => {
+  }, [rangeDecorationsActor, editorActor, restoreSelectionFromProps]), React.useEffect(() => {
     propsSelection && !hasInvalidValue && restoreSelectionFromProps();
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps]);
-  const [syncedRangeDecorations, setSyncedRangeDecorations] = React.useState(!1);
-  React.useEffect(() => {
-    syncedRangeDecorations || (setSyncedRangeDecorations(!0), syncRangeDecorations());
-  }, [syncRangeDecorations, syncedRangeDecorations]), React.useEffect(() => {
-    isEqual__default.default(rangeDecorations, rangeDecorationsRef.current) || syncRangeDecorations(), rangeDecorationsRef.current = rangeDecorations;
-  }, [rangeDecorations, syncRangeDecorations]), React.useEffect(() => {
-    const teardown = withSyncRangeDecorations({
-      editorActor,
-      slateEditor,
-      syncRangeDecorations
-    });
-    return () => teardown();
-  }, [editorActor, slateEditor, syncRangeDecorations]);
   const handleCopy = React.useCallback((event) => {
     if (onCopy)
       onCopy(event) !== void 0 && event.preventDefault();
@@ -1106,33 +1292,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
       return scrollSelectionIntoView === null ? noop__default.default : (_editor, domRange) => {
         scrollSelectionIntoView(portableTextEditor, domRange);
       };
-  }, [portableTextEditor, scrollSelectionIntoView]), decorate = React.useCallback(([, path_0]) => {
-    if (editorProvider.isEqualToEmptyEditor(slateEditor.children, schemaTypes))
-      return [{
-        anchor: {
-          path: [0, 0],
-          offset: 0
-        },
-        focus: {
-          path: [0, 0],
-          offset: 0
-        },
-        placeholder: !0
-      }];
-    if (path_0.length === 0)
-      return [];
-    const result_2 = rangeDecorationState.filter((item) => slate.Range.isCollapsed(item) ? path_0.length !== 2 ? !1 : slate.Path.equals(item.focus.path, path_0) && slate.Path.equals(item.anchor.path, path_0) : slate.Range.intersection(item, {
-      anchor: {
-        path: path_0,
-        offset: 0
-      },
-      focus: {
-        path: path_0,
-        offset: 0
-      }
-    }) || slate.Range.includes(item, path_0));
-    return result_2.length > 0 ? result_2 : [];
-  }, [slateEditor, schemaTypes, rangeDecorationState]);
+  }, [portableTextEditor, scrollSelectionIntoView]);
   React.useEffect(() => {
     ref.current = slateReact.ReactEditor.toDOMNode(slateEditor, slateEditor), setEditableElement(ref.current);
   }, [slateEditor, ref]), React.useEffect(() => {