@portabletext/editor 3.0.9 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.0.9",
+  "version": "3.1.1",
   "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/create-slate-editor.tsx

@@ -3,7 +3,6 @@ import {withReact} 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 {toSlateBlock} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
@@ -56,15 +55,9 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     },
   )
 
-  const initialValue = [
-    toSlateBlock(placeholderBlock, {
-      schemaTypes: config.editorActor.getSnapshot().context.schema,
-    }),
-  ]
-
   const slateEditor: SlateEditor = {
     instance,
-    initialValue,
+    initialValue: [placeholderBlock],
   }
 
   return slateEditor

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)
@@ -110,6 +110,7 @@ export function createWithPatches({
       previousValue = editor.value
 
       const editorWasEmpty = isEqualToEmptyEditor(
+        editorActor.getSnapshot().context.initialValue,
         previousValue,
         editorActor.getSnapshot().context.schema,
       )
@@ -118,6 +119,7 @@ export function createWithPatches({
       apply(operation)
 
       const editorIsEmpty = isEqualToEmptyEditor(
+        editorActor.getSnapshot().context.initialValue,
         editor.value,
         editorActor.getSnapshot().context.schema,
       )

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -10,6 +10,7 @@ import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} 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 {getNextSpan, getPreviousSpan} from '../../internal-utils/sibling-utils'
 import type {BehaviorOperationImplementation} from '../../operations/behavior.operations'
@@ -19,6 +20,7 @@ import type {EditorActor} from '../editor-machine'
 import {getEditorSnapshot} from '../editor-selector'
 import {withNormalizeNode} from '../with-normalizing-node'
 import {isChangingRemotely} from '../withChanges'
+import {withoutPatching} from '../withoutPatching'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
@@ -38,6 +40,18 @@ export function createWithPortableTextMarkModel(
     editor.normalizeNode = (nodeEntry) => {
       const [node, path] = nodeEntry
 
+      if (Editor.isEditor(node) && node.children.length === 0) {
+        withoutPatching(editor, () => {
+          withNormalizeNode(editor, () => {
+            Transforms.insertNodes(
+              editor,
+              createPlaceholderBlock(editorActor.getSnapshot().context),
+              {at: [0], select: true},
+            )
+          })
+        })
+      }
+
       if (editor.isTextBlock(node)) {
         const children = Node.children(editor, path)
 

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

@@ -6,10 +6,8 @@ import type {RelayActor} from '../relay-machine'
 import {createWithEventListeners} from './create-with-event-listeners'
 import {createWithObjectKeys} from './createWithObjectKeys'
 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'
 
@@ -46,11 +44,6 @@ export const withPlugins = <T extends Editor>(
   })
   const withPortableTextMarkModel = createWithPortableTextMarkModel(editorActor)
 
-  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.
@@ -58,18 +51,14 @@ export const withPlugins = <T extends Editor>(
     withSchemaTypes(
       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/range-decorations-machine.ts

@@ -18,8 +18,8 @@ import {
 import {moveRangeByOperation} from '../internal-utils/move-range-by-operation'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
-import {isEqualToEmptyEditor} from '../internal-utils/values'
 import type {PortableTextSlateEditor, RangeDecoration} from '../types/editor'
+import {isEmptyTextBlock} from '../utils'
 import type {EditorSchema} from './editor-schema'
 
 const slateOperationCallback: CallbackLogicFunction<
@@ -282,7 +282,9 @@ export const rangeDecorationsMachine = setup({
     skipSetup: input.skipSetup,
     schema: input.schema,
     slateEditor: input.slateEditor,
-    decorate: {fn: createDecorate(input.schema, input.slateEditor)},
+    decorate: {
+      fn: createDecorate(input.schema, input.slateEditor),
+    },
   }),
   invoke: {
     src: 'slate operation listener',
@@ -357,7 +359,15 @@ function createDecorate(
   slateEditor: PortableTextSlateEditor,
 ) {
   return function decorate([node, path]: NodeEntry): Array<BaseRange> {
-    if (isEqualToEmptyEditor(slateEditor.value, schema)) {
+    const defaultStyle = schema.styles.at(0)?.name
+    const editorOnlyContainsEmptyParagraph =
+      slateEditor.value.length === 1 &&
+      isEmptyTextBlock({schema}, slateEditor.value[0]) &&
+      (!slateEditor.value[0].style ||
+        slateEditor.value[0].style === defaultStyle) &&
+      !slateEditor.value[0].listItem
+
+    if (editorOnlyContainsEmptyParagraph) {
       return [
         {
           anchor: {

package/src/editor/sync-machine.ts

@@ -426,7 +426,6 @@ async function updateValue({
     clearEditor({
       slateEditor,
       doneSyncing,
-      hadSelection,
     })
 
     isChanged = true
@@ -575,11 +574,9 @@ async function* getStreamedBlocks({value}: {value: Array<PortableTextBlock>}) {
 function clearEditor({
   slateEditor,
   doneSyncing,
-  hadSelection,
 }: {
   slateEditor: PortableTextSlateEditor
   doneSyncing: boolean
-  hadSelection: boolean
 }) {
   Editor.withoutNormalizing(slateEditor, () => {
     pluginWithoutHistory(slateEditor, () => {
@@ -589,10 +586,6 @@ function clearEditor({
             return
           }
 
-          if (hadSelection) {
-            Transforms.deselect(slateEditor)
-          }
-
           const childrenLength = slateEditor.children.length
 
           slateEditor.children.forEach((_, index) => {
@@ -600,17 +593,6 @@ function clearEditor({
               at: [childrenLength - 1 - index],
             })
           })
-
-          Transforms.insertNodes(
-            slateEditor,
-            slateEditor.pteCreateTextBlock({decorators: []}),
-            {at: [0]},
-          )
-
-          // Add a new selection in the top of the document
-          if (hadSelection) {
-            Transforms.select(slateEditor, [0, 0])
-          }
         })
       })
     })

package/src/internal-utils/applyPatch.ts

@@ -17,7 +17,7 @@ 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'
@@ -27,7 +27,9 @@ 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'> & {
+    initialValue: Array<PortableTextBlock> | undefined
+  },
 ): (editor: PortableTextSlateEditor, patch: Patch) => boolean {
   return (editor: PortableTextSlateEditor, patch: Patch): boolean => {
     let changed = false
@@ -35,7 +37,7 @@ 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)
@@ -117,13 +119,31 @@ function diffMatchPatch(
 }
 
 function insertPatch(
+  context: Pick<EditorContext, 'schema' | 'keyGenerator'> & {
+    initialValue: Array<PortableTextBlock> | undefined
+  },
   editor: PortableTextSlateEditor,
   patch: InsertPatch,
-  schema: EditorSchema,
 ) {
   const block = findBlock(editor.children, patch.path)
 
   if (!block) {
+    if (patch.path.length === 1 && patch.path[0] === 0) {
+      const blocksToInsert = patch.items.map((item) =>
+        toSlateBlock(
+          item as PortableTextBlock,
+          {schemaTypes: context.schema},
+          KEY_TO_SLATE_ELEMENT.get(editor),
+        ),
+      )
+
+      Transforms.insertNodes(editor, blocksToInsert, {
+        at: [0],
+      })
+
+      return true
+    }
+
     return false
   }
 
@@ -137,7 +157,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 +165,11 @@ function insertPatch(
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
 
-    const editorWasEmptyBefore = isEqualToEmptyEditor(editor.value, schema)
+    const editorWasEmptyBefore = isEqualToEmptyEditor(
+      context.initialValue,
+      editor.value,
+      context.schema,
+    )
 
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
 
@@ -177,7 +201,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 =
@@ -417,7 +441,6 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
 function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
   // Value
   if (patch.path.length === 0) {
-    const previousSelection = editor.selection
     Transforms.deselect(editor)
 
     const children = Node.children(editor, [], {
@@ -428,15 +451,6 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
       Transforms.removeNodes(editor, {at: path})
     }
 
-    Transforms.insertNodes(editor, editor.pteCreateTextBlock({decorators: []}))
-    if (previousSelection) {
-      Transforms.select(editor, {
-        anchor: {path: [0, 0], offset: 0},
-        focus: {path: [0, 0], offset: 0},
-      })
-    }
-    // call OnChange here to emit the new selection
-    editor.onChange()
     return true
   }
 
@@ -448,30 +462,6 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
 
   // Single blocks
   if (patch.path.length === 1) {
-    if (editor.children.length === 1) {
-      // `unset`ing the last block should be treated similar to `unset`ing the
-      // entire editor value
-      const previousSelection = editor.selection
-
-      Transforms.deselect(editor)
-      Transforms.removeNodes(editor, {at: [block.index]})
-      Transforms.insertNodes(
-        editor,
-        editor.pteCreateTextBlock({decorators: []}),
-      )
-
-      if (previousSelection) {
-        Transforms.select(editor, {
-          anchor: {path: [0, 0], offset: 0},
-          focus: {path: [0, 0], offset: 0},
-        })
-      }
-
-      editor.onChange()
-
-      return true
-    }
-
     Transforms.removeNodes(editor, {at: [block.index]})
 
     return true

package/src/internal-utils/values.ts

@@ -169,9 +169,14 @@ export function fromSlateBlock(
 }
 
 export function isEqualToEmptyEditor(
+  initialValue: Array<PortableTextBlock> | undefined,
   blocks: Array<Descendant> | Array<PortableTextBlock>,
   schemaTypes: EditorSchema,
 ): boolean {
+  if (!blocks) {
+    return false
+  }
+
   // Must have exactly one block
   if (blocks.length !== 1) {
     return false
@@ -240,5 +245,22 @@ export function isEqualToEmptyEditor(
     return false
   }
 
+  if (
+    Object.keys(firstBlock).some(
+      (key) =>
+        key !== '_type' &&
+        key !== '_key' &&
+        key !== 'children' &&
+        key !== 'markDefs' &&
+        key !== 'style',
+    )
+  ) {
+    return false
+  }
+
+  if (isEqual(initialValue, [firstBlock])) {
+    return false
+  }
+
   return true
 }

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

@@ -1,9 +1,9 @@
-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'
@@ -67,10 +67,23 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
       mode: 'highest',
     })
 
-    if (operation.editor.children.length === 0) {
-      Transforms.insertNodes(operation.editor, createPlaceholderBlock(context))
+    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
   }
 

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

@@ -10,6 +10,7 @@ import {
   type Descendant,
 } from 'slate'
 import {DOMEditor} from 'slate-dom'
+import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {getFocusBlock, getFocusChild} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {toSlateBlock} from '../internal-utils/values'
@@ -70,6 +71,10 @@ export function insertBlock(options: {
       })
     : editor.selection
 
+  if (editor.children.length === 0) {
+    Transforms.insertNodes(editor, createPlaceholderBlock(context), {at: [0]})
+  }
+
   // Fall back to the start and end of the editor if neither an editor
   // selection nor an `at` range is provided
   const start = at ? Range.start(at) : Editor.start(editor, [])

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
    */