@portabletext/editor 3.0.9 → 3.1.0

package/package.json

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

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

@@ -145,7 +145,7 @@ export type SyntheticBehaviorEvent =
       /**
        * Defaults to character deletion.
        */
-      unit?: 'character' | 'word' | 'line' | 'block'
+      unit?: 'character' | 'word' | 'line' | 'block' | 'child'
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>

package/src/editor/PortableTextEditor.tsx

@@ -350,6 +350,20 @@ export class PortableTextEditor extends Component<
     editor.editable?.blur()
   }
 
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *  type: 'delete',
+   *  at: {...},
+   *  direction: '...',
+   *  unit: '...',
+   * })
+   * ```
+   */
   static delete = (
     editor: PortableTextEditor,
     selection: EditorSelection,

package/src/editor/plugins/createWithEditableAPI.ts

@@ -5,12 +5,9 @@ import type {
   PortableTextChild,
   PortableTextObject,
 } from '@sanity/types'
-import {Editor, Range, Element as SlateElement, Text, Transforms} from 'slate'
+import {Editor, Range, Text, Transforms} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
-import {buildIndexMaps} from '../../internal-utils/build-index-maps'
-import {createPlaceholderBlock} from '../../internal-utils/create-placeholder-block'
-import {debugWithName} from '../../internal-utils/debug'
 import {
   isListItemActive,
   isStyleActive,
@@ -37,8 +34,6 @@ import type {EditorActor} from '../editor-machine'
 import {getEditorSnapshot} from '../editor-selector'
 import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../weakMaps'
 
-const debug = debugWithName('API:editable')
-
 export function createEditableAPI(
   editor: PortableTextSlateEditor,
   editorActor: EditorActor,
@@ -431,84 +426,24 @@ export function createEditableAPI(
       selection: EditorSelection,
       options?: EditableAPIDeleteOptions,
     ): void => {
-      if (selection) {
-        const range = toSlateRange({
-          context: {
-            schema: editorActor.getSnapshot().context.schema,
-            value: editor.value,
-            selection,
-          },
-          blockIndexMap: editor.blockIndexMap,
-        })
-        const hasRange =
-          range && range.anchor.path.length > 0 && range.focus.path.length > 0
-        if (!hasRange) {
-          throw new Error('Invalid range')
-        }
-        if (range) {
-          if (!options?.mode || options?.mode === 'selected') {
-            debug(`Deleting content in selection`)
-            Transforms.delete(editor, {
-              at: range,
-              hanging: true,
-              voids: true,
-            })
-            editor.onChange()
-            return
-          }
-          if (options?.mode === 'blocks') {
-            debug(`Deleting blocks touched by selection`)
-            Transforms.removeNodes(editor, {
-              at: range,
-              voids: true,
-              match: (node) => {
-                return (
-                  editor.isTextBlock(node) ||
-                  (!editor.isTextBlock(node) && SlateElement.isElement(node))
-                )
-              },
-            })
-          }
-          if (options?.mode === 'children') {
-            debug(`Deleting children touched by selection`)
-            Transforms.removeNodes(editor, {
-              at: range,
-              voids: true,
-              match: (node) => {
-                return (
-                  node._type === types.span.name || // Text children
-                  (!editor.isTextBlock(node) && SlateElement.isElement(node)) // inline blocks
-                )
-              },
-            })
-          }
-          // If the editor was emptied, insert a placeholder block
-          // directly into the editor's children. We don't want to do this
-          // through a Transform (because that would trigger a change event
-          // that would insert the placeholder into the actual value
-          // which should remain empty)
-          if (editor.children.length === 0) {
-            const placeholderBlock = createPlaceholderBlock(
-              editorActor.getSnapshot().context,
-            )
-            editor.children = [placeholderBlock]
-            editor.value = [placeholderBlock]
-
-            buildIndexMaps(
-              {
-                schema: editorActor.getSnapshot().context.schema,
-                value: editor.value,
-              },
-              {
-                blockIndexMap: editor.blockIndexMap,
-                listIndexMap: editor.listIndexMap,
-              },
-            )
-          }
-
-          editor.onChange()
-        }
+      if (!selection) {
+        return
       }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'delete',
+          at: selection,
+          unit:
+            options?.mode === 'blocks'
+              ? 'block'
+              : options?.mode === 'children'
+                ? 'child'
+                : undefined,
+        },
+        editor,
+      })
     },
     removeAnnotation: <TSchemaType extends {name: string}>(
       type: TSchemaType,

package/src/editor/plugins/createWithPatches.ts

@@ -41,7 +41,7 @@ export function createWithPatches({
   // The editor.value would no longer contain that information if the node is already deleted.
   let previousValue: PortableTextBlock[]
 
-  const applyPatch = createApplyPatch(editorActor.getSnapshot().context.schema)
+  const applyPatch = createApplyPatch(editorActor.getSnapshot().context)
 
   return function withPatches(editor: PortableTextSlateEditor) {
     IS_PROCESSING_REMOTE_CHANGES.set(editor, false)

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -1,6 +1,7 @@
 import {Editor} from 'slate'
 import {isRedoing} from '../../history/slate-plugin.redoing'
 import {isUndoing} from '../../history/slate-plugin.undoing'
+import {createPlaceholderBlock} from '../../internal-utils/create-placeholder-block'
 import {debugWithName} from '../../internal-utils/debug'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
@@ -55,7 +56,10 @@ export function createWithPlaceholderBlock(
 
         if (isLonelyBlock && isBlockObject) {
           debug('Adding placeholder block')
-          Editor.insertNode(editor, editor.pteCreateTextBlock({decorators: []}))
+          Editor.insertNode(
+            editor,
+            createPlaceholderBlock(editorActor.getSnapshot().context),
+          )
         }
       }
 

package/src/editor/plugins/with-plugins.ts

@@ -9,7 +9,6 @@ import {createWithPatches} from './createWithPatches'
 import {createWithPlaceholderBlock} from './createWithPlaceholderBlock'
 import {createWithPortableTextMarkModel} from './createWithPortableTextMarkModel'
 import {createWithSchemaTypes} from './createWithSchemaTypes'
-import {createWithUtils} from './createWithUtils'
 import {pluginUpdateSelection} from './slate-plugin.update-selection'
 import {pluginUpdateValue} from './slate-plugin.update-value'
 
@@ -48,9 +47,6 @@ export const withPlugins = <T extends Editor>(
 
   const withPlaceholderBlock = createWithPlaceholderBlock(editorActor)
 
-  const withUtils = createWithUtils({
-    editorActor,
-  })
   const withEventListeners = createWithEventListeners(editorActor)
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
@@ -59,16 +55,14 @@ export const withPlugins = <T extends Editor>(
       withObjectKeys(
         withPortableTextMarkModel(
           withPlaceholderBlock(
-            withUtils(
-              withUndoRedo(
-                withPatches(
-                  pluginUpdateValue(
-                    editorActor.getSnapshot().context,
-                    pluginUpdateSelection({
-                      editorActor,
-                      editor: e,
-                    }),
-                  ),
+            withUndoRedo(
+              withPatches(
+                pluginUpdateValue(
+                  editorActor.getSnapshot().context,
+                  pluginUpdateSelection({
+                    editorActor,
+                    editor: e,
+                  }),
                 ),
               ),
             ),

package/src/editor/sync-machine.ts

@@ -17,6 +17,7 @@ import {
   type CallbackLogicFunction,
 } from 'xstate'
 import {pluginWithoutHistory} from '../history/slate-plugin.without-history'
+import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {debugWithName} from '../internal-utils/debug'
 import {validateValue} from '../internal-utils/validateValue'
 import {toSlateBlock, VOID_CHILD_KEY} from '../internal-utils/values'
@@ -424,6 +425,7 @@ async function updateValue({
     debug('Value is empty')
 
     clearEditor({
+      context,
       slateEditor,
       doneSyncing,
       hadSelection,
@@ -573,10 +575,15 @@ async function* getStreamedBlocks({value}: {value: Array<PortableTextBlock>}) {
  * Remove all blocks and insert a placeholder block
  */
 function clearEditor({
+  context,
   slateEditor,
   doneSyncing,
   hadSelection,
 }: {
+  context: {
+    keyGenerator: () => string
+    schema: EditorSchema
+  }
   slateEditor: PortableTextSlateEditor
   doneSyncing: boolean
   hadSelection: boolean
@@ -601,11 +608,9 @@ function clearEditor({
             })
           })
 
-          Transforms.insertNodes(
-            slateEditor,
-            slateEditor.pteCreateTextBlock({decorators: []}),
-            {at: [0]},
-          )
+          Transforms.insertNodes(slateEditor, createPlaceholderBlock(context), {
+            at: [0],
+          })
 
           // Add a new selection in the top of the document
           if (hadSelection) {

package/src/internal-utils/applyPatch.ts

@@ -17,17 +17,18 @@ import {
 } from '@sanity/diff-match-patch'
 import type {Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import {Editor, Element, Node, Text, Transforms, type Descendant} from 'slate'
-import type {EditorSchema} from '../editor/editor-schema'
+import type {EditorContext} from '../editor/editor-snapshot'
 import {KEY_TO_SLATE_ELEMENT} from '../editor/weakMaps'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {isKeyedSegment} from '../utils/util.is-keyed-segment'
+import {createPlaceholderBlock} from './create-placeholder-block'
 import {isEqualToEmptyEditor, toSlateBlock} from './values'
 
 /**
  * Creates a function that can apply a patch onto a PortableTextSlateEditor.
  */
 export function createApplyPatch(
-  schema: EditorSchema,
+  context: Pick<EditorContext, 'schema' | 'keyGenerator'>,
 ): (editor: PortableTextSlateEditor, patch: Patch) => boolean {
   return (editor: PortableTextSlateEditor, patch: Patch): boolean => {
     let changed = false
@@ -35,10 +36,10 @@ export function createApplyPatch(
     try {
       switch (patch.type) {
         case 'insert':
-          changed = insertPatch(editor, patch, schema)
+          changed = insertPatch(context, editor, patch)
           break
         case 'unset':
-          changed = unsetPatch(editor, patch)
+          changed = unsetPatch(context, editor, patch)
           break
         case 'set':
           changed = setPatch(editor, patch)
@@ -117,9 +118,9 @@ function diffMatchPatch(
 }
 
 function insertPatch(
+  context: Pick<EditorContext, 'schema' | 'keyGenerator'>,
   editor: PortableTextSlateEditor,
   patch: InsertPatch,
-  schema: EditorSchema,
 ) {
   const block = findBlock(editor.children, patch.path)
 
@@ -137,7 +138,7 @@ function insertPatch(
     const blocksToInsert = items.map((item) =>
       toSlateBlock(
         item as PortableTextBlock,
-        {schemaTypes: schema},
+        {schemaTypes: context.schema},
         KEY_TO_SLATE_ELEMENT.get(editor),
       ),
     )
@@ -145,7 +146,10 @@ function insertPatch(
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
 
-    const editorWasEmptyBefore = isEqualToEmptyEditor(editor.value, schema)
+    const editorWasEmptyBefore = isEqualToEmptyEditor(
+      editor.value,
+      context.schema,
+    )
 
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
 
@@ -177,7 +181,7 @@ function insertPatch(
 
   const childrenToInsert = toSlateBlock(
     {...block.node, children: items as PortableTextChild[]},
-    {schemaTypes: schema},
+    {schemaTypes: context.schema},
     KEY_TO_SLATE_ELEMENT.get(editor),
   )
   const normalizedIdx =
@@ -414,7 +418,11 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
   return true
 }
 
-function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
+function unsetPatch(
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
+  editor: PortableTextSlateEditor,
+  patch: UnsetPatch,
+) {
   // Value
   if (patch.path.length === 0) {
     const previousSelection = editor.selection
@@ -428,7 +436,7 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
       Transforms.removeNodes(editor, {at: path})
     }
 
-    Transforms.insertNodes(editor, editor.pteCreateTextBlock({decorators: []}))
+    Transforms.insertNodes(editor, createPlaceholderBlock(context))
     if (previousSelection) {
       Transforms.select(editor, {
         anchor: {path: [0, 0], offset: 0},
@@ -455,10 +463,7 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
 
       Transforms.deselect(editor)
       Transforms.removeNodes(editor, {at: [block.index]})
-      Transforms.insertNodes(
-        editor,
-        editor.pteCreateTextBlock({decorators: []}),
-      )
+      Transforms.insertNodes(editor, createPlaceholderBlock(context))
 
       if (previousSelection) {
         Transforms.select(editor, {

package/src/operations/behavior.operation.delete.ts

@@ -1,9 +1,10 @@
-import {isTextBlock} from '@portabletext/schema'
+import {isSpan, isTextBlock} from '@portabletext/schema'
 import {deleteText, Editor, Element, Range, Transforms} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
+import {VOID_CHILD_KEY} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {getBlockKeyFromSelectionPoint} from '../utils/util.selection-point'
 import type {BehaviorOperationImplementation} from './behavior.operations'
@@ -74,6 +75,23 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
     return
   }
 
+  if (operation.unit === 'child') {
+    const range = at ?? operation.editor.selection ?? undefined
+
+    if (!range) {
+      throw new Error('Unable to delete children without a selection')
+    }
+
+    Transforms.removeNodes(operation.editor, {
+      at: range,
+      match: (node) =>
+        (isSpan(context, node) && node._key !== VOID_CHILD_KEY) ||
+        ('__inline' in node && node.__inline === true),
+    })
+
+    return
+  }
+
   if (operation.direction === 'backward' && operation.unit === 'line') {
     const range = at ?? operation.editor.selection ?? undefined
 

package/src/types/editor.ts

@@ -152,15 +152,6 @@ export interface PortableTextSlateEditor extends ReactEditor {
    */
   pteWithHotKeys: (event: KeyboardEvent<HTMLDivElement>) => void
 
-  /**
-   * Helper function that creates a text block
-   */
-  pteCreateTextBlock: (options: {
-    decorators: Array<string>
-    listItem?: string
-    level?: number
-  }) => Descendant
-
   /**
    * Undo
    */

package/src/editor/plugins/createWithUtils.ts

@@ -1,52 +0,0 @@
-import {toSlateBlock} from '../../internal-utils/values'
-import type {PortableTextSlateEditor} from '../../types/editor'
-import type {EditorActor} from '../editor-machine'
-
-interface Options {
-  editorActor: EditorActor
-}
-
-/**
- * This plugin makes various util commands available in the editor
- *
- */
-export function createWithUtils({editorActor}: Options) {
-  return function withUtils(
-    editor: PortableTextSlateEditor,
-  ): PortableTextSlateEditor {
-    editor.pteCreateTextBlock = (options: {
-      decorators: Array<string>
-      listItem?: string
-      level?: number
-    }) => {
-      return toSlateBlock(
-        {
-          _type: editorActor.getSnapshot().context.schema.block.name,
-          _key: editorActor.getSnapshot().context.keyGenerator(),
-          style:
-            editorActor.getSnapshot().context.schema.styles[0].name || 'normal',
-          ...(options.listItem ? {listItem: options.listItem} : {}),
-          ...(options.level ? {level: options.level} : {}),
-          markDefs: [],
-          children: [
-            {
-              _type: 'span',
-              _key: editorActor.getSnapshot().context.keyGenerator(),
-              text: '',
-              marks: options.decorators.filter((decorator) =>
-                editorActor
-                  .getSnapshot()
-                  .context.schema.decorators.find(
-                    ({name}) => name === decorator,
-                  ),
-              ),
-            },
-          ],
-        },
-
-        {schemaTypes: editorActor.getSnapshot().context.schema},
-      )
-    }
-    return editor
-  }
-}