@portabletext/editor 1.44.6 → 1.44.8

package/lib/index.cjs

@@ -817,7 +817,14 @@ const slateOperationCallback = ({
           }
           newRange !== null && rangeDecorationState.push({
             ...newRange || slateRange,
-            rangeDecoration: decoratedRange.rangeDecoration
+            rangeDecoration: {
+              ...decoratedRange.rangeDecoration,
+              selection: editorProvider.slateRangeToSelection({
+                schema: context.schema,
+                editor: context.slateEditor,
+                range: newRange
+              })
+            }
           });
         }
         return rangeDecorationState;
@@ -827,19 +834,37 @@ const slateOperationCallback = ({
       readOnly: ({
         event
       }) => (xstate.assertEvent(event, "update read only"), event.readOnly)
+    }),
+    "increment update count": xstate.assign({
+      updateCount: ({
+        context
+      }) => context.updateCount + 1
     })
   },
   actors: {
     "slate operation listener": xstate.fromCallback(slateOperationCallback)
   },
   guards: {
+    "has pending range decorations": ({
+      context
+    }) => context.pendingRangeDecorations.length > 0,
     "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)),
+    }) => {
+      xstate.assertEvent(event, "range decorations updated");
+      const existingRangeDecorations = context.decoratedRanges.map((decoratedRange) => ({
+        anchor: decoratedRange.rangeDecoration.selection?.anchor,
+        focus: decoratedRange.rangeDecoration.selection?.focus
+      })), newRangeDecorations = event.rangeDecorations.map((rangeDecoration) => ({
+        anchor: rangeDecoration.selection?.anchor,
+        focus: rangeDecoration.selection?.focus
+      }));
+      return !isEqual__default.default(existingRangeDecorations, newRangeDecorations);
+    },
     "not read only": ({
       context
     }) => !context.readOnly
@@ -853,7 +878,8 @@ const slateOperationCallback = ({
     pendingRangeDecorations: input.rangeDecorations,
     decoratedRanges: [],
     schema: input.schema,
-    slateEditor: input.slateEditor
+    slateEditor: input.slateEditor,
+    updateCount: 0
   }),
   invoke: {
     src: "slate operation listener",
@@ -875,10 +901,13 @@ const slateOperationCallback = ({
         "range decorations updated": {
           actions: ["update pending range decorations"]
         },
-        ready: {
+        ready: [{
           target: "ready",
-          actions: ["set up initial range decorations"]
-        }
+          guard: "has pending range decorations",
+          actions: ["set up initial range decorations", "increment update count"]
+        }, {
+          target: "ready"
+        }]
       }
     },
     ready: {
@@ -887,7 +916,7 @@ const slateOperationCallback = ({
         "range decorations updated": {
           target: ".idle",
           guard: "has different decorations",
-          actions: ["update range decorations", "update pending range decorations"]
+          actions: ["update range decorations", "increment update count"]
         }
       },
       states: {
@@ -910,7 +939,7 @@ const slateOperationCallback = ({
   }
 });
 function createDecorate(rangeDecorationActor) {
-  return function([, path]) {
+  return function([node, path]) {
     if (editorProvider.isEqualToEmptyEditor(rangeDecorationActor.getSnapshot().context.slateEditor.children, rangeDecorationActor.getSnapshot().context.schema))
       return [{
         anchor: {
@@ -925,7 +954,10 @@ function createDecorate(rangeDecorationActor) {
       }];
     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, {
+    if (!slate.Element.isElement(node) || node.children.length === 0)
+      return [];
+    const blockIndex = path.at(0);
+    return blockIndex === void 0 ? [] : rangeDecorationActor.getSnapshot().context.decoratedRanges.filter((decoratedRange) => slate.Range.isCollapsed(decoratedRange) ? node.children.some((_, childIndex) => slate.Path.equals(decoratedRange.anchor.path, [blockIndex, childIndex]) && slate.Path.equals(decoratedRange.focus.path, [blockIndex, childIndex])) : slate.Range.intersection(decoratedRange, {
       anchor: {
         path,
         offset: 0
@@ -934,8 +966,7 @@ function createDecorate(rangeDecorationActor) {
         path,
         offset: 0
       }
-    }) || slate.Range.includes(item, path));
-    return result.length > 0 ? result : [];
+    }) || slate.Range.includes(decoratedRange, path));
   };
 }
 const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
@@ -984,7 +1015,9 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
       schema: schemaTypes,
       rangeDecorations: rangeDecorations ?? []
     }
-  }), decorate = React.useMemo(() => createDecorate(rangeDecorationsActor), [rangeDecorationsActor]);
+  });
+  react.useSelector(rangeDecorationsActor, (s_1) => s_1.context.updateCount);
+  const decorate = React.useMemo(() => createDecorate(rangeDecorationsActor), [rangeDecorationsActor]);
   React.useEffect(() => {
     rangeDecorationsActor.send({
       type: "update read only",