@portabletext/editor 1.44.6 → 1.44.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.6",
+  "version": "1.44.8",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -131,7 +131,7 @@
     "check:lint": "biome lint .",
     "check:types": "tsc",
     "check:types:watch": "tsc --watch",
-    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ignore-pattern '**/__tests__/**' --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --plugin react-hooks --rule 'react-compiler/react-compiler: [warn,{__unstable_donotuse_reportAllBailouts: true}]' --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
+    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ignore-pattern '**/__tests__/**' --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --plugin react-hooks --rule 'react-compiler/react-compiler: [warn]' --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
     "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
     "lint:fix": "biome lint --write .",

package/src/editor/Editable.tsx

@@ -181,6 +181,7 @@ export const PortableTextEditable = forwardRef<
       rangeDecorations: rangeDecorations ?? [],
     },
   })
+  useSelector(rangeDecorationsActor, (s) => s.context.updateCount)
   const decorate = useMemo(
     () => createDecorate(rangeDecorationsActor),
     [rangeDecorationsActor],

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -120,7 +120,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        1,
+        3,
         'updated-with-different',
       ])
     })
@@ -146,7 +146,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        2,
+        4,
         'updated-with-different',
       ])
     })

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

@@ -1,5 +1,6 @@
 import {isEqual} from 'lodash'
 import {
+  Element,
   Path,
   Range,
   type BaseRange,
@@ -52,6 +53,7 @@ export const rangeDecorationsMachine = setup({
       readOnly: boolean
       schema: EditorSchema
       slateEditor: PortableTextSlateEditor
+      updateCount: number
     },
     input: {} as {
       rangeDecorations: Array<RangeDecoration>
@@ -192,7 +194,14 @@ export const rangeDecorationsMachine = setup({
           if (newRange !== null) {
             rangeDecorationState.push({
               ...(newRange || slateRange),
-              rangeDecoration: decoratedRange.rangeDecoration,
+              rangeDecoration: {
+                ...decoratedRange.rangeDecoration,
+                selection: slateRangeToSelection({
+                  schema: context.schema,
+                  editor: context.slateEditor,
+                  range: newRange,
+                }),
+              },
             })
           }
         }
@@ -206,16 +215,39 @@ export const rangeDecorationsMachine = setup({
         return event.readOnly
       },
     }),
+    'increment update count': assign({
+      updateCount: ({context}) => {
+        return context.updateCount + 1
+      },
+    }),
   },
   actors: {
     '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')
 
-      return !isEqual(context.pendingRangeDecorations, event.rangeDecorations)
+      const existingRangeDecorations = context.decoratedRanges.map(
+        (decoratedRange) => ({
+          anchor: decoratedRange.rangeDecoration.selection?.anchor,
+          focus: decoratedRange.rangeDecoration.selection?.focus,
+        }),
+      )
+
+      const newRangeDecorations = event.rangeDecorations.map(
+        (rangeDecoration) => ({
+          anchor: rangeDecoration.selection?.anchor,
+          focus: rangeDecoration.selection?.focus,
+        }),
+      )
+
+      const different = !isEqual(existingRangeDecorations, newRangeDecorations)
+
+      return different
     },
     'not read only': ({context}) => !context.readOnly,
   },
@@ -227,6 +259,7 @@ export const rangeDecorationsMachine = setup({
     decoratedRanges: [],
     schema: input.schema,
     slateEditor: input.slateEditor,
+    updateCount: 0,
   }),
   invoke: {
     src: 'slate operation listener',
@@ -244,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: {
@@ -256,10 +298,7 @@ export const rangeDecorationsMachine = setup({
         '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: {
@@ -285,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,
@@ -312,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 []
   }
 }