@portabletext/editor 1.15.3 → 1.16.1

package/src/editor/mutation-machine.ts

@@ -0,0 +1,100 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
+import {Editor} from 'slate'
+import {assign, emit, setup} from 'xstate'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {fromSlateValue} from '../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+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>
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    events: {} as {type: 'patch'; patch: Patch},
+    input: {} as {
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    emitted: {} as
+      | {
+          type: 'has pending patches'
+        }
+      | {
+          type: 'mutation'
+          patches: Array<Patch>
+          snapshot: Array<PortableTextBlock> | undefined
+        },
+  },
+  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: [],
+    }),
+    'defer patch': assign({
+      pendingPatches: ({context, event}) => [
+        ...context.pendingPatches,
+        event.patch,
+      ],
+    }),
+  },
+  guards: {
+    'slate is normalizing': ({context}) =>
+      Editor.isNormalizing(context.slateEditor),
+  },
+}).createMachine({
+  id: 'mutation',
+  context: ({input}) => ({
+    pendingPatches: [],
+    schema: input.schema,
+    slateEditor: input.slateEditor,
+  }),
+  initial: 'idle',
+  states: {
+    'idle': {
+      on: {
+        patch: {
+          actions: ['defer patch', 'emit has pending patches'],
+          target: 'has pending patches',
+        },
+      },
+    },
+    'has pending patches': {
+      after: {
+        [FLUSH_PATCHES_THROTTLED_MS]: [
+          {
+            guard: 'slate is normalizing',
+            target: 'idle',
+            actions: ['emit mutation', 'clear pending patches'],
+          },
+          {
+            reenter: true,
+          },
+        ],
+      },
+      on: {
+        patch: {
+          actions: ['defer patch'],
+          reenter: true,
+        },
+      },
+    },
+  },
+})

package/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -49,26 +49,22 @@ describe('plugin:withPortableTextMarksModel', () => {
           anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 4},
         })
         PortableTextEditor.toggleMark(editor, 'strong')
-        expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        [
+        expect(PortableTextEditor.getValue(editor)).toEqual([
           {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": [
+            _key: 'a',
+            _type: 'myTestBlockType',
+            children: [
               {
-                "_key": "a1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "1234",
+                _key: 'a1',
+                _type: 'span',
+                marks: ['strong'],
+                text: '1234',
               },
             ],
-            "markDefs": [],
-            "style": "normal",
+            markDefs: [],
+            style: 'normal',
           },
-        ]
-      `)
+        ])
       })
       await waitFor(() => {
         if (editorRef.current) {
@@ -871,6 +867,16 @@ describe('plugin:withPortableTextMarksModel', () => {
         )
       })
 
+      await waitFor(() => {
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'value',
+            value: initialValue,
+          })
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
+      })
+
       await waitFor(() => {
         if (editorRef.current) {
           PortableTextEditor.focus(editorRef.current)

package/src/editor/plugins/createWithMaxBlocks.ts

@@ -13,7 +13,7 @@ export function createWithMaxBlocks(editorActor: EditorActor) {
   ): PortableTextSlateEditor {
     const {apply} = editor
     editor.apply = (operation) => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         apply(operation)
         return
       }

package/src/editor/plugins/createWithPatches.ts

@@ -150,10 +150,6 @@ export function createWithPatches({
     })
 
     editor.apply = (operation: Operation): void | Editor => {
-      if (editorActor.getSnapshot().context.readOnly) {
-        apply(operation)
-        return editor
-      }
       let patches: Patch[] = []
 
       // Update previous children here before we apply

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -21,7 +21,7 @@ export function createWithPlaceholderBlock(
     const {apply} = editor
 
     editor.apply = (op) => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         apply(op)
         return
       }

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -57,7 +57,10 @@ export function createWithPortableTextSelections(
     editor.onChange = () => {
       const hasChanges = editor.operations.length > 0
       onChange()
-      if (hasChanges) {
+      if (
+        hasChanges &&
+        !editorActor.getSnapshot().matches({setup: 'setting up'})
+      ) {
         emitPortableTextSelection()
       }
     }

package/src/editor/plugins/createWithUndoRedo.ts

@@ -114,7 +114,7 @@ export function createWithUndoRedo(
     editor.history = {undos: [], redos: []}
     const {apply} = editor
     editor.apply = (op: Operation) => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         apply(op)
         return
       }
@@ -181,7 +181,7 @@ export function createWithUndoRedo(
     }
 
     editor.undo = () => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         return
       }
       const {undos} = editor.history
@@ -239,7 +239,7 @@ export function createWithUndoRedo(
     }
 
     editor.redo = () => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         return
       }
       const {redos} = editor.history