@portabletext/editor 3.0.8 → 3.1.0

package/lib/utils/index.d.ts

@@ -115,7 +115,7 @@ declare function getTextBlockText(block: PortableTextTextBlock): string;
 /**
  * @public
  */
-declare function isEmptyTextBlock(context: Pick<EditorContext, 'schema'>, block: PortableTextBlock): boolean;
+declare function isEmptyTextBlock(context: Pick<EditorContext, 'schema'>, block: PortableTextBlock | unknown): boolean;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.0.8",
+  "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/Editable.tsx

@@ -25,7 +25,6 @@ import {getEventPosition} from '../internal-utils/event-position'
 import {normalizeSelection} from '../internal-utils/selection'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
-import {isEqualToEmptyEditor} from '../internal-utils/values'
 import type {
   EditorSelection,
   OnCopyFn,
@@ -41,6 +40,7 @@ import type {
   ScrollSelectionIntoViewFunction,
 } from '../types/editor'
 import type {HotkeyOptions} from '../types/options'
+import {isEmptyTextBlock} from '../utils'
 import {parseBlocks} from '../utils/parse-blocks'
 import {RenderElement} from './components/render-element'
 import {RenderLeaf} from './components/render-leaf'
@@ -526,9 +526,10 @@ export const PortableTextEditable = forwardRef<
 
         if (
           !slateEditor.selection &&
-          isEqualToEmptyEditor(
-            slateEditor.children,
-            editorActor.getSnapshot().context.schema,
+          slateEditor.children.length === 1 &&
+          isEmptyTextBlock(
+            editorActor.getSnapshot().context,
+            slateEditor.value.at(0),
           )
         ) {
           Transforms.select(slateEditor, Editor.start(slateEditor, []))

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.block.set.ts

@@ -1,6 +1,7 @@
-import {Transforms, type Element as SlateElement} from 'slate'
-import {toSlateBlock} from '../internal-utils/values'
-import {parseBlock} from '../utils/parse-blocks'
+import {applyAll, set} from '@portabletext/patches'
+import {isTextBlock} from '@portabletext/schema'
+import {Transforms, type Node} from 'slate'
+import {parseMarkDefs} from '../utils/parse-blocks'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const blockSetOperationImplementation: BehaviorOperationImplementation<
@@ -14,36 +15,90 @@ export const blockSetOperationImplementation: BehaviorOperationImplementation<
     )
   }
 
-  const block = operation.editor.value.at(blockIndex)
+  const slateBlock = operation.editor.children.at(blockIndex)
 
-  if (!block) {
+  if (!slateBlock) {
     throw new Error(`Unable to find block at ${JSON.stringify(operation.at)}`)
   }
 
-  const {_type, ...filteredProps} = operation.props
+  if (isTextBlock(context, slateBlock)) {
+    const filteredProps: Record<string, unknown> = {}
 
-  const updatedBlock = {
-    ...block,
-    ...filteredProps,
-  }
+    for (const key of Object.keys(operation.props)) {
+      if (key === '_type' || key === 'children') {
+        continue
+      }
 
-  const parsedBlock = parseBlock({
-    context,
-    block: updatedBlock,
-    options: {
-      normalize: false,
-      removeUnusedMarkDefs: false,
-      validateFields: true,
-    },
-  })
-
-  if (!parsedBlock) {
-    throw new Error(`Unable to update block at ${JSON.stringify(operation.at)}`)
-  }
+      if (key === 'style') {
+        if (
+          context.schema.styles.some(
+            (style) => style.name === operation.props[key],
+          )
+        ) {
+          filteredProps[key] = operation.props[key]
+        }
+        continue
+      }
+
+      if (key === 'listItem') {
+        if (
+          context.schema.lists.some(
+            (list) => list.name === operation.props[key],
+          )
+        ) {
+          filteredProps[key] = operation.props[key]
+        }
+        continue
+      }
+
+      if (key === 'level') {
+        filteredProps[key] = operation.props[key]
+        continue
+      }
+
+      if (key === 'markDefs') {
+        const {markDefs} = parseMarkDefs({
+          context,
+          markDefs: operation.props[key],
+          options: {validateFields: true},
+        })
+        filteredProps[key] = markDefs
+        continue
+      }
+
+      if (context.schema.block.fields?.some((field) => field.name === key)) {
+        filteredProps[key] = operation.props[key]
+      }
+    }
+
+    Transforms.setNodes(operation.editor, filteredProps, {at: [blockIndex]})
+  } else {
+    const schemaDefinition = context.schema.blockObjects.find(
+      (definition) => definition.name === slateBlock._type,
+    )
+    const filteredProps: Record<string, unknown> = {}
+
+    for (const key of Object.keys(operation.props)) {
+      if (key === '_type') {
+        continue
+      }
 
-  const slateBlock = toSlateBlock(parsedBlock, {
-    schemaTypes: context.schema,
-  }) as SlateElement
+      if (key === '_key') {
+        filteredProps[key] = operation.props[key]
+        continue
+      }
 
-  Transforms.setNodes(operation.editor, slateBlock, {at: [blockIndex]})
+      if (schemaDefinition?.fields.some((field) => field.name === key)) {
+        filteredProps[key] = operation.props[key]
+      }
+    }
+
+    const patches = Object.entries(filteredProps).map(([key, value]) =>
+      key === '_key' ? set(value, ['_key']) : set(value, ['value', key]),
+    )
+
+    const updatedSlateBlock = applyAll(slateBlock, patches) as Partial<Node>
+
+    Transforms.setNodes(operation.editor, updatedSlateBlock, {at: [blockIndex]})
+  }
 }

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

@@ -1,7 +1,6 @@
+import {applyAll, set, unset} from '@portabletext/patches'
 import {isTextBlock} from '@portabletext/schema'
-import {omit} from 'lodash'
-import {Transforms} from 'slate'
-import {parseBlock} from '../utils/parse-blocks'
+import {Transforms, type Node} from 'slate'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
@@ -14,73 +13,42 @@ export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
     throw new Error(`Unable to find block index for block key ${blockKey}`)
   }
 
-  const block =
-    blockIndex !== undefined ? operation.editor.value.at(blockIndex) : undefined
+  const slateBlock =
+    blockIndex !== undefined
+      ? operation.editor.children.at(blockIndex)
+      : undefined
 
-  if (!block) {
+  if (!slateBlock) {
     throw new Error(`Unable to find block at ${JSON.stringify(operation.at)}`)
   }
 
-  if (isTextBlock(context, block)) {
-    const propsToRemove = operation.props.filter((prop) => prop !== '_type')
+  if (isTextBlock(context, slateBlock)) {
+    const propsToRemove = operation.props.filter(
+      (prop) => prop !== '_type' && prop !== '_key' && prop !== 'children',
+    )
 
-    const updatedTextBlock = parseBlock({
-      context,
-      block: omit(block, propsToRemove),
-      options: {
-        normalize: false,
-        removeUnusedMarkDefs: true,
-        validateFields: true,
-      },
-    })
+    Transforms.unsetNodes(operation.editor, propsToRemove, {at: [blockIndex]})
 
-    if (!updatedTextBlock) {
-      throw new Error(
-        `Unable to update block at ${JSON.stringify(operation.at)}`,
+    if (operation.props.includes('_key')) {
+      Transforms.setNodes(
+        operation.editor,
+        {_key: context.keyGenerator()},
+        {at: [blockIndex]},
       )
     }
 
-    const propsToSet: Record<string, unknown> = {}
-
-    for (const prop of propsToRemove) {
-      if (!(prop in updatedTextBlock)) {
-        propsToSet[prop] = undefined
-      } else {
-        propsToSet[prop] = (updatedTextBlock as Record<string, unknown>)[prop]
-      }
-    }
-
-    Transforms.setNodes(operation.editor, propsToSet, {at: [blockIndex]})
-
     return
   }
 
-  const updatedBlockObject = parseBlock({
-    context,
-    block: omit(
-      block,
-      operation.props.filter((prop) => prop !== '_type'),
-    ),
-    options: {
-      normalize: false,
-      removeUnusedMarkDefs: true,
-      validateFields: true,
-    },
-  })
-
-  if (!updatedBlockObject) {
-    throw new Error(`Unable to update block at ${JSON.stringify(operation.at)}`)
-  }
+  const patches = operation.props.flatMap((key) =>
+    key === '_type'
+      ? []
+      : key === '_key'
+        ? set(context.keyGenerator(), ['_key'])
+        : unset(['value', key]),
+  )
 
-  const {_type, _key, ...props} = updatedBlockObject
+  const updatedSlateBlock = applyAll(slateBlock, patches) as Partial<Node>
 
-  Transforms.setNodes(
-    operation.editor,
-    {
-      _type,
-      _key,
-      value: props,
-    },
-    {at: [blockIndex]},
-  )
+  Transforms.setNodes(operation.editor, updatedSlateBlock, {at: [blockIndex]})
 }