@portabletext/editor 1.44.4 → 1.44.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.4",
+  "version": "1.44.6",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -73,7 +73,7 @@
     "get-random-values-esm": "^1.0.2",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-3229e95-20250315",
+    "react-compiler-runtime": "19.0.0-beta-e993439-20250328",
     "slate": "0.112.0",
     "slate-dom": "^0.112.2",
     "slate-react": "0.112.1",
@@ -86,8 +86,8 @@
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/schema": "^3.81.0",
-    "@sanity/types": "^3.81.0",
+    "@sanity/schema": "^3.82.0",
+    "@sanity/types": "^3.82.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -100,9 +100,9 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-istanbul": "^3.1.1",
-    "babel-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
+    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
     "eslint-plugin-react-hooks": "experimental",
     "jsdom": "^26.0.0",
     "react": "^19.1.0",
@@ -115,8 +115,8 @@
     "racejar": "1.2.3"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.81.0",
-    "@sanity/types": "^3.81.0",
+    "@sanity/schema": "^3.82.0",
+    "@sanity/types": "^3.82.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/editor/Editable.tsx

@@ -1,5 +1,5 @@
-import {useSelector} from '@xstate/react'
-import {isEqual, noop} from 'lodash'
+import {useActorRef, useSelector} from '@xstate/react'
+import {noop} from 'lodash'
 import {
   forwardRef,
   useCallback,
@@ -16,16 +16,7 @@ import {
   type MutableRefObject,
   type TextareaHTMLAttributes,
 } from 'react'
-import {
-  Editor,
-  Path,
-  Range as SlateRange,
-  Transforms,
-  type BaseRange,
-  type NodeEntry,
-  type Operation,
-  type Text,
-} from 'slate'
+import {Editor, Transforms, type Text} from 'slate'
 import {
   ReactEditor,
   Editable as SlateEditable,
@@ -38,11 +29,11 @@ import {debugWithName} from '../internal-utils/debug'
 import {getDragSelection} from '../internal-utils/drag-selection'
 import {getEventPosition} from '../internal-utils/event-position'
 import {parseBlocks} from '../internal-utils/parse-blocks'
-import {moveRangeByOperation, toSlateRange} from '../internal-utils/ranges'
+import {toSlateRange} from '../internal-utils/ranges'
 import {normalizeSelection} from '../internal-utils/selection'
 import {getSelectionDomNodes} from '../internal-utils/selection-elements'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
-import {fromSlateValue, isEqualToEmptyEditor} from '../internal-utils/values'
+import {fromSlateValue} from '../internal-utils/values'
 import * as selectors from '../selectors'
 import type {
   EditorSelection,
@@ -68,7 +59,10 @@ import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
 import {PortableTextEditor} from './PortableTextEditor'
-import {withSyncRangeDecorations} from './withSyncRangeDecorations'
+import {
+  createDecorate,
+  rangeDecorationsMachine,
+} from './range-decorations-machine'
 
 const debug = debugWithName('component:Editable')
 
@@ -80,10 +74,6 @@ const PLACEHOLDER_STYLE: CSSProperties = {
   right: 0,
 }
 
-interface BaseRangeWithDecoration extends BaseRange {
-  rangeDecoration: RangeDecoration
-}
-
 /**
  * @public
  */
@@ -169,9 +159,6 @@ export const PortableTextEditable = forwardRef<
     null,
   )
   const [hasInvalidValue, setHasInvalidValue] = useState(false)
-  const [rangeDecorationState, setRangeDecorationsState] = useState<
-    BaseRangeWithDecoration[]
-  >([])
 
   // Forward ref to parent component
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -179,8 +166,6 @@ export const PortableTextEditable = forwardRef<
     () => ref.current,
   )
 
-  const rangeDecorationsRef = useRef(rangeDecorations)
-
   const editorActor = useContext(EditorActorContext)
   const readOnly = useSelector(editorActor, (s) =>
     s.matches({'edit mode': 'read only'}),
@@ -188,6 +173,33 @@ export const PortableTextEditable = forwardRef<
   const schemaTypes = useSelector(editorActor, (s) => s.context.schema)
   const slateEditor = useSlate()
 
+  const rangeDecorationsActor = useActorRef(rangeDecorationsMachine, {
+    input: {
+      readOnly,
+      slateEditor,
+      schema: schemaTypes,
+      rangeDecorations: rangeDecorations ?? [],
+    },
+  })
+  const 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
 
   // Output a minimal React editor inside Editable when in readOnly mode.
@@ -312,83 +324,20 @@ export const PortableTextEditable = forwardRef<
     }
   }, [blockTypeName, editorActor, propsSelection, slateEditor])
 
-  const syncRangeDecorations = useCallback(
-    (operation?: Operation) => {
-      if (rangeDecorations && rangeDecorations.length > 0) {
-        const newSlateRanges: BaseRangeWithDecoration[] = []
-        rangeDecorations.forEach((rangeDecorationItem) => {
-          const slateRange = toSlateRange(
-            rangeDecorationItem.selection,
-            slateEditor,
-          )
-          if (!SlateRange.isRange(slateRange)) {
-            if (rangeDecorationItem.onMoved) {
-              rangeDecorationItem.onMoved({
-                newSelection: null,
-                rangeDecoration: rangeDecorationItem,
-                origin: 'local',
-              })
-            }
-            return
-          }
-          let newRange: BaseRange | null | undefined
-          if (operation) {
-            newRange = moveRangeByOperation(slateRange, operation)
-            if (
-              (newRange && newRange !== slateRange) ||
-              (newRange === null && slateRange)
-            ) {
-              const newRangeSelection = newRange
-                ? slateRangeToSelection({
-                    schema: schemaTypes,
-                    editor: slateEditor,
-                    range: newRange,
-                  })
-                : null
-              if (rangeDecorationItem.onMoved) {
-                rangeDecorationItem.onMoved({
-                  newSelection: newRangeSelection,
-                  rangeDecoration: rangeDecorationItem,
-                  origin: 'local',
-                })
-              }
-            }
-          }
-          // If the newRange is null, it means that the range is not valid anymore and should be removed
-          // If it's undefined, it means that the slateRange is still valid and should be kept
-          if (newRange !== null) {
-            newSlateRanges.push({
-              ...(newRange || slateRange),
-              rangeDecoration: rangeDecorationItem,
-            })
-          }
-        })
-        if (newSlateRanges.length > 0) {
-          setRangeDecorationsState(newSlateRanges)
-          return
-        }
-      }
-      setRangeDecorationsState((rangeDecorationState) => {
-        // If there's state then we want to reset
-        if (rangeDecorationState.length > 0) {
-          return []
-        }
-        // Otherwise we no-op, React will skip a state update if what we return has reference equality to the previous state
-        return rangeDecorationState
-      })
-    },
-    [rangeDecorations, schemaTypes, slateEditor],
-  )
-
   // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
     const onReady = editorActor.on('ready', () => {
-      syncRangeDecorations()
+      rangeDecorationsActor.send({
+        type: 'ready',
+      })
+
       restoreSelectionFromProps()
     })
+
     const onInvalidValue = editorActor.on('invalid value', () => {
       setHasInvalidValue(true)
     })
+
     const onValueChanged = editorActor.on('value changed', () => {
       setHasInvalidValue(false)
     })
@@ -398,7 +347,7 @@ export const PortableTextEditable = forwardRef<
       onInvalidValue.unsubscribe()
       onValueChanged.unsubscribe()
     }
-  }, [editorActor, restoreSelectionFromProps, syncRangeDecorations])
+  }, [rangeDecorationsActor, editorActor, restoreSelectionFromProps])
 
   // Restore selection from props when it changes
   useEffect(() => {
@@ -407,32 +356,6 @@ export const PortableTextEditable = forwardRef<
     }
   }, [hasInvalidValue, propsSelection, restoreSelectionFromProps])
 
-  const [syncedRangeDecorations, setSyncedRangeDecorations] = useState(false)
-  useEffect(() => {
-    if (!syncedRangeDecorations) {
-      // We only want this to run once, on mount
-      setSyncedRangeDecorations(true)
-      syncRangeDecorations()
-    }
-  }, [syncRangeDecorations, syncedRangeDecorations])
-
-  useEffect(() => {
-    if (!isEqual(rangeDecorations, rangeDecorationsRef.current)) {
-      syncRangeDecorations()
-    }
-    rangeDecorationsRef.current = rangeDecorations
-  }, [rangeDecorations, syncRangeDecorations])
-
-  // Sync range decorations after an operation is applied
-  useEffect(() => {
-    const teardown = withSyncRangeDecorations({
-      editorActor,
-      slateEditor,
-      syncRangeDecorations,
-    })
-    return () => teardown()
-  }, [editorActor, slateEditor, syncRangeDecorations])
-
   // Handle from props onCopy function
   const handleCopy = useCallback(
     (event: ClipboardEvent<HTMLDivElement>): void | ReactEditor => {
@@ -855,55 +778,6 @@ export const PortableTextEditable = forwardRef<
     }
   }, [portableTextEditor, scrollSelectionIntoView])
 
-  const decorate: (entry: NodeEntry) => BaseRange[] = useCallback(
-    ([, path]) => {
-      if (isEqualToEmptyEditor(slateEditor.children, schemaTypes)) {
-        return [
-          {
-            anchor: {
-              path: [0, 0],
-              offset: 0,
-            },
-            focus: {
-              path: [0, 0],
-              offset: 0,
-            },
-            placeholder: true,
-          },
-        ]
-      }
-      // Editor node has a path length of 0 (should never be decorated)
-      if (path.length === 0) {
-        return []
-      }
-      const result = rangeDecorationState.filter((item) => {
-        // Special case in order to only return one decoration for collapsed ranges
-        if (SlateRange.isCollapsed(item)) {
-          // 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)
-          )
-        }
-        // Include decorations that either include or intersects with this path
-        return (
-          SlateRange.intersection(item, {
-            anchor: {path, offset: 0},
-            focus: {path, offset: 0},
-          }) || SlateRange.includes(item, path)
-        )
-      })
-      if (result.length > 0) {
-        return result
-      }
-      return []
-    },
-    [slateEditor, schemaTypes, rangeDecorationState],
-  )
-
   // Set the forwarded ref to be the Slate editable DOM element
   // Also set the editable element in a state so that the MutationObserver
   // is setup when this element is ready.

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

@@ -118,6 +118,32 @@ describe('RangeDecorations', () => {
         value={value}
       />,
     )
+    await waitFor(() => {
+      expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
+        1,
+        'updated-with-different',
+      ])
+    })
+
+    // Update the range decorations with a new offset again
+    rangeDecorations = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+        },
+      },
+    ]
+    rerender(
+      <PortableTextEditorTester
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
         2,