@portabletext/editor 3.0.8 → 3.1.0

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/operations/behavior.operation.insert.block.ts

@@ -12,7 +12,7 @@ import {
 import {DOMEditor} from 'slate-dom'
 import {getFocusBlock, getFocusChild} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
-import {isEqualToEmptyEditor, toSlateBlock} from '../internal-utils/values'
+import {toSlateBlock} from '../internal-utils/values'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import {parseBlock} from '../utils/parse-blocks'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
@@ -121,7 +121,7 @@ export function insertBlock(options: {
     } else {
       // placement === 'auto'
 
-      if (endBlock && isEqualToEmptyEditor([endBlock], context.schema)) {
+      if (isEmptyTextBlock(context, endBlock)) {
         Transforms.insertNodes(editor, [block], {
           at: endBlockPath,
           select: false,
@@ -234,7 +234,7 @@ export function insertBlock(options: {
         Transforms.select(editor, atAfterInsert)
       }
 
-      if (focusBlock && isEqualToEmptyEditor([focusBlock], context.schema)) {
+      if (isEmptyTextBlock(context, focusBlock)) {
         Transforms.removeNodes(editor, {at: focusBlockPath})
       }
 
@@ -244,7 +244,7 @@ export function insertBlock(options: {
     if (editor.isTextBlock(endBlock) && editor.isTextBlock(block)) {
       const selectionStartPoint = Range.start(at)
 
-      if (isEqualToEmptyEditor([endBlock], context.schema)) {
+      if (isEmptyTextBlock(context, endBlock)) {
         Transforms.insertNodes(editor, [block], {
           at: endBlockPath,
           select: false,

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/utils/parse-blocks.ts

@@ -144,45 +144,10 @@ export function parseTextBlock({
   const _key =
     typeof block._key === 'string' ? block._key : context.keyGenerator()
 
-  const unparsedMarkDefs: Array<unknown> = Array.isArray(block.markDefs)
-    ? block.markDefs
-    : []
-  const markDefKeyMap = new Map<string, string>()
-  const markDefs = unparsedMarkDefs.flatMap((markDef) => {
-    if (!isTypedObject(markDef)) {
-      return []
-    }
-
-    const schemaType = context.schema.annotations.find(
-      ({name}) => name === markDef._type,
-    )
-
-    if (!schemaType) {
-      return []
-    }
-
-    if (typeof markDef._key !== 'string') {
-      // If the `markDef` doesn't have a `_key` then we don't know what spans
-      // it belongs to and therefore we have to discard it.
-      return []
-    }
-
-    const parsedAnnotation = parseObject({
-      object: markDef,
-      context: {
-        schemaType,
-        keyGenerator: context.keyGenerator,
-      },
-      options,
-    })
-
-    if (!parsedAnnotation) {
-      return []
-    }
-
-    markDefKeyMap.set(markDef._key, parsedAnnotation._key)
-
-    return [parsedAnnotation]
+  const {markDefs, markDefKeyMap} = parseMarkDefs({
+    context,
+    markDefs: block.markDefs,
+    options,
   })
 
   const unparsedChildren: Array<unknown> = Array.isArray(block.children)
@@ -279,6 +244,66 @@ export function parseTextBlock({
   return parsedBlock
 }
 
+export function parseMarkDefs({
+  context,
+  markDefs,
+  options,
+}: {
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>
+  markDefs: unknown
+  options: {validateFields: boolean}
+}): {
+  markDefs: Array<PortableTextObject>
+  markDefKeyMap: Map<string, string>
+} {
+  const unparsedMarkDefs: Array<unknown> = Array.isArray(markDefs)
+    ? markDefs
+    : []
+  const markDefKeyMap = new Map<string, string>()
+
+  const parsedMarkDefs = unparsedMarkDefs.flatMap((markDef) => {
+    if (!isTypedObject(markDef)) {
+      return []
+    }
+
+    const schemaType = context.schema.annotations.find(
+      ({name}) => name === markDef._type,
+    )
+
+    if (!schemaType) {
+      return []
+    }
+
+    if (typeof markDef._key !== 'string') {
+      // If the `markDef` doesn't have a `_key` then we don't know what spans
+      // it belongs to and therefore we have to discard it.
+      return []
+    }
+
+    const parsedAnnotation = parseObject({
+      object: markDef,
+      context: {
+        schemaType,
+        keyGenerator: context.keyGenerator,
+      },
+      options,
+    })
+
+    if (!parsedAnnotation) {
+      return []
+    }
+
+    markDefKeyMap.set(markDef._key, parsedAnnotation._key)
+
+    return [parsedAnnotation]
+  })
+
+  return {
+    markDefs: parsedMarkDefs,
+    markDefKeyMap,
+  }
+}
+
 export function parseChild({
   child,
   context,

package/src/utils/util.is-empty-text-block.ts

@@ -8,7 +8,7 @@ import {getTextBlockText} from './util.get-text-block-text'
  */
 export function isEmptyTextBlock(
   context: Pick<EditorContext, 'schema'>,
-  block: PortableTextBlock,
+  block: PortableTextBlock | unknown,
 ) {
   if (!isTextBlock(context, block)) {
     return false

package/src/behaviors/behavior.decorator-pair.ts

@@ -1,212 +0,0 @@
-import type {EditorSchema} from '../editor/editor-schema'
-import {createPairRegex} from '../internal-utils/get-text-to-emphasize'
-import {getFocusTextBlock} from '../selectors/selector.get-focus-text-block'
-import {getPreviousInlineObject} from '../selectors/selector.get-previous-inline-object'
-import {getSelectionStartPoint} from '../selectors/selector.get-selection-start-point'
-import {getBlockTextBefore} from '../selectors/selector.get-text-before'
-import type {BlockOffset} from '../types/block-offset'
-import {spanSelectionPointToBlockOffset} from '../utils/util.block-offset'
-import {blockOffsetsToSelection} from '../utils/util.block-offsets-to-selection'
-import {childSelectionPointToBlockOffset} from '../utils/util.child-selection-point-to-block-offset'
-import {effect, execute} from './behavior.types.action'
-import {defineBehavior} from './behavior.types.behavior'
-
-export function createDecoratorPairBehavior(config: {
-  decorator: ({schema}: {schema: EditorSchema}) => string | undefined
-  pair: {char: string; amount: number}
-  onDecorate: (offset: BlockOffset) => void
-}) {
-  if (config.pair.amount < 1) {
-    console.warn(
-      `The amount of characters in the pair should be greater than 0`,
-    )
-  }
-
-  const pairRegex = createPairRegex(config.pair.char, config.pair.amount)
-  const regEx = new RegExp(`(${pairRegex})$`)
-
-  return defineBehavior({
-    on: 'insert.text',
-    guard: ({snapshot, event}) => {
-      if (config.pair.amount < 1) {
-        return false
-      }
-
-      const decorator = config.decorator({schema: snapshot.context.schema})
-
-      if (decorator === undefined) {
-        return false
-      }
-
-      const focusTextBlock = getFocusTextBlock(snapshot)
-      const selectionStartPoint = getSelectionStartPoint(snapshot)
-      const selectionStartOffset = selectionStartPoint
-        ? spanSelectionPointToBlockOffset({
-            context: {
-              schema: snapshot.context.schema,
-              value: snapshot.context.value,
-            },
-            selectionPoint: selectionStartPoint,
-          })
-        : undefined
-
-      if (!focusTextBlock || !selectionStartOffset) {
-        return false
-      }
-
-      const textBefore = getBlockTextBefore(snapshot)
-      const newText = `${textBefore}${event.text}`
-      const textToDecorate = newText.match(regEx)?.at(0)
-
-      if (textToDecorate === undefined) {
-        return false
-      }
-
-      const prefixOffsets = {
-        anchor: {
-          path: focusTextBlock.path,
-          // Example: "foo **bar**".length - "**bar**".length = 4
-          offset: newText.length - textToDecorate.length,
-        },
-        focus: {
-          path: focusTextBlock.path,
-          // Example: "foo **bar**".length - "**bar**".length + "*".length * 2 = 6
-          offset:
-            newText.length -
-            textToDecorate.length +
-            config.pair.char.length * config.pair.amount,
-        },
-      }
-
-      const suffixOffsets = {
-        anchor: {
-          path: focusTextBlock.path,
-          // Example: "foo **bar*|" (10) + "*".length - 2 = 9
-          offset:
-            selectionStartOffset.offset +
-            event.text.length -
-            config.pair.char.length * config.pair.amount,
-        },
-        focus: {
-          path: focusTextBlock.path,
-          // Example: "foo **bar*|" (10) + "*".length = 11
-          offset: selectionStartOffset.offset + event.text.length,
-        },
-      }
-
-      // If the prefix is more than one character, then we need to check if
-      // there is an inline object inside it
-      if (prefixOffsets.focus.offset - prefixOffsets.anchor.offset > 1) {
-        const prefixSelection = blockOffsetsToSelection({
-          context: snapshot.context,
-          offsets: prefixOffsets,
-        })
-        const inlineObjectBeforePrefixFocus = getPreviousInlineObject({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: prefixSelection
-              ? {
-                  anchor: prefixSelection.focus,
-                  focus: prefixSelection.focus,
-                }
-              : null,
-          },
-        })
-        const inlineObjectBeforePrefixFocusOffset =
-          inlineObjectBeforePrefixFocus
-            ? childSelectionPointToBlockOffset({
-                context: {
-                  schema: snapshot.context.schema,
-                  value: snapshot.context.value,
-                },
-                selectionPoint: {
-                  path: inlineObjectBeforePrefixFocus.path,
-                  offset: 0,
-                },
-              })
-            : undefined
-
-        if (
-          inlineObjectBeforePrefixFocusOffset &&
-          inlineObjectBeforePrefixFocusOffset.offset >
-            prefixOffsets.anchor.offset &&
-          inlineObjectBeforePrefixFocusOffset.offset <
-            prefixOffsets.focus.offset
-        ) {
-          return false
-        }
-      }
-
-      // If the suffix is more than one character, then we need to check if
-      // there is an inline object inside it
-      if (suffixOffsets.focus.offset - suffixOffsets.anchor.offset > 1) {
-        const previousInlineObject = getPreviousInlineObject(snapshot)
-        const previousInlineObjectOffset = previousInlineObject
-          ? childSelectionPointToBlockOffset({
-              context: {
-                schema: snapshot.context.schema,
-                value: snapshot.context.value,
-              },
-              selectionPoint: {
-                path: previousInlineObject.path,
-                offset: 0,
-              },
-            })
-          : undefined
-
-        if (
-          previousInlineObjectOffset &&
-          previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&
-          previousInlineObjectOffset.offset < suffixOffsets.focus.offset
-        ) {
-          return false
-        }
-      }
-
-      return {
-        prefixOffsets,
-        suffixOffsets,
-        decorator,
-      }
-    },
-    actions: [
-      // Insert the text as usual in its own undo step
-      ({event}) => [execute(event)],
-      (_, {prefixOffsets, suffixOffsets, decorator}) => [
-        // Decorate the text between the prefix and suffix
-        execute({
-          type: 'decorator.add',
-          decorator,
-          at: {
-            anchor: prefixOffsets.focus,
-            focus: suffixOffsets.anchor,
-          },
-        }),
-        // Delete the suffix
-        execute({
-          type: 'delete.text',
-          at: suffixOffsets,
-        }),
-        // Delete the prefix
-        execute({
-          type: 'delete.text',
-          at: prefixOffsets,
-        }),
-        // Toggle the decorator off so the next inserted text isn't emphasized
-        execute({
-          type: 'decorator.remove',
-          decorator,
-        }),
-        effect(() => {
-          config.onDecorate({
-            ...suffixOffsets.anchor,
-            offset:
-              suffixOffsets.anchor.offset -
-              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
-          })
-        }),
-      ],
-    ],
-  })
-}