@portabletext/editor 1.44.4 → 1.44.6

package/lib/index.js

@@ -1,11 +1,10 @@
 import { getNodeBlock, getFirstBlock, getLastBlock, slateRangeToSelection, toSlateRange, debugWithName, EditorActorContext, fromSlateValue, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, moveRangeByOperation, isEqualToEmptyEditor, getEditorSnapshot, useEditor } from "./_chunks-es/editor-provider.js";
 import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useSelector } from "@xstate/react";
-import isEqual from "lodash/isEqual.js";
+import { useSelector, useActorRef } from "@xstate/react";
 import noop from "lodash/noop.js";
 import { useContext, useRef, useState, useEffect, useMemo, startTransition, useCallback, forwardRef, useImperativeHandle } from "react";
-import { Editor, Range, Element as Element$2, Text, Transforms, Path } from "slate";
+import { Editor, Range, Element as Element$2, Text, Path, Transforms } from "slate";
 import { useSlateStatic, useSelected, ReactEditor, useSlate, Editable } from "slate-react";
 import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, isOverlappingSelection, getFocusBlock } from "./_chunks-es/selector.is-overlapping-selection.js";
 import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment } from "./_chunks-es/util.slice-blocks.js";
@@ -13,10 +12,12 @@ import { getFocusInlineObject } from "./_chunks-es/selector.get-focus-inline-obj
 import { DOMEditor, isDOMNode } from "slate-dom";
 import { isSelectionCollapsed as isSelectionCollapsed$1, getSelectionEndPoint } from "./_chunks-es/util.is-selection-collapsed.js";
 import { parseBlocks } from "./_chunks-es/parse-blocks.js";
+import isEqual from "lodash/isEqual.js";
 import { isSelectingEntireBlocks } from "./_chunks-es/selector.is-selecting-entire-blocks.js";
 import { defineBehavior, isHotkey } from "./_chunks-es/behavior.core.js";
 import { c } from "react-compiler-runtime";
 import uniq from "lodash/uniq.js";
+import { setup, fromCallback, assign, assertEvent, and } from "xstate";
 import { useEffectEvent } from "use-effect-event";
 function getCompoundClientRect(nodes) {
   if (nodes.length === 0)
@@ -723,18 +724,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 = setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    "update pending range decorations": assign({
+      pendingRangeDecorations: ({
+        event
+      }) => (assertEvent(event, "range decorations updated"), event.rangeDecorations)
+    }),
+    "set up initial range decorations": assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        assertEvent(event, "ready");
+        const rangeDecorationState = [];
+        for (const rangeDecoration of context.pendingRangeDecorations) {
+          const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
+          if (!Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange
+          });
+        }
+        return rangeDecorationState;
+      }
+    }),
+    "update range decorations": assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        assertEvent(event, "range decorations updated");
+        const rangeDecorationState = [];
+        for (const rangeDecoration of event.rangeDecorations) {
+          const slateRange = toSlateRange(rangeDecoration.selection, context.slateEditor);
+          if (!Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange
+          });
+        }
+        return rangeDecorationState;
+      }
+    }),
+    "move range decorations": assign({
+      decoratedRanges: ({
+        context,
+        event
+      }) => {
+        assertEvent(event, "slate operation");
+        const rangeDecorationState = [];
+        for (const decoratedRange of context.decoratedRanges) {
+          const slateRange = toSlateRange(decoratedRange.rangeDecoration.selection, context.slateEditor);
+          if (!Range.isRange(slateRange)) {
+            decoratedRange.rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration: decoratedRange.rangeDecoration,
+              origin: "local"
+            });
+            continue;
+          }
+          let newRange;
+          if (newRange = moveRangeByOperation(slateRange, event.operation), newRange && newRange !== slateRange || newRange === null && slateRange) {
+            const newRangeSelection = newRange ? 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": assign({
+      readOnly: ({
+        event
+      }) => (assertEvent(event, "update read only"), event.readOnly)
+    })
+  },
+  actors: {
+    "slate operation listener": fromCallback(slateOperationCallback)
+  },
+  guards: {
+    "has range decorations": ({
+      context
+    }) => context.decoratedRanges.length > 0,
+    "has different decorations": ({
+      context,
+      event
+    }) => (assertEvent(event, "range decorations updated"), !isEqual(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: and(["has range decorations", "not read only"])
+            }
+          }
+        },
+        "moving range decorations": {
+          entry: ["move range decorations"],
+          always: {
+            target: "idle"
+          }
+        }
+      }
+    }
+  }
+});
+function createDecorate(rangeDecorationActor) {
+  return function([, path]) {
+    if (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) => Range.isCollapsed(item) ? path.length !== 2 ? !1 : Path.equals(item.focus.path, path) && Path.equals(item.anchor.path, path) : Range.intersection(item, {
+      anchor: {
+        path,
+        offset: 0
+      },
+      focus: {
+        path,
+        offset: 0
+      }
+    }) || Range.includes(item, path));
+    return result.length > 0 ? result : [];
   };
 }
 const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
@@ -772,11 +987,30 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     scrollSelectionIntoView,
     spellCheck,
     ...restProps
-  } = props, portableTextEditor = usePortableTextEditor(), ref = useRef(null), [editableElement, setEditableElement] = useState(null), [hasInvalidValue, setHasInvalidValue] = useState(!1), [rangeDecorationState, setRangeDecorationsState] = useState([]);
+  } = props, portableTextEditor = usePortableTextEditor(), ref = useRef(null), [editableElement, setEditableElement] = useState(null), [hasInvalidValue, setHasInvalidValue] = useState(!1);
   useImperativeHandle(forwardedRef, () => ref.current);
-  const rangeDecorationsRef = useRef(rangeDecorations), editorActor = useContext(EditorActorContext), readOnly = useSelector(editorActor, (s) => s.matches({
+  const editorActor = useContext(EditorActorContext), readOnly = useSelector(editorActor, (s) => s.matches({
     "edit mode": "read only"
-  })), schemaTypes = useSelector(editorActor, (s_0) => s_0.context.schema), slateEditor = useSlate(), blockTypeName = schemaTypes.block.name;
+  })), schemaTypes = useSelector(editorActor, (s_0) => s_0.context.schema), slateEditor = useSlate(), rangeDecorationsActor = useActorRef(rangeDecorationsMachine, {
+    input: {
+      readOnly,
+      slateEditor,
+      schema: schemaTypes,
+      rangeDecorations: rangeDecorations ?? []
+    }
+  }), decorate = useMemo(() => createDecorate(rangeDecorationsActor), [rangeDecorationsActor]);
+  useEffect(() => {
+    rangeDecorationsActor.send({
+      type: "update read only",
+      readOnly
+    });
+  }, [rangeDecorationsActor, readOnly]), useEffect(() => {
+    rangeDecorationsActor.send({
+      type: "range decorations updated",
+      rangeDecorations: rangeDecorations ?? []
+    });
+  }, [rangeDecorationsActor, rangeDecorations]);
+  const blockTypeName = schemaTypes.block.name;
   useMemo(() => {
     if (readOnly)
       return debug("Editable is in read only mode"), slateEditor;
@@ -810,46 +1044,12 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
         }), slateEditor.onChange());
       }
     }
-  }, [blockTypeName, editorActor, propsSelection, slateEditor]), syncRangeDecorations = useCallback((operation) => {
-    if (rangeDecorations && rangeDecorations.length > 0) {
-      const newSlateRanges = [];
-      if (rangeDecorations.forEach((rangeDecorationItem) => {
-        const slateRange_0 = toSlateRange(rangeDecorationItem.selection, slateEditor);
-        if (!Range.isRange(slateRange_0)) {
-          rangeDecorationItem.onMoved && rangeDecorationItem.onMoved({
-            newSelection: null,
-            rangeDecoration: rangeDecorationItem,
-            origin: "local"
-          });
-          return;
-        }
-        let newRange;
-        if (operation && (newRange = moveRangeByOperation(slateRange_0, operation), newRange && newRange !== slateRange_0 || newRange === null && slateRange_0)) {
-          const newRangeSelection = newRange ? 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]);
   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", () => {
@@ -858,22 +1058,9 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
     return () => {
       onReady.unsubscribe(), onInvalidValue.unsubscribe(), onValueChanged.unsubscribe();
     };
-  }, [editorActor, restoreSelectionFromProps, syncRangeDecorations]), useEffect(() => {
+  }, [rangeDecorationsActor, editorActor, restoreSelectionFromProps]), useEffect(() => {
     propsSelection && !hasInvalidValue && restoreSelectionFromProps();
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps]);
-  const [syncedRangeDecorations, setSyncedRangeDecorations] = useState(!1);
-  useEffect(() => {
-    syncedRangeDecorations || (setSyncedRangeDecorations(!0), syncRangeDecorations());
-  }, [syncRangeDecorations, syncedRangeDecorations]), useEffect(() => {
-    isEqual(rangeDecorations, rangeDecorationsRef.current) || syncRangeDecorations(), rangeDecorationsRef.current = rangeDecorations;
-  }, [rangeDecorations, syncRangeDecorations]), useEffect(() => {
-    const teardown = withSyncRangeDecorations({
-      editorActor,
-      slateEditor,
-      syncRangeDecorations
-    });
-    return () => teardown();
-  }, [editorActor, slateEditor, syncRangeDecorations]);
   const handleCopy = useCallback((event) => {
     if (onCopy)
       onCopy(event) !== void 0 && event.preventDefault();
@@ -1119,33 +1306,7 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
       return scrollSelectionIntoView === null ? noop : (_editor, domRange) => {
         scrollSelectionIntoView(portableTextEditor, domRange);
       };
-  }, [portableTextEditor, scrollSelectionIntoView]), decorate = useCallback(([, path_0]) => {
-    if (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) => Range.isCollapsed(item) ? path_0.length !== 2 ? !1 : Path.equals(item.focus.path, path_0) && Path.equals(item.anchor.path, path_0) : Range.intersection(item, {
-      anchor: {
-        path: path_0,
-        offset: 0
-      },
-      focus: {
-        path: path_0,
-        offset: 0
-      }
-    }) || Range.includes(item, path_0));
-    return result_2.length > 0 ? result_2 : [];
-  }, [slateEditor, schemaTypes, rangeDecorationState]);
+  }, [portableTextEditor, scrollSelectionIntoView]);
   useEffect(() => {
     ref.current = ReactEditor.toDOMNode(slateEditor, slateEditor), setEditableElement(ref.current);
   }, [slateEditor, ref]), useEffect(() => {