@portabletext/editor 1.49.3 → 1.49.5

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',
             ],
           },
-        },
+        ],
       },
     },
   },
@@ -444,48 +423,69 @@ async function updateValue({
       schemaTypes: context.schema,
     })
 
-    await new Promise<void>((resolve) => {
-      Editor.withoutNormalizing(slateEditor, () => {
-        withRemoteChanges(slateEditor, () => {
-          withoutPatching(slateEditor, async () => {
-            const childrenLength = slateEditor.children.length
+    if (streamBlocks) {
+      await new Promise<void>((resolve) => {
+        Editor.withoutNormalizing(slateEditor, () => {
+          withRemoteChanges(slateEditor, () => {
+            withoutPatching(slateEditor, async () => {
+              isChanged = removeExtraBlocks({
+                slateEditor,
+                slateValueFromProps,
+              })
 
-            // Remove blocks that have become superfluous
-            if (slateValueFromProps.length < childrenLength) {
-              for (
-                let i = childrenLength - 1;
-                i > slateValueFromProps.length - 1;
-                i--
-              ) {
-                Transforms.removeNodes(slateEditor, {
-                  at: [i],
+              for await (const [
+                currentBlock,
+                currentBlockIndex,
+              ] of getStreamedBlocks({
+                slateValue: slateValueFromProps,
+              })) {
+                const {blockChanged, blockValid} = syncBlock({
+                  context,
+                  sendBack,
+                  block: currentBlock,
+                  index: currentBlockIndex,
+                  slateEditor,
+                  value,
                 })
+
+                isChanged = blockChanged || isChanged
+                isValid = isValid && blockValid
               }
-              isChanged = true
-            }
 
-            for await (const [currentBlock, currentBlockIndex] of getBlocks({
-              slateValue: slateValueFromProps,
-              streamBlocks,
-            })) {
-              // Go through all of the blocks and see if they need to be updated
+              resolve()
+            })
+          })
+        })
+      })
+    } else {
+      Editor.withoutNormalizing(slateEditor, () => {
+        withRemoteChanges(slateEditor, () => {
+          withoutPatching(slateEditor, () => {
+            isChanged = removeExtraBlocks({
+              slateEditor,
+              slateValueFromProps,
+            })
+
+            let index = 0
+
+            for (const currentBlock of slateValueFromProps) {
               const {blockChanged, blockValid} = syncBlock({
                 context,
                 sendBack,
                 block: currentBlock,
-                index: currentBlockIndex,
+                index,
                 slateEditor,
                 value,
               })
+
               isChanged = blockChanged || isChanged
               isValid = isValid && blockValid
+              index++
             }
-
-            resolve()
           })
         })
       })
-    })
+    }
   }
 
   if (!isValid) {
@@ -523,16 +523,36 @@ async function updateValue({
   sendBack({type: 'done syncing', value})
 }
 
-async function* getBlocks({
+function removeExtraBlocks({
+  slateEditor,
+  slateValueFromProps,
+}: {
+  slateEditor: PortableTextSlateEditor
+  slateValueFromProps: Array<Descendant>
+}) {
+  let isChanged = false
+  const childrenLength = slateEditor.children.length
+
+  // Remove blocks that have become superfluous
+  if (slateValueFromProps.length < childrenLength) {
+    for (let i = childrenLength - 1; i > slateValueFromProps.length - 1; i--) {
+      Transforms.removeNodes(slateEditor, {
+        at: [i],
+      })
+    }
+    isChanged = true
+  }
+  return isChanged
+}
+
+async function* getStreamedBlocks({
   slateValue,
-  streamBlocks,
 }: {
   slateValue: Array<Descendant>
-  streamBlocks: boolean
 }) {
   let index = 0
   for await (const block of slateValue) {
-    if (streamBlocks && index % 10 === 0) {
+    if (index % 10 === 0) {
       await new Promise<void>((resolve) => setTimeout(resolve, 0))
     }
     yield [block, index] as const