@portabletext/editor 1.44.4 → 1.44.5

package/package.json

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

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,

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

@@ -0,0 +1,346 @@
+import {isEqual} from 'lodash'
+import {
+  Path,
+  Range,
+  type BaseRange,
+  type NodeEntry,
+  type Operation,
+} from 'slate'
+import {
+  and,
+  assertEvent,
+  assign,
+  fromCallback,
+  setup,
+  type ActorRefFrom,
+  type AnyEventObject,
+  type CallbackLogicFunction,
+} from 'xstate'
+import type {EditorSchema} from '..'
+import {moveRangeByOperation, toSlateRange} from '../internal-utils/ranges'
+import {slateRangeToSelection} from '../internal-utils/slate-utils'
+import {isEqualToEmptyEditor} from '../internal-utils/values'
+import type {PortableTextSlateEditor, RangeDecoration} from '../types/editor'
+
+const slateOperationCallback: CallbackLogicFunction<
+  AnyEventObject,
+  {type: 'slate operation'; operation: Operation},
+  {slateEditor: PortableTextSlateEditor}
+> = ({input, sendBack}) => {
+  const originalApply = input.slateEditor.apply
+
+  input.slateEditor.apply = (op) => {
+    if (op.type !== 'set_selection') {
+      sendBack({type: 'slate operation', operation: op})
+    }
+
+    originalApply(op)
+  }
+
+  return () => {
+    input.slateEditor.apply = originalApply
+  }
+}
+
+type DecoratedRange = BaseRange & {rangeDecoration: RangeDecoration}
+
+export const rangeDecorationsMachine = setup({
+  types: {
+    context: {} as {
+      decoratedRanges: Array<DecoratedRange>
+      pendingRangeDecorations: Array<RangeDecoration>
+      readOnly: boolean
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    input: {} as {
+      rangeDecorations: Array<RangeDecoration>
+      readOnly: boolean
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    events: {} as
+      | {
+          type: 'ready'
+        }
+      | {
+          type: 'range decorations updated'
+          rangeDecorations: Array<RangeDecoration>
+        }
+      | {
+          type: 'slate operation'
+          operation: Operation
+        }
+      | {
+          type: 'update read only'
+          readOnly: boolean
+        },
+  },
+  actions: {
+    'update pending range decorations': assign({
+      pendingRangeDecorations: ({event}) => {
+        assertEvent(event, 'range decorations updated')
+
+        return event.rangeDecorations
+      },
+    }),
+    'set up initial range decorations': assign({
+      decoratedRanges: ({context, event}) => {
+        assertEvent(event, 'ready')
+
+        const rangeDecorationState: Array<DecoratedRange> = []
+
+        for (const rangeDecoration of context.pendingRangeDecorations) {
+          const slateRange = toSlateRange(
+            rangeDecoration.selection,
+            context.slateEditor,
+          )
+
+          if (!Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: 'local',
+            })
+            continue
+          }
+
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange,
+          })
+        }
+
+        return rangeDecorationState
+      },
+    }),
+    'update range decorations': assign({
+      decoratedRanges: ({context, event}) => {
+        assertEvent(event, 'range decorations updated')
+
+        const rangeDecorationState: Array<DecoratedRange> = []
+
+        for (const rangeDecoration of event.rangeDecorations) {
+          const slateRange = toSlateRange(
+            rangeDecoration.selection,
+            context.slateEditor,
+          )
+
+          if (!Range.isRange(slateRange)) {
+            rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration,
+              origin: 'local',
+            })
+            continue
+          }
+
+          rangeDecorationState.push({
+            rangeDecoration,
+            ...slateRange,
+          })
+        }
+
+        return rangeDecorationState
+      },
+    }),
+    'move range decorations': assign({
+      decoratedRanges: ({context, event}) => {
+        assertEvent(event, 'slate operation')
+
+        const rangeDecorationState: Array<DecoratedRange> = []
+
+        for (const decoratedRange of context.decoratedRanges) {
+          const slateRange = toSlateRange(
+            decoratedRange.rangeDecoration.selection,
+            context.slateEditor,
+          )
+
+          if (!Range.isRange(slateRange)) {
+            decoratedRange.rangeDecoration.onMoved?.({
+              newSelection: null,
+              rangeDecoration: decoratedRange.rangeDecoration,
+              origin: 'local',
+            })
+            continue
+          }
+
+          let newRange: BaseRange | null | undefined
+
+          newRange = moveRangeByOperation(slateRange, event.operation)
+          if (
+            (newRange && newRange !== slateRange) ||
+            (newRange === null && slateRange)
+          ) {
+            const newRangeSelection = newRange
+              ? slateRangeToSelection({
+                  schema: context.schema,
+                  editor: context.slateEditor,
+                  range: newRange,
+                })
+              : null
+
+            decoratedRange.rangeDecoration.onMoved?.({
+              newSelection: newRangeSelection,
+              rangeDecoration: decoratedRange.rangeDecoration,
+              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) {
+            rangeDecorationState.push({
+              ...(newRange || slateRange),
+              rangeDecoration: decoratedRange.rangeDecoration,
+            })
+          }
+        }
+
+        return rangeDecorationState
+      },
+    }),
+    'assign readOnly': assign({
+      readOnly: ({event}) => {
+        assertEvent(event, 'update read only')
+        return event.readOnly
+      },
+    }),
+  },
+  actors: {
+    'slate operation listener': fromCallback(slateOperationCallback),
+  },
+  guards: {
+    'has range decorations': ({context}) => context.decoratedRanges.length > 0,
+    'has different decorations': ({context, event}) => {
+      assertEvent(event, 'range decorations updated')
+
+      return !isEqual(context.pendingRangeDecorations, event.rangeDecorations)
+    },
+    'not read only': ({context}) => !context.readOnly,
+  },
+}).createMachine({
+  id: 'range decorations',
+  context: ({input}) => ({
+    readOnly: input.readOnly,
+    pendingRangeDecorations: input.rangeDecorations,
+    decoratedRanges: [],
+    schema: input.schema,
+    slateEditor: input.slateEditor,
+  }),
+  invoke: {
+    src: 'slate operation listener',
+    input: ({context}) => ({slateEditor: context.slateEditor}),
+  },
+  on: {
+    'update read only': {
+      actions: ['assign readOnly'],
+    },
+  },
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        'range decorations updated': {
+          actions: ['update pending range decorations'],
+        },
+        'ready': {
+          target: 'ready',
+          actions: ['set up initial range decorations'],
+        },
+      },
+    },
+    ready: {
+      initial: 'idle',
+      on: {
+        'range decorations updated': {
+          target: '.idle',
+          guard: 'has different decorations',
+          actions: [
+            'update range decorations',
+            'update pending range decorations',
+          ],
+        },
+      },
+      states: {
+        'idle': {
+          on: {
+            'slate operation': {
+              target: 'moving range decorations',
+              guard: and(['has range decorations', 'not read only']),
+            },
+          },
+        },
+        'moving range decorations': {
+          entry: ['move range decorations'],
+          always: {
+            target: 'idle',
+          },
+        },
+      },
+    },
+  },
+})
+
+export function createDecorate(
+  rangeDecorationActor: ActorRefFrom<typeof rangeDecorationsMachine>,
+) {
+  return function decorate([, path]: NodeEntry): Array<BaseRange> {
+    if (
+      isEqualToEmptyEditor(
+        rangeDecorationActor.getSnapshot().context.slateEditor.children,
+        rangeDecorationActor.getSnapshot().context.schema,
+      )
+    ) {
+      return [
+        {
+          anchor: {
+            path: [0, 0],
+            offset: 0,
+          },
+          focus: {
+            path: [0, 0],
+            offset: 0,
+          },
+          placeholder: true,
+        } as BaseRange,
+      ]
+    }
+
+    // Editor node has a path length of 0 (should never be decorated)
+    if (path.length === 0) {
+      return []
+    }
+
+    const result = rangeDecorationActor
+      .getSnapshot()
+      .context.decoratedRanges.filter((item) => {
+        // Special case in order to only return one decoration for collapsed ranges
+        if (Range.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 (
+          Range.intersection(item, {
+            anchor: {path, offset: 0},
+            focus: {path, offset: 0},
+          }) || Range.includes(item, path)
+        )
+      })
+
+    if (result.length > 0) {
+      return result
+    }
+
+    return []
+  }
+}