@portabletext/editor 1.16.0 → 1.16.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/PortableTextEditor.tsx

@@ -173,7 +173,8 @@ export class PortableTextEditor extends Component<
     if (!this.props.editor && !prevProps.editor) {
       if (this.props.readOnly !== prevProps.readOnly) {
         this.editor._internal.editorActor.send({
-          type: 'toggle readOnly',
+          type: 'update readOnly',
+          readOnly: this.props.readOnly ?? false,
         })
       }
 

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -34,18 +34,33 @@ describe('RangeDecorations', () => {
         },
       },
     ]
-    const {rerender} = render(
-      <PortableTextEditorTester
-        onChange={onChange}
-        rangeDecorations={rangeDecorations}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={value}
-      />,
+
+    const {rerender} = await waitFor(() =>
+      render(
+        <PortableTextEditorTester
+          onChange={onChange}
+          rangeDecorations={rangeDecorations}
+          ref={editorRef}
+          schemaType={schemaType}
+          value={value}
+        />,
+      ),
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value,
+        })
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     await waitFor(() => {
       expect([rangeDecorationIteration, 'initial']).toEqual([1, 'initial'])
     })
+
     // Re-render with the same range decorations
     rerender(
       <PortableTextEditorTester

package/src/editor/__tests__/pteWarningsSelfSolving.test.tsx

@@ -48,7 +48,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '4',
+                _key: '2',
                 _type: 'span',
                 text: 'Hello with a new key',
                 marks: [],
@@ -162,7 +162,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '5',
+                _key: '2',
                 _type: 'span',
                 text: '',
                 marks: [],
@@ -176,7 +176,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '6',
+                _key: '4',
                 _type: 'span',
                 text: '',
                 marks: [],

package/src/editor/components/Synchronizer.tsx

@@ -71,7 +71,7 @@ export function Synchronizer(props: SynchronizerProps) {
   }, [props.editorActor, syncActorRef])
 
   useEffect(() => {
-    syncActorRef.send({type: 'toggle readOnly'})
+    syncActorRef.send({type: 'update readOnly', readOnly})
   }, [syncActorRef, readOnly])
 
   useEffect(() => {

package/src/editor/create-editor.ts

@@ -33,6 +33,9 @@ import {createEditableAPI} from './plugins/createWithEditableAPI'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
+  /**
+   * @deprecated Will be removed in the next major version
+   */
   maxBlocks?: number
   readOnly?: boolean
   initialValue?: Array<PortableTextBlock>
@@ -64,8 +67,8 @@ export type EditorEvent = PickFromUnion<
   | 'list item.toggle'
   | 'style.toggle'
   | 'patches'
-  | 'toggle readOnly'
   | 'update behaviors'
+  | 'update readOnly'
   | 'update value'
 >
 

package/src/editor/editor-machine.ts

@@ -81,6 +81,10 @@ export type InternalEditorEvent =
       editor: PortableTextSlateEditor
       actionIntends: Array<BehaviorActionIntend>
     }
+  | {
+      type: 'update readOnly'
+      readOnly: boolean
+    }
   | {
       type: 'update schema'
       schema: EditorSchema
@@ -93,9 +97,6 @@ export type InternalEditorEvent =
       type: 'update value'
       value: Array<PortableTextBlock> | undefined
     }
-  | {
-      type: 'toggle readOnly'
-    }
   | {
       type: 'update maxBlocks'
       maxBlocks: number | undefined
@@ -439,7 +440,8 @@ export const editorMachine = setup({
             },
             'read only': {
               on: {
-                'toggle readOnly': {
+                'update readOnly': {
+                  guard: ({event}) => !event.readOnly,
                   target: '#editor.edit mode.editable',
                   actions: ['emit editable'],
                 },
@@ -449,7 +451,8 @@ export const editorMachine = setup({
         },
         'editable': {
           on: {
-            'toggle readOnly': {
+            'update readOnly': {
+              guard: ({event}) => event.readOnly,
               target: '#editor.edit mode.read only.read only',
               actions: ['emit read only'],
             },

package/src/editor/sync-machine.ts

@@ -57,6 +57,7 @@ const syncValueCallback: CallbackLogicFunction<
       schema: EditorSchema
     }
     slateEditor: PortableTextSlateEditor
+    streamBlocks: boolean
     value: Array<PortableTextBlock> | undefined
   }
 > = ({sendBack, input}) => {
@@ -65,6 +66,7 @@ const syncValueCallback: CallbackLogicFunction<
     sendBack,
     slateEditor: input.slateEditor,
     value: input.value,
+    streamBlocks: input.streamBlocks,
   })
 }
 
@@ -85,6 +87,7 @@ const syncValueLogic = fromCallback(syncValueCallback)
 export const syncMachine = setup({
   types: {
     context: {} as {
+      initialValueSynced: boolean
       isProcessingLocalChanges: boolean
       keyGenerator: () => string
       schema: EditorSchema
@@ -111,7 +114,8 @@ export const syncMachine = setup({
           value: Array<PortableTextBlock> | undefined
         }
       | {
-          type: 'toggle readOnly'
+          type: 'update readOnly'
+          readOnly: boolean
         }
       | SyncValueEvent,
     emitted: {} as PickFromUnion<
@@ -121,8 +125,14 @@ export const syncMachine = setup({
     >,
   },
   actions: {
+    'assign initial value synced': assign({
+      initialValueSynced: true,
+    }),
     'assign readOnly': assign({
-      readOnly: ({context}) => !context.readOnly,
+      readOnly: ({event}) => {
+        assertEvent(event, 'update readOnly')
+        return event.readOnly
+      },
     }),
     'assign pending value': assign({
       pendingValue: ({event}) => {
@@ -170,6 +180,7 @@ export const syncMachine = setup({
 }).createMachine({
   id: 'sync',
   context: ({input}) => ({
+    initialValueSynced: false,
     isProcessingLocalChanges: false,
     keyGenerator: input.keyGenerator,
     schema: input.schema,
@@ -190,7 +201,7 @@ export const syncMachine = setup({
         isProcessingLocalChanges: false,
       }),
     },
-    'toggle readOnly': {
+    'update readOnly': {
       actions: ['assign readOnly'],
     },
   },
@@ -234,16 +245,19 @@ export const syncMachine = setup({
       invoke: {
         src: 'sync value',
         id: 'sync value',
-        input: ({context}) => ({
-          context: {
-            keyGenerator: context.keyGenerator,
-            previousValue: context.previousValue,
-            readOnly: context.readOnly,
-            schema: context.schema,
-          },
-          slateEditor: context.slateEditor,
-          value: context.pendingValue ?? undefined,
-        }),
+        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 ?? undefined,
+          }
+        },
       },
       always: {
         guard: 'pending value equals previous value',
@@ -271,7 +285,11 @@ export const syncMachine = setup({
         'done syncing': [
           {
             guard: 'value changed while syncing',
-            actions: ['assign previous value', 'emit done syncing'],
+            actions: [
+              'assign previous value',
+              'emit done syncing',
+              'assign initial value synced',
+            ],
             reenter: true,
           },
           {
@@ -280,6 +298,7 @@ export const syncMachine = setup({
               'clear pending value',
               'assign previous value',
               'emit done syncing',
+              'assign initial value synced',
             ],
           },
         ],
@@ -290,10 +309,11 @@ export const syncMachine = setup({
 
 const debug = debugWithName('hook:useSyncValue')
 
-function updateValue({
+async function updateValue({
   context,
   sendBack,
   slateEditor,
+  streamBlocks,
   value,
 }: {
   context: {
@@ -304,6 +324,7 @@ function updateValue({
   }
   sendBack: (event: SyncValueEvent) => void
   slateEditor: PortableTextSlateEditor
+  streamBlocks: boolean
   value: PortableTextBlock[] | undefined
 }) {
   let isChanged = false
@@ -346,41 +367,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()
+          })
         })
       })
     })
@@ -421,6 +446,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,
@@ -448,79 +490,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}
 }