@portabletext/editor 0.0.0

package/src/utils/operationToPatches.ts

@@ -0,0 +1,357 @@
+import {type Path, type PortableTextSpan, type PortableTextTextBlock} from '@sanity/types'
+import {get, isUndefined, omitBy} from 'lodash'
+import {
+  type Descendant,
+  type InsertNodeOperation,
+  type InsertTextOperation,
+  type MergeNodeOperation,
+  type MoveNodeOperation,
+  type RemoveNodeOperation,
+  type RemoveTextOperation,
+  type SetNodeOperation,
+  type SplitNodeOperation,
+  Text,
+} from 'slate'
+
+import {type PatchFunctions} from '../editor/plugins/createWithPatches'
+import {diffMatchPatch, insert, set, setIfMissing, unset} from '../patch/PatchEvent'
+import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../types/editor'
+import {type InsertPosition, type Patch} from '../types/patch'
+import {debugWithName} from './debug'
+import {fromSlateValue} from './values'
+
+const debug = debugWithName('operationToPatches')
+debug.enabled = false
+
+export function createOperationToPatches(types: PortableTextMemberSchemaTypes): PatchFunctions {
+  const textBlockName = types.block.name
+  function insertTextPatch(
+    editor: PortableTextSlateEditor,
+    operation: InsertTextOperation,
+    beforeValue: Descendant[],
+  ) {
+    if (debug.enabled) {
+      debug('Operation', JSON.stringify(operation, null, 2))
+    }
+    const block =
+      editor.isTextBlock(editor.children[operation.path[0]]) && editor.children[operation.path[0]]
+    if (!block) {
+      throw new Error('Could not find block')
+    }
+    const textChild =
+      editor.isTextBlock(block) &&
+      editor.isTextSpan(block.children[operation.path[1]]) &&
+      (block.children[operation.path[1]] as PortableTextSpan)
+    if (!textChild) {
+      throw new Error('Could not find child')
+    }
+    const path: Path = [{_key: block._key}, 'children', {_key: textChild._key}, 'text']
+    const prevBlock = beforeValue[operation.path[0]]
+    const prevChild = editor.isTextBlock(prevBlock) && prevBlock.children[operation.path[1]]
+    const prevText = editor.isTextSpan(prevChild) ? prevChild.text : ''
+    const patch = diffMatchPatch(prevText, textChild.text, path)
+    return patch.value.length ? [patch] : []
+  }
+
+  function removeTextPatch(
+    editor: PortableTextSlateEditor,
+    operation: RemoveTextOperation,
+    beforeValue: Descendant[],
+  ) {
+    const block = editor && editor.children[operation.path[0]]
+    if (!block) {
+      throw new Error('Could not find block')
+    }
+    const child = (editor.isTextBlock(block) && block.children[operation.path[1]]) || undefined
+    const textChild: PortableTextSpan | undefined = editor.isTextSpan(child) ? child : undefined
+    if (child && !textChild) {
+      throw new Error('Expected span')
+    }
+    if (!textChild) {
+      throw new Error('Could not find child')
+    }
+    const path: Path = [{_key: block._key}, 'children', {_key: textChild._key}, 'text']
+    const beforeBlock = beforeValue[operation.path[0]]
+    const prevTextChild = editor.isTextBlock(beforeBlock) && beforeBlock.children[operation.path[1]]
+    const prevText = editor.isTextSpan(prevTextChild) && prevTextChild.text
+    const patch = diffMatchPatch(prevText || '', textChild.text, path)
+    return patch.value ? [patch] : []
+  }
+
+  function setNodePatch(editor: PortableTextSlateEditor, operation: SetNodeOperation) {
+    if (operation.path.length === 1) {
+      const block = editor.children[operation.path[0]]
+      if (typeof block._key !== 'string') {
+        throw new Error('Expected block to have a _key')
+      }
+      const setNode = omitBy(
+        {...editor.children[operation.path[0]], ...operation.newProperties},
+        isUndefined,
+      ) as unknown as Descendant
+      return [set(fromSlateValue([setNode], textBlockName)[0], [{_key: block._key}])]
+    } else if (operation.path.length === 2) {
+      const block = editor.children[operation.path[0]]
+      if (editor.isTextBlock(block)) {
+        const child = block.children[operation.path[1]]
+        if (child) {
+          const blockKey = block._key
+          const childKey = child._key
+          const patches: Patch[] = []
+          const keys = Object.keys(operation.newProperties)
+          keys.forEach((keyName) => {
+            // Special case for setting _key on a child. We have to target it by index and not the _key.
+            if (keys.length === 1 && keyName === '_key') {
+              const val = get(operation.newProperties, keyName)
+              patches.push(
+                set(val, [{_key: blockKey}, 'children', block.children.indexOf(child), keyName]),
+              )
+            } else {
+              const val = get(operation.newProperties, keyName)
+              patches.push(set(val, [{_key: blockKey}, 'children', {_key: childKey}, keyName]))
+            }
+          })
+          return patches
+        }
+        throw new Error('Could not find a valid child')
+      }
+      throw new Error('Could not find a valid block')
+    } else {
+      throw new Error(`Unexpected path encountered: ${JSON.stringify(operation.path)}`)
+    }
+  }
+
+  function insertNodePatch(
+    editor: PortableTextSlateEditor,
+    operation: InsertNodeOperation,
+    beforeValue: Descendant[],
+  ): Patch[] {
+    const block = beforeValue[operation.path[0]]
+    const isTextBlock = editor.isTextBlock(block)
+    if (operation.path.length === 1) {
+      const position = operation.path[0] === 0 ? 'before' : 'after'
+      const beforeBlock = beforeValue[operation.path[0] - 1]
+      const targetKey = operation.path[0] === 0 ? block?._key : beforeBlock?._key
+      if (targetKey) {
+        return [
+          insert([fromSlateValue([operation.node as Descendant], textBlockName)[0]], position, [
+            {_key: targetKey},
+          ]),
+        ]
+      }
+      return [
+        setIfMissing(beforeValue, []),
+        insert([fromSlateValue([operation.node as Descendant], textBlockName)[0]], 'before', [
+          operation.path[0],
+        ]),
+      ]
+    } else if (isTextBlock && operation.path.length === 2 && editor.children[operation.path[0]]) {
+      const position =
+        block.children.length === 0 || !block.children[operation.path[1] - 1] ? 'before' : 'after'
+      const node = {...operation.node} as Descendant
+      if (!node._type && Text.isText(node)) {
+        node._type = 'span'
+        node.marks = []
+      }
+      const blk = fromSlateValue(
+        [
+          {
+            _key: 'bogus',
+            _type: textBlockName,
+            children: [node],
+          },
+        ],
+        textBlockName,
+      )[0] as PortableTextTextBlock
+      const child = blk.children[0]
+      return [
+        insert([child], position, [
+          {_key: block._key},
+          'children',
+          block.children.length <= 1 || !block.children[operation.path[1] - 1]
+            ? 0
+            : {_key: block.children[operation.path[1] - 1]._key},
+        ]),
+      ]
+    }
+    debug('Something was inserted into a void block. Not producing editor patches.')
+    return []
+  }
+
+  function splitNodePatch(
+    editor: PortableTextSlateEditor,
+    operation: SplitNodeOperation,
+    beforeValue: Descendant[],
+  ) {
+    const patches: Patch[] = []
+    const splitBlock = editor.children[operation.path[0]]
+    if (!editor.isTextBlock(splitBlock)) {
+      throw new Error(
+        `Block with path ${JSON.stringify(
+          operation.path[0],
+        )} is not a text block and can't be split`,
+      )
+    }
+    if (operation.path.length === 1) {
+      const oldBlock = beforeValue[operation.path[0]]
+      if (editor.isTextBlock(oldBlock)) {
+        const targetValue = fromSlateValue(
+          [editor.children[operation.path[0] + 1]],
+          textBlockName,
+        )[0]
+        if (targetValue) {
+          patches.push(insert([targetValue], 'after', [{_key: splitBlock._key}]))
+          const spansToUnset = oldBlock.children.slice(operation.position)
+          spansToUnset.forEach((span) => {
+            const path = [{_key: oldBlock._key}, 'children', {_key: span._key}]
+            patches.push(unset(path))
+          })
+        }
+      }
+      return patches
+    }
+    if (operation.path.length === 2) {
+      const splitSpan = splitBlock.children[operation.path[1]]
+      if (editor.isTextSpan(splitSpan)) {
+        const targetSpans = (
+          fromSlateValue(
+            [
+              {
+                ...splitBlock,
+                children: splitBlock.children.slice(operation.path[1] + 1, operation.path[1] + 2),
+              } as Descendant,
+            ],
+            textBlockName,
+          )[0] as PortableTextTextBlock
+        ).children
+
+        patches.push(
+          insert(targetSpans, 'after', [
+            {_key: splitBlock._key},
+            'children',
+            {_key: splitSpan._key},
+          ]),
+        )
+        patches.push(
+          set(splitSpan.text, [
+            {_key: splitBlock._key},
+            'children',
+            {_key: splitSpan._key},
+            'text',
+          ]),
+        )
+      }
+      return patches
+    }
+    return patches
+  }
+
+  function removeNodePatch(
+    editor: PortableTextSlateEditor,
+    operation: RemoveNodeOperation,
+    beforeValue: Descendant[],
+  ) {
+    const block = beforeValue[operation.path[0]]
+    if (operation.path.length === 1) {
+      // Remove a single block
+      if (block && block._key) {
+        return [unset([{_key: block._key}])]
+      }
+      throw new Error('Block not found')
+    } else if (editor.isTextBlock(block) && operation.path.length === 2) {
+      const spanToRemove =
+        editor.isTextBlock(block) && block.children && block.children[operation.path[1]]
+      if (spanToRemove) {
+        return [unset([{_key: block._key}, 'children', {_key: spanToRemove._key}])]
+      }
+      debug('Span not found in editor trying to remove node')
+      return []
+    } else {
+      debug('Not creating patch inside object block')
+      return []
+    }
+  }
+
+  function mergeNodePatch(
+    editor: PortableTextSlateEditor,
+    operation: MergeNodeOperation,
+    beforeValue: Descendant[],
+  ) {
+    const patches: Patch[] = []
+
+    const block = beforeValue[operation.path[0]]
+    const targetBlock = editor.children[operation.path[0]]
+
+    if (operation.path.length === 1) {
+      if (block?._key) {
+        const newBlock = fromSlateValue([editor.children[operation.path[0] - 1]], textBlockName)[0]
+        patches.push(set(newBlock, [{_key: newBlock._key}]))
+        patches.push(unset([{_key: block._key}]))
+      } else {
+        throw new Error('Target key not found!')
+      }
+    } else if (operation.path.length === 2 && editor.isTextBlock(targetBlock)) {
+      const mergedSpan =
+        (editor.isTextBlock(block) && block.children[operation.path[1]]) || undefined
+      const targetSpan = targetBlock.children[operation.path[1] - 1]
+      if (editor.isTextSpan(targetSpan)) {
+        // Set the merged span with it's new value
+        patches.push(
+          set(targetSpan.text, [{_key: block._key}, 'children', {_key: targetSpan._key}, 'text']),
+        )
+        if (mergedSpan) {
+          patches.push(unset([{_key: block._key}, 'children', {_key: mergedSpan._key}]))
+        }
+      }
+    } else {
+      debug("Void nodes can't be merged, not creating any patches")
+    }
+    return patches
+  }
+
+  function moveNodePatch(
+    editor: PortableTextSlateEditor,
+    operation: MoveNodeOperation,
+    beforeValue: Descendant[],
+  ) {
+    const patches: Patch[] = []
+    const block = beforeValue[operation.path[0]]
+    const targetBlock = beforeValue[operation.newPath[0]]
+    if (operation.path.length === 1) {
+      const position: InsertPosition = operation.path[0] > operation.newPath[0] ? 'before' : 'after'
+      patches.push(unset([{_key: block._key}]))
+      patches.push(
+        insert([fromSlateValue([block], textBlockName)[0]], position, [{_key: targetBlock._key}]),
+      )
+    } else if (
+      operation.path.length === 2 &&
+      editor.isTextBlock(block) &&
+      editor.isTextBlock(targetBlock)
+    ) {
+      const child = block.children[operation.path[1]]
+      const targetChild = targetBlock.children[operation.newPath[1]]
+      const position = operation.newPath[1] === targetBlock.children.length ? 'after' : 'before'
+      const childToInsert = (fromSlateValue([block], textBlockName)[0] as PortableTextTextBlock)
+        .children[operation.path[1]]
+      patches.push(unset([{_key: block._key}, 'children', {_key: child._key}]))
+      patches.push(
+        insert([childToInsert], position, [
+          {_key: targetBlock._key},
+          'children',
+          {_key: targetChild._key},
+        ]),
+      )
+    }
+    return patches
+  }
+
+  return {
+    insertNodePatch,
+    insertTextPatch,
+    mergeNodePatch,
+    moveNodePatch,
+    removeNodePatch,
+    removeTextPatch,
+    setNodePatch,
+    splitNodePatch,
+  }
+}

package/src/utils/patches.ts

@@ -0,0 +1,36 @@
+import {isEqual} from 'lodash'
+
+import {type Patch} from '../types/patch'
+
+/**
+ * Try to compact a set of patches
+ *
+ */
+export function compactPatches(patches: Patch[]) {
+  // If the last patch is unsetting everything, just do that
+  const lastPatch = patches.slice(-1)[0]
+  if (lastPatch && lastPatch.type === 'unset' && lastPatch.path.length === 0) {
+    return [lastPatch]
+  }
+  let finalPatches = patches
+  // Run through the patches and remove any redundant ones.
+  finalPatches = finalPatches.filter((patch, index) => {
+    if (!patch) {
+      return false
+    }
+    const nextPatch = finalPatches[index + 1]
+    if (
+      nextPatch &&
+      nextPatch.type === 'set' &&
+      patch.type === 'set' &&
+      isEqual(patch.path, nextPatch.path)
+    ) {
+      return false
+    }
+    return true
+  })
+  if (finalPatches.length !== patches.length) {
+    return finalPatches
+  }
+  return patches
+}

package/src/utils/paths.ts

@@ -0,0 +1,60 @@
+import {isKeySegment, type Path} from '@sanity/types'
+import {isEqual} from 'lodash'
+import {type Descendant, Editor, Element, type Path as SlatePath, type Point} from 'slate'
+
+import {type EditorSelectionPoint, type PortableTextMemberSchemaTypes} from '../types/editor'
+import {type ObjectWithKeyAndType} from './ranges'
+
+export function createKeyedPath(
+  point: Point,
+  value: ObjectWithKeyAndType[] | undefined,
+  types: PortableTextMemberSchemaTypes,
+): Path | null {
+  const blockPath = [point.path[0]]
+  if (!value) {
+    return null
+  }
+  const block = value[blockPath[0]]
+  if (!block) {
+    return null
+  }
+  const keyedBlockPath = [{_key: block._key}]
+  if (block._type !== types.block.name) {
+    return keyedBlockPath as Path
+  }
+  let keyedChildPath
+  const childPath = point.path.slice(0, 2)
+  const child = Array.isArray(block.children) && block.children[childPath[1]]
+  if (child) {
+    keyedChildPath = ['children', {_key: child._key}]
+  }
+  return (keyedChildPath ? [...keyedBlockPath, ...keyedChildPath] : keyedBlockPath) as Path
+}
+
+export function createArrayedPath(point: EditorSelectionPoint, editor: Editor): SlatePath {
+  if (!editor) {
+    return []
+  }
+  const [block, blockPath] = Array.from(
+    Editor.nodes(editor, {
+      at: [],
+      match: (n) => isKeySegment(point.path[0]) && (n as Descendant)._key === point.path[0]._key,
+    }),
+  )[0] || [undefined, undefined]
+  if (!block || !Element.isElement(block)) {
+    return []
+  }
+  if (editor.isVoid(block)) {
+    return [blockPath[0], 0]
+  }
+  const childPath = [point.path[2]]
+  const childIndex = block.children.findIndex((child) => isEqual([{_key: child._key}], childPath))
+  if (childIndex >= 0 && block.children[childIndex]) {
+    const child = block.children[childIndex]
+    if (Element.isElement(child) && editor.isVoid(child)) {
+      return blockPath.concat(childIndex).concat(0)
+    }
+    return blockPath.concat(childIndex)
+  }
+  return blockPath
+}

package/src/utils/ranges.ts

@@ -0,0 +1,77 @@
+/* eslint-disable complexity */
+import {type BaseRange, type Editor, type Operation, Point, Range} from 'slate'
+
+import {
+  type EditorSelection,
+  type EditorSelectionPoint,
+  type PortableTextMemberSchemaTypes,
+} from '../types/editor'
+import {createArrayedPath, createKeyedPath} from './paths'
+
+export interface ObjectWithKeyAndType {
+  _key: string
+  _type: string
+  children?: ObjectWithKeyAndType[]
+}
+
+export function toPortableTextRange(
+  value: ObjectWithKeyAndType[] | undefined,
+  range: BaseRange | Partial<BaseRange> | null,
+  types: PortableTextMemberSchemaTypes,
+): EditorSelection {
+  if (!range) {
+    return null
+  }
+  let anchor: EditorSelectionPoint | null = null
+  let focus: EditorSelectionPoint | null = null
+  const anchorPath = range.anchor && createKeyedPath(range.anchor, value, types)
+  if (anchorPath && range.anchor) {
+    anchor = {
+      path: anchorPath,
+      offset: range.anchor.offset,
+    }
+  }
+  const focusPath = range.focus && createKeyedPath(range.focus, value, types)
+  if (focusPath && range.focus) {
+    focus = {
+      path: focusPath,
+      offset: range.focus.offset,
+    }
+  }
+  const backward = Boolean(Range.isRange(range) ? Range.isBackward(range) : undefined)
+  return anchor && focus ? {anchor, focus, backward} : null
+}
+
+export function toSlateRange(selection: EditorSelection, editor: Editor): Range | null {
+  if (!selection || !editor) {
+    return null
+  }
+  const anchor = {
+    path: createArrayedPath(selection.anchor, editor),
+    offset: selection.anchor.offset,
+  }
+  const focus = {
+    path: createArrayedPath(selection.focus, editor),
+    offset: selection.focus.offset,
+  }
+  if (focus.path.length === 0 || anchor.path.length === 0) {
+    return null
+  }
+  const range = anchor && focus ? {anchor, focus} : null
+  return range
+}
+
+export function moveRangeByOperation(range: Range, operation: Operation): Range | null {
+  const anchor = Point.transform(range.anchor, operation)
+  const focus = Point.transform(range.focus, operation)
+
+  if (anchor === null || focus === null) {
+    return null
+  }
+
+  if (Point.equals(anchor, range.anchor) && Point.equals(focus, range.focus)) {
+    return range
+  }
+
+  return {anchor, focus}
+}

package/src/utils/schema.ts

@@ -0,0 +1,8 @@
+import {Schema} from '@sanity/schema'
+
+export function compileType(rawType: any) {
+  return Schema.compile({
+    name: 'blockTypeSchema',
+    types: [rawType],
+  }).get(rawType.name)
+}

package/src/utils/selection.ts

@@ -0,0 +1,65 @@
+import {type Path, type PortableTextBlock} from '@sanity/types'
+import {isEqual} from 'lodash'
+
+import {type EditorSelection, type EditorSelectionPoint} from '../types/editor'
+
+export function normalizePoint(
+  point: EditorSelectionPoint,
+  value: PortableTextBlock[],
+): EditorSelectionPoint | null {
+  if (!point || !value) {
+    return null
+  }
+  const newPath: Path = []
+  let newOffset: number = point.offset || 0
+  const blockKey =
+    typeof point.path[0] === 'object' && '_key' in point.path[0] && point.path[0]._key
+  const childKey =
+    typeof point.path[2] === 'object' && '_key' in point.path[2] && point.path[2]._key
+  const block: PortableTextBlock | undefined = value.find((blk) => blk._key === blockKey)
+  if (block) {
+    newPath.push({_key: block._key})
+  } else {
+    return null
+  }
+  if (block && point.path[1] === 'children') {
+    if (!block.children || (Array.isArray(block.children) && block.children.length === 0)) {
+      return null
+    }
+    const child =
+      Array.isArray(block.children) && block.children.find((cld) => cld._key === childKey)
+    if (child) {
+      newPath.push('children')
+      newPath.push({_key: child._key})
+      newOffset =
+        child.text && child.text.length >= point.offset
+          ? point.offset
+          : (child.text && child.text.length) || 0
+    } else {
+      return null
+    }
+  }
+  return {path: newPath, offset: newOffset}
+}
+
+export function normalizeSelection(
+  selection: EditorSelection,
+  value: PortableTextBlock[] | undefined,
+): EditorSelection | null {
+  if (!selection || !value || value.length === 0) {
+    return null
+  }
+  let newAnchor: EditorSelectionPoint | null = null
+  let newFocus: EditorSelectionPoint | null = null
+  const {anchor, focus} = selection
+  if (anchor && value.find((blk) => isEqual({_key: blk._key}, anchor.path[0]))) {
+    newAnchor = normalizePoint(anchor, value)
+  }
+  if (focus && value.find((blk) => isEqual({_key: blk._key}, focus.path[0]))) {
+    newFocus = normalizePoint(focus, value)
+  }
+  if (newAnchor && newFocus) {
+    return {anchor: newAnchor, focus: newFocus, backward: selection.backward}
+  }
+  return null
+}

package/src/utils/ucs2Indices.ts

@@ -0,0 +1,67 @@
+import {type Patch} from '@sanity/diff-match-patch'
+
+/**
+ * Takes a `patches` array as produced by diff-match-patch and adjusts the
+ * `start1` and `start2` properties so that they refer to UCS-2 index instead
+ * of a UTF-8 index.
+ *
+ * @param patches - The patches to adjust
+ * @param base - The base string to use for counting bytes
+ * @returns A new array of patches with adjusted indicies
+ * @beta
+ */
+export function adjustIndiciesToUcs2(patches: Patch[], base: string): Patch[] {
+  let byteOffset = 0
+  let idx = 0 // index into the input.
+
+  function advanceTo(target: number) {
+    for (; byteOffset < target; ) {
+      const codePoint = base.codePointAt(idx)
+      if (typeof codePoint === 'undefined') {
+        // Reached the end of the base string - the indicies won't be correct,
+        // but we also cannot advance any further to find a closer index.
+        return idx
+      }
+
+      byteOffset += utf8len(codePoint)
+
+      // This is encoded as a surrogate pair.
+      if (codePoint > 0xffff) {
+        idx += 2
+      } else {
+        idx += 1
+      }
+    }
+
+    // Theoretically, we should have reached target - however, due to differences in
+    // `base` from the string that the patch was originally based upon, occurences
+    // _can_ happen where we go beyond the target due to surrogate pairs or similar.
+    // In the PTE, this is okayish - best effort matching is good enough.
+    return idx
+  }
+
+  const adjusted: Patch[] = []
+  for (const patch of patches) {
+    adjusted.push({
+      diffs: patch.diffs.map((diff) => [...diff]),
+      start1: advanceTo(patch.start1),
+      start2: advanceTo(patch.start2),
+      utf8Start1: patch.utf8Start1,
+      utf8Start2: patch.utf8Start2,
+      length1: patch.length1,
+      length2: patch.length2,
+      utf8Length1: patch.utf8Length1,
+      utf8Length2: patch.utf8Length2,
+    })
+  }
+
+  return adjusted
+}
+
+function utf8len(codePoint: number): 1 | 2 | 3 | 4 {
+  // See table at https://en.wikipedia.org/wiki/UTF-8
+  if (codePoint <= 0x007f) return 1
+  if (codePoint <= 0x07ff) return 2
+  if (codePoint <= 0xffff) return 3
+  return 4
+}