@portabletext/editor 3.0.8 → 3.0.9

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.0.9",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

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/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]})
 }

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/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),
-          })
-        }),
-      ],
-    ],
-  })
-}