@portabletext/editor 3.2.5 → 3.3.0

package/src/internal-utils/apply-operation-to-portable-text.ts

@@ -1,5 +1,4 @@
 import type {PortableTextBlock} from '@sanity/types'
-import {createDraft, finishDraft, type WritableDraft} from 'immer'
 import {Element, Path, type Node, type Operation} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorContext} from '../editor/editor-snapshot'
@@ -14,34 +13,37 @@ import {
   isPartialSpanNode,
   isSpanNode,
   isTextBlockNode,
-  type PortableTextNode,
+  type EditorNode,
+  type ObjectNode,
   type SpanNode,
   type TextBlockNode,
 } from './portable-text-node'
 
 export function applyOperationToPortableText(
-  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
+  context: Pick<EditorContext, 'schema'>,
   value: Array<PortableTextBlock>,
   operation: OmitFromUnion<Operation, 'type', 'set_selection'>,
-) {
-  const draft = createDraft({children: value})
+): Array<PortableTextBlock> {
+  const root = {children: value} as EditorNode<EditorSchema>
 
   try {
-    applyOperationToPortableTextDraft(context, draft, operation)
+    const newRoot = applyOperationToPortableTextImmutable(
+      context,
+      root,
+      operation,
+    )
+    return newRoot.children as Array<PortableTextBlock>
   } catch (e) {
     console.error(e)
+    return value
   }
-
-  return finishDraft(draft).children
 }
 
-function applyOperationToPortableTextDraft(
-  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
-  root: WritableDraft<{
-    children: Array<PortableTextBlock>
-  }>,
+function applyOperationToPortableTextImmutable(
+  context: Pick<EditorContext, 'schema'>,
+  root: EditorNode<EditorSchema>,
   operation: OmitFromUnion<Operation, 'type', 'set_selection'>,
-) {
+): EditorNode<EditorSchema> {
   switch (operation.type) {
     case 'insert_node': {
       const {path, node: insertedNode} = operation
@@ -49,11 +51,11 @@ function applyOperationToPortableTextDraft(
       const index = path[path.length - 1]
 
       if (!parent) {
-        break
+        return root
       }
 
       if (index > parent.children.length) {
-        break
+        return root
       }
 
       if (path.length === 1) {
@@ -61,8 +63,7 @@ function applyOperationToPortableTextDraft(
 
         if (isTextBlockNode(context, insertedNode)) {
           // Text blocks can be inserted as is
-
-          parent.children.splice(index, 0, {
+          const newBlock = {
             ...insertedNode,
             children: insertedNode.children.map((child) => {
               if ('__inline' in child) {
@@ -79,73 +80,88 @@ function applyOperationToPortableTextDraft(
 
               return child
             }),
-          })
+          }
 
-          break
+          return {
+            ...root,
+            children: insertChildren(root.children, index, newBlock),
+          }
         }
 
         if (Element.isElement(insertedNode) && !('__inline' in insertedNode)) {
           // Void blocks have to have their `value` spread onto the block
-
-          parent.children.splice(index, 0, {
+          const newBlock = {
             _key: insertedNode._key,
             _type: insertedNode._type,
             ...('value' in insertedNode &&
             typeof insertedNode.value === 'object'
               ? insertedNode.value
               : {}),
-          })
-          break
+          }
+
+          return {
+            ...root,
+            children: insertChildren(root.children, index, newBlock),
+          }
         }
       }
 
       if (path.length === 2) {
         // Inserting children into blocks
+        const blockIndex = path[0]
 
         if (!isTextBlockNode(context, parent)) {
           // Only text blocks can have children
-          break
+          return root
         }
 
+        let newChild: SpanNode<EditorSchema> | ObjectNode | undefined
+
         if (isPartialSpanNode(insertedNode)) {
           // Text nodes can be inserted as is
-
-          parent.children.splice(index, 0, insertedNode)
-          break
-        }
-
-        if ('__inline' in insertedNode) {
+          newChild = insertedNode
+        } else if ('__inline' in insertedNode) {
           // Void children have to have their `value` spread onto the block
-
-          parent.children.splice(index, 0, {
+          newChild = {
             _key: insertedNode._key,
             _type: insertedNode._type,
             ...('value' in insertedNode &&
             typeof insertedNode.value === 'object'
               ? insertedNode.value
               : {}),
-          })
-          break
+          }
+        } else {
+          return root
         }
+
+        return updateTextBlockAtIndex(context, root, blockIndex, (block) => ({
+          ...block,
+          children: insertChildren(block.children, index, newChild),
+        }))
       }
 
-      break
+      return root
     }
 
     case 'insert_text': {
       const {path, offset, text} = operation
-      if (text.length === 0) break
-      const span = getSpan(context, root, path)
+      if (text.length === 0) return root
 
+      const span = getSpan(context, root, path)
       if (!span) {
-        break
+        return root
       }
 
+      const blockIndex = path[0]
+      const childIndex = path[1]
       const before = span.text.slice(0, offset)
       const after = span.text.slice(offset)
-      span.text = before + text + after
+      const newSpan = {...span, text: before + text + after}
 
-      break
+      return updateTextBlockAtIndex(context, root, blockIndex, (block) => ({
+        ...block,
+        children: replaceChild(block.children, childIndex, newSpan),
+      }))
     }
 
     case 'merge_node': {
@@ -156,32 +172,50 @@ function applyOperationToPortableTextDraft(
       const parent = getParent(context, root, path)
 
       if (!node || !prev || !parent) {
-        break
+        return root
       }
 
       const index = path[path.length - 1]
 
       if (isPartialSpanNode(node) && isPartialSpanNode(prev)) {
-        prev.text += node.text
-      } else if (
-        isTextBlockNode(context, node) &&
-        isTextBlockNode(context, prev)
-      ) {
-        prev.children.push(...node.children)
-      } else {
-        break
+        // Merging spans
+        const blockIndex = path[0]
+        const newPrev = {...prev, text: prev.text + node.text}
+
+        return updateTextBlockAtIndex(context, root, blockIndex, (block) => {
+          const newChildren = replaceChild(
+            block.children,
+            index - 1,
+            newPrev as never,
+          )
+          return {
+            ...block,
+            children: removeChildren(newChildren, index),
+          }
+        })
       }
 
-      parent.children.splice(index, 1)
+      if (isTextBlockNode(context, node) && isTextBlockNode(context, prev)) {
+        // Merging blocks
+        const newPrev = {
+          ...prev,
+          children: [...prev.children, ...node.children],
+        }
+        const newChildren = replaceChild(root.children, index - 1, newPrev)
+        return {
+          ...root,
+          children: removeChildren(newChildren, index),
+        }
+      }
 
-      break
+      return root
     }
 
     case 'move_node': {
       const {path, newPath} = operation
 
       if (Path.isAncestor(path, newPath)) {
-        break
+        return root
       }
 
       const node = getNode(context, root, path)
@@ -189,7 +223,32 @@ function applyOperationToPortableTextDraft(
       const index = path[path.length - 1]
 
       if (!node || !parent) {
-        break
+        return root
+      }
+
+      // First, remove the node from its current position
+      let newRoot: EditorNode<EditorSchema>
+
+      if (path.length === 1) {
+        // Removing block from root
+        newRoot = {
+          ...root,
+          children: removeChildren(root.children, index),
+        }
+      } else if (path.length === 2) {
+        // Removing child from block
+        const blockIndex = path[0]
+        newRoot = updateTextBlockAtIndex(
+          context,
+          root,
+          blockIndex,
+          (block) => ({
+            ...block,
+            children: removeChildren(block.children, index),
+          }),
+        )
+      } else {
+        return root
       }
 
       // This is tricky, but since the `path` and `newPath` both refer to
@@ -198,55 +257,92 @@ function applyOperationToPortableTextDraft(
       // of date. So instead of using the `op.newPath` directly, we
       // transform `op.path` to ascertain what the `newPath` would be after
       // the operation was applied.
-      parent.children.splice(index, 1)
       const truePath = Path.transform(path, operation)!
-      const newParent = getNode(context, root, Path.parent(truePath))
       const newIndex = truePath[truePath.length - 1]
 
-      if (!newParent) {
-        break
+      if (truePath.length === 1) {
+        // Inserting block at root
+        return {
+          ...newRoot,
+          children: insertChildren(newRoot.children, newIndex, node as never),
+        }
       }
 
-      if (!('children' in newParent)) {
-        break
-      }
+      if (truePath.length === 2) {
+        // Inserting child into block
+        const newBlockIndex = truePath[0]
+        const newParent = newRoot.children[newBlockIndex]
 
-      if (!Array.isArray(newParent.children)) {
-        break
-      }
+        if (!newParent || !isTextBlockNode(context, newParent)) {
+          return root
+        }
 
-      newParent.children.splice(newIndex, 0, node)
+        return updateTextBlockAtIndex(
+          context,
+          newRoot,
+          newBlockIndex,
+          (block) => ({
+            ...block,
+            children: insertChildren(block.children, newIndex, node as never),
+          }),
+        )
+      }
 
-      break
+      return root
     }
 
     case 'remove_node': {
       const {path} = operation
       const index = path[path.length - 1]
       const parent = getParent(context, root, path)
-      parent?.children.splice(index, 1)
 
-      break
+      if (!parent) {
+        return root
+      }
+
+      if (path.length === 1) {
+        // Removing block from root
+        return {
+          ...root,
+          children: removeChildren(root.children, index),
+        }
+      }
+
+      if (path.length === 2) {
+        // Removing child from block
+        const blockIndex = path[0]
+        return updateTextBlockAtIndex(context, root, blockIndex, (block) => ({
+          ...block,
+          children: removeChildren(block.children, index),
+        }))
+      }
+
+      return root
     }
 
     case 'remove_text': {
       const {path, offset, text} = operation
 
       if (text.length === 0) {
-        break
+        return root
       }
 
       const span = getSpan(context, root, path)
 
       if (!span) {
-        break
+        return root
       }
 
+      const blockIndex = path[0]
+      const childIndex = path[1]
       const before = span.text.slice(0, offset)
       const after = span.text.slice(offset + text.length)
-      span.text = before + after
+      const newSpan = {...span, text: before + after}
 
-      break
+      return updateTextBlockAtIndex(context, root, blockIndex, (block) => ({
+        ...block,
+        children: replaceChild(block.children, childIndex, newSpan as never),
+      }))
     }
 
     case 'set_node': {
@@ -255,11 +351,11 @@ function applyOperationToPortableTextDraft(
       const node = getNode(context, root, path)
 
       if (!node) {
-        break
+        return root
       }
 
       if (isEditorNode(node)) {
-        break
+        return root
       }
 
       if (isObjectNode(context, node)) {
@@ -274,6 +370,8 @@ function applyOperationToPortableTextDraft(
             : {}
         ) as Partial<Node>
 
+        const newNode = {...node}
+
         for (const key in newProperties) {
           if (key === 'value') {
             continue
@@ -282,9 +380,9 @@ function applyOperationToPortableTextDraft(
           const value = newProperties[key as keyof Partial<Node>]
 
           if (value == null) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
           } else {
-            node[<keyof PortableTextNode<EditorSchema>>key] = value
+            newNode[key] = value
           }
         }
 
@@ -294,7 +392,7 @@ function applyOperationToPortableTextDraft(
           }
 
           if (!newProperties.hasOwnProperty(key)) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
           }
         }
 
@@ -302,134 +400,207 @@ function applyOperationToPortableTextDraft(
           const value = valueAfter[key as keyof Partial<Node>]
 
           if (value == null) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
           } else {
-            node[<keyof PortableTextNode<EditorSchema>>key] = value
+            newNode[key] = value
           }
         }
 
         for (const key in valueBefore) {
           if (!valueAfter.hasOwnProperty(key)) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
+          }
+        }
+
+        if (path.length === 1) {
+          return {
+            ...root,
+            children: replaceChild(root.children, path[0], newNode),
           }
         }
 
-        break
+        if (path.length === 2) {
+          return updateTextBlockAtIndex(context, root, path[0], (block) => ({
+            ...block,
+            children: replaceChild(block.children, path[1], newNode),
+          }))
+        }
+
+        return root
       }
 
       if (isTextBlockNode(context, node)) {
+        const newNode = {...node}
+
         for (const key in newProperties) {
           if (key === 'children' || key === 'text') {
-            break
+            continue
           }
 
           const value = newProperties[key as keyof Partial<Node>]
 
           if (value == null) {
-            delete node[<keyof Partial<Node>>key]
+            delete newNode[key]
           } else {
-            node[<keyof Partial<Node>>key] = value
+            newNode[key] = value
           }
         }
 
         // properties that were previously defined, but are now missing, must be deleted
         for (const key in properties) {
           if (!newProperties.hasOwnProperty(key)) {
-            delete node[<keyof Partial<Node>>key]
+            delete newNode[key]
           }
         }
 
-        break
+        return {
+          ...root,
+          children: replaceChild(root.children, path[0], newNode),
+        }
       }
 
       if (isPartialSpanNode(node)) {
+        const newNode = {...node}
+
         for (const key in newProperties) {
           if (key === 'text') {
-            break
+            continue
           }
 
           const value = newProperties[key as keyof Partial<Node>]
 
           if (value == null) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
           } else {
-            node[<keyof PortableTextNode<EditorSchema>>key] = value
+            newNode[key] = value
           }
         }
 
         // properties that were previously defined, but are now missing, must be deleted
         for (const key in properties) {
           if (!newProperties.hasOwnProperty(key)) {
-            delete node[<keyof PortableTextNode<EditorSchema>>key]
+            delete newNode[key]
           }
         }
 
-        break
+        return updateTextBlockAtIndex(context, root, path[0], (block) => ({
+          ...block,
+          children: replaceChild(block.children, path[1], newNode),
+        }))
       }
 
-      break
+      return root
     }
 
     case 'split_node': {
       const {path, position, properties} = operation
 
       if (path.length === 0) {
-        break
+        return root
       }
 
       const parent = getParent(context, root, path)
       const index = path[path.length - 1]
 
       if (!parent) {
-        break
+        return root
       }
 
       if (isEditorNode(parent)) {
         const block = getBlock(root, path)
 
         if (!block || !isTextBlockNode(context, block)) {
-          break
+          return root
         }
 
         const before = block.children.slice(0, position)
         const after = block.children.slice(position)
-        block.children = before
+        const updatedTextBlockNode = {...block, children: before}
 
         // _key is deliberately left out
         const newTextBlockNode = {
           ...properties,
           children: after,
           _type: context.schema.block.name,
-        } as unknown as TextBlockNode<EditorSchema>
-
-        parent.children.splice(index + 1, 0, newTextBlockNode)
+        }
 
-        break
+        return {
+          ...root,
+          children: insertChildren(
+            replaceChild(root.children, index, updatedTextBlockNode),
+            index + 1,
+            newTextBlockNode,
+          ),
+        }
       }
 
       if (isTextBlockNode(context, parent)) {
         const node = getNode(context, root, path)
 
         if (!node || !isSpanNode(context, node)) {
-          break
+          return root
         }
 
+        const blockIndex = path[0]
         const before = node.text.slice(0, position)
         const after = node.text.slice(position)
-        node.text = before
+        const updatedSpanNode = {...node, text: before}
 
         // _key is deliberately left out
         const newSpanNode = {
           ...properties,
           text: after,
-        } as unknown as SpanNode<EditorSchema>
+        }
 
-        parent.children.splice(index + 1, 0, newSpanNode)
+        return updateTextBlockAtIndex(context, root, blockIndex, (block) => {
+          return {
+            ...block,
+            children: insertChildren(
+              replaceChild(block.children, index, updatedSpanNode),
+              index + 1,
+              newSpanNode,
+            ),
+          }
+        })
       }
 
-      break
+      return root
     }
   }
+}
+
+function insertChildren<T>(children: T[], index: number, ...nodes: T[]): T[] {
+  return [...children.slice(0, index), ...nodes, ...children.slice(index)]
+}
+
+function removeChildren<T>(children: T[], index: number, count = 1): T[] {
+  return [...children.slice(0, index), ...children.slice(index + count)]
+}
+
+function replaceChild<T>(children: T[], index: number, newChild: T): T[] {
+  return [...children.slice(0, index), newChild, ...children.slice(index + 1)]
+}
+
+function updateTextBlockAtIndex(
+  context: Pick<EditorContext, 'schema'>,
+  root: EditorNode<EditorSchema>,
+  blockIndex: number,
+  updater: (block: TextBlockNode<EditorSchema>) => TextBlockNode<EditorSchema>,
+): EditorNode<EditorSchema> {
+  const block = root.children.at(blockIndex)
+
+  if (!block) {
+    return root
+  }
 
-  return root
+  if (!isTextBlockNode(context, block)) {
+    return root
+  }
+
+  const newBlock = updater(block)
+
+  return {
+    ...root,
+    children: replaceChild(root.children, blockIndex, newBlock),
+  }
 }

package/src/internal-utils/portable-text-node.ts

@@ -31,7 +31,7 @@ export function isEditorNode<TEditorSchema extends EditorSchema>(
 //////////
 
 export type TextBlockNode<TEditorSchema extends EditorSchema> = {
-  _key: string
+  _key?: string
   _type: TEditorSchema['block']['name']
   children: Array<SpanNode<TEditorSchema> | ObjectNode>
   [other: string]: unknown
@@ -47,7 +47,7 @@ export function isTextBlockNode<TEditorSchema extends EditorSchema>(
 //////////
 
 export type SpanNode<TEditorSchema extends EditorSchema> = {
-  _key: string
+  _key?: string
   _type?: TEditorSchema['span']['name']
   text: string
   [other: string]: unknown