@portabletext/editor 1.53.1 → 1.54.0

package/src/behaviors/behavior.types.event.ts

@@ -1,10 +1,11 @@
-import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import type {EventPosition} from '../internal-utils/event-position'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion, StrictExtract} from '../type-utils'
 import type {BlockOffset} from '../types/block-offset'
 import type {BlockWithOptionalKey} from '../types/block-with-optional-key'
 import type {EditorSelection} from '../types/editor'
+import type {AnnotationPath, BlockPath, ChildPath} from '../types/paths'
 
 /**
  * @beta
@@ -63,6 +64,8 @@ const syntheticBehaviorEventTypes = [
   'annotation.remove',
   'block.set',
   'block.unset',
+  'child.set',
+  'child.unset',
   'decorator.add',
   'decorator.remove',
   'delete',
@@ -104,12 +107,22 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'block.set'>
-      at: [KeyedSegment]
+      at: BlockPath
       props: Record<string, unknown>
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'block.unset'>
-      at: [KeyedSegment]
+      at: BlockPath
+      props: Array<string>
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'child.set'>
+      at: ChildPath
+      props: {[prop: string]: unknown}
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'child.unset'>
+      at: ChildPath
       props: Array<string>
     }
   | {
@@ -174,8 +187,8 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
-      at: [KeyedSegment]
-      to: [KeyedSegment]
+      at: BlockPath
+      to: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
@@ -208,10 +221,12 @@ export function isSyntheticBehaviorEvent(
  **************************************/
 
 const abstractBehaviorEventTypes = [
+  'annotation.set',
   'annotation.toggle',
   'decorator.toggle',
   'delete.backward',
   'delete.block',
+  'delete.child',
   'delete.forward',
   'delete.text',
   'deserialize',
@@ -240,6 +255,11 @@ export type AbstractBehaviorEventType =
   (typeof abstractBehaviorEventTypes)[number]
 
 type AbstractBehaviorEvent =
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'annotation.set'>
+      at: AnnotationPath
+      props: Record<string, unknown>
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'annotation.toggle'>
       annotation: {
@@ -258,7 +278,11 @@ type AbstractBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
-      at: [KeyedSegment]
+      at: BlockPath
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.child'>
+      at: ChildPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
@@ -359,11 +383,11 @@ type AbstractBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block down'>
-      at: [KeyedSegment]
+      at: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block up'>
-      at: [KeyedSegment]
+      at: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select.previous block'>

package/src/behaviors/behavior.types.guard.ts

@@ -1,5 +1,5 @@
+import type {EditorDom} from '../editor/editor-dom'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
-import type {EditorDom} from '../internal-utils/selection-elements'
 
 /**
  * @beta

package/src/editor/Editable.tsx

@@ -543,6 +543,9 @@ export const PortableTextEditable = forwardRef<
           )
         ) {
           Transforms.select(slateEditor, Editor.start(slateEditor, []))
+        }
+
+        if (slateEditor.selection) {
           slateEditor.onChange()
         }
       }

package/src/editor/PortableTextEditor.tsx

@@ -30,7 +30,6 @@ import {createInternalEditor, type InternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import type {MutationActor} from './mutation-machine'
 import {RelayActorContext} from './relay-actor-context'
 import type {RelayActor} from './relay-machine'
@@ -288,11 +287,7 @@ export class PortableTextEditor extends Component<
               initialValue={this.editor._internal.slateEditor.initialValue}
             >
               <PortableTextEditorContext.Provider value={this}>
-                <PortableTextEditorSelectionProvider
-                  editorActor={this.editor._internal.editorActor}
-                >
-                  {this.props.children}
-                </PortableTextEditorSelectionProvider>
+                {this.props.children}
               </PortableTextEditorContext.Provider>
             </Slate>
           </RelayActorContext.Provider>

package/src/editor/create-editor.ts

@@ -9,6 +9,7 @@ import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
 import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
+import {createEditorDom} from './editor-dom'
 import type {EditorActor} from './editor-machine'
 import {editorMachine} from './editor-machine'
 import {
@@ -64,6 +65,10 @@ export function createInternalEditor(config: EditorConfig): {
   })
 
   const editor = {
+    dom: createEditorDom(
+      (event) => editorActor.send(event),
+      slateEditor.instance,
+    ),
     getSnapshot: () =>
       getEditorSnapshot({
         editorActorSnapshot: editorActor.getSnapshot(),

package/src/{internal-utils/selection-elements.ts → editor/editor-dom.ts}

@@ -2,9 +2,9 @@ import {Editor} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import type {EditorSnapshot} from '..'
 import type {BehaviorEvent} from '../behaviors'
+import {toSlateRange} from '../internal-utils/ranges'
 import type {PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
-import {toSlateRange} from './ranges'
 
 export type EditorDom = {
   getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>
@@ -51,17 +51,21 @@ function getBlockNodes(
     return []
   }
 
-  const blockEntries = Array.from(
-    Editor.nodes(slateEditor, {
-      at: range,
-      mode: 'highest',
-      match: (n) => !Editor.isEditor(n),
-    }),
-  )
+  try {
+    const blockEntries = Array.from(
+      Editor.nodes(slateEditor, {
+        at: range,
+        mode: 'highest',
+        match: (n) => !Editor.isEditor(n),
+      }),
+    )
 
-  return blockEntries.map(([blockNode]) =>
-    DOMEditor.toDOMNode(slateEditor, blockNode),
-  )
+    return blockEntries.map(([blockNode]) =>
+      DOMEditor.toDOMNode(slateEditor, blockNode),
+    )
+  } catch {
+    return []
+  }
 }
 
 function getChildNodes(
@@ -78,17 +82,21 @@ function getChildNodes(
     return []
   }
 
-  const childEntries = Array.from(
-    Editor.nodes(slateEditor, {
-      at: range,
-      mode: 'lowest',
-      match: (n) => !Editor.isEditor(n),
-    }),
-  )
+  try {
+    const childEntries = Array.from(
+      Editor.nodes(slateEditor, {
+        at: range,
+        mode: 'lowest',
+        match: (n) => !Editor.isEditor(n),
+      }),
+    )
 
-  return childEntries.map(([childNode]) =>
-    DOMEditor.toDOMNode(slateEditor, childNode),
-  )
+    return childEntries.map(([childNode]) =>
+      DOMEditor.toDOMNode(slateEditor, childNode),
+    )
+  } catch {
+    return []
+  }
 }
 
 export type SelectionDomNodes = {

package/src/editor/editor-provider.tsx

@@ -8,7 +8,6 @@ import {createInternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {
   PortableTextEditor,
   type PortableTextEditorProps,
@@ -93,11 +92,7 @@ export function EditorProvider(props: EditorProviderProps) {
             }
           >
             <PortableTextEditorContext.Provider value={portableTextEditor}>
-              <PortableTextEditorSelectionProvider
-                editorActor={internalEditor.actors.editorActor}
-              >
-                {props.children}
-              </PortableTextEditorSelectionProvider>
+              {props.children}
             </PortableTextEditorContext.Provider>
           </Slate>
         </RelayActorContext.Provider>

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -1,19 +1,6 @@
-import {
-  createContext,
-  startTransition,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-import {debugWithName} from '../../internal-utils/debug'
+import {startTransition, useContext, useEffect, useState} from 'react'
 import type {EditorSelection} from '../../types/editor'
-import type {EditorActor} from '../editor-machine'
-
-/**
- * A React context for sharing the editor selection.
- */
-const PortableTextEditorSelectionContext =
-  createContext<EditorSelection | null>(null)
+import {EditorActorContext} from '../editor-actor-context'
 
 /**
  * @deprecated Use `useEditorSelector` to get the current editor selection.
@@ -21,48 +8,21 @@ const PortableTextEditorSelectionContext =
  * Get the current editor selection from the React context.
  */
 export const usePortableTextEditorSelection = (): EditorSelection => {
-  const selection = useContext(PortableTextEditorSelectionContext)
-
-  if (selection === undefined) {
-    throw new Error(
-      `The \`usePortableTextEditorSelection\` hook must be used inside the <PortableTextEditor> component's context.`,
-    )
-  }
-  return selection
-}
-const debug = debugWithName('component:PortableTextEditor:SelectionProvider')
-const debugVerbose = debug.enabled && false
-
-/**
- * @internal
- */
-export function PortableTextEditorSelectionProvider(
-  props: React.PropsWithChildren<{
-    editorActor: EditorActor
-  }>,
-) {
+  const editorActor = useContext(EditorActorContext)
   const [selection, setSelection] = useState<EditorSelection>(null)
 
-  // Subscribe to, and handle changes from the editor
   useEffect(() => {
-    debug('Subscribing to selection changes')
-    const subscription = props.editorActor.on('selection', (event) => {
+    const subscription = editorActor.on('selection', (event) => {
       // Set the selection state in a transition, we don't need the state immediately.
       startTransition(() => {
-        if (debugVerbose) debug('Setting selection')
         setSelection(event.selection)
       })
     })
 
     return () => {
-      debug('Unsubscribing to selection changes')
       subscription.unsubscribe()
     }
-  }, [props.editorActor])
+  }, [editorActor])
 
-  return (
-    <PortableTextEditorSelectionContext.Provider value={selection}>
-      {props.children}
-    </PortableTextEditorSelectionContext.Provider>
-  )
+  return selection
 }

package/src/editor/plugins/createWithPatches.ts

@@ -267,11 +267,7 @@ export function createWithPatches({
             type: 'internal.patch',
             patch: {...patch, origin: 'local'},
             operationId: getCurrentOperationId(editor),
-            value: fromSlateValue(
-              editor.children,
-              editorActor.getSnapshot().context.schema.block.name,
-              KEY_TO_VALUE_ELEMENT.get(editor),
-            ),
+            value: editor.value,
           })
         }
       }

package/src/editor.ts

@@ -6,6 +6,7 @@ import type {
 import type {ActorRef, EventObject, Snapshot} from 'xstate'
 import type {Behavior} from './behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from './behaviors/behavior.types.event'
+import type {EditorDom} from './editor/editor-dom'
 import type {ExternalEditorEvent} from './editor/editor-machine'
 import type {SchemaDefinition} from './editor/editor-schema'
 import type {EditorSnapshot} from './editor/editor-snapshot'
@@ -51,6 +52,7 @@ export type EditorEvent =
  * @public
  */
 export type Editor = {
+  dom: EditorDom
   getSnapshot: () => EditorSnapshot
   /**
    * @beta

package/src/index.ts

@@ -2,6 +2,7 @@ export type {Patch} from '@portabletext/patches'
 export type {
   PortableTextBlock,
   PortableTextChild,
+  PortableTextObject,
   PortableTextSpan,
 } from '@sanity/types'
 export type {Editor, EditorConfig, EditorEvent} from './editor'
@@ -79,3 +80,4 @@ export type {
   ValueChange,
 } from './types/editor'
 export type {HotkeyOptions} from './types/options'
+export type {AnnotationPath, BlockPath, ChildPath} from './types/paths'

package/src/operations/behavior.operation.child.set.ts

@@ -0,0 +1,103 @@
+import {Editor, Element, Transforms} from 'slate'
+import {toSlateRange} from '../internal-utils/ranges'
+import type {BehaviorOperationImplementation} from './behavior.operations'
+
+export const childSetOperationImplementation: BehaviorOperationImplementation<
+  'child.set'
+> = ({context, operation}) => {
+  const location = toSlateRange(
+    {
+      anchor: {path: operation.at, offset: 0},
+      focus: {path: operation.at, offset: 0},
+    },
+    operation.editor,
+  )
+
+  if (!location) {
+    throw new Error(
+      `Unable to convert ${JSON.stringify(operation.at)} into a Slate Range`,
+    )
+  }
+
+  const childEntry = Editor.node(operation.editor, location, {depth: 2})
+  const child = childEntry?.[0]
+  const childPath = childEntry?.[1]
+
+  if (!child || !childPath) {
+    throw new Error(`Unable to find child at ${JSON.stringify(operation.at)}`)
+  }
+
+  if (operation.editor.isTextSpan(child)) {
+    const {_type, text, ...rest} = operation.props
+
+    Transforms.setNodes(
+      operation.editor,
+      {
+        ...child,
+        ...rest,
+      },
+      {at: childPath},
+    )
+
+    if (typeof text === 'string') {
+      if (child.text !== text) {
+        operation.editor.apply({
+          type: 'remove_text',
+          path: childPath,
+          offset: 0,
+          text: child.text,
+        })
+
+        operation.editor.apply({
+          type: 'insert_text',
+          path: childPath,
+          offset: 0,
+          text,
+        })
+      }
+    }
+
+    return
+  }
+
+  if (Element.isElement(child)) {
+    const definition = context.schema.inlineObjects.find(
+      (definition) => definition.name === child._type,
+    )
+
+    if (!definition) {
+      throw new Error(
+        `Unable to find schema definition for Inline Object type ${child._type}`,
+      )
+    }
+
+    const value =
+      'value' in child && typeof child.value === 'object' ? child.value : {}
+    const {_type, _key, ...rest} = operation.props
+
+    for (const prop in rest) {
+      if (!definition.fields.some((field) => field.name === prop)) {
+        delete rest[prop]
+      }
+    }
+
+    Transforms.setNodes(
+      operation.editor,
+      {
+        ...child,
+        _key: typeof _key === 'string' ? _key : child._key,
+        value: {
+          ...value,
+          ...rest,
+        },
+      },
+      {at: childPath},
+    )
+
+    return
+  }
+
+  throw new Error(
+    `Unable to determine the type of child at ${JSON.stringify(operation.at)}`,
+  )
+}

package/src/operations/behavior.operation.child.unset.ts

@@ -0,0 +1,89 @@
+import {applyAll} from '@portabletext/patches'
+import {Editor, Element, Transforms} from 'slate'
+import {toSlateRange} from '../internal-utils/ranges'
+import type {BehaviorOperationImplementation} from './behavior.operations'
+
+export const childUnsetOperationImplementation: BehaviorOperationImplementation<
+  'child.unset'
+> = ({context, operation}) => {
+  const location = toSlateRange(
+    {
+      anchor: {path: operation.at, offset: 0},
+      focus: {path: operation.at, offset: 0},
+    },
+    operation.editor,
+  )
+
+  if (!location) {
+    throw new Error(
+      `Unable to convert ${JSON.stringify(operation.at)} into a Slate Range`,
+    )
+  }
+
+  const childEntry = Editor.node(operation.editor, location, {depth: 2})
+  const child = childEntry?.[0]
+  const childPath = childEntry?.[1]
+
+  if (!child || !childPath) {
+    throw new Error(`Unable to find child at ${JSON.stringify(operation.at)}`)
+  }
+
+  if (operation.editor.isTextSpan(child)) {
+    if (operation.props.includes('text')) {
+      operation.editor.apply({
+        type: 'remove_text',
+        path: childPath,
+        offset: 0,
+        text: child.text,
+      })
+    }
+
+    const newNode: Record<string, unknown> = {}
+
+    for (const prop of operation.props) {
+      if (prop === '_type') {
+        // It's not allowed to unset the _type of a span
+        continue
+      }
+
+      if (prop === '_key') {
+        newNode._key = context.keyGenerator()
+        continue
+      }
+
+      newNode[prop] = null
+    }
+
+    Transforms.setNodes(operation.editor, newNode, {at: childPath})
+
+    return
+  }
+
+  if (Element.isElement(child)) {
+    const value =
+      'value' in child && typeof child.value === 'object' ? child.value : {}
+    const patches = operation.props.map((prop) => ({
+      type: 'unset' as const,
+      path: [prop],
+    }))
+    const newValue = applyAll(value, patches)
+
+    Transforms.setNodes(
+      operation.editor,
+      {
+        ...child,
+        _key: operation.props.includes('_key')
+          ? context.keyGenerator()
+          : child._key,
+        value: newValue,
+      },
+      {at: childPath},
+    )
+
+    return
+  }
+
+  throw new Error(
+    `Unable to determine the type of child at ${JSON.stringify(operation.at)}`,
+  )
+}

package/src/operations/behavior.operations.ts

@@ -14,6 +14,8 @@ import {addAnnotationOperationImplementation} from './behavior.operation.annotat
 import {removeAnnotationOperationImplementation} from './behavior.operation.annotation.remove'
 import {blockSetOperationImplementation} from './behavior.operation.block.set'
 import {blockUnsetOperationImplementation} from './behavior.operation.block.unset'
+import {childSetOperationImplementation} from './behavior.operation.child.set'
+import {childUnsetOperationImplementation} from './behavior.operation.child.unset'
 import {decoratorAddOperationImplementation} from './behavior.operation.decorator.add'
 import {deleteOperationImplementation} from './behavior.operation.delete'
 import {insertInlineObjectOperationImplementation} from './behavior.operation.insert-inline-object'
@@ -58,6 +60,8 @@ const behaviorOperationImplementations: BehaviorOperationImplementations = {
   'annotation.remove': removeAnnotationOperationImplementation,
   'block.set': blockSetOperationImplementation,
   'block.unset': blockUnsetOperationImplementation,
+  'child.set': childSetOperationImplementation,
+  'child.unset': childUnsetOperationImplementation,
   'decorator.add': decoratorAddOperationImplementation,
   'decorator.remove': removeDecoratorOperationImplementation,
   'delete': deleteOperationImplementation,
@@ -110,6 +114,20 @@ export function performOperation({
         })
         break
       }
+      case 'child.set': {
+        behaviorOperationImplementations['child.set']({
+          context,
+          operation: operation,
+        })
+        break
+      }
+      case 'child.unset': {
+        behaviorOperationImplementations['child.unset']({
+          context,
+          operation: operation,
+        })
+        break
+      }
       case 'decorator.add': {
         behaviorOperationImplementations['decorator.add']({
           context,

package/src/selectors/selector.get-anchor-block.ts

@@ -1,12 +1,13 @@
-import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {getBlockKeyFromSelectionPoint} from '../selection/selection-point'
+import type {BlockPath} from '../types/paths'
 
 /**
  * @public
  */
 export const getAnchorBlock: EditorSelector<
-  {node: PortableTextBlock; path: [KeyedSegment]} | undefined
+  {node: PortableTextBlock; path: BlockPath} | undefined
 > = (snapshot) => {
   if (!snapshot.context.selection) {
     return undefined

package/src/selectors/selector.get-anchor-child.ts

@@ -1,7 +1,7 @@
-import type {KeyedSegment} from '@portabletext/patches'
 import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {getChildKeyFromSelectionPoint} from '../selection/selection-point'
+import type {ChildPath} from '../types/paths'
 import {getAnchorTextBlock} from './selector.get-anchor-text-block'
 
 /**
@@ -10,7 +10,7 @@ import {getAnchorTextBlock} from './selector.get-anchor-text-block'
 export const getAnchorChild: EditorSelector<
   | {
       node: PortableTextObject | PortableTextSpan
-      path: [KeyedSegment, 'children', KeyedSegment]
+      path: ChildPath
     }
   | undefined
 > = (snapshot) => {

package/src/selectors/selector.get-anchor-span.ts

@@ -1,14 +1,13 @@
-import type {KeyedSegment} from '@portabletext/patches'
 import {isPortableTextSpan, type PortableTextSpan} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
+import type {ChildPath} from '../types/paths'
 import {getAnchorChild} from './selector.get-anchor-child'
 
 /**
  * @public
  */
 export const getAnchorSpan: EditorSelector<
-  | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
-  | undefined
+  {node: PortableTextSpan; path: ChildPath} | undefined
 > = (snapshot) => {
   const anchorChild = getAnchorChild(snapshot)