@portabletext/editor 1.53.0 → 1.54.0

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/index.ts

@@ -7,15 +7,28 @@ export {getAnchorSpan} from './selector.get-anchor-span'
 export {getAnchorTextBlock} from './selector.get-anchor-text-block'
 export {getBlockOffsets} from './selector.get-block-offsets'
 export {getCaretWordSelection} from './selector.get-caret-word-selection'
+export {getFirstBlock} from './selector.get-first-block'
+export {getFocusBlock} from './selector.get-focus-block'
+export {getFocusBlockObject} from './selector.get-focus-block-object'
+export {getFocusChild} from './selector.get-focus-child'
 export {getFocusInlineObject} from './selector.get-focus-inline-object'
+export {getFocusListBlock} from './selector.get-focus-list-block'
+export {getFocusSpan} from './selector.get-focus-span'
+export {getFocusTextBlock} from './selector.get-focus-text-block'
+export {getLastBlock} from './selector.get-last-block'
 export {getListIndex} from './selector.get-list-state'
+export {getNextBlock} from './selector.get-next-block'
 export {getNextInlineObject} from './selector.get-next-inline-object'
+export {getPreviousBlock} from './selector.get-previous-block'
 export {getPreviousInlineObject} from './selector.get-previous-inline-object'
+export {getSelectedBlocks} from './selector.get-selected-blocks'
 export {getSelectedSlice} from './selector.get-selected-slice'
 export {getSelectedSpans} from './selector.get-selected-spans'
 export {getSelectedTextBlocks} from './selector.get-selected-text-blocks'
 export {getSelection} from './selector.get-selection'
+export {getSelectionEndBlock} from './selector.get-selection-end-block'
 export {getSelectionEndPoint} from './selector.get-selection-end-point'
+export {getSelectionStartBlock} from './selector.get-selection-start-block'
 export {getSelectionStartPoint} from './selector.get-selection-start-point'
 export {getSelectionText} from './selector.get-selection-text'
 export {getBlockTextBefore} from './selector.get-text-before'
@@ -33,4 +46,3 @@ export {isPointBeforeSelection} from './selector.is-point-before-selection'
 export {isSelectingEntireBlocks} from './selector.is-selecting-entire-blocks'
 export {isSelectionCollapsed} from './selector.is-selection-collapsed'
 export {isSelectionExpanded} from './selector.is-selection-expanded'
-export * from './selectors'

package/src/selectors/selector.get-active-annotations.ts

@@ -1,9 +1,10 @@
 import type {PortableTextObject} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isTextBlock} from '../internal-utils/parse-blocks'
+import {getFocusSpan} from './selector.get-focus-span'
+import {getSelectedBlocks} from './selector.get-selected-blocks'
 import {getSelectedSpans} from './selector.get-selected-spans'
 import {isSelectionCollapsed} from './selector.is-selection-collapsed'
-import {getFocusSpan, getSelectedBlocks} from './selectors'
 
 /**
  * @public

package/src/selectors/selector.get-active-list-item.ts

@@ -1,7 +1,7 @@
 import type {PortableTextListBlock} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isTextBlock} from '../internal-utils/parse-blocks'
-import {getSelectedBlocks} from './selectors'
+import {getSelectedBlocks} from './selector.get-selected-blocks'
 
 /**
  * @public

package/src/selectors/selector.get-active-style.ts

@@ -1,7 +1,7 @@
 import type {PortableTextTextBlock} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isTextBlock} from '../internal-utils/parse-blocks'
-import {getSelectedBlocks} from './selectors'
+import {getSelectedBlocks} from './selector.get-selected-blocks'
 
 /**
  * @public

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)
 

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

@@ -1,13 +1,14 @@
-import type {KeyedSegment, PortableTextTextBlock} from '@sanity/types'
+import type {PortableTextTextBlock} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isTextBlock} from '../internal-utils/parse-blocks'
+import type {BlockPath} from '../types/paths'
 import {getAnchorBlock} from './selector.get-anchor-block'
 
 /**
  * @public
  */
 export const getAnchorTextBlock: EditorSelector<
-  {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined
+  {node: PortableTextTextBlock; path: BlockPath} | undefined
 > = (snapshot) => {
   const anchorBlock = getAnchorBlock(snapshot)
 

package/src/selectors/selector.get-caret-word-selection.ts

@@ -7,13 +7,13 @@ import {
   getBlockStartPoint,
   spanSelectionPointToBlockOffset,
 } from '../utils'
+import {getFocusTextBlock} from './selector.get-focus-text-block'
 import {getNextInlineObject} from './selector.get-next-inline-object'
 import {getPreviousInlineObject} from './selector.get-previous-inline-object'
 import {getSelectionStartPoint} from './selector.get-selection-start-point'
 import {getSelectionText} from './selector.get-selection-text'
 import {isSelectionCollapsed} from './selector.is-selection-collapsed'
 import {isSelectionExpanded} from './selector.is-selection-expanded'
-import {getFocusTextBlock} from './selectors'
 
 /**
  * @public

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

@@ -0,0 +1,14 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import type {BlockPath} from '../types/paths'
+
+/**
+ * @public
+ */
+export const getFirstBlock: EditorSelector<
+  {node: PortableTextBlock; path: BlockPath} | undefined
+> = (snapshot) => {
+  const node = snapshot.context.value[0]
+
+  return node ? {node, path: [{_key: node._key}]} : undefined
+}

package/src/selectors/selector.get-focus-block-object.ts

@@ -0,0 +1,18 @@
+import type {PortableTextObject} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isTextBlock} from '../internal-utils/parse-blocks'
+import type {BlockPath} from '../types/paths'
+import {getFocusBlock} from './selector.get-focus-block'
+
+/**
+ * @public
+ */
+export const getFocusBlockObject: EditorSelector<
+  {node: PortableTextObject; path: BlockPath} | undefined
+> = (snapshot) => {
+  const focusBlock = getFocusBlock(snapshot)
+
+  return focusBlock && !isTextBlock(snapshot.context, focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}

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

@@ -0,0 +1,23 @@
+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 getFocusBlock: EditorSelector<
+  {node: PortableTextBlock; path: BlockPath} | undefined
+> = (snapshot) => {
+  if (!snapshot.context.selection) {
+    return undefined
+  }
+
+  const key = getBlockKeyFromSelectionPoint(snapshot.context.selection.focus)
+
+  const node = key
+    ? snapshot.context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}

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

@@ -0,0 +1,36 @@
+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 {getFocusTextBlock} from './selector.get-focus-text-block'
+
+/**
+ * @public
+ */
+export const getFocusChild: EditorSelector<
+  | {
+      node: PortableTextObject | PortableTextSpan
+      path: ChildPath
+    }
+  | undefined
+> = (snapshot) => {
+  if (!snapshot.context.selection) {
+    return undefined
+  }
+
+  const focusBlock = getFocusTextBlock(snapshot)
+
+  if (!focusBlock) {
+    return undefined
+  }
+
+  const key = getChildKeyFromSelectionPoint(snapshot.context.selection.focus)
+
+  const node = key
+    ? focusBlock.node.children.find((span) => span._key === key)
+    : undefined
+
+  return node && key
+    ? {node, path: [...focusBlock.path, 'children', {_key: key}]}
+    : undefined
+}

package/src/selectors/selector.get-focus-inline-object.ts

@@ -1,17 +1,13 @@
-import {
-  isPortableTextSpan,
-  type KeyedSegment,
-  type PortableTextObject,
-} from '@sanity/types'
+import {isPortableTextSpan, type PortableTextObject} from '@sanity/types'
 import type {EditorSelector} from '../editor/editor-selector'
-import {getFocusChild} from './selectors'
+import type {ChildPath} from '../types/paths'
+import {getFocusChild} from './selector.get-focus-child'
 
 /**
  * @public
  */
 export const getFocusInlineObject: EditorSelector<
-  | {node: PortableTextObject; path: [KeyedSegment, 'children', KeyedSegment]}
-  | undefined
+  {node: PortableTextObject; path: ChildPath} | undefined
 > = (snapshot) => {
   const focusChild = getFocusChild(snapshot)
 

package/src/selectors/selector.get-focus-list-block.ts

@@ -0,0 +1,18 @@
+import type {PortableTextListBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isListBlock} from '../internal-utils/parse-blocks'
+import type {BlockPath} from '../types/paths'
+import {getFocusTextBlock} from './selector.get-focus-text-block'
+
+/**
+ * @public
+ */
+export const getFocusListBlock: EditorSelector<
+  {node: PortableTextListBlock; path: BlockPath} | undefined
+> = (snapshot) => {
+  const focusTextBlock = getFocusTextBlock(snapshot)
+
+  return focusTextBlock && isListBlock(snapshot.context, focusTextBlock.node)
+    ? {node: focusTextBlock.node, path: focusTextBlock.path}
+    : undefined
+}

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

@@ -0,0 +1,18 @@
+import type {PortableTextSpan} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isSpan} from '../internal-utils/parse-blocks'
+import type {ChildPath} from '../types/paths'
+import {getFocusChild} from './selector.get-focus-child'
+
+/**
+ * @public
+ */
+export const getFocusSpan: EditorSelector<
+  {node: PortableTextSpan; path: ChildPath} | undefined
+> = (snapshot) => {
+  const focusChild = getFocusChild(snapshot)
+
+  return focusChild && isSpan(snapshot.context, focusChild.node)
+    ? {node: focusChild.node, path: focusChild.path}
+    : undefined
+}