@portabletext/editor 2.21.3 → 3.0.1

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/operation-to-patches.test.ts

@@ -264,7 +264,7 @@ describe('operationToPatches', () => {
     `)
   })
 
-  it('produce correct insert child patch', () => {
+  test('produce correct insert child patch', () => {
     expect(
       insertNodePatch(
         schema,
@@ -283,30 +283,28 @@ describe('operationToPatches', () => {
 
         createDefaultValue(),
       ),
-    ).toMatchInlineSnapshot(`
-      [
-        {
-          "items": [
-            {
-              "_key": "c130395c640c",
-              "_type": "someObject",
-              "title": "The Object",
-            },
-          ],
-          "path": [
-            {
-              "_key": "1f2e64b47787",
-            },
-            "children",
-            {
-              "_key": "fd9b4a4e6c0b",
-            },
-          ],
-          "position": "after",
-          "type": "insert",
-        },
-      ]
-    `)
+    ).toEqual([
+      {
+        items: [
+          {
+            _key: 'c130395c640c',
+            _type: 'someObject',
+            title: 'The Object',
+          },
+        ],
+        path: [
+          {
+            _key: '1f2e64b47787',
+          },
+          'children',
+          {
+            _key: 'fd9b4a4e6c0b',
+          },
+        ],
+        position: 'after',
+        type: 'insert',
+      },
+    ])
   })
 
   it('produce correct insert text patch', () => {

package/src/internal-utils/operation-to-patches.ts

@@ -309,32 +309,41 @@ export function insertNodePatch(
       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 path =
+      block.children.length <= 1 || !block.children[operation.path[1] - 1]
+        ? [{_key: block._key}, 'children', 0]
+        : [
+            {_key: block._key},
+            'children',
+            {_key: block.children[operation.path[1] - 1]._key},
+          ]
+
+    if (Text.isText(operation.node)) {
+      return [insert([operation.node], position, path)]
     }
-    const blk = fromSlateValue(
-      [
-        {
-          _key: 'bogus',
-          _type: schema.block.name,
-          children: [node],
-        },
-      ],
-      schema.block.name,
-    )[0] as PortableTextTextBlock
-    const child = blk.children[0]
+
+    const _type = operation.node._type
+    const _key = operation.node._key
+    const value =
+      'value' in operation.node && typeof operation.node.value === 'object'
+        ? operation.node.value
+        : ({} satisfies Record<string, unknown>)
+
     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},
-      ]),
+      insert(
+        [
+          {
+            _type,
+            _key,
+            ...value,
+          },
+        ],
+        position,
+        path,
+      ),
     ]
   }
+
   return []
 }
 

package/src/internal-utils/selection-text.test.ts

@@ -1,8 +1,10 @@
 import {compileSchema, defineSchema} from '@portabletext/schema'
+import {createTestKeyGenerator} from '@portabletext/test'
 import {expect, test} from 'vitest'
 import {getSelectionText} from './selection-text'
 
 test(getSelectionText.name, () => {
+  const keyGenerator = createTestKeyGenerator()
   const schema = compileSchema(defineSchema({}))
   const splitBlock = {
     _type: 'block',
@@ -18,6 +20,7 @@ test(getSelectionText.name, () => {
 
   expect(
     getSelectionText({
+      keyGenerator,
       schema,
       value: [splitBlock],
       selection: {

package/src/internal-utils/selection-text.ts

@@ -3,14 +3,17 @@ import type {EditorContext} from '../editor/editor-snapshot'
 import {sliceBlocks} from '../utils/util.slice-blocks'
 
 export function getSelectionText(
-  context: Pick<EditorContext, 'schema' | 'value' | 'selection'>,
+  context: Pick<
+    EditorContext,
+    'keyGenerator' | 'schema' | 'value' | 'selection'
+  >,
 ) {
   if (!context.selection) {
     return []
   }
 
   const slice = sliceBlocks({
-    context: {schema: context.schema, selection: context.selection},
+    context,
     blocks: context.value,
   })
 

package/src/internal-utils/values.ts

@@ -42,6 +42,7 @@ export function toSlateBlock(
 ): Descendant {
   const {_type, _key, ...rest} = block
   const isPortableText = block && block._type === schemaTypes.block.name
+
   if (isPortableText) {
     const textBlock = block as PortableTextTextBlock
     let hasInlines = false
@@ -50,35 +51,44 @@ export function toSlateBlock(
     const hasMissingChildren = typeof textBlock.children === 'undefined'
 
     const children = (textBlock.children || []).map((child) => {
-      const {_type: cType, _key: cKey, ...cRest} = child
-      // Return 'slate' version of inline object where the actual
-      // value is stored in the `value` property.
-      // In slate, inline objects are represented as regular
-      // children with actual text node in order to be able to
-      // be selected the same way as the rest of the (text) content.
-      if (cType !== 'span') {
+      const {_type: childType, _key: childKey, ...childProps} = child
+      const propKeys = Object.keys(childProps)
+
+      if (childType !== schemaTypes.span.name) {
+        if (propKeys.length === 1 && propKeys.at(0) === 'text') {
+          return child
+        }
+
+        // Return 'slate' version of inline object where the actual
+        // value is stored in the `value` property.
+        // In slate, inline objects are represented as regular
+        // children with actual text node in order to be able to
+        // be selected the same way as the rest of the (text) content.
         hasInlines = true
+
         return keepObjectEquality(
           {
-            _type: cType,
-            _key: cKey,
+            _type: childType,
+            _key: childKey,
             children: [
               {
                 _key: VOID_CHILD_KEY,
-                _type: 'span',
+                _type: schemaTypes.span.name,
                 text: '',
                 marks: [],
               },
             ],
-            value: cRest,
+            value: childProps,
             __inline: true,
           },
           keyMap,
         )
       }
+
       // Original child object (span)
       return child
     })
+
     // Return original block
     if (
       !hasMissingStyle &&
@@ -90,10 +100,12 @@ export function toSlateBlock(
       // Original object
       return block
     }
+
     // TODO: remove this when we have a better way to handle missing style
     if (hasMissingStyle) {
       rest.style = schemaTypes.styles[0].name
     }
+
     return keepObjectEquality(
       {_type, _key, ...rest, children},
       keyMap,

package/src/operations/behavior.operation.block.set.ts

@@ -31,6 +31,7 @@ export const blockSetOperationImplementation: BehaviorOperationImplementation<
     context,
     block: updatedBlock,
     options: {
+      normalize: false,
       removeUnusedMarkDefs: false,
       validateFields: true,
     },

package/src/operations/behavior.operation.block.unset.ts

@@ -52,6 +52,7 @@ export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
       context,
       block: omit(parsedBlock, propsToRemove),
       options: {
+        normalize: false,
         removeUnusedMarkDefs: true,
         validateFields: true,
       },
@@ -85,6 +86,7 @@ export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
       operation.props.filter((prop) => prop !== '_type'),
     ),
     options: {
+      normalize: false,
       removeUnusedMarkDefs: true,
       validateFields: true,
     },

package/src/operations/behavior.operation.insert.block.ts

@@ -28,6 +28,7 @@ export const insertBlockOperationImplementation: BehaviorOperationImplementation
     block: operation.block,
     context,
     options: {
+      normalize: true,
       removeUnusedMarkDefs: true,
       validateFields: true,
     },

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'