@portabletext/editor 2.21.2 → 3.0.0

package/src/history/undo-redo.test.tsx

@@ -0,0 +1,195 @@
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import {defineSchema} from '..'
+import {defineBehavior, forward, raise} from '../behaviors'
+import {BehaviorPlugin} from '../plugins/plugin.behavior'
+import {getFocusTextBlock, isSelectionExpanded} from '../selectors'
+import {parameterTypes} from '../test'
+import {createTestEditor, stepDefinitions, type Context} from '../test/vitest'
+import undoRedoFeature from './undo-redo.feature?raw'
+
+Feature({
+  featureText: undoRedoFeature,
+  stepDefinitions,
+  parameterTypes,
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        schemaDefinition: defineSchema({
+          annotations: [{name: 'link'}, {name: 'comment'}],
+        }),
+        children: (
+          <>
+            <ArrowTransformPlugin />
+            <CopyrightTransformPlugin />
+          </>
+        ),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+})
+
+/**
+ * Native behavior to transform `>` into `→`.
+ * Ony for testing purposes.
+ */
+function ArrowTransformPlugin() {
+  return (
+    <BehaviorPlugin
+      behaviors={[
+        defineBehavior({
+          on: 'insert.text',
+          guard: ({snapshot, event}) => {
+            if (event.text !== '>' || isSelectionExpanded(snapshot)) {
+              return false
+            }
+
+            const focusTextBlock = getFocusTextBlock(snapshot)
+
+            if (!focusTextBlock) {
+              return false
+            }
+
+            return {focusTextBlock}
+          },
+          actions: [
+            ({event}) => [forward(event)],
+            ({snapshot}, {focusTextBlock}) => [
+              raise({
+                type: 'select',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 0,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 2,
+                  },
+                },
+              }),
+              raise({
+                type: 'delete',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 0,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 2,
+                  },
+                },
+              }),
+              raise({
+                type: 'insert.child',
+                child: {
+                  _type: snapshot.context.schema.span.name,
+                  text: '→',
+                  marks: [],
+                },
+              }),
+              raise({
+                type: 'select',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 2,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 2,
+                  },
+                },
+              }),
+            ],
+          ],
+        }),
+      ]}
+    />
+  )
+}
+
+/**
+ * Native behavior to transform `(c)` into `©`.
+ * Ony for testing purposes.
+ */
+function CopyrightTransformPlugin() {
+  return (
+    <BehaviorPlugin
+      behaviors={[
+        defineBehavior({
+          on: 'insert.text',
+          guard: ({snapshot, event}) => {
+            if (event.text !== ')' || isSelectionExpanded(snapshot)) {
+              return false
+            }
+
+            const focusTextBlock = getFocusTextBlock(snapshot)
+
+            if (!focusTextBlock) {
+              return false
+            }
+
+            return {focusTextBlock}
+          },
+          actions: [
+            ({event}) => [forward(event)],
+            ({snapshot}, {focusTextBlock}) => [
+              raise({
+                type: 'select',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 0,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 3,
+                  },
+                },
+              }),
+              raise({
+                type: 'delete',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 0,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 3,
+                  },
+                },
+              }),
+              raise({
+                type: 'insert.child',
+                child: {
+                  _type: snapshot.context.schema.span.name,
+                  text: '©',
+                  marks: [],
+                },
+              }),
+              raise({
+                type: 'select',
+                at: {
+                  anchor: {
+                    path: focusTextBlock.path,
+                    offset: 3,
+                  },
+                  focus: {
+                    path: focusTextBlock.path,
+                    offset: 3,
+                  },
+                },
+              }),
+            ],
+          ],
+        }),
+      ]}
+    />
+  )
+}

package/src/history/undo-step.ts

@@ -0,0 +1,148 @@
+import {Path, type Editor, type Operation} from 'slate'
+import {isNormalizingNode} from '../editor/with-normalizing-node'
+import {defaultKeyGenerator} from '../utils/key-generator'
+
+const CURRENT_UNDO_STEP_ID: WeakMap<Editor, {undoStepId: string} | undefined> =
+  new WeakMap()
+
+export function getCurrentUndoStepId(editor: Editor) {
+  return CURRENT_UNDO_STEP_ID.get(editor)?.undoStepId
+}
+
+export function createUndoStepId(editor: Editor) {
+  CURRENT_UNDO_STEP_ID.set(editor, {
+    undoStepId: defaultKeyGenerator(),
+  })
+}
+
+export function clearUndoStepId(editor: Editor) {
+  CURRENT_UNDO_STEP_ID.set(editor, undefined)
+}
+
+type UndoStep = {
+  operations: Array<Operation>
+  timestamp: Date
+}
+
+export function createUndoSteps({
+  steps,
+  op,
+  editor,
+  currentUndoStepId,
+  previousUndoStepId,
+}: {
+  steps: Array<UndoStep>
+  op: Operation
+  editor: Editor
+  currentUndoStepId: string | undefined
+  previousUndoStepId: string | undefined
+}): Array<UndoStep> {
+  const lastStep = steps.at(-1)
+
+  if (!lastStep) {
+    return createNewStep(steps, op, editor)
+  }
+
+  if (editor.operations.length > 0) {
+    // The editor has operations in progress
+
+    if (currentUndoStepId === previousUndoStepId || isNormalizingNode(editor)) {
+      return mergeIntoLastStep(steps, lastStep, op)
+    }
+
+    return createNewStep(steps, op, editor)
+  }
+
+  if (
+    op.type === 'set_selection' &&
+    currentUndoStepId === undefined &&
+    previousUndoStepId !== undefined
+  ) {
+    // Selecting without undo step ID
+    return mergeIntoLastStep(steps, lastStep, op)
+  }
+
+  if (
+    op.type === 'set_selection' &&
+    currentUndoStepId !== undefined &&
+    previousUndoStepId !== undefined &&
+    previousUndoStepId !== currentUndoStepId
+  ) {
+    // Selecting with different undo step ID
+    return mergeIntoLastStep(steps, lastStep, op)
+  }
+
+  // Handle case when both IDs are undefined
+  if (currentUndoStepId === undefined && previousUndoStepId === undefined) {
+    if (op.type === 'set_selection') {
+      return mergeIntoLastStep(steps, lastStep, op)
+    }
+
+    const lastOp = lastStep.operations.at(-1)
+
+    if (
+      lastOp &&
+      op.type === 'insert_text' &&
+      lastOp.type === 'insert_text' &&
+      op.offset === lastOp.offset + lastOp.text.length &&
+      Path.equals(op.path, lastOp.path) &&
+      op.text !== ' '
+    ) {
+      return mergeIntoLastStep(steps, lastStep, op)
+    }
+
+    if (
+      lastOp &&
+      op.type === 'remove_text' &&
+      lastOp.type === 'remove_text' &&
+      op.offset + op.text.length === lastOp.offset &&
+      Path.equals(op.path, lastOp.path)
+    ) {
+      return mergeIntoLastStep(steps, lastStep, op)
+    }
+
+    return createNewStep(steps, op, editor)
+  }
+
+  return createNewStep(steps, op, editor)
+}
+
+function createNewStep(
+  steps: Array<UndoStep>,
+  op: Operation,
+  editor: Editor,
+): Array<UndoStep> {
+  const operations =
+    editor.selection === null
+      ? [op]
+      : [
+          {
+            type: 'set_selection' as const,
+            properties: {...editor.selection},
+            newProperties: {...editor.selection},
+          },
+          op,
+        ]
+
+  return [
+    ...steps,
+    {
+      operations,
+      timestamp: new Date(),
+    },
+  ]
+}
+
+function mergeIntoLastStep(
+  steps: Array<UndoStep>,
+  lastStep: UndoStep,
+  op: Operation,
+): Array<UndoStep> {
+  return [
+    ...steps.slice(0, -1),
+    {
+      timestamp: lastStep.timestamp,
+      operations: [...lastStep.operations, op],
+    },
+  ]
+}

package/src/index.ts

@@ -7,7 +7,6 @@ export type {
   PortableTextSpan,
 } from '@sanity/types'
 export type {Editor, EditorConfig, EditorEvent} from './editor'
-export {EditorEventListener} from './editor-event-listener'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
 export type {PatchesEvent} from './editor/editor-machine'

package/src/internal-utils/applyPatch.ts

@@ -16,7 +16,7 @@ import {
   parsePatch,
 } from '@sanity/diff-match-patch'
 import type {Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
-import {Element, Node, Text, Transforms, type Descendant} from 'slate'
+import {Editor, Element, Node, Text, Transforms, type Descendant} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import {KEY_TO_SLATE_ELEMENT} from '../editor/weakMaps'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -202,6 +202,51 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
 
   const isTextBlock = editor.isTextBlock(block.node)
 
+  if (patch.path.length === 1) {
+    const updatedBlock = applyAll(block.node, [
+      {
+        ...patch,
+        path: patch.path.slice(1),
+      },
+    ])
+
+    if (editor.isTextBlock(block.node) && Element.isElement(updatedBlock)) {
+      Transforms.setNodes(editor, updatedBlock, {at: [block.index]})
+
+      const previousSelection = editor.selection
+
+      // Remove the previous children
+      for (const [_, childPath] of Editor.nodes(editor, {
+        at: [block.index],
+        reverse: true,
+        mode: 'lowest',
+      })) {
+        Transforms.removeNodes(editor, {at: childPath})
+      }
+
+      // Insert the new children
+      Transforms.insertNodes(editor, updatedBlock.children, {
+        at: [block.index, 0],
+      })
+
+      // Restore the selection
+      if (previousSelection) {
+        // Update the selection on the editor object
+        Transforms.setSelection(editor, previousSelection)
+        // Actively select the previous selection
+        Transforms.select(editor, previousSelection)
+      }
+
+      return true
+    } else {
+      Transforms.setNodes(editor, updatedBlock as Partial<Node>, {
+        at: [block.index],
+      })
+
+      return true
+    }
+  }
+
   if (isTextBlock && patch.path[1] !== 'children') {
     const updatedBlock = applyAll(block.node, [
       {

package/src/operations/behavior.operations.ts

@@ -5,10 +5,8 @@ import type {
 } from '../behaviors/behavior.types.event'
 import type {EditorContext} from '../editor/editor-snapshot'
 import {removeDecoratorOperationImplementation} from '../editor/plugins/createWithPortableTextMarkModel'
-import {
-  historyRedoOperationImplementation,
-  historyUndoOperationImplementation,
-} from '../editor/plugins/createWithUndoRedo'
+import {historyRedoOperationImplementation} from '../history/behavior.operation.history.redo'
+import {historyUndoOperationImplementation} from '../history/behavior.operation.history.undo'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {addAnnotationOperationImplementation} from './behavior.operation.annotation.add'

package/src/plugins/index.ts

@@ -1,6 +1,3 @@
 export {BehaviorPlugin} from './plugin.behavior'
-export {DecoratorShortcutPlugin} from './plugin.decorator-shortcut'
 export {EditorRefPlugin} from './plugin.editor-ref'
 export {EventListenerPlugin} from './plugin.event-listener'
-export {MarkdownPlugin, type MarkdownPluginConfig} from './plugin.markdown'
-export {OneLinePlugin} from './plugin.one-line'

package/src/selectors/index.ts

@@ -16,7 +16,6 @@ export {getFocusListBlock} from './selector.get-focus-list-block'
 export {getFocusSpan} from './selector.get-focus-span'
 export {getFocusTextBlock} from './selector.get-focus-text-block'
 export {getLastBlock} from './selector.get-last-block'
-export {getListIndex} from './selector.get-list-state'
 export {getMarkState, type MarkState} from './selector.get-mark-state'
 export {getNextBlock} from './selector.get-next-block'
 export {getNextInlineObject} from './selector.get-next-inline-object'
@@ -27,7 +26,6 @@ export {getPreviousInlineObject} from './selector.get-previous-inline-object'
 export {getPreviousInlineObjects} from './selector.get-previous-inline-objects'
 export {getPreviousSpan} from './selector.get-previous-span'
 export {getSelectedBlocks} from './selector.get-selected-blocks'
-export {getSelectedSlice} from './selector.get-selected-slice'
 export {getSelectedSpans} from './selector.get-selected-spans'
 export {getSelectedTextBlocks} from './selector.get-selected-text-blocks'
 export {getSelectedValue} from './selector.get-selected-value'
@@ -41,7 +39,6 @@ export {getSelectionStartPoint} from './selector.get-selection-start-point'
 export {getSelectionText} from './selector.get-selection-text'
 export {getBlockTextAfter} from './selector.get-text-after'
 export {getBlockTextBefore} from './selector.get-text-before'
-export {getTrimmedSelection} from './selector.get-trimmed-selection'
 export {getValue} from './selector.get-value'
 export {isActiveAnnotation} from './selector.is-active-annotation'
 export {isActiveDecorator} from './selector.is-active-decorator'

package/src/test/vitest/step-definitions.tsx

@@ -190,7 +190,7 @@ export const stepDefinitions = [
     await userEvent.type(context.locator, text)
   }),
   When(
-    '{string} is typed by Editor B',
+    '{string} is typed in Editor B',
     async (context: Context, text: string) => {
       await userEvent.type(context.locatorB, text)
     },
@@ -222,23 +222,74 @@ export const stepDefinitions = [
    */
   When(
     '{button} is pressed',
-    async (_: Context, button: Parameter['button']) => {
+    async (context: Context, button: Parameter['button']) => {
+      const previousSelection = context.editor.getSnapshot().context.selection
       await userEvent.keyboard(button)
-      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      await vi.waitFor(() => {
+        const currentSelection = context.editor.getSnapshot().context.selection
+
+        if (currentSelection) {
+          expect(currentSelection).not.toBe(previousSelection)
+        }
+      })
+    },
+  ),
+  When(
+    '{button} is pressed in Editor B',
+    async (context: Context, button: Parameter['button']) => {
+      const previousSelection = context.editorB.getSnapshot().context.selection
+      await userEvent.keyboard(button)
+
+      await vi.waitFor(() => {
+        const currentSelection = context.editorB.getSnapshot().context.selection
+
+        if (currentSelection) {
+          expect(currentSelection).not.toBe(previousSelection)
+        }
+      })
     },
   ),
   When(
     '{button} is pressed {int} times',
-    async (_: Context, button: Parameter['button'], times: number) => {
+    async (context: Context, button: Parameter['button'], times: number) => {
       for (let i = 0; i < times; i++) {
+        const previousSelection = context.editor.getSnapshot().context.selection
         await userEvent.keyboard(button)
-        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        await vi.waitFor(() => {
+          const currentSelection =
+            context.editor.getSnapshot().context.selection
+
+          if (currentSelection) {
+            expect(currentSelection).not.toBe(previousSelection)
+          }
+        })
+      }
+    },
+  ),
+  When(
+    '{button} is pressed {int} times in Editor B',
+    async (context: Context, button: Parameter['button'], times: number) => {
+      for (let i = 0; i < times; i++) {
+        const previousSelection =
+          context.editorB.getSnapshot().context.selection
+        await userEvent.keyboard(button)
+
+        await vi.waitFor(() => {
+          const currentSelection =
+            context.editorB.getSnapshot().context.selection
+
+          if (currentSelection) {
+            expect(currentSelection).not.toBe(previousSelection)
+          }
+        })
       }
     },
   ),
   When(
     '{shortcut} is pressed',
-    async (_: Context, shortcut: Parameter['shortcut']) => {
+    async (context: Context, shortcut: Parameter['shortcut']) => {
       const shortcuts: Record<Parameter['shortcut'], string> = {
         'deleteWord.backward': IS_MAC
           ? '{Alt>}{Backspace}{/Alt}'
@@ -248,8 +299,16 @@ export const stepDefinitions = [
           : '{Control>}{Delete}{/Control}',
       }
 
+      const previousSelection = context.editor.getSnapshot().context.selection
       await userEvent.keyboard(shortcuts[shortcut])
-      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      await vi.waitFor(() => {
+        const currentSelection = context.editor.getSnapshot().context.selection
+
+        if (currentSelection) {
+          expect(currentSelection).not.toBe(previousSelection)
+        }
+      })
     },
   ),
 
@@ -277,6 +336,27 @@ export const stepDefinitions = [
       })
     },
   ),
+  When(
+    'the caret is put before {string} in Editor B',
+    async (context: Context, text: string) => {
+      await vi.waitFor(() => {
+        const selection = getSelectionBeforeText(
+          context.editorB.getSnapshot().context,
+          text,
+        )
+        expect(selection).not.toBeNull()
+
+        context.editorB.send({
+          type: 'select',
+          at: selection,
+        })
+
+        expect(context.editorB.getSnapshot().context.selection).toEqual(
+          selection,
+        )
+      })
+    },
+  ),
   Then(
     'the caret is before {string}',
     async (context: Context, text: string) => {
@@ -315,7 +395,7 @@ export const stepDefinitions = [
     },
   ),
   When(
-    'the caret is put after {string} by Editor B',
+    'the caret is put after {string} in Editor B',
     async (context: Context, text: string) => {
       await vi.waitFor(() => {
         const selection = getSelectionAfterText(

package/src/test/vitest/test-editor.tsx

@@ -134,7 +134,7 @@ export async function createTestEditors(
                   ...patch,
                   origin: 'remote',
                 })),
-                snapshot: event.snapshot,
+                snapshot: event.value,
               })
               editorBRef.current?.send({
                 type: 'update value',