@portabletext/editor 1.35.3 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.35.3",
+  "version": "1.36.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,15 +79,15 @@
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.9",
+    "@portabletext/block-tools": "1.1.10",
     "@portabletext/patches": "1.1.3"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.0.4",
-    "@sanity/schema": "^3.76.3",
-    "@sanity/types": "^3.76.3",
+    "@sanity/schema": "^3.77.1",
+    "@sanity/types": "^3.77.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -115,8 +115,8 @@
     "racejar": "1.2.0"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.76.3",
-    "@sanity/types": "^3.76.3",
+    "@sanity/schema": "^3.77.1",
+    "@sanity/types": "^3.77.1",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/behavior-actions/behavior.actions.ts

@@ -112,7 +112,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   },
   'delete.text': deleteTextActionImplementation,
   'deserialization.failure': ({action}) => {
-    console.error(
+    console.warn(
       `Deserialization of ${action.mimeType} failed with reason ${action.reason}`,
     )
   },
@@ -248,7 +248,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
     Transforms.select(action.editor, nextBlockPath)
   },
   'serialization.failure': ({action}) => {
-    console.error(
+    console.warn(
       `Serialization of ${action.mimeType} failed with reason ${action.reason}`,
     )
   },

package/src/behaviors/behavior.types.ts

@@ -302,6 +302,7 @@ export type BehaviorEvent =
   | SyntheticBehaviorEvent
   | NativeBehaviorEvent
   | CustomBehaviorEvent
+  | {type: '*'}
 
 /**
  * @beta
@@ -309,11 +310,9 @@ export type BehaviorEvent =
 export type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
-  TBehaviorEvent extends BehaviorEvent = PickFromUnion<
-    BehaviorEvent,
-    'type',
-    TBehaviorEventType
-  >,
+  TBehaviorEvent extends BehaviorEvent = TBehaviorEventType extends '*'
+    ? BehaviorEvent
+    : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 > = {
   /**
    * The internal editor event that triggers this behavior.
@@ -389,7 +388,9 @@ export function defineBehavior<
     TGuardResponse,
     TBehaviorEventType extends `custom.${infer TType}`
       ? CustomBehaviorEvent<TPayload, TType>
-      : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+      : TBehaviorEventType extends '*'
+        ? OmitFromUnion<BehaviorEvent, 'type', '*'>
+        : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   >,
 ): Behavior
 export function defineBehavior<
@@ -399,7 +400,9 @@ export function defineBehavior<
   TBehaviorEvent extends
     BehaviorEvent = TBehaviorEventType extends `custom.${infer TType}`
     ? CustomBehaviorEvent<TPayload, TType>
-    : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+    : TBehaviorEventType extends '*'
+      ? OmitFromUnion<BehaviorEvent, 'type', '*'>
+      : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 >(
   behavior: Behavior<TBehaviorEventType, TGuardResponse, TBehaviorEvent>,
 ): Behavior {

package/src/editor/PortableTextEditor.tsx

@@ -687,11 +687,33 @@ export class PortableTextEditor extends Component<
     return editor.editable?.getFragment()
   }
 
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *   type: 'history.undo',
+   * })
+   * ```
+   */
   static undo = (editor: PortableTextEditor): void => {
     debug('Host undoing')
     editor.editable?.undo()
   }
 
+  /**
+   * @deprecated
+   * Use `editor.send(...)` instead
+   *
+   * ```
+   * const editor = useEditor()
+   * editor.send({
+   *   type: 'history.redo',
+   * })
+   * ```
+   */
   static redo = (editor: PortableTextEditor): void => {
     debug('Host redoing')
     editor.editable?.redo()

package/src/editor/__tests__/self-solving.test.tsx

@@ -147,7 +147,39 @@ describe('Feature: Self-solving', () => {
         })
         expect(onChange).toHaveBeenNthCalledWith(8, {
           type: 'mutation',
-          patches: [spanPatch, blockPatch, strongPatch],
+          patches: [spanPatch, blockPatch],
+          snapshot: [
+            block({
+              _key: 'b1',
+              children: [
+                span({
+                  _key: 's1',
+                  text: 'foo',
+                  marks: [],
+                }),
+              ],
+              style: 'normal',
+              markDefs: [],
+            }),
+          ],
+          value: [
+            block({
+              _key: 'b1',
+              children: [
+                span({
+                  _key: 's1',
+                  text: 'foo',
+                  marks: [],
+                }),
+              ],
+              style: 'normal',
+              markDefs: [],
+            }),
+          ],
+        })
+        expect(onChange).toHaveBeenNthCalledWith(9, {
+          type: 'mutation',
+          patches: [strongPatch],
           snapshot: [
             block({
               _key: 'b1',

package/src/editor/components/Synchronizer.tsx

@@ -1,6 +1,8 @@
 import {useActorRef, useSelector} from '@xstate/react'
 import {useEffect} from 'react'
 import {debugWithName} from '../../internal-utils/debug'
+import {fromSlateValue} from '../../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../../internal-utils/weakMaps'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 import {mutationMachine} from '../mutation-machine'
@@ -80,6 +82,18 @@ export function Synchronizer(props: SynchronizerProps) {
             type: 'notify.value changed',
           })
           break
+        case 'patch':
+          props.editorActor.send({
+            ...event,
+            type: 'internal.patch',
+            value: fromSlateValue(
+              slateEditor.children,
+              props.editorActor.getSnapshot().context.schema.block.name,
+              KEY_TO_VALUE_ELEMENT.get(slateEditor),
+            ),
+          })
+          break
+
         default:
           props.editorActor.send(event)
       }
@@ -88,7 +102,7 @@ export function Synchronizer(props: SynchronizerProps) {
     return () => {
       subscription.unsubscribe()
     }
-  }, [props.editorActor, syncActorRef])
+  }, [props.editorActor, slateEditor, syncActorRef])
 
   useEffect(() => {
     syncActorRef.send({type: 'update readOnly', readOnly})
@@ -102,8 +116,8 @@ export function Synchronizer(props: SynchronizerProps) {
   // Subscribe to, and handle changes from the editor
   useEffect(() => {
     debug('Subscribing to patch events')
-    const sub = editorActor.on('patch', (event) => {
-      mutationActorRef.send(event)
+    const sub = editorActor.on('internal.patch', (event) => {
+      mutationActorRef.send({...event, type: 'patch'})
     })
     return () => {
       debug('Unsubscribing to patch events')

package/src/editor/editor-machine.ts

@@ -151,6 +151,11 @@ type PatchEvent = {
   patch: Patch
 }
 
+type InternalPatchEvent = NamespaceEvent<PatchEvent, 'internal'> & {
+  actionId?: string
+  value: Array<PortableTextBlock>
+}
+
 type UnsetEvent = {
   type: 'unset'
   previousValue: Array<PortableTextBlock>
@@ -191,9 +196,9 @@ export type InternalEditorEvent =
   | CustomBehaviorEvent
   | ExternalEditorEvent
   | MutationEvent
+  | InternalPatchEvent
   | NamespaceEvent<EditorEmittedEvent, 'notify'>
   | NamespaceEvent<UnsetEvent, 'notify'>
-  | PatchEvent
   | SyntheticBehaviorEvent
   | {type: 'dragstart'}
   | {type: 'dragend'}
@@ -204,6 +209,7 @@ export type InternalEditorEvent =
  */
 export type InternalEditorEmittedEvent =
   | EditorEmittedEvent
+  | InternalPatchEvent
   | PatchesEvent
   | UnsetEvent
   | {
@@ -221,7 +227,7 @@ export const editorMachine = setup({
       behaviors: Set<Behavior>
       converters: Set<Converter>
       keyGenerator: () => string
-      pendingEvents: Array<PatchEvent | MutationEvent>
+      pendingEvents: Array<InternalPatchEvent | MutationEvent>
       schema: EditorSchema
       initialReadOnly: boolean
       maxBlocks: number | undefined
@@ -270,9 +276,11 @@ export const editorMachine = setup({
         return event.schema
       },
     }),
-    'emit patch event': emit(({event}) => {
-      assertEvent(event, 'patch')
-      return event
+    'emit patch event': enqueueActions(({event, enqueue}) => {
+      assertEvent(event, 'internal.patch')
+
+      enqueue.emit(event)
+      enqueue.emit({type: 'patch', patch: event.patch})
     }),
     'emit mutation event': emit(({event}) => {
       assertEvent(event, 'mutation')
@@ -282,13 +290,18 @@ export const editorMachine = setup({
     'emit editable': emit({type: 'editable'}),
     'defer event': assign({
       pendingEvents: ({context, event}) => {
-        assertEvent(event, ['patch', 'mutation'])
+        assertEvent(event, ['internal.patch', 'mutation'])
         return [...context.pendingEvents, event]
       },
     }),
     'emit pending events': enqueueActions(({context, enqueue}) => {
       for (const event of context.pendingEvents) {
-        enqueue(emit(event))
+        if (event.type === 'internal.patch') {
+          enqueue.emit(event)
+          enqueue.emit({type: 'patch', patch: event.patch})
+        } else {
+          enqueue.emit(event)
+        }
       }
     }),
     'emit ready': emit({type: 'ready'}),
@@ -321,7 +334,10 @@ export const editorMachine = setup({
           ...foundationalBehaviors,
           ...context.behaviors.values(),
           ...defaultBehaviors,
-        ].filter((behavior) => behavior.on === event.behaviorEvent.type)
+        ].filter(
+          (behavior) =>
+            behavior.on === '*' || behavior.on === event.behaviorEvent.type,
+        )
 
         if (eventBehaviors.length === 0) {
           if (defaultActionCallback) {
@@ -664,7 +680,7 @@ export const editorMachine = setup({
         'setting up': {
           exit: ['emit ready'],
           on: {
-            'patch': {
+            'internal.patch': {
               actions: 'defer event',
             },
             'mutation': {
@@ -680,14 +696,14 @@ export const editorMachine = setup({
           states: {
             idle: {
               on: {
-                normalizing: {
+                'normalizing': {
                   target: 'normalizing',
                 },
-                patch: {
+                'internal.patch': {
                   actions: 'defer event',
                   target: '#editor.setup.dirty',
                 },
-                mutation: {
+                'mutation': {
                   actions: 'defer event',
                   target: '#editor.setup.dirty',
                 },
@@ -698,7 +714,7 @@ export const editorMachine = setup({
                 'done normalizing': {
                   target: 'idle',
                 },
-                'patch': {
+                'internal.patch': {
                   actions: 'defer event',
                 },
                 'mutation': {
@@ -711,10 +727,10 @@ export const editorMachine = setup({
         'dirty': {
           entry: ['emit pending events', 'clear pending events'],
           on: {
-            patch: {
+            'internal.patch': {
               actions: 'emit patch event',
             },
-            mutation: {
+            'mutation': {
               actions: 'emit mutation event',
             },
           },

package/src/editor/mutation-machine.ts

@@ -1,25 +1,48 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import {Editor} from 'slate'
-import {assign, emit, setup} from 'xstate'
-import {fromSlateValue} from '../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import {
+  and,
+  assertEvent,
+  assign,
+  emit,
+  enqueueActions,
+  fromCallback,
+  not,
+  setup,
+  stateIn,
+  type AnyEventObject,
+} from 'xstate'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './define-schema'
 
-const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === 'test' ? 500 : 1000
-
 /**
  * Makes sure editor mutation events are debounced
  */
 export const mutationMachine = setup({
   types: {
     context: {} as {
-      pendingPatches: Array<Patch>
+      pendingMutations: Array<{
+        actionId?: string
+        value: Array<PortableTextBlock> | undefined
+        patches: Array<Patch>
+      }>
       schema: EditorSchema
       slateEditor: PortableTextSlateEditor
     },
-    events: {} as {type: 'patch'; patch: Patch},
+    events: {} as
+      | {
+          type: 'patch'
+          patch: Patch
+          actionId?: string
+          value: Array<PortableTextBlock>
+        }
+      | {
+          type: 'typing'
+        }
+      | {
+          type: 'not typing'
+        },
     input: {} as {
       schema: EditorSchema
       slateEditor: PortableTextSlateEditor
@@ -36,65 +59,156 @@ export const mutationMachine = setup({
   },
   actions: {
     'emit has pending patches': emit({type: 'has pending patches'}),
-    'emit mutation': emit(({context}) => ({
-      type: 'mutation' as const,
-      patches: context.pendingPatches,
-      snapshot: fromSlateValue(
-        context.slateEditor.children,
-        context.schema.block.name,
-        KEY_TO_VALUE_ELEMENT.get(context.slateEditor),
-      ),
-    })),
-    'clear pending patches': assign({
-      pendingPatches: [],
+    'emit mutations': enqueueActions(({context, enqueue}) => {
+      for (const bulk of context.pendingMutations) {
+        enqueue.emit({
+          type: 'mutation',
+          patches: bulk.patches,
+          snapshot: bulk.value,
+        })
+      }
+    }),
+    'clear pending mutations': assign({
+      pendingMutations: [],
     }),
     'defer patch': assign({
-      pendingPatches: ({context, event}) => [
-        ...context.pendingPatches,
-        event.patch,
-      ],
+      pendingMutations: ({context, event}) => {
+        assertEvent(event, 'patch')
+
+        if (context.pendingMutations.length === 0) {
+          return [
+            {
+              actionId: event.actionId,
+              value: event.value,
+              patches: [event.patch],
+            },
+          ]
+        }
+
+        const lastBulk = context.pendingMutations.at(-1)
+
+        if (lastBulk && lastBulk.actionId === event.actionId) {
+          return context.pendingMutations.slice(0, -1).concat({
+            value: event.value,
+            actionId: lastBulk.actionId,
+            patches: [...lastBulk.patches, event.patch],
+          })
+        }
+
+        return context.pendingMutations.concat({
+          value: event.value,
+          actionId: event.actionId,
+          patches: [event.patch],
+        })
+      },
+    }),
+  },
+  actors: {
+    'type listener': fromCallback<
+      AnyEventObject,
+      {slateEditor: PortableTextSlateEditor},
+      {type: 'typing'} | {type: 'not typing'}
+    >(({input, sendBack}) => {
+      const originalApply = input.slateEditor.apply
+
+      input.slateEditor.apply = (op) => {
+        if (op.type === 'insert_text' || op.type === 'remove_text') {
+          sendBack({type: 'typing'})
+        } else {
+          sendBack({type: 'not typing'})
+        }
+        originalApply(op)
+      }
+
+      return () => {
+        input.slateEditor.apply = originalApply
+      }
     }),
   },
   guards: {
+    'is typing': stateIn({typing: 'typing'}),
+    'no pending mutations': ({context}) =>
+      context.pendingMutations.length === 0,
     'slate is normalizing': ({context}) =>
       Editor.isNormalizing(context.slateEditor),
   },
+  delays: {
+    'mutation debounce': process.env.NODE_ENV === 'test' ? 250 : 0,
+    'type debounce': process.env.NODE_ENV === 'test' ? 0 : 250,
+  },
 }).createMachine({
   id: 'mutation',
   context: ({input}) => ({
-    pendingPatches: [],
+    pendingMutations: [],
     schema: input.schema,
     slateEditor: input.slateEditor,
   }),
-  initial: 'idle',
+  type: 'parallel',
   states: {
-    'idle': {
-      on: {
-        patch: {
-          actions: ['defer patch', 'emit has pending patches'],
-          target: 'has pending patches',
+    typing: {
+      initial: 'idle',
+      invoke: {
+        src: 'type listener',
+        input: ({context}) => ({slateEditor: context.slateEditor}),
+      },
+      states: {
+        idle: {
+          on: {
+            typing: {
+              target: 'typing',
+            },
+          },
+        },
+        typing: {
+          after: {
+            'type debounce': {
+              target: 'idle',
+            },
+          },
+          on: {
+            'not typing': {
+              target: 'idle',
+            },
+            'typing': {
+              target: 'typing',
+              reenter: true,
+            },
+          },
         },
       },
     },
-    'has pending patches': {
-      after: {
-        [FLUSH_PATCHES_THROTTLED_MS]: [
-          {
-            guard: 'slate is normalizing',
-            target: 'idle',
-            actions: ['emit mutation', 'clear pending patches'],
+    mutations: {
+      initial: 'idle',
+      states: {
+        'idle': {
+          on: {
+            patch: {
+              actions: ['defer patch', 'emit has pending patches'],
+              target: 'emitting mutations',
+            },
           },
-          {
-            target: 'has pending patches',
-            reenter: true,
+        },
+        'emitting mutations': {
+          after: {
+            'mutation debounce': [
+              {
+                guard: and([not('is typing'), 'slate is normalizing']),
+                target: 'idle',
+                actions: ['emit mutations', 'clear pending mutations'],
+              },
+              {
+                target: 'emitting mutations',
+                reenter: true,
+              },
+            ],
+          },
+          on: {
+            patch: {
+              target: 'emitting mutations',
+              actions: ['defer patch'],
+              reenter: true,
+            },
           },
-        ],
-      },
-      on: {
-        patch: {
-          target: 'has pending patches',
-          actions: ['defer patch'],
-          reenter: true,
         },
       },
     },

package/src/editor/plugins/create-with-event-listeners.ts

@@ -29,6 +29,7 @@ export function createWithEventListeners(
           case 'loading':
           case 'mutation':
           case 'patch':
+          case 'internal.patch':
           case 'patches':
           case 'read only':
           case 'ready':

package/src/editor/plugins/createWithPatches.ts

@@ -30,6 +30,7 @@ import type {
   PortableTextSlateEditor,
 } from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
+import {getCurrentActionId} from '../with-applying-behavior-actions'
 import {withoutSaving} from './createWithUndoRedo'
 
 const debug = debugWithName('plugin:withPatches')
@@ -287,12 +288,18 @@ export function createWithPatches({
 
       // Emit all patches
       if (patches.length > 0) {
-        patches.forEach((patch) => {
+        for (const patch of patches) {
           editorActor.send({
-            type: 'patch',
+            type: 'internal.patch',
             patch: {...patch, origin: 'local'},
+            actionId: getCurrentActionId(editor),
+            value: fromSlateValue(
+              editor.children,
+              schemaTypes.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
           })
-        })
+        }
       }
       return editor
     }

package/src/editor/with-applying-behavior-actions.ts

@@ -1,18 +1,20 @@
 import {Editor} from 'slate'
 import {defaultKeyGenerator} from './key-generator'
 
-const IS_APPLYING_BEHAVIOR_ACTIONS: WeakMap<Editor, boolean | undefined> =
-  new WeakMap()
+const CURRENT_ACTION_ID: WeakMap<Editor, string | undefined> = new WeakMap()
 
 export function withApplyingBehaviorActions(editor: Editor, fn: () => void) {
-  const prev = IS_APPLYING_BEHAVIOR_ACTIONS.get(editor)
-  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, true)
+  CURRENT_ACTION_ID.set(editor, defaultKeyGenerator())
   Editor.withoutNormalizing(editor, fn)
-  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, prev)
+  CURRENT_ACTION_ID.set(editor, undefined)
+}
+
+export function getCurrentActionId(editor: Editor) {
+  return CURRENT_ACTION_ID.get(editor)
 }
 
 export function isApplyingBehaviorActions(editor: Editor) {
-  return IS_APPLYING_BEHAVIOR_ACTIONS.get(editor) ?? false
+  return getCurrentActionId(editor) !== undefined
 }
 
 ////////