@portabletext/editor 2.8.3 → 2.9.0

package/src/behaviors/behavior.perform-event.ts

@@ -2,7 +2,7 @@ import {createEditorDom} from '../editor/editor-dom'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
 import {withApplyingBehaviorOperations} from '../editor/with-applying-behavior-operations'
-import {withUndoStep} from '../editor/with-undo-step'
+import {clearUndoStep, createUndoStep} from '../editor/with-undo-step'
 import {debugWithName} from '../internal-utils/debug'
 import {performOperation} from '../operations/behavior.operations'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -15,8 +15,7 @@ import {
   isNativeBehaviorEvent,
   isSyntheticBehaviorEvent,
   type BehaviorEvent,
-  type CustomBehaviorEvent,
-  type SyntheticBehaviorEvent,
+  type ExternalBehaviorEvent,
 } from './behavior.types.event'
 
 const debug = debugWithName('behaviors:event')
@@ -43,7 +42,7 @@ export function performEvent({
   nativeEvent,
   sendBack,
 }: {
-  mode: 'raise' | 'execute' | 'forward'
+  mode: 'send' | 'raise' | 'execute' | 'forward'
   behaviors: Array<Behavior>
   remainingEventBehaviors: Array<Behavior>
   event: BehaviorEvent
@@ -57,12 +56,13 @@ export function performEvent({
       }
     | undefined
   sendBack: (
-    event:
-      | {type: 'set drag ghost'; ghost: HTMLElement}
-      | SyntheticBehaviorEvent
-      | CustomBehaviorEvent,
+    event: {type: 'set drag ghost'; ghost: HTMLElement} | ExternalBehaviorEvent,
   ) => void
 }) {
+  if (mode === 'send' && !isNativeBehaviorEvent(event)) {
+    createUndoStep(editor)
+  }
+
   debug(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
   const eventBehaviors = [
@@ -108,6 +108,10 @@ export function performEvent({
   if (eventBehaviors.length === 0 && isSyntheticBehaviorEvent(event)) {
     nativeEvent?.preventDefault()
 
+    if (mode === 'send') {
+      clearUndoStep(editor)
+    }
+
     withApplyingBehaviorOperations(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
@@ -199,76 +203,78 @@ export function performEvent({
         // we set up a new undo step.
         // All actions performed recursively from now will be squashed into this
         // undo step
-        withUndoStep(editor, () => {
-          for (const action of actions) {
-            if (action.type === 'effect') {
-              try {
-                action.effect({
-                  send: sendBack,
-                })
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
-                  ),
-                )
-              }
-
-              continue
-            }
+        createUndoStep(editor)
 
-            if (action.type === 'forward') {
-              const remainingEventBehaviors = eventBehaviors.slice(
-                eventBehaviorIndex + 1,
+        for (const action of actions) {
+          if (action.type === 'effect') {
+            try {
+              action.effect({
+                send: sendBack,
+              })
+            } catch (error) {
+              console.error(
+                new Error(
+                  `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
+                ),
               )
+            }
 
-              performEvent({
-                mode: 'forward',
-                behaviors,
-                remainingEventBehaviors: remainingEventBehaviors,
-                event: action.event,
-                editor,
-                keyGenerator,
-                schema,
-                getSnapshot,
-                nativeEvent,
-                sendBack,
-              })
+            continue
+          }
 
-              continue
-            }
+          if (action.type === 'forward') {
+            const remainingEventBehaviors = eventBehaviors.slice(
+              eventBehaviorIndex + 1,
+            )
 
-            if (action.type === 'raise') {
-              performEvent({
-                mode: 'raise',
-                behaviors,
-                remainingEventBehaviors: behaviors,
-                event: action.event,
-                editor,
-                keyGenerator,
-                schema,
-                getSnapshot,
-                nativeEvent,
-                sendBack,
-              })
+            performEvent({
+              mode: 'forward',
+              behaviors,
+              remainingEventBehaviors: remainingEventBehaviors,
+              event: action.event,
+              editor,
+              keyGenerator,
+              schema,
+              getSnapshot,
+              nativeEvent,
+              sendBack,
+            })
 
-              continue
-            }
+            continue
+          }
 
+          if (action.type === 'raise') {
             performEvent({
-              mode: 'execute',
+              mode: 'raise',
               behaviors,
-              remainingEventBehaviors: [],
+              remainingEventBehaviors: behaviors,
               event: action.event,
               editor,
               keyGenerator,
               schema,
               getSnapshot,
-              nativeEvent: undefined,
+              nativeEvent,
               sendBack,
             })
+
+            continue
           }
-        })
+
+          performEvent({
+            mode: 'execute',
+            behaviors,
+            remainingEventBehaviors: [],
+            event: action.event,
+            editor,
+            keyGenerator,
+            schema,
+            getSnapshot,
+            nativeEvent: undefined,
+            sendBack,
+          })
+        }
+
+        clearUndoStep(editor)
 
         continue
       }
@@ -341,6 +347,10 @@ export function performEvent({
   if (!defaultBehaviorOverwritten && isSyntheticBehaviorEvent(event)) {
     nativeEvent?.preventDefault()
 
+    if (mode === 'send') {
+      clearUndoStep(editor)
+    }
+
     withApplyingBehaviorOperations(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 

package/src/behaviors/behavior.types.action.ts

@@ -3,6 +3,7 @@ import type {EditorSnapshot} from '../editor/editor-snapshot'
 import type {PickFromUnion} from '../type-utils'
 import type {
   CustomBehaviorEvent,
+  ExternalBehaviorEvent,
   NativeBehaviorEvent,
   SyntheticBehaviorEvent,
 } from './behavior.types.event'
@@ -48,7 +49,7 @@ export type BehaviorAction =
          * })
          * ```
          */
-        send: (event: SyntheticBehaviorEvent | CustomBehaviorEvent) => void
+        send: (event: ExternalBehaviorEvent) => void
       }) => void
     }
 

package/src/behaviors/behavior.types.event.ts

@@ -228,6 +228,7 @@ const abstractBehaviorEventTypes = [
   'list item.toggle',
   'move.block down',
   'move.block up',
+  'select.block',
   'select.previous block',
   'select.next block',
   'serialize',
@@ -415,6 +416,11 @@ type AbstractBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block up'>
       at: BlockPath
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'select.block'>
+      at: BlockPath
+      select?: 'start' | 'end'
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select.previous block'>
       select?: 'start' | 'end'

package/src/converters/converter.text-plain.test.ts

@@ -7,7 +7,6 @@ import {
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
 import type {EditorSelection} from '..'
-import {schemaDefinition} from '../../tests/PortableTextEditorTester'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {createConverterTextPlain} from './converter.text-plain'
 
@@ -84,7 +83,7 @@ function createSnapshot({
 }
 
 const converterTextPlain = createConverterTextPlain(
-  compileSchemaDefinitionToPortableTextMemberSchemaTypes(schemaDefinition),
+  compileSchemaDefinitionToPortableTextMemberSchemaTypes(defineSchema({})),
 )
 
 test(converterTextPlain.serialize.name, () => {

package/src/editor/create-editor.ts

@@ -17,7 +17,7 @@ import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import {createEditorDom} from './editor-dom'
 import type {EditorActor} from './editor-machine'
-import {editorMachine} from './editor-machine'
+import {editorMachine, rerouteExternalBehaviorEvent} from './editor-machine'
 import {getEditorSnapshot} from './editor-selector'
 import {defaultKeyGenerator} from './key-generator'
 import {mutationMachine, type MutationActor} from './mutation-machine'
@@ -112,41 +112,13 @@ export function createInternalEditor(config: EditorConfig): {
           editorActor.send(event)
           break
 
-        case 'blur':
-          editorActor.send({
-            type: 'blur',
-            editor: slateEditor.instance,
-          })
-          break
-
-        case 'focus':
-          editorActor.send({
-            type: 'focus',
-            editor: slateEditor.instance,
-          })
-          break
-
-        case 'insert.block object':
-          editorActor.send({
-            type: 'behavior event',
-            behaviorEvent: {
-              type: 'insert.block',
-              block: {
-                _type: event.blockObject.name,
-                ...(event.blockObject.value ?? {}),
-              },
-              placement: event.placement,
-            },
-            editor: slateEditor.instance,
-          })
-          break
-
         default:
-          editorActor.send({
-            type: 'behavior event',
-            behaviorEvent: event,
-            editor: slateEditor.instance,
-          })
+          editorActor.send(
+            rerouteExternalBehaviorEvent({
+              event,
+              slateEditor: slateEditor.instance,
+            }),
+          )
       }
     },
     on: (event, listener) => {

package/src/editor/editor-machine.ts

@@ -13,7 +13,10 @@ import {
 import type {BehaviorConfig} from '../behaviors/behavior.config'
 import {coreBehaviorsConfig} from '../behaviors/behavior.core'
 import {performEvent} from '../behaviors/behavior.perform-event'
-import type {BehaviorEvent} from '../behaviors/behavior.types.event'
+import type {
+  BehaviorEvent,
+  ExternalBehaviorEvent,
+} from '../behaviors/behavior.types.event'
 import type {Converter} from '../converters/converter.types'
 import {debugWithName} from '../internal-utils/debug'
 import type {EventPosition} from '../internal-utils/event-position'
@@ -134,6 +137,49 @@ export type InternalEditorEmittedEvent =
   | InternalPatchEvent
   | PatchesEvent
 
+export function rerouteExternalBehaviorEvent({
+  event,
+  slateEditor,
+}: {
+  event: ExternalBehaviorEvent
+  slateEditor: PortableTextSlateEditor
+}): InternalEditorEvent {
+  switch (event.type) {
+    case 'blur':
+      return {
+        type: 'blur',
+        editor: slateEditor,
+      }
+
+    case 'focus':
+      return {
+        type: 'focus',
+        editor: slateEditor,
+      }
+
+    case 'insert.block object':
+      return {
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert.block',
+          block: {
+            _type: event.blockObject.name,
+            ...(event.blockObject.value ?? {}),
+          },
+          placement: event.placement,
+        },
+        editor: slateEditor,
+      }
+
+    default:
+      return {
+        type: 'behavior event',
+        behaviorEvent: event,
+        editor: slateEditor,
+      }
+  }
+}
+
 /**
  * @internal
  */
@@ -263,7 +309,7 @@ export const editorMachine = setup({
         )
 
         performEvent({
-          mode: 'raise',
+          mode: 'send',
           behaviors,
           remainingEventBehaviors: behaviors,
           event: event.behaviorEvent,
@@ -285,11 +331,12 @@ export const editorMachine = setup({
               return
             }
 
-            self.send({
-              type: 'behavior event',
-              behaviorEvent: eventSentBack,
-              editor: event.editor,
-            })
+            self.send(
+              rerouteExternalBehaviorEvent({
+                event: eventSentBack,
+                slateEditor: event.editor,
+              }),
+            )
           },
         })
       } catch (error) {

package/src/editor/with-undo-step.ts

@@ -25,3 +25,13 @@ export function withUndoStep(editor: Editor, fn: () => void) {
 export function getCurrentUndoStepId(editor: Editor) {
   return CURRENT_UNDO_STEP.get(editor)?.undoStepId
 }
+
+export function createUndoStep(editor: Editor) {
+  CURRENT_UNDO_STEP.set(editor, {
+    undoStepId: defaultKeyGenerator(),
+  })
+}
+
+export function clearUndoStep(editor: Editor) {
+  CURRENT_UNDO_STEP.set(editor, undefined)
+}

package/src/internal-utils/test-editor.tsx

@@ -19,24 +19,30 @@ import {InternalEditorAfterRefPlugin} from '../plugins/plugin.internal.editor-ac
 import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
 import type {PortableTextSlateEditor} from '../types/editor'
 
+type CreateTestEditorOptions = {
+  initialValue?: Array<PortableTextBlock>
+  keyGenerator?: () => string
+  schemaDefinition?: SchemaDefinition
+  children?: React.ReactNode
+  editableProps?: PortableTextEditableProps
+}
+
 export async function createTestEditor(
-  options: {
-    initialValue?: Array<PortableTextBlock>
-    keyGenerator?: () => string
-    schemaDefinition?: SchemaDefinition
-    children?: React.ReactNode
-    editableProps?: PortableTextEditableProps
-  } = {},
-): Promise<Pick<Context, 'editor' | 'locator'>> {
+  options: CreateTestEditorOptions = {},
+): Promise<
+  Pick<Context, 'editor' | 'locator'> & {
+    rerender: (options?: CreateTestEditorOptions) => void
+  }
+> {
   const editorRef = React.createRef<Editor>()
   const editorActorRef = React.createRef<EditorActor>()
   const slateRef = React.createRef<PortableTextSlateEditor>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
 
-  render(
+  const renderResult = render(
     <EditorProvider
       initialConfig={{
-        keyGenerator,
+        keyGenerator: keyGenerator,
         schemaDefinition: options.schemaDefinition ?? defineSchema({}),
         initialValue: options.initialValue,
       }}
@@ -49,6 +55,40 @@ export async function createTestEditor(
     </EditorProvider>,
   )
 
+  function rerender(newOptions?: CreateTestEditorOptions) {
+    newOptions
+      ? renderResult.rerender(
+          <EditorProvider
+            initialConfig={{
+              keyGenerator: keyGenerator,
+              schemaDefinition: newOptions.schemaDefinition ?? defineSchema({}),
+              initialValue: newOptions.initialValue,
+            }}
+          >
+            <EditorRefPlugin ref={editorRef} />
+            <InternalEditorAfterRefPlugin ref={editorActorRef} />
+            <InternalSlateEditorRefPlugin ref={slateRef} />
+            <PortableTextEditable {...newOptions.editableProps} />
+            {newOptions.children}
+          </EditorProvider>,
+        )
+      : renderResult.rerender(
+          <EditorProvider
+            initialConfig={{
+              keyGenerator: keyGenerator,
+              schemaDefinition: options.schemaDefinition ?? defineSchema({}),
+              initialValue: options.initialValue,
+            }}
+          >
+            <EditorRefPlugin ref={editorRef} />
+            <InternalEditorAfterRefPlugin ref={editorActorRef} />
+            <InternalSlateEditorRefPlugin ref={slateRef} />
+            <PortableTextEditable {...options.editableProps} />
+            {options.children}
+          </EditorProvider>,
+        )
+  }
+
   const locator = page.getByRole('textbox')
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
@@ -67,5 +107,6 @@ export async function createTestEditor(
       sendNativeEvent,
     },
     locator,
+    rerender,
   }
 }