@portabletext/editor 2.21.2 → 3.0.0

package/src/history/history.preserving-keys.test.tsx

@@ -0,0 +1,112 @@
+import {createTestKeyGenerator} from '@portabletext/test'
+import {describe, expect, test, vi} from 'vitest'
+import {createTestEditor} from '../test/vitest'
+
+describe('Feature: History (Preserving Keys)', () => {
+  const keyGenerator = createTestKeyGenerator()
+  const blockAKey = keyGenerator()
+  const spanAKey = keyGenerator()
+  const blockBKey = keyGenerator()
+  const spanBKey = keyGenerator()
+
+  const initialValue = [
+    {
+      _key: blockAKey,
+      _type: 'block',
+      children: [{_key: spanAKey, _type: 'span', marks: [], text: 'Block A'}],
+      markDefs: [],
+      style: 'normal',
+    },
+    {
+      _key: blockBKey,
+      _type: 'block',
+      children: [{_key: spanBKey, _type: 'span', marks: [], text: 'Block B'}],
+      markDefs: [],
+      style: 'normal',
+    },
+  ]
+  const initialSelection = {
+    focus: {path: [{_key: blockBKey}, 'children', {_key: spanBKey}], offset: 7},
+    anchor: {
+      path: [{_key: blockBKey}, 'children', {_key: spanBKey}],
+      offset: 7,
+    },
+  }
+
+  test('Scenario: Preserving keys when undoing ', async () => {
+    const {editor} = await createTestEditor({
+      initialValue,
+    })
+
+    editor.send({
+      type: 'delete',
+      at: initialSelection,
+      direction: 'backward',
+      unit: 'block',
+    })
+
+    await vi.waitFor(() => {
+      expect(editor.getSnapshot().context.value).toEqual([initialValue.at(0)])
+    })
+
+    editor.send({
+      type: 'history.undo',
+    })
+
+    await vi.waitFor(() => {
+      expect(editor.getSnapshot().context.value).toEqual(initialValue)
+    })
+  })
+
+  test('Scenario: Preserving keys when redoing ', async () => {
+    const {editor} = await createTestEditor({
+      initialValue,
+    })
+
+    const blockCKey = keyGenerator()
+    const spanCKey = keyGenerator()
+    const blockC = {
+      _key: blockCKey,
+      _type: 'block',
+      children: [{_key: spanCKey, _type: 'span', marks: [], text: 'Block C'}],
+      markDefs: [],
+      style: 'normal',
+    }
+
+    editor.send({
+      type: 'insert.block',
+      block: blockC,
+      at: {
+        anchor: {path: [{_key: blockBKey}], offset: 0},
+        focus: {path: [{_key: blockBKey}], offset: 0},
+      },
+      placement: 'after',
+    })
+
+    await vi.waitFor(() => {
+      expect(editor.getSnapshot().context.value).toEqual([
+        ...initialValue,
+        blockC,
+      ])
+    })
+
+    editor.send({
+      type: 'history.undo',
+    })
+
+    await vi.waitFor(() => {
+      expect(editor.getSnapshot().context.value).toEqual(initialValue)
+    })
+
+    editor.send({
+      type: 'history.redo',
+    })
+
+    await vi.waitFor(() => {
+      expect(editor.getSnapshot().context.value).toEqual([
+        ...initialValue,
+        blockC,
+      ])
+    })
+  })
+})

package/src/history/remote-patches.ts

@@ -0,0 +1,20 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@portabletext/schema'
+import type {Editor} from 'slate'
+
+const REMOTE_PATCHES = new WeakMap<
+  Editor,
+  {
+    patch: Patch
+    time: Date
+    snapshot: PortableTextBlock[] | undefined
+    previousSnapshot: PortableTextBlock[] | undefined
+  }[]
+>()
+
+export const getRemotePatches = (editor: Editor) => {
+  if (!REMOTE_PATCHES.get(editor)) {
+    REMOTE_PATCHES.set(editor, [])
+  }
+  return REMOTE_PATCHES.get(editor) ?? []
+}

package/src/history/slate-plugin.history.ts

@@ -0,0 +1,146 @@
+/**
+ * This plugin will make the editor support undo/redo on the local state only.
+ * The undo/redo steps are rebased against incoming patches since the step occurred.
+ */
+
+import type {PortableTextBlock} from '@portabletext/schema'
+import type {Operation} from 'slate'
+import type {EditorActor} from '../editor/editor-machine'
+import {isChangingRemotely} from '../editor/withChanges'
+import {debugWithName} from '../internal-utils/debug'
+import {fromSlateValue} from '../internal-utils/values'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {getRemotePatches} from './remote-patches'
+import {isRedoing} from './slate-plugin.redoing'
+import {isUndoing} from './slate-plugin.undoing'
+import {isWithHistory, setWithHistory} from './slate-plugin.without-history'
+import {createUndoSteps, getCurrentUndoStepId} from './undo-step'
+
+const debug = debugWithName('plugin:history')
+
+const UNDO_STEP_LIMIT = 1000
+
+export function pluginHistory({
+  editorActor,
+  subscriptions,
+}: {
+  editorActor: EditorActor
+  subscriptions: Array<() => () => void>
+}): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
+  return (editor: PortableTextSlateEditor) => {
+    const remotePatches = getRemotePatches(editor)
+    let previousSnapshot: PortableTextBlock[] | undefined = fromSlateValue(
+      editor.children,
+      editorActor.getSnapshot().context.schema.block.name,
+    )
+    let previousUndoStepId = getCurrentUndoStepId(editor)
+
+    subscriptions.push(() => {
+      const subscription = editorActor.on('patches', ({patches, snapshot}) => {
+        let reset = false
+
+        for (const patch of patches) {
+          if (reset) {
+            continue
+          }
+
+          if (patch.origin === 'local') {
+            continue
+          }
+
+          if (patch.type === 'unset' && patch.path.length === 0) {
+            debug(
+              'Someone else cleared the content, resetting undo/redo history',
+            )
+
+            editor.history = {undos: [], redos: []}
+            remotePatches.splice(0, remotePatches.length)
+            setWithHistory(editor, true)
+            reset = true
+            return
+          }
+
+          remotePatches.push({
+            patch,
+            time: new Date(),
+            snapshot,
+            previousSnapshot,
+          })
+        }
+
+        previousSnapshot = snapshot
+      })
+
+      return () => {
+        subscription.unsubscribe()
+      }
+    })
+
+    editor.history = {undos: [], redos: []}
+
+    const {apply} = editor
+
+    editor.apply = (op: Operation) => {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
+        apply(op)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(op)
+        return
+      }
+
+      const withHistory = isWithHistory(editor)
+      const currentUndoStepId = getCurrentUndoStepId(editor)
+
+      if (!withHistory) {
+        // If we are bypassing saving undo steps, then we can just move along.
+
+        previousUndoStepId = currentUndoStepId
+
+        apply(op)
+
+        return
+      }
+
+      if (op.type !== 'set_selection') {
+        // Clear the repo steps if any actual changes are made
+        editor.history.redos = []
+      }
+
+      editor.history.undos = createUndoSteps({
+        steps: editor.history.undos,
+        op,
+        editor,
+        currentUndoStepId,
+        previousUndoStepId,
+      })
+
+      // Make sure we don't exceed the maximum number of undo steps we want
+      // to store.
+      while (editor.history.undos.length > UNDO_STEP_LIMIT) {
+        editor.history.undos.shift()
+      }
+
+      previousUndoStepId = currentUndoStepId
+
+      apply(op)
+    }
+
+    return editor
+  }
+}

package/src/history/slate-plugin.redoing.ts

@@ -0,0 +1,21 @@
+import type {Editor} from 'slate'
+
+const IS_REDOING: WeakMap<Editor, boolean | undefined> = new WeakMap()
+
+export function pluginRedoing(editor: Editor, fn: () => void) {
+  const prev = isRedoing(editor)
+
+  IS_REDOING.set(editor, true)
+
+  fn()
+
+  IS_REDOING.set(editor, prev)
+}
+
+export function isRedoing(editor: Editor) {
+  return IS_REDOING.get(editor) ?? false
+}
+
+export function setIsRedoing(editor: Editor, isRedoing: boolean) {
+  IS_REDOING.set(editor, isRedoing)
+}

package/src/history/slate-plugin.undoing.ts

@@ -0,0 +1,21 @@
+import type {Editor} from 'slate'
+
+const IS_UDOING: WeakMap<Editor, boolean | undefined> = new WeakMap()
+
+export function pluginUndoing(editor: Editor, fn: () => void) {
+  const prev = isUndoing(editor)
+
+  IS_UDOING.set(editor, true)
+
+  fn()
+
+  IS_UDOING.set(editor, prev)
+}
+
+export function isUndoing(editor: Editor) {
+  return IS_UDOING.get(editor) ?? false
+}
+
+export function setIsUndoing(editor: Editor, isUndoing: boolean) {
+  IS_UDOING.set(editor, isUndoing)
+}

package/src/history/slate-plugin.without-history.ts

@@ -0,0 +1,23 @@
+import type {Editor} from 'slate'
+
+const WITH_HISTORY = new WeakMap<Editor, boolean | undefined>()
+
+export function isWithHistory(editor: Editor): boolean {
+  const withHistory = WITH_HISTORY.get(editor)
+
+  return withHistory ?? true
+}
+
+export function pluginWithoutHistory(editor: Editor, fn: () => void): void {
+  const withHistory = isWithHistory(editor)
+
+  WITH_HISTORY.set(editor, false)
+
+  fn()
+
+  WITH_HISTORY.set(editor, withHistory)
+}
+
+export function setWithHistory(editor: Editor, withHistory: boolean): void {
+  WITH_HISTORY.set(editor, withHistory)
+}

package/src/history/transform-operation.ts

@@ -0,0 +1,245 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@portabletext/schema'
+import {
+  DIFF_DELETE,
+  DIFF_EQUAL,
+  DIFF_INSERT,
+  parsePatch,
+} from '@sanity/diff-match-patch'
+import {isEqual} from 'lodash'
+import type {Descendant, Operation} from 'slate'
+import {debugWithName} from '../internal-utils/debug'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+const debug = debugWithName('transformOperation')
+const debugVerbose = debug.enabled && false
+
+/**
+ * This will adjust the operation paths and offsets according to the
+ * remote patches by other editors since the step operations was performed.
+ */
+export function transformOperation(
+  editor: PortableTextSlateEditor,
+  patch: Patch,
+  operation: Operation,
+  snapshot: PortableTextBlock[] | undefined,
+  previousSnapshot: PortableTextBlock[] | undefined,
+): Operation[] {
+  if (debugVerbose) {
+    debug(
+      `Adjusting '${operation.type}' operation paths for '${patch.type}' patch`,
+    )
+    debug(`Operation ${JSON.stringify(operation)}`)
+    debug(`Patch ${JSON.stringify(patch)}`)
+  }
+
+  const transformedOperation = {...operation}
+
+  if (patch.type === 'insert' && patch.path.length === 1) {
+    const insertBlockIndex = (snapshot || []).findIndex((blk) =>
+      isEqual({_key: blk._key}, patch.path[0]),
+    )
+    debug(
+      `Adjusting block path (+${patch.items.length}) for '${transformedOperation.type}' operation and patch '${patch.type}'`,
+    )
+    return [
+      adjustBlockPath(
+        transformedOperation,
+        patch.items.length,
+        insertBlockIndex,
+      ),
+    ]
+  }
+
+  if (patch.type === 'unset' && patch.path.length === 1) {
+    const unsetBlockIndex = (previousSnapshot || []).findIndex((blk) =>
+      isEqual({_key: blk._key}, patch.path[0]),
+    )
+    // If this operation is targeting the same block that got removed, return empty
+    if (
+      'path' in transformedOperation &&
+      Array.isArray(transformedOperation.path) &&
+      transformedOperation.path[0] === unsetBlockIndex
+    ) {
+      debug('Skipping transformation that targeted removed block')
+      return []
+    }
+    if (debugVerbose) {
+      debug(`Selection ${JSON.stringify(editor.selection)}`)
+      debug(
+        `Adjusting block path (-1) for '${transformedOperation.type}' operation and patch '${patch.type}'`,
+      )
+    }
+    return [adjustBlockPath(transformedOperation, -1, unsetBlockIndex)]
+  }
+
+  // Someone reset the whole value
+  if (patch.type === 'unset' && patch.path.length === 0) {
+    debug(
+      `Adjusting selection for unset everything patch and ${operation.type} operation`,
+    )
+    return []
+  }
+
+  if (patch.type === 'diffMatchPatch') {
+    const operationTargetBlock = findOperationTargetBlock(
+      editor,
+      transformedOperation,
+    )
+    if (
+      !operationTargetBlock ||
+      !isEqual({_key: operationTargetBlock._key}, patch.path[0])
+    ) {
+      return [transformedOperation]
+    }
+    const diffPatches = parsePatch(patch.value)
+    diffPatches.forEach((diffPatch) => {
+      let adjustOffsetBy = 0
+      let changedOffset = diffPatch.utf8Start1
+      const {diffs} = diffPatch
+      diffs.forEach((diff, index) => {
+        const [diffType, text] = diff
+        if (diffType === DIFF_INSERT) {
+          adjustOffsetBy += text.length
+          changedOffset += text.length
+        } else if (diffType === DIFF_DELETE) {
+          adjustOffsetBy -= text.length
+          changedOffset -= text.length
+        } else if (diffType === DIFF_EQUAL) {
+          // Only up to the point where there are no other changes
+          if (!diffs.slice(index).every(([dType]) => dType === DIFF_EQUAL)) {
+            changedOffset += text.length
+          }
+        }
+      })
+      // Adjust accordingly if someone inserted text in the same node before us
+      if (transformedOperation.type === 'insert_text') {
+        if (changedOffset < transformedOperation.offset) {
+          transformedOperation.offset += adjustOffsetBy
+        }
+      }
+      // Adjust accordingly if someone removed text in the same node before us
+      if (transformedOperation.type === 'remove_text') {
+        if (
+          changedOffset <=
+          transformedOperation.offset - transformedOperation.text.length
+        ) {
+          transformedOperation.offset += adjustOffsetBy
+        }
+      }
+      // Adjust set_selection operation's points to new offset
+      if (transformedOperation.type === 'set_selection') {
+        const currentFocus = transformedOperation.properties?.focus
+          ? {...transformedOperation.properties.focus}
+          : undefined
+        const currentAnchor = transformedOperation?.properties?.anchor
+          ? {...transformedOperation.properties.anchor}
+          : undefined
+        const newFocus = transformedOperation?.newProperties?.focus
+          ? {...transformedOperation.newProperties.focus}
+          : undefined
+        const newAnchor = transformedOperation?.newProperties?.anchor
+          ? {...transformedOperation.newProperties.anchor}
+          : undefined
+        if ((currentFocus && currentAnchor) || (newFocus && newAnchor)) {
+          const points = [currentFocus, currentAnchor, newFocus, newAnchor]
+          points.forEach((point) => {
+            if (point && changedOffset < point.offset) {
+              point.offset += adjustOffsetBy
+            }
+          })
+          if (currentFocus && currentAnchor) {
+            transformedOperation.properties = {
+              focus: currentFocus,
+              anchor: currentAnchor,
+            }
+          }
+          if (newFocus && newAnchor) {
+            transformedOperation.newProperties = {
+              focus: newFocus,
+              anchor: newAnchor,
+            }
+          }
+        }
+      }
+    })
+    return [transformedOperation]
+  }
+  return [transformedOperation]
+}
+/**
+ * Adjust the block path for a operation
+ */
+function adjustBlockPath(
+  operation: Operation,
+  level: number,
+  blockIndex: number,
+): Operation {
+  const transformedOperation = {...operation}
+  if (
+    blockIndex >= 0 &&
+    transformedOperation.type !== 'set_selection' &&
+    Array.isArray(transformedOperation.path) &&
+    transformedOperation.path[0] >= blockIndex + level &&
+    transformedOperation.path[0] + level > -1
+  ) {
+    const newPath = [
+      transformedOperation.path[0] + level,
+      ...transformedOperation.path.slice(1),
+    ]
+    transformedOperation.path = newPath
+  }
+  if (transformedOperation.type === 'set_selection') {
+    const currentFocus = transformedOperation.properties?.focus
+      ? {...transformedOperation.properties.focus}
+      : undefined
+    const currentAnchor = transformedOperation?.properties?.anchor
+      ? {...transformedOperation.properties.anchor}
+      : undefined
+    const newFocus = transformedOperation?.newProperties?.focus
+      ? {...transformedOperation.newProperties.focus}
+      : undefined
+    const newAnchor = transformedOperation?.newProperties?.anchor
+      ? {...transformedOperation.newProperties.anchor}
+      : undefined
+    if ((currentFocus && currentAnchor) || (newFocus && newAnchor)) {
+      const points = [currentFocus, currentAnchor, newFocus, newAnchor]
+      points.forEach((point) => {
+        if (
+          point &&
+          point.path[0] >= blockIndex + level &&
+          point.path[0] + level > -1
+        ) {
+          point.path = [point.path[0] + level, ...point.path.slice(1)]
+        }
+      })
+      if (currentFocus && currentAnchor) {
+        transformedOperation.properties = {
+          focus: currentFocus,
+          anchor: currentAnchor,
+        }
+      }
+      if (newFocus && newAnchor) {
+        transformedOperation.newProperties = {
+          focus: newFocus,
+          anchor: newAnchor,
+        }
+      }
+    }
+  }
+  //   // Assign fresh point objects (we don't want to mutate the original ones)
+  return transformedOperation
+}
+
+function findOperationTargetBlock(
+  editor: PortableTextSlateEditor,
+  operation: Operation,
+): Descendant | undefined {
+  let block: Descendant | undefined
+  if (operation.type === 'set_selection' && editor.selection) {
+    block = editor.children[editor.selection.focus.path[0]]
+  } else if ('path' in operation) {
+    block = editor.children[operation.path[0]]
+  }
+  return block
+}