@portabletext/editor 1.16.1 → 1.16.3

package/src/editor/sync-machine.ts

@@ -3,13 +3,10 @@ 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,
-  or,
   setup,
   type AnyEventObject,
   type CallbackLogicFunction,
@@ -57,6 +54,7 @@ const syncValueCallback: CallbackLogicFunction<
       schema: EditorSchema
     }
     slateEditor: PortableTextSlateEditor
+    streamBlocks: boolean
     value: Array<PortableTextBlock> | undefined
   }
 > = ({sendBack, input}) => {
@@ -65,6 +63,7 @@ const syncValueCallback: CallbackLogicFunction<
     sendBack,
     slateEditor: input.slateEditor,
     value: input.value,
+    streamBlocks: input.streamBlocks,
   })
 }
 
@@ -85,6 +84,7 @@ const syncValueLogic = fromCallback(syncValueCallback)
 export const syncMachine = setup({
   types: {
     context: {} as {
+      initialValueSynced: boolean
       isProcessingLocalChanges: boolean
       keyGenerator: () => string
       schema: EditorSchema
@@ -115,13 +115,18 @@ export const syncMachine = setup({
           readOnly: boolean
         }
       | SyncValueEvent,
-    emitted: {} as PickFromUnion<
-      SyncValueEvent,
-      'type',
-      'done syncing' | 'invalid value' | 'patch' | 'value changed'
-    >,
+    emitted: {} as
+      | PickFromUnion<
+          SyncValueEvent,
+          'type',
+          'invalid value' | 'patch' | 'value changed'
+        >
+      | {type: 'done syncing initial value'},
   },
   actions: {
+    'assign initial value synced': assign({
+      initialValueSynced: true,
+    }),
     'assign readOnly': assign({
       readOnly: ({event}) => {
         assertEvent(event, 'update readOnly')
@@ -143,21 +148,19 @@ export const syncMachine = setup({
         return event.value
       },
     }),
-    'emit done syncing': emit(({event}) => {
-      assertEvent(event, 'done syncing')
-      return event
+    'emit done syncing initial value': emit({
+      type: 'done syncing initial value',
     }),
   },
   guards: {
-    'is readOnly': ({context}) => context.readOnly,
-    'is processing local changes': ({context}) =>
-      context.isProcessingLocalChanges,
-    'is processing remote changes': ({context}) =>
-      isChangingRemotely(context.slateEditor) ?? false,
-    'is busy': and([
-      not('is readOnly'),
-      or(['is processing local changes', 'is processing remote changes']),
-    ]),
+    'initial value synced': ({context}) => context.initialValueSynced,
+    'is busy': ({context}) => {
+      return (
+        !context.readOnly &&
+        (context.isProcessingLocalChanges ||
+          (isChangingRemotely(context.slateEditor) ?? false))
+      )
+    },
     'value changed while syncing': ({context, event}) => {
       assertEvent(event, 'done syncing')
       return context.pendingValue !== event.value
@@ -174,6 +177,7 @@ export const syncMachine = setup({
 }).createMachine({
   id: 'sync',
   context: ({input}) => ({
+    initialValueSynced: false,
     isProcessingLocalChanges: false,
     keyGenerator: input.keyGenerator,
     schema: input.schema,
@@ -182,7 +186,6 @@ export const syncMachine = setup({
     pendingValue: undefined,
     previousValue: undefined,
   }),
-  initial: 'idle',
   on: {
     'has pending patches': {
       actions: assign({
@@ -198,95 +201,117 @@ export const syncMachine = setup({
       actions: ['assign readOnly'],
     },
   },
+  type: 'parallel',
   states: {
-    idle: {
-      on: {
-        'update value': [
-          {
-            guard: 'is busy',
-            target: 'busy',
-            actions: ['assign pending value'],
-          },
-          {
-            target: 'syncing',
-            actions: ['assign pending value'],
+    'setting up': {
+      initial: 'syncing initial value',
+      states: {
+        'syncing initial value': {
+          always: {
+            guard: 'initial value synced',
+            target: 'done syncing initial value',
           },
-        ],
-      },
-    },
-    busy: {
-      after: {
-        1000: {
-          target: 'syncing',
         },
-      },
-      on: {
-        'update value': [
-          {
-            guard: 'is busy',
-            actions: ['assign pending value'],
-            reenter: true,
-          },
-          {
-            target: 'syncing',
-            actions: ['assign pending value'],
-          },
-        ],
+        'done syncing initial value': {
+          entry: ['emit done syncing initial value'],
+          type: 'final',
+        },
       },
     },
-    syncing: {
-      invoke: {
-        src: 'sync value',
-        id: 'sync value',
-        input: ({context}) => ({
-          context: {
-            keyGenerator: context.keyGenerator,
-            previousValue: context.previousValue,
-            readOnly: context.readOnly,
-            schema: context.schema,
+    'syncing': {
+      initial: 'idle',
+      states: {
+        idle: {
+          on: {
+            'update value': [
+              {
+                guard: 'is busy',
+                target: 'busy',
+                actions: ['assign pending value'],
+              },
+              {
+                target: 'syncing',
+                actions: ['assign pending value'],
+              },
+            ],
           },
-          slateEditor: context.slateEditor,
-          value: context.pendingValue ?? undefined,
-        }),
-      },
-      always: {
-        guard: 'pending value equals previous value',
-        actions: [
-          emit(({context}) => ({
-            type: 'done syncing',
-            value: context.previousValue,
-          })),
-        ],
-        target: 'idle',
-      },
-      on: {
-        'update 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', 'emit done syncing'],
-            reenter: true,
+        busy: {
+          after: {
+            1000: [
+              {
+                guard: 'is busy',
+                reenter: true,
+              },
+              {
+                target: 'syncing',
+              },
+            ],
           },
-          {
+          on: {
+            'update value': [
+              {
+                actions: ['assign pending value'],
+              },
+            ],
+          },
+        },
+        syncing: {
+          always: {
+            guard: 'pending value equals previous value',
             target: 'idle',
-            actions: [
-              'clear pending value',
-              'assign previous value',
-              'emit done syncing',
+            actions: ['clear pending value', 'assign initial value synced'],
+          },
+          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': {
+              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',
+                ],
+                reenter: true,
+              },
+              {
+                target: 'idle',
+                actions: [
+                  'clear pending value',
+                  'assign previous value',
+                  'assign initial value synced',
+                ],
+              },
             ],
           },
-        ],
+        },
       },
     },
   },
@@ -294,10 +319,11 @@ export const syncMachine = setup({
 
 const debug = debugWithName('hook:useSyncValue')
 
-function updateValue({
+async function updateValue({
   context,
   sendBack,
   slateEditor,
+  streamBlocks,
   value,
 }: {
   context: {
@@ -308,6 +334,7 @@ function updateValue({
   }
   sendBack: (event: SyncValueEvent) => void
   slateEditor: PortableTextSlateEditor
+  streamBlocks: boolean
   value: PortableTextBlock[] | undefined
 }) {
   let isChanged = false
@@ -350,41 +377,45 @@ function updateValue({
       schemaTypes: context.schema,
     })
 
-    Editor.withoutNormalizing(slateEditor, () => {
-      withRemoteChanges(slateEditor, () => {
-        withoutPatching(slateEditor, () => {
-          const childrenLength = slateEditor.children.length
+    await new Promise<void>((resolve) => {
+      Editor.withoutNormalizing(slateEditor, () => {
+        withRemoteChanges(slateEditor, () => {
+          withoutPatching(slateEditor, async () => {
+            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],
+            // 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
+            }
+
+            for await (const [currentBlock, currentBlockIndex] of getBlocks({
+              slateValue: slateValueFromProps,
+              streamBlocks,
+            })) {
+              // Go through all of the blocks and see if they need to be updated
+              const {blockChanged, blockValid} = syncBlock({
+                context,
+                sendBack,
+                block: currentBlock,
+                index: currentBlockIndex,
+                slateEditor,
+                value,
               })
+              isChanged = blockChanged || isChanged
+              isValid = isValid && blockValid
             }
-            isChanged = true
-          }
 
-          for (const [
-            currentBlockIndex,
-            currentBlock,
-          ] of slateValueFromProps.entries()) {
-            // Go through all of the blocks and see if they need to be updated
-            const {blockChanged, blockValid} = syncBlock({
-              context,
-              sendBack,
-              block: currentBlock,
-              index: currentBlockIndex,
-              slateEditor,
-              value,
-            })
-            isChanged = blockChanged || isChanged
-            isValid = isValid && blockValid
-          }
+            resolve()
+          })
         })
       })
     })
@@ -425,6 +456,23 @@ function updateValue({
   sendBack({type: 'done syncing', value})
 }
 
+async function* getBlocks({
+  slateValue,
+  streamBlocks,
+}: {
+  slateValue: Array<Descendant>
+  streamBlocks: boolean
+}) {
+  let index = 0
+  for await (const block of slateValue) {
+    if (streamBlocks) {
+      await new Promise<void>((resolve) => setTimeout(resolve, 0))
+    }
+    yield [block, index] as const
+    index++
+  }
+}
+
 function syncBlock({
   context,
   sendBack,
@@ -452,79 +500,91 @@ function syncBlock({
   const oldBlock = slateEditor.children[currentBlockIndex]
   const hasChanges = oldBlock && !isEqual(currentBlock, oldBlock)
 
-  if (hasChanges && blockValid) {
-    const validationValue = [value[currentBlockIndex]]
-    const validation = validateValue(
-      validationValue,
-      context.schema,
-      context.keyGenerator,
-    )
-    // Resolve validations that can be resolved automatically, without involving the user (but only if the value was changed)
-    if (
-      !validation.valid &&
-      validation.resolution?.autoResolve &&
-      validation.resolution?.patches.length > 0
-    ) {
-      // Only apply auto resolution if the value has been populated before and is different from the last one.
-      if (
-        !context.readOnly &&
-        context.previousValue &&
-        context.previousValue !== value
-      ) {
-        // Give a console warning about the fact that it did an auto resolution
-        console.warn(
-          `${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`,
-        )
-        validation.resolution.patches.forEach((patch) => {
-          sendBack({type: 'patch', patch})
-        })
-      }
-    }
-    if (validation.valid || validation.resolution?.autoResolve) {
-      if (oldBlock._key === currentBlock._key) {
-        if (debug.enabled) debug('Updating block', oldBlock, currentBlock)
-        _updateBlock(slateEditor, currentBlock, oldBlock, currentBlockIndex)
-      } else {
-        if (debug.enabled) debug('Replacing block', oldBlock, currentBlock)
-        _replaceBlock(slateEditor, currentBlock, currentBlockIndex)
-      }
-      blockChanged = true
-    } else {
-      sendBack({
-        type: 'invalid value',
-        resolution: validation.resolution,
-        value,
-      })
-      blockValid = false
-    }
-  }
+  Editor.withoutNormalizing(slateEditor, () => {
+    withRemoteChanges(slateEditor, () => {
+      withoutPatching(slateEditor, () => {
+        if (hasChanges && blockValid) {
+          const validationValue = [value[currentBlockIndex]]
+          const validation = validateValue(
+            validationValue,
+            context.schema,
+            context.keyGenerator,
+          )
+          // Resolve validations that can be resolved automatically, without involving the user (but only if the value was changed)
+          if (
+            !validation.valid &&
+            validation.resolution?.autoResolve &&
+            validation.resolution?.patches.length > 0
+          ) {
+            // Only apply auto resolution if the value has been populated before and is different from the last one.
+            if (
+              !context.readOnly &&
+              context.previousValue &&
+              context.previousValue !== value
+            ) {
+              // Give a console warning about the fact that it did an auto resolution
+              console.warn(
+                `${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`,
+              )
+              validation.resolution.patches.forEach((patch) => {
+                sendBack({type: 'patch', patch})
+              })
+            }
+          }
+          if (validation.valid || validation.resolution?.autoResolve) {
+            if (oldBlock._key === currentBlock._key) {
+              if (debug.enabled) debug('Updating block', oldBlock, currentBlock)
+              _updateBlock(
+                slateEditor,
+                currentBlock,
+                oldBlock,
+                currentBlockIndex,
+              )
+            } else {
+              if (debug.enabled)
+                debug('Replacing block', oldBlock, currentBlock)
+              _replaceBlock(slateEditor, currentBlock, currentBlockIndex)
+            }
+            blockChanged = true
+          } else {
+            sendBack({
+              type: 'invalid value',
+              resolution: validation.resolution,
+              value,
+            })
+            blockValid = false
+          }
+        }
 
-  if (!oldBlock && blockValid) {
-    const validationValue = [value[currentBlockIndex]]
-    const validation = validateValue(
-      validationValue,
-      context.schema,
-      context.keyGenerator,
-    )
-    if (debug.enabled)
-      debug(
-        'Validating and inserting new block in the end of the value',
-        currentBlock,
-      )
-    if (validation.valid || validation.resolution?.autoResolve) {
-      Transforms.insertNodes(slateEditor, currentBlock, {
-        at: [currentBlockIndex],
-      })
-    } else {
-      debug('Invalid', validation)
-      sendBack({
-        type: 'invalid value',
-        resolution: validation.resolution,
-        value,
+        if (!oldBlock && blockValid) {
+          const validationValue = [value[currentBlockIndex]]
+          const validation = validateValue(
+            validationValue,
+            context.schema,
+            context.keyGenerator,
+          )
+          if (debug.enabled)
+            debug(
+              'Validating and inserting new block in the end of the value',
+              currentBlock,
+            )
+          if (validation.valid || validation.resolution?.autoResolve) {
+            Transforms.insertNodes(slateEditor, currentBlock, {
+              at: [currentBlockIndex],
+            })
+          } else {
+            debug('Invalid', validation)
+            sendBack({
+              type: 'invalid value',
+              resolution: validation.resolution,
+              value,
+            })
+            blockValid = false
+          }
+        }
       })
-      blockValid = false
-    }
-  }
+    })
+  })
 
   return {blockChanged, blockValid}
 }