@portabletext/editor 1.44.7 → 1.44.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.7",
+  "version": "1.44.8",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/range-decorations-machine.ts

@@ -1,5 +1,6 @@
 import {isEqual} from 'lodash'
 import {
+  Element,
   Path,
   Range,
   type BaseRange,
@@ -224,6 +225,8 @@ export const rangeDecorationsMachine = setup({
     'slate operation listener': 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}) => {
       assertEvent(event, 'range decorations updated')
@@ -274,10 +277,19 @@ export const rangeDecorationsMachine = setup({
         'range decorations updated': {
           actions: ['update pending range decorations'],
         },
-        'ready': {
-          target: 'ready',
-          actions: ['set up initial range decorations'],
-        },
+        'ready': [
+          {
+            target: 'ready',
+            guard: 'has pending range decorations',
+            actions: [
+              'set up initial range decorations',
+              'increment update count',
+            ],
+          },
+          {
+            target: 'ready',
+          },
+        ],
       },
     },
     ready: {
@@ -312,7 +324,7 @@ export const rangeDecorationsMachine = setup({
 export function createDecorate(
   rangeDecorationActor: ActorRefFrom<typeof rangeDecorationsMachine>,
 ) {
-  return function decorate([, path]: NodeEntry): Array<BaseRange> {
+  return function decorate([node, path]: NodeEntry): Array<BaseRange> {
     if (
       isEqualToEmptyEditor(
         rangeDecorationActor.getSnapshot().context.slateEditor.children,
@@ -339,35 +351,38 @@ export function createDecorate(
       return []
     }
 
-    const result = rangeDecorationActor
+    if (!Element.isElement(node) || node.children.length === 0) {
+      return []
+    }
+
+    const blockIndex = path.at(0)
+
+    if (blockIndex === undefined) {
+      return []
+    }
+
+    return rangeDecorationActor
       .getSnapshot()
-      .context.decoratedRanges.filter((item) => {
+      .context.decoratedRanges.filter((decoratedRange) => {
         // Special case in order to only return one decoration for collapsed ranges
-        if (Range.isCollapsed(item)) {
+        if (Range.isCollapsed(decoratedRange)) {
           // Collapsed ranges should only be decorated if they are on a block child level (length 2)
-          if (path.length !== 2) {
-            return false
-          }
-
-          return (
-            Path.equals(item.focus.path, path) &&
-            Path.equals(item.anchor.path, path)
+          return node.children.some(
+            (_, childIndex) =>
+              Path.equals(decoratedRange.anchor.path, [
+                blockIndex,
+                childIndex,
+              ]) &&
+              Path.equals(decoratedRange.focus.path, [blockIndex, childIndex]),
           )
         }
 
-        // Include decorations that either include or intersects with this path
         return (
-          Range.intersection(item, {
+          Range.intersection(decoratedRange, {
             anchor: {path, offset: 0},
             focus: {path, offset: 0},
-          }) || Range.includes(item, path)
+          }) || Range.includes(decoratedRange, path)
         )
       })
-
-    if (result.length > 0) {
-      return result
-    }
-
-    return []
   }
 }