@portabletext/editor 1.50.6 → 1.50.7

package/src/internal-utils/applyPatch.ts

@@ -15,30 +15,14 @@ import {
   makeDiff,
   parsePatch,
 } from '@sanity/diff-match-patch'
-import type {
-  KeyedSegment,
-  Path,
-  PathSegment,
-  PortableTextBlock,
-  PortableTextChild,
-} from '@sanity/types'
-import {
-  Element,
-  Node,
-  Text,
-  Transforms,
-  type Descendant,
-  type Path as SlatePath,
-} from 'slate'
+import type {Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
+import {Element, Node, Text, Transforms, type Descendant} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {PortableTextSlateEditor} from '../types/editor'
-import {debugWithName} from './debug'
+import {isKeyedSegment} from '../utils'
 import {isEqualToEmptyEditor, toSlateValue} from './values'
 import {KEY_TO_SLATE_ELEMENT} from './weakMaps'
 
-const debug = debugWithName('applyPatches')
-const debugVerbose = debug.enabled && true
-
 /**
  * Creates a function that can apply a patch onto a PortableTextSlateEditor.
  */
@@ -48,14 +32,6 @@ export function createApplyPatch(
   return (editor: PortableTextSlateEditor, patch: Patch): boolean => {
     let changed = false
 
-    // Save some CPU cycles by not stringifying unless enabled
-    if (debugVerbose) {
-      debug(
-        '\n\nNEW PATCH =============================================================',
-      )
-      debug(JSON.stringify(patch, null, 2))
-    }
-
     try {
       switch (patch.type) {
         case 'insert':
@@ -70,8 +46,6 @@ export function createApplyPatch(
         case 'diffMatchPatch':
           changed = diffMatchPatch(editor, patch)
           break
-        default:
-          debug('Unhandled patch', patch.type)
       }
     } catch (err) {
       console.error(err)
@@ -81,64 +55,63 @@ export function createApplyPatch(
   }
 }
 
-/**
- * Apply a remote diff match patch to the current PTE instance.
- * Note meant for external consumption, only exported for testing purposes.
- *
- * @param editor - Portable text slate editor instance
- * @param patch - The PTE diff match patch operation to apply
- * @returns true if the patch was applied, false otherwise
- * @internal
- */
-export function diffMatchPatch(
+function diffMatchPatch(
   editor: Pick<
     PortableTextSlateEditor,
     'children' | 'isTextBlock' | 'apply' | 'selection' | 'onChange'
   >,
   patch: DiffMatchPatch,
 ): boolean {
-  const {block, child, childPath} = findBlockAndChildFromPath(
-    editor,
-    patch.path,
-  )
+  const block = findBlock(editor.children, patch.path)
+
   if (!block) {
-    debug('Block not found')
     return false
   }
-  if (!child || !childPath) {
-    debug('Child not found')
+
+  const child = findBlockChild(block, patch.path)
+
+  if (!child) {
     return false
   }
+
   const isSpanTextDiffMatchPatch =
     block &&
-    editor.isTextBlock(block) &&
+    editor.isTextBlock(block.node) &&
     patch.path.length === 4 &&
     patch.path[1] === 'children' &&
     patch.path[3] === 'text'
 
-  if (!isSpanTextDiffMatchPatch || !Text.isText(child)) {
+  if (!isSpanTextDiffMatchPatch || !Text.isText(child.node)) {
     return false
   }
 
   const patches = parsePatch(patch.value)
-  const [newValue] = diffMatchPatchApplyPatches(patches, child.text, {
+  const [newValue] = diffMatchPatchApplyPatches(patches, child.node.text, {
     allowExceedingIndices: true,
   })
-  const diff = cleanupEfficiency(makeDiff(child.text, newValue), 5)
+  const diff = cleanupEfficiency(makeDiff(child.node.text, newValue), 5)
 
-  debugState(editor, 'before')
   let offset = 0
   for (const [op, text] of diff) {
     if (op === DIFF_INSERT) {
-      editor.apply({type: 'insert_text', path: childPath, offset, text})
+      editor.apply({
+        type: 'insert_text',
+        path: [block.index, child.index],
+        offset,
+        text,
+      })
       offset += text.length
     } else if (op === DIFF_DELETE) {
-      editor.apply({type: 'remove_text', path: childPath, offset: offset, text})
+      editor.apply({
+        type: 'remove_text',
+        path: [block.index, child.index],
+        offset: offset,
+        text,
+      })
     } else if (op === DIFF_EQUAL) {
       offset += text.length
     }
   }
-  debugState(editor, 'after')
 
   return true
 }
@@ -148,20 +121,16 @@ function insertPatch(
   patch: InsertPatch,
   schema: EditorSchema,
 ) {
-  const {
-    block: targetBlock,
-    child: targetChild,
-    blockPath: targetBlockPath,
-    childPath: targetChildPath,
-  } = findBlockAndChildFromPath(editor, patch.path)
-  if (!targetBlock || !targetBlockPath) {
-    debug('Block not found')
+  const block = findBlock(editor.children, patch.path)
+
+  if (!block) {
     return false
   }
+
   if (patch.path.length > 1 && patch.path[1] !== 'children') {
-    debug('Ignoring patch targeting void value')
     return false
   }
+
   // Insert blocks
   if (patch.path.length === 1) {
     const {items, position} = patch
@@ -170,13 +139,10 @@ function insertPatch(
       {schemaTypes: schema},
       KEY_TO_SLATE_ELEMENT.get(editor),
     ) as Descendant[]
-    const targetBlockIndex = targetBlockPath[0]
+    const targetBlockIndex = block.index
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
 
-    debug(`Inserting blocks at path [${normalizedIdx}]`)
-    debugState(editor, 'before')
-
     const editorWasEmptyBefore = isEqualToEmptyEditor(editor.children, schema)
 
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
@@ -191,34 +157,33 @@ function insertPatch(
       })
     }
 
-    debugState(editor, 'after')
     return true
   }
+
   // Insert children
   const {items, position} = patch
-  if (!targetChild || !targetChildPath) {
-    debug('Child not found')
+
+  const targetChild = findBlockChild(block, patch.path)
+
+  if (!targetChild) {
     return false
   }
-  const childrenToInsert =
-    targetBlock &&
-    toSlateValue(
-      [{...targetBlock, children: items as PortableTextChild[]}],
-      {schemaTypes: schema},
-      KEY_TO_SLATE_ELEMENT.get(editor),
-    )
-  const targetChildIndex = targetChildPath[1]
+
+  const childrenToInsert = toSlateValue(
+    [{...block.node, children: items as PortableTextChild[]}],
+    {schemaTypes: schema},
+    KEY_TO_SLATE_ELEMENT.get(editor),
+  )
   const normalizedIdx =
-    position === 'after' ? targetChildIndex + 1 : targetChildIndex
-  const childInsertPath = [targetChildPath[0], normalizedIdx]
-  debug(`Inserting children at path ${childInsertPath}`)
-  debugState(editor, 'before')
+    position === 'after' ? targetChild.index + 1 : targetChild.index
+  const childInsertPath = [block.index, normalizedIdx]
+
   if (childrenToInsert && Element.isElement(childrenToInsert[0])) {
     Transforms.insertNodes(editor, childrenToInsert[0].children, {
       at: childInsertPath,
     })
   }
-  debugState(editor, 'after')
+
   return true
 }
 
@@ -228,110 +193,169 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
     value = {}
     value[patch.path[3]] = patch.value
   }
-  const {block, blockPath, child, childPath} = findBlockAndChildFromPath(
-    editor,
-    patch.path,
-  )
+
+  const block = findBlock(editor.children, patch.path)
 
   if (!block) {
-    debug('Block not found')
     return false
   }
-  const isTextBlock = editor.isTextBlock(block)
+
+  const isTextBlock = editor.isTextBlock(block.node)
 
   // Ignore patches targeting nested void data, like 'markDefs'
   if (isTextBlock && patch.path.length > 1 && patch.path[1] !== 'children') {
-    debug('Ignoring setting void value')
     return false
   }
 
-  debugState(editor, 'before')
+  const child = findBlockChild(block, patch.path)
 
   // If this is targeting a text block child
-  if (isTextBlock && child && childPath) {
-    if (Text.isText(value) && Text.isText(child)) {
-      const newText = child.text
-      const oldText = value.text
-      if (oldText !== newText) {
-        debug('Setting text property')
-        editor.apply({
-          type: 'remove_text',
-          path: childPath,
-          offset: 0,
-          text: newText,
-        })
-        editor.apply({
-          type: 'insert_text',
-          path: childPath,
-          offset: 0,
-          text: value.text,
-        })
-        // call OnChange here to emit the new selection
-        // the user's selection might be interfering with
-        editor.onChange()
+  if (isTextBlock && child) {
+    if (Text.isText(child.node)) {
+      if (Text.isText(value)) {
+        const oldText = child.node.text
+        const newText = value.text
+        if (oldText !== newText) {
+          editor.apply({
+            type: 'remove_text',
+            path: [block.index, child.index],
+            offset: 0,
+            text: oldText,
+          })
+          editor.apply({
+            type: 'insert_text',
+            path: [block.index, child.index],
+            offset: 0,
+            text: newText,
+          })
+          // call OnChange here to emit the new selection
+          // the user's selection might be interfering with
+          editor.onChange()
+        }
+      } else {
+        // Setting non-text span property
+
+        const propPath = patch.path.slice(3)
+        const propEntry = propPath.at(0)
+        const reservedProps = ['_key', '_type', 'text']
+
+        if (propEntry === undefined) {
+          return false
+        }
+
+        if (
+          typeof propEntry === 'string' &&
+          reservedProps.includes(propEntry)
+        ) {
+          return false
+        }
+
+        const newNode = applyAll(child.node, [
+          {
+            ...patch,
+            path: propPath,
+          },
+        ])
+
+        Transforms.setNodes(editor, newNode, {at: [block.index, child.index]})
       }
     } else {
-      debug('Setting non-text property')
-      editor.apply({
-        type: 'set_node',
-        path: childPath,
-        properties: {},
-        newProperties: value as Partial<Node>,
-      })
+      // Setting inline object property
+
+      const propPath = patch.path.slice(3)
+      const reservedProps = ['_key', '_type', 'children', '__inline']
+      const propEntry = propPath.at(0)
+
+      if (propEntry === undefined) {
+        return false
+      }
+
+      if (typeof propEntry === 'string' && reservedProps.includes(propEntry)) {
+        return false
+      }
+
+      // If the child is an inline object, we need to apply the patch to the
+      // `value` property object.
+      const value =
+        'value' in child.node && typeof child.node.value === 'object'
+          ? child.node.value
+          : {}
+
+      const newValue = applyAll(value, [
+        {
+          ...patch,
+          path: patch.path.slice(3),
+        },
+      ])
+
+      Transforms.setNodes(
+        editor,
+        {...child.node, value: newValue},
+        {at: [block.index, child.index]},
+      )
     }
+
     return true
-  } else if (Element.isElement(block) && patch.path.length === 1 && blockPath) {
-    debug('Setting block property')
+  } else if (Element.isElement(block.node) && patch.path.length === 1) {
     const {children, ...nextRest} = value as unknown as PortableTextBlock
-    const {children: prevChildren, ...prevRest} = block || {children: undefined}
+    const {children: prevChildren, ...prevRest} = block.node || {
+      children: undefined,
+    }
+
     // Set any block properties
     editor.apply({
       type: 'set_node',
-      path: blockPath,
+      path: [block.index],
       properties: {...prevRest},
       newProperties: nextRest,
     })
+
     // Replace the children in the block
     // Note that children must be explicitly inserted, and can't be set with set_node
-    debug('Setting children')
-    block.children.forEach((c, cIndex) => {
+    const blockNode = block.node
+
+    blockNode.children.forEach((child, childIndex) => {
       editor.apply({
         type: 'remove_node',
-        path: blockPath.concat(block.children.length - 1 - cIndex),
-        node: c,
+        path: [block.index, blockNode.children.length - 1 - childIndex],
+        node: child,
       })
     })
+
     if (Array.isArray(children)) {
-      children.forEach((c, cIndex) => {
+      children.forEach((child, childIndex) => {
         editor.apply({
           type: 'insert_node',
-          path: blockPath.concat(cIndex),
-          node: c,
+          path: [block.index, childIndex],
+          node: child,
         })
       })
     }
-  } else if (block && 'value' in block) {
+  } else if (block && 'value' in block.node) {
     if (patch.path.length > 1 && patch.path[1] !== 'children') {
-      const newVal = applyAll(block.value, [
+      const newVal = applyAll(block.node.value, [
         {
           ...patch,
           path: patch.path.slice(1),
         },
       ])
-      Transforms.setNodes(editor, {...block, value: newVal}, {at: blockPath})
+
+      Transforms.setNodes(
+        editor,
+        {...block.node, value: newVal},
+        {at: [block.index]},
+      )
     } else {
       return false
     }
   }
-  debugState(editor, 'after')
+
   return true
 }
 
 function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
   // Value
   if (patch.path.length === 0) {
-    debug('Removing everything')
-    debugState(editor, 'before')
     const previousSelection = editor.selection
     Transforms.deselect(editor)
 
@@ -352,126 +376,193 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
     }
     // call OnChange here to emit the new selection
     editor.onChange()
-    debugState(editor, 'after')
     return true
   }
-  const {block, blockPath, child, childPath} = findBlockAndChildFromPath(
-    editor,
-    patch.path,
-  )
+
+  const block = findBlock(editor.children, patch.path)
+
+  if (!block) {
+    return false
+  }
 
   // Single blocks
   if (patch.path.length === 1) {
-    if (!block || !blockPath) {
-      debug('Block not found')
+    Transforms.removeNodes(editor, {at: [block.index]})
+
+    return true
+  }
+
+  const child = findBlockChild(block, patch.path)
+
+  // Unset on text block children
+  if (editor.isTextBlock(block.node) && child) {
+    if (patch.path[1] === 'children' && patch.path.length === 3) {
+      Transforms.removeNodes(editor, {at: [block.index, child.index]})
+
+      return true
+    }
+  }
+
+  if (child && !Text.isText(child.node)) {
+    // Unsetting inline object property
+
+    const propPath = patch.path.slice(3)
+    const propEntry = propPath.at(0)
+    const reservedProps = ['_key', '_type', 'children', '__inline']
+
+    if (propEntry === undefined) {
       return false
     }
-    const blockIndex = blockPath[0]
-    debug(`Removing block at path [${blockIndex}]`)
-    debugState(editor, 'before')
 
-    Transforms.removeNodes(editor, {at: [blockIndex]})
-    debugState(editor, 'after')
+    if (typeof propEntry === 'string' && reservedProps.includes(propEntry)) {
+      // All custom properties are stored on the `value` property object.
+      // If you try to unset any of the other top-level properties it's a
+      // no-op.
+      return false
+    }
+
+    const value =
+      'value' in child.node && typeof child.node.value === 'object'
+        ? child.node.value
+        : {}
+
+    const newValue = applyAll(value, [
+      {
+        ...patch,
+        path: patch.path.slice(3),
+      },
+    ])
+
+    Transforms.setNodes(
+      editor,
+      {...child.node, value: newValue},
+      {at: [block.index, child.index]},
+    )
+
     return true
   }
 
-  // Unset on text block children
-  if (
-    editor.isTextBlock(block) &&
-    patch.path[1] === 'children' &&
-    patch.path.length === 3
-  ) {
-    if (!child || !childPath) {
-      debug('Child not found')
+  if (child && Text.isText(child.node)) {
+    const propPath = patch.path.slice(3)
+    const propEntry = propPath.at(0)
+    const reservedProps = ['_key', '_type']
+
+    if (propEntry === undefined) {
       return false
     }
-    debug(`Unsetting child at path ${JSON.stringify(childPath)}`)
-    debugState(editor, 'before')
-    if (debugVerbose) {
-      debug(`Removing child at path ${JSON.stringify(childPath)}`)
+
+    if (typeof propEntry === 'string' && reservedProps.includes(propEntry)) {
+      return false
     }
-    Transforms.removeNodes(editor, {at: childPath})
-    debugState(editor, 'after')
+
+    if (typeof propEntry === 'string' && propEntry === 'text') {
+      editor.apply({
+        type: 'remove_text',
+        path: [block.index, child.index],
+        offset: 0,
+        text: child.node.text,
+      })
+
+      return true
+    }
+
+    const newNode = applyAll(child.node, [
+      {
+        ...patch,
+        path: propPath,
+      },
+    ])
+
+    const removedProperties = Object.keys(child.node).filter(
+      (property) => newNode[property] === undefined,
+    )
+
+    Transforms.unsetNodes(editor, removedProperties, {
+      at: [block.index, child.index],
+    })
+
     return true
   }
-  return false
-}
 
-function isKeyedSegment(segment: PathSegment): segment is KeyedSegment {
-  return typeof segment === 'object' && '_key' in segment
-}
+  if (!child) {
+    if ('value' in block.node) {
+      const newVal = applyAll(block.node.value, [
+        {
+          ...patch,
+          path: patch.path.slice(1),
+        },
+      ])
 
-function debugState(
-  editor: Pick<
-    PortableTextSlateEditor,
-    'children' | 'isTextBlock' | 'apply' | 'selection'
-  >,
-  stateName: string,
-) {
-  if (!debugVerbose) {
-    return
+      Transforms.setNodes(
+        editor,
+        {...block.node, value: newVal},
+        {at: [block.index]},
+      )
+
+      return true
+    }
+
+    return false
   }
 
-  debug(`Children ${stateName}:`, JSON.stringify(editor.children, null, 2))
-  debug(`Selection ${stateName}: `, JSON.stringify(editor.selection, null, 2))
+  return false
 }
 
-function findBlockFromPath(
-  editor: Pick<
-    PortableTextSlateEditor,
-    'children' | 'isTextBlock' | 'apply' | 'selection' | 'onChange'
-  >,
+function findBlock(
+  children: Descendant[],
   path: Path,
-): {block?: Descendant; path?: SlatePath} {
+): {node: Descendant; index: number} | undefined {
   let blockIndex = -1
-  const block = editor.children.find((node: Descendant, index: number) => {
+
+  const block = children.find((node: Descendant, index: number) => {
     const isMatch = isKeyedSegment(path[0])
       ? node._key === path[0]._key
       : index === path[0]
+
     if (isMatch) {
       blockIndex = index
     }
+
     return isMatch
   })
+
   if (!block) {
-    return {}
+    return undefined
   }
-  return {block, path: [blockIndex] as SlatePath}
+
+  return {node: block, index: blockIndex}
 }
 
-function findBlockAndChildFromPath(
-  editor: Pick<
-    PortableTextSlateEditor,
-    'children' | 'isTextBlock' | 'apply' | 'selection' | 'onChange'
-  >,
+function findBlockChild(
+  block: {node: Descendant; index: number},
   path: Path,
-): {
-  child?: Descendant
-  childPath?: SlatePath
-  block?: Descendant
-  blockPath?: SlatePath
-} {
-  const {block, path: blockPath} = findBlockFromPath(editor, path)
-  if (!(Element.isElement(block) && path[1] === 'children')) {
-    return {block, blockPath, child: undefined, childPath: undefined}
+): {node: Descendant; index: number} | undefined {
+  const blockNode = block.node
+
+  if (!Element.isElement(blockNode) || path[1] !== 'children') {
+    return undefined
   }
+
   let childIndex = -1
-  const child = block.children.find((node, index: number) => {
+
+  const child = blockNode.children.find((node, index: number) => {
     const isMatch = isKeyedSegment(path[2])
       ? node._key === path[2]._key
       : index === path[2]
+
     if (isMatch) {
       childIndex = index
     }
+
     return isMatch
   })
+
   if (!child) {
-    return {block, blockPath, child: undefined, childPath: undefined}
+    return undefined
   }
+
   return {
-    block,
-    child,
-    blockPath,
-    childPath: blockPath?.concat(childIndex) as SlatePath,
+    node: child,
+    index: childIndex,
   }
 }