@portabletext/editor 1.44.6 → 1.44.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.6",
+  "version": "1.44.7",
   "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

@@ -52,6 +52,7 @@ export const rangeDecorationsMachine = setup({
       readOnly: boolean
       schema: EditorSchema
       slateEditor: PortableTextSlateEditor
+      updateCount: number
     },
     input: {} as {
       rangeDecorations: Array<RangeDecoration>
@@ -192,7 +193,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,6 +214,11 @@ export const rangeDecorationsMachine = setup({
         return event.readOnly
       },
     }),
+    'increment update count': assign({
+      updateCount: ({context}) => {
+        return context.updateCount + 1
+      },
+    }),
   },
   actors: {
     'slate operation listener': fromCallback(slateOperationCallback),
@@ -215,7 +228,23 @@ export const rangeDecorationsMachine = setup({
     '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 +256,7 @@ export const rangeDecorationsMachine = setup({
     decoratedRanges: [],
     schema: input.schema,
     slateEditor: input.slateEditor,
+    updateCount: 0,
   }),
   invoke: {
     src: 'slate operation listener',
@@ -256,10 +286,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: {