@portabletext/editor 1.49.4 → 1.49.5

package/src/editor/Editable.tsx

@@ -200,7 +200,6 @@ export const PortableTextEditable = forwardRef<
   useMemo(() => {
     // React/UI-specific plugins
     if (readOnly) {
-      debug('Editable is in read only mode')
       return slateEditor
     }
     const withHotKeys = createWithHotkeys(
@@ -209,7 +208,6 @@ export const PortableTextEditable = forwardRef<
       hotkeys,
     )
 
-    debug('Editable is in edit mode')
     return withHotKeys(slateEditor)
   }, [editorActor, hotkeys, portableTextEditor, readOnly, slateEditor])
 

package/src/editor/editor-machine.ts

@@ -16,6 +16,7 @@ import {coreBehaviorsConfig} from '../behaviors/behavior.core'
 import {performEvent} from '../behaviors/behavior.perform-event'
 import type {BehaviorEvent} 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'
 import {sortByPriority} from '../priority/priority.sort'
 import type {NamespaceEvent} from '../type-utils'
@@ -30,6 +31,8 @@ import {createEditorSnapshot} from './editor-snapshot'
 
 export * from 'xstate/guards'
 
+const debug = debugWithName('editor machine')
+
 /**
  * @public
  */
@@ -459,6 +462,20 @@ export const editorMachine = setup({
           },
           states: {
             'determine initial edit mode': {
+              entry: [
+                () => {
+                  debug(
+                    'entry: edit mode->read only->determine initial edit mode',
+                  )
+                },
+              ],
+              exit: [
+                () => {
+                  debug(
+                    'exit: edit mode->read only->determine initial edit mode',
+                  )
+                },
+              ],
               on: {
                 'done syncing value': [
                   {
@@ -472,6 +489,16 @@ export const editorMachine = setup({
               },
             },
             'read only': {
+              entry: [
+                () => {
+                  debug('entry: edit mode->read only->read only')
+                },
+              ],
+              exit: [
+                () => {
+                  debug('exit: edit mode->read only->read only')
+                },
+              ],
               on: {
                 'update readOnly': {
                   guard: ({event}) => !event.readOnly,
@@ -503,6 +530,16 @@ export const editorMachine = setup({
           initial: 'idle',
           states: {
             'idle': {
+              entry: [
+                () => {
+                  debug('entry: edit mode->editable->idle')
+                },
+              ],
+              exit: [
+                () => {
+                  debug('exit: edit mode->editable-idle')
+                },
+              ],
               on: {
                 dragstart: {
                   actions: [
@@ -521,6 +558,20 @@ export const editorMachine = setup({
               initial: 'checking if busy',
               states: {
                 'checking if busy': {
+                  entry: [
+                    () => {
+                      debug(
+                        'entry: edit mode->editable->focusing->checking if busy',
+                      )
+                    },
+                  ],
+                  exit: [
+                    () => {
+                      debug(
+                        'exit: edit mode->editable->focusing->checking if busy',
+                      )
+                    },
+                  ],
                   always: [
                     {
                       guard: 'slate is busy',
@@ -533,6 +584,16 @@ export const editorMachine = setup({
                   ],
                 },
                 'busy': {
+                  entry: [
+                    () => {
+                      debug('entry: edit mode->editable->focusing-busy')
+                    },
+                  ],
+                  exit: [
+                    () => {
+                      debug('exit: edit mode->editable->focusing->busy')
+                    },
+                  ],
                   after: {
                     10: {
                       target: 'checking if busy',
@@ -542,7 +603,15 @@ export const editorMachine = setup({
               },
             },
             'dragging internally': {
+              entry: [
+                () => {
+                  debug('entry: edit mode->editable->dragging internally')
+                },
+              ],
               exit: [
+                () => {
+                  debug('exit: edit mode->editable->dragging internally')
+                },
                 ({context}) => {
                   if (context.internalDrag?.ghost) {
                     try {
@@ -574,7 +643,15 @@ export const editorMachine = setup({
       initial: 'setting up',
       states: {
         'setting up': {
+          entry: [
+            () => {
+              debug('entry: setup->setting up')
+            },
+          ],
           exit: [
+            () => {
+              debug('exit: setup->setting up')
+            },
             'emit ready',
             'emit pending incoming patches',
             'clear pending incoming patches',
@@ -601,6 +678,16 @@ export const editorMachine = setup({
               initial: 'idle',
               states: {
                 'idle': {
+                  entry: [
+                    () => {
+                      debug('entry: setup->set up->value sync->idle')
+                    },
+                  ],
+                  exit: [
+                    () => {
+                      debug('exit: setup->set up->value sync->idle')
+                    },
+                  ],
                   on: {
                     'patches': {
                       actions: [emit(({event}) => event)],
@@ -611,7 +698,15 @@ export const editorMachine = setup({
                   },
                 },
                 'syncing value': {
+                  entry: [
+                    () => {
+                      debug('entry: setup->set up->value sync->syncing value')
+                    },
+                  ],
                   exit: [
+                    () => {
+                      debug('exit: setup->set up->value sync->syncing value')
+                    },
                     'emit pending incoming patches',
                     'clear pending incoming patches',
                   ],
@@ -633,6 +728,16 @@ export const editorMachine = setup({
                   initial: 'idle',
                   states: {
                     idle: {
+                      entry: [
+                        () => {
+                          debug('entry: setup->set up->writing->pristine->idle')
+                        },
+                      ],
+                      exit: [
+                        () => {
+                          debug('exit: setup->set up->writing->pristine->idle')
+                        },
+                      ],
                       on: {
                         'normalizing': {
                           target: 'normalizing',
@@ -648,6 +753,20 @@ export const editorMachine = setup({
                       },
                     },
                     normalizing: {
+                      entry: [
+                        () => {
+                          debug(
+                            'entry: setup->set up->writing->pristine->normalizing',
+                          )
+                        },
+                      ],
+                      exit: [
+                        () => {
+                          debug(
+                            'exit: setup->set up->writing->pristine->normalizing',
+                          )
+                        },
+                      ],
                       on: {
                         'done normalizing': {
                           target: 'idle',
@@ -663,7 +782,18 @@ export const editorMachine = setup({
                   },
                 },
                 dirty: {
-                  entry: ['emit pending events', 'clear pending events'],
+                  entry: [
+                    () => {
+                      debug('entry: setup->set up->writing->dirty')
+                    },
+                    'emit pending events',
+                    'clear pending events',
+                  ],
+                  exit: [
+                    () => {
+                      debug('exit: setup->set up->writing->dirty')
+                    },
+                  ],
                   on: {
                     'internal.patch': {
                       actions: 'emit patch event',

package/src/editor/sync-machine.ts

@@ -3,10 +3,12 @@ import type {PortableTextBlock} from '@sanity/types'
 import {isEqual} from 'lodash'
 import {Editor, Text, Transforms, type Descendant, type Node} from 'slate'
 import {
+  and,
   assertEvent,
   assign,
   emit,
   fromCallback,
+  not,
   setup,
   type AnyEventObject,
   type CallbackLogicFunction,
@@ -173,6 +175,11 @@ export const syncMachine = setup({
 
       return isBusy
     },
+    'is new value': ({context, event}) => {
+      return (
+        event.type === 'update value' && context.previousValue !== event.value
+      )
+    },
     'value changed while syncing': ({context, event}) => {
       assertEvent(event, 'done syncing')
       return context.pendingValue !== event.value
@@ -211,176 +218,148 @@ export const syncMachine = setup({
       actions: ['assign readOnly'],
     },
   },
-  type: 'parallel',
+  initial: 'idle',
   states: {
-    'setting up': {
-      initial: 'syncing initial value',
-      states: {
-        'syncing initial value': {
-          entry: [
-            () => {
-              debug('entry: syncing initial value')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: syncing initial value')
-            },
-          ],
-          always: {
-            guard: 'initial value synced',
-            target: 'done syncing initial value',
-          },
+    idle: {
+      entry: [
+        () => {
+          debug('entry: syncing->idle')
         },
-        'done syncing initial value': {
-          entry: [
-            'emit done syncing value',
-            () => {
-              debug('entry: done syncing initial value')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: done syncing initial value')
-            },
-          ],
-          type: 'final',
+      ],
+      exit: [
+        () => {
+          debug('exit: syncing->idle')
         },
-      },
-    },
-    'syncing': {
-      initial: 'idle',
-      states: {
-        idle: {
-          entry: [
-            () => {
-              debug('entry: syncing->idle')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: syncing->idle')
-            },
-          ],
-          on: {
-            'update value': [
-              {
-                guard: 'is busy',
-                target: 'busy',
-                actions: ['assign pending value'],
-              },
-              {
-                target: 'syncing',
-                actions: ['assign pending value'],
+      ],
+      on: {
+        'update value': [
+          {
+            guard: and(['is busy', 'is new value']),
+            target: 'busy',
+            actions: ['assign pending value'],
+          },
+          {
+            guard: 'is new value',
+            target: 'syncing',
+            actions: ['assign pending value'],
+          },
+          {
+            guard: not('initial value synced'),
+            actions: [
+              () => {
+                debug('no new value – setting initial value as synced')
               },
+              'assign initial value synced',
+              'emit done syncing value',
             ],
           },
-        },
-        busy: {
-          entry: [
-            () => {
-              debug('entry: syncing->busy')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: syncing->busy')
-            },
-          ],
-          after: {
-            1000: [
-              {
-                guard: 'is busy',
-                target: '.',
-                reenter: true,
-                actions: [
-                  () => {
-                    debug('reenter: syncing->busy')
-                  },
-                ],
-              },
-              {
-                target: 'syncing',
+          {
+            actions: [
+              () => {
+                debug('no new value and initial value already synced')
               },
             ],
           },
-          on: {
-            'update value': [
-              {
-                actions: ['assign pending value'],
+        ],
+      },
+    },
+    busy: {
+      entry: [
+        () => {
+          debug('entry: syncing->busy')
+        },
+      ],
+      exit: [
+        () => {
+          debug('exit: syncing->busy')
+        },
+      ],
+      after: {
+        1000: [
+          {
+            guard: 'is busy',
+            target: '.',
+            reenter: true,
+            actions: [
+              () => {
+                debug('reenter: syncing->busy')
               },
             ],
           },
-        },
-        syncing: {
-          entry: [
-            () => {
-              debug('entry: syncing->syncing')
-            },
-            'emit syncing value',
-          ],
-          exit: [
-            () => {
-              debug('exit: syncing->syncing')
-            },
-            'emit done syncing value',
-          ],
-          always: {
-            guard: 'pending value equals previous value',
-            target: 'idle',
-            actions: ['clear pending value', 'assign initial value synced'],
+          {
+            target: 'syncing',
           },
-          invoke: {
-            src: 'sync value',
-            id: 'sync value',
-            input: ({context}) => {
-              return {
-                context: {
-                  keyGenerator: context.keyGenerator,
-                  previousValue: context.previousValue,
-                  readOnly: context.readOnly,
-                  schema: context.schema,
-                },
-                slateEditor: context.slateEditor,
-                streamBlocks: !context.initialValueSynced,
-                value: context.pendingValue,
-              }
-            },
+        ],
+      },
+      on: {
+        'update value': [
+          {
+            guard: 'is new value',
+            actions: ['assign pending value'],
           },
-          on: {
-            'update value': {
-              actions: ['assign pending value'],
-            },
-            'patch': {
-              actions: [emit(({event}) => event)],
-            },
-            'invalid value': {
-              actions: [emit(({event}) => event)],
-            },
-            'value changed': {
-              actions: [emit(({event}) => event)],
+        ],
+      },
+    },
+    syncing: {
+      entry: [
+        () => {
+          debug('entry: syncing->syncing')
+        },
+        'emit syncing value',
+      ],
+      exit: [
+        () => {
+          debug('exit: syncing->syncing')
+        },
+        'emit done syncing value',
+      ],
+      invoke: {
+        src: 'sync value',
+        id: 'sync value',
+        input: ({context}) => {
+          return {
+            context: {
+              keyGenerator: context.keyGenerator,
+              previousValue: context.previousValue,
+              readOnly: context.readOnly,
+              schema: context.schema,
             },
-            'done syncing': [
-              {
-                guard: 'value changed while syncing',
-                actions: [
-                  'assign previous value',
-                  'assign initial value synced',
-                ],
-                target: 'syncing',
-                reenter: true,
-              },
-              {
-                target: 'idle',
-                actions: [
-                  'clear pending value',
-                  'assign previous value',
-                  'assign initial value synced',
-                ],
-              },
+            slateEditor: context.slateEditor,
+            streamBlocks: !context.initialValueSynced,
+            value: context.pendingValue,
+          }
+        },
+      },
+      on: {
+        'update value': {
+          guard: 'is new value',
+          actions: ['assign pending value'],
+        },
+        'patch': {
+          actions: [emit(({event}) => event)],
+        },
+        'invalid value': {
+          actions: [emit(({event}) => event)],
+        },
+        'value changed': {
+          actions: [emit(({event}) => event)],
+        },
+        'done syncing': [
+          {
+            guard: 'value changed while syncing',
+            actions: ['assign previous value', 'assign initial value synced'],
+            target: 'syncing',
+            reenter: true,
+          },
+          {
+            target: 'idle',
+            actions: [
+              'clear pending value',
+              'assign previous value',
+              'assign initial value synced',
             ],
           },
-        },
+        ],
       },
     },
   },