@portabletext/editor 1.54.2 → 1.54.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.54.2",
+  "version": "1.54.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -75,9 +75,9 @@
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.1.0-rc.2",
-    "slate": "0.115.1",
-    "slate-dom": "^0.114.0",
-    "slate-react": "0.114.2",
+    "slate": "0.117.0",
+    "slate-dom": "^0.116.0",
+    "slate-react": "0.117.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.4",
     "@portabletext/patches": "1.1.5",
@@ -86,7 +86,7 @@
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
-    "@sanity/pkg-utils": "^7.6.2",
+    "@sanity/pkg-utils": "^7.8.4",
     "@sanity/schema": "^3.93.0",
     "@sanity/types": "^3.93.0",
     "@testing-library/react": "^16.3.0",

package/src/editor/Editable.tsx

@@ -52,10 +52,7 @@ import {RenderText, type RenderTextProps} from './components/render-text'
 import {EditorActorContext} from './editor-actor-context'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
-import {
-  createDecorate,
-  rangeDecorationsMachine,
-} from './range-decorations-machine'
+import {rangeDecorationsMachine} from './range-decorations-machine'
 import {RelayActorContext} from './relay-actor-context'
 
 const debug = debugWithName('component:Editable')
@@ -168,10 +165,9 @@ export const PortableTextEditable = forwardRef<
       skipSetup: !editorActor.getSnapshot().matches({setup: 'setting up'}),
     },
   })
-  useSelector(rangeDecorationsActor, (s) => s.context.updateCount)
-  const decorate = useMemo(
-    () => createDecorate(rangeDecorationsActor),
-    [rangeDecorationsActor],
+  const decorate = useSelector(
+    rangeDecorationsActor,
+    (s) => s.context.decorate?.fn,
   )
 
   useEffect(() => {

package/src/editor/create-slate-editor.tsx

@@ -37,6 +37,7 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
   KEY_TO_VALUE_ELEMENT.set(instance, {})
   KEY_TO_SLATE_ELEMENT.set(instance, {})
 
+  instance.decoratedRanges = []
   instance.decoratorState = {}
   instance.markState = undefined
   instance.value = [

package/src/editor/editor-schema.ts

@@ -13,6 +13,9 @@ export type BaseDefinition = {
   title?: string
 }
 
+/**
+ * @public
+ */
 export type FieldDefinition = {
   name: string
   type: 'string' | 'number' | 'boolean' | 'array' | 'object'

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -1,9 +1,8 @@
-import {Editor, Path} from 'slate'
+import {Editor} from 'slate'
 import {debugWithName} from '../../internal-utils/debug'
 import {isChangingRemotely} from '../../internal-utils/withChanges'
 import {isRedoing, isUndoing} from '../../internal-utils/withUndoRedo'
 import type {PortableTextSlateEditor} from '../../types/editor'
-import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPlaceholderBlock')
@@ -45,22 +44,23 @@ export function createWithPlaceholderBlock(
       }
 
       if (op.type === 'remove_node') {
-        const node = op.node as SlateTextBlock | VoidElement
-        if (op.path[0] === 0 && Editor.isVoid(editor, node)) {
-          // Check next path, if it exists, do nothing
-          const nextPath = Path.next(op.path)
-          // Is removing the first block which is a void (not a text block), add a new empty text block in it, if there is no other element in the next path
-          if (!editor.children[nextPath[0]]) {
-            debug('Adding placeholder block')
-            Editor.insertNode(
-              editor,
-              editor.pteCreateTextBlock({decorators: []}),
-            )
-          }
+        const blockIndex = op.path.at(0)
+        const isLonelyBlock =
+          op.path.length === 1 &&
+          blockIndex === 0 &&
+          editor.children.length === 1
+        const isBlockObject =
+          op.node._type !== editorActor.getSnapshot().context.schema.block.name
+
+        if (isLonelyBlock && isBlockObject) {
+          debug('Adding placeholder block')
+          Editor.insertNode(editor, editor.pteCreateTextBlock({decorators: []}))
         }
       }
+
       apply(op)
     }
+
     return editor
   }
 }

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

@@ -12,7 +12,6 @@ import {
   assign,
   fromCallback,
   setup,
-  type ActorRefFrom,
   type AnyEventObject,
   type CallbackLogicFunction,
 } from 'xstate'
@@ -42,18 +41,17 @@ const slateOperationCallback: CallbackLogicFunction<
   }
 }
 
-type DecoratedRange = BaseRange & {rangeDecoration: RangeDecoration}
+export type DecoratedRange = BaseRange & {rangeDecoration: RangeDecoration}
 
 export const rangeDecorationsMachine = setup({
   types: {
     context: {} as {
-      decoratedRanges: Array<DecoratedRange>
       pendingRangeDecorations: Array<RangeDecoration>
       skipSetup: boolean
       readOnly: boolean
       schema: EditorSchema
       slateEditor: PortableTextSlateEditor
-      updateCount: number
+      decorate: {fn: (nodeEntry: NodeEntry) => Array<BaseRange>}
     },
     input: {} as {
       rangeDecorations: Array<RangeDecoration>
@@ -89,131 +87,126 @@ export const rangeDecorationsMachine = setup({
         return event.rangeDecorations
       },
     }),
-    'set up initial range decorations': assign({
-      decoratedRanges: ({context}) => {
-        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
-          }
+    'set up initial range decorations': ({context}) => {
+      const rangeDecorationState: Array<DecoratedRange> = []
 
-          rangeDecorationState.push({
+      for (const rangeDecoration of context.pendingRangeDecorations) {
+        const slateRange = toSlateRange(
+          rangeDecoration.selection,
+          context.slateEditor,
+        )
+
+        if (!Range.isRange(slateRange)) {
+          rangeDecoration.onMoved?.({
+            newSelection: null,
             rangeDecoration,
-            ...slateRange,
+            origin: 'local',
           })
+          continue
         }
 
-        return rangeDecorationState
-      },
-    }),
-    'update range decorations': assign({
-      decoratedRanges: ({context, event}) => {
-        if (event.type !== 'range decorations updated') {
-          return context.decoratedRanges
-        }
+        rangeDecorationState.push({
+          rangeDecoration,
+          ...slateRange,
+        })
+      }
 
-        const rangeDecorationState: Array<DecoratedRange> = []
+      context.slateEditor.decoratedRanges = rangeDecorationState
+    },
+    'update range decorations': ({context, event}) => {
+      if (event.type !== 'range decorations updated') {
+        return
+      }
 
-        for (const rangeDecoration of event.rangeDecorations) {
-          const slateRange = toSlateRange(
-            rangeDecoration.selection,
-            context.slateEditor,
-          )
+      const rangeDecorationState: Array<DecoratedRange> = []
 
-          if (!Range.isRange(slateRange)) {
-            rangeDecoration.onMoved?.({
-              newSelection: null,
-              rangeDecoration,
-              origin: 'local',
-            })
-            continue
-          }
+      for (const rangeDecoration of event.rangeDecorations) {
+        const slateRange = toSlateRange(
+          rangeDecoration.selection,
+          context.slateEditor,
+        )
 
-          rangeDecorationState.push({
+        if (!Range.isRange(slateRange)) {
+          rangeDecoration.onMoved?.({
+            newSelection: null,
             rangeDecoration,
-            ...slateRange,
+            origin: 'local',
           })
+          continue
         }
 
-        return rangeDecorationState
-      },
-    }),
-    'move range decorations': assign({
-      decoratedRanges: ({context, event}) => {
-        if (event.type !== 'slate operation') {
-          return context.decoratedRanges
+        rangeDecorationState.push({
+          rangeDecoration,
+          ...slateRange,
+        })
+      }
+
+      context.slateEditor.decoratedRanges = rangeDecorationState
+    },
+
+    'move range decorations': ({context, event}) => {
+      if (event.type !== 'slate operation') {
+        return
+      }
+
+      const rangeDecorationState: Array<DecoratedRange> = []
+
+      for (const decoratedRange of context.slateEditor.decoratedRanges) {
+        const slateRange = toSlateRange(
+          decoratedRange.rangeDecoration.selection,
+          context.slateEditor,
+        )
+
+        if (!Range.isRange(slateRange)) {
+          decoratedRange.rangeDecoration.onMoved?.({
+            newSelection: null,
+            rangeDecoration: decoratedRange.rangeDecoration,
+            origin: 'local',
+          })
+          continue
         }
 
-        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,
-                selection: slateRangeToSelection({
-                  schema: context.schema,
-                  editor: context.slateEditor,
-                  range: newRange,
-                }),
-              },
-            })
-          }
+        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',
+          })
         }
 
-        return rangeDecorationState
-      },
-    }),
+        // 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,
+              selection: slateRangeToSelection({
+                schema: context.schema,
+                editor: context.slateEditor,
+                range: newRange,
+              }),
+            },
+          })
+        }
+      }
+
+      context.slateEditor.decoratedRanges = rangeDecorationState
+    },
     'assign readOnly': assign({
       readOnly: ({context, event}) => {
         if (event.type !== 'update read only') {
@@ -223,9 +216,11 @@ export const rangeDecorationsMachine = setup({
         return event.readOnly
       },
     }),
-    'increment update count': assign({
-      updateCount: ({context}) => {
-        return context.updateCount + 1
+    'update decorate': assign({
+      decorate: ({context}) => {
+        return {
+          fn: createDecorate(context.schema, context.slateEditor),
+        }
       },
     }),
   },
@@ -235,13 +230,14 @@ export const rangeDecorationsMachine = setup({
   guards: {
     'has pending range decorations': ({context}) =>
       context.pendingRangeDecorations.length > 0,
-    'has range decorations': ({context}) => context.decoratedRanges.length > 0,
+    'has range decorations': ({context}) =>
+      context.slateEditor.decoratedRanges.length > 0,
     'has different decorations': ({context, event}) => {
       if (event.type !== 'range decorations updated') {
         return false
       }
 
-      const existingRangeDecorations = context.decoratedRanges.map(
+      const existingRangeDecorations = context.slateEditor.decoratedRanges.map(
         (decoratedRange) => ({
           anchor: decoratedRange.rangeDecoration.selection?.anchor,
           focus: decoratedRange.rangeDecoration.selection?.focus,
@@ -271,7 +267,7 @@ export const rangeDecorationsMachine = setup({
     skipSetup: input.skipSetup,
     schema: input.schema,
     slateEditor: input.slateEditor,
-    updateCount: 0,
+    decorate: {fn: createDecorate(input.schema, input.slateEditor)},
   }),
   invoke: {
     src: 'slate operation listener',
@@ -289,10 +285,7 @@ export const rangeDecorationsMachine = setup({
         {
           guard: and(['should skip setup', 'has pending range decorations']),
           target: 'ready',
-          actions: [
-            'set up initial range decorations',
-            'increment update count',
-          ],
+          actions: ['set up initial range decorations', 'update decorate'],
         },
         {
           guard: 'should skip setup',
@@ -307,10 +300,7 @@ export const rangeDecorationsMachine = setup({
           {
             target: 'ready',
             guard: 'has pending range decorations',
-            actions: [
-              'set up initial range decorations',
-              'increment update count',
-            ],
+            actions: ['set up initial range decorations', 'update decorate'],
           },
           {
             target: 'ready',
@@ -324,7 +314,7 @@ export const rangeDecorationsMachine = setup({
         'range decorations updated': {
           target: '.idle',
           guard: 'has different decorations',
-          actions: ['update range decorations', 'increment update count'],
+          actions: ['update range decorations', 'update decorate'],
         },
       },
       states: {
@@ -347,16 +337,12 @@ export const rangeDecorationsMachine = setup({
   },
 })
 
-export function createDecorate(
-  rangeDecorationActor: ActorRefFrom<typeof rangeDecorationsMachine>,
+function createDecorate(
+  schema: EditorSchema,
+  slateEditor: PortableTextSlateEditor,
 ) {
   return function decorate([node, path]: NodeEntry): Array<BaseRange> {
-    if (
-      isEqualToEmptyEditor(
-        rangeDecorationActor.getSnapshot().context.slateEditor.children,
-        rangeDecorationActor.getSnapshot().context.schema,
-      )
-    ) {
+    if (isEqualToEmptyEditor(slateEditor.children, schema)) {
       return [
         {
           anchor: {
@@ -387,28 +373,23 @@ export function createDecorate(
       return []
     }
 
-    return rangeDecorationActor
-      .getSnapshot()
-      .context.decoratedRanges.filter((decoratedRange) => {
-        // Special case in order to only return one decoration for collapsed ranges
-        if (Range.isCollapsed(decoratedRange)) {
-          // Collapsed ranges should only be decorated if they are on a block child level (length 2)
-          return node.children.some(
-            (_, childIndex) =>
-              Path.equals(decoratedRange.anchor.path, [
-                blockIndex,
-                childIndex,
-              ]) &&
-              Path.equals(decoratedRange.focus.path, [blockIndex, childIndex]),
-          )
-        }
-
-        return (
-          Range.intersection(decoratedRange, {
-            anchor: {path, offset: 0},
-            focus: {path, offset: 0},
-          }) || Range.includes(decoratedRange, path)
+    return slateEditor.decoratedRanges.filter((decoratedRange) => {
+      // Special case in order to only return one decoration for collapsed ranges
+      if (Range.isCollapsed(decoratedRange)) {
+        // Collapsed ranges should only be decorated if they are on a block child level (length 2)
+        return node.children.some(
+          (_, childIndex) =>
+            Path.equals(decoratedRange.anchor.path, [blockIndex, childIndex]) &&
+            Path.equals(decoratedRange.focus.path, [blockIndex, childIndex]),
         )
-      })
+      }
+
+      return (
+        Range.intersection(decoratedRange, {
+          anchor: {path, offset: 0},
+          focus: {path, offset: 0},
+        }) || Range.includes(decoratedRange, path)
+      )
+    })
   }
 }

package/src/index.ts

@@ -17,6 +17,7 @@ export {
 export {
   defineSchema,
   type BaseDefinition,
+  type FieldDefinition,
   type SchemaDefinition,
 } from './editor/editor-schema'
 export type {EditorSchema} from './editor/editor-schema'

package/src/types/editor.ts

@@ -29,6 +29,7 @@ import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import type {PortableTextEditableProps} from '../editor/Editable'
 import type {PortableTextEditor} from '../editor/PortableTextEditor'
+import type {DecoratedRange} from '../editor/range-decorations-machine'
 import type {MarkState} from '../internal-utils/mark-state'
 import type {BlockPath} from './paths'
 
@@ -126,6 +127,7 @@ export interface PortableTextSlateEditor extends ReactEditor {
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
   value: Array<PortableTextBlock>
+  decoratedRanges: Array<DecoratedRange>
   decoratorState: Record<string, boolean | undefined>
   markState: MarkState | undefined