@portabletext/editor 1.15.2 → 1.16.0

package/src/editor/PortableTextEditor.tsx

@@ -25,10 +25,10 @@ import type {
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
 import {debugWithName} from '../utils/debug'
-import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import {Synchronizer} from './components/Synchronizer'
 import {createEditor, type Editor} from './create-editor'
+import {createEditorSchema} from './create-editor-schema'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
@@ -158,7 +158,7 @@ export class PortableTextEditor extends Component<
       !prevProps.editor &&
       this.props.schemaType !== prevProps.schemaType
     ) {
-      this.schemaTypes = getPortableTextMemberSchemaTypes(
+      this.schemaTypes = createEditorSchema(
         this.props.schemaType.hasOwnProperty('jsonType')
           ? this.props.schemaType
           : compileType(this.props.schemaType),
@@ -238,8 +238,6 @@ export class PortableTextEditor extends Component<
         />
         <Synchronizer
           editorActor={this.editor._internal.editorActor}
-          getValue={this.editor._internal.editable.getValue}
-          portableTextEditor={this}
           slateEditor={this.editor._internal.slateEditor.instance}
         />
         <EditorActorContext.Provider value={this.editor._internal.editorActor}>
@@ -496,7 +494,8 @@ export function RouteEventsToChanges(props: {
         case 'list item.toggle':
         case 'style.toggle':
         case 'patches':
-        case 'readOnly toggled':
+        case 'editable':
+        case 'read only':
           break
         default:
           handleChange(event)

package/src/editor/{hooks/useSyncValue.test.tsx → __tests__/sync-value.test.tsx}

@@ -1,11 +1,8 @@
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
-import {
-  PortableTextEditorTester,
-  schemaType,
-} from '../__tests__/PortableTextEditorTester'
 import {PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
 const initialValue = [
   {
@@ -52,6 +49,17 @@ describe('useSyncValue', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     rerender(
       <PortableTextEditorTester
         onChange={onChange}
@@ -60,6 +68,7 @@ describe('useSyncValue', () => {
         value={syncedValue}
       />,
     )
+
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual(
@@ -68,6 +77,7 @@ describe('useSyncValue', () => {
       }
     })
   })
+
   it('replaces span nodes with different keys inside the same children array', async () => {
     const editorRef: RefObject<PortableTextEditor | null> = createRef()
     const onChange = vi.fn()
@@ -95,6 +105,17 @@ describe('useSyncValue', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'value',
+          value: initialValue,
+        })
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     rerender(
       <PortableTextEditorTester
         onChange={onChange}
@@ -103,27 +124,25 @@ describe('useSyncValue', () => {
         value={syncedValue}
       />,
     )
+
     await waitFor(() => {
       if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current))
-          .toMatchInlineSnapshot(`
-          [
-            {
-              "_key": "77071c3af231",
-              "_type": "myTestBlockType",
-              "children": [
-                {
-                  "_key": "c001f0e92c1f0__NEW_KEY_YA!",
-                  "_type": "span",
-                  "marks": [],
-                  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
-                },
-              ],
-              "markDefs": [],
-              "style": "normal",
-            },
-          ]
-        `)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: '77071c3af231',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'c001f0e92c1f0__NEW_KEY_YA!',
+                _type: 'span',
+                marks: [],
+                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
       }
     })
   })

package/src/editor/components/Synchronizer.tsx

@@ -1,30 +1,18 @@
-import type {Patch} from '@portabletext/patches'
-import type {PortableTextBlock} from '@sanity/types'
-import {useSelector} from '@xstate/react'
-import {throttle} from 'lodash'
-import {useCallback, useEffect, useRef} from 'react'
-import {Editor} from 'slate'
+import {useActorRef, useSelector} from '@xstate/react'
+import {useEffect} from 'react'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
-import {IS_PROCESSING_LOCAL_CHANGES} from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
-import {useSyncValue} from '../hooks/useSyncValue'
-import type {PortableTextEditor} from '../PortableTextEditor'
+import {mutationMachine} from '../mutation-machine'
+import {syncMachine} from '../sync-machine'
 
 const debug = debugWithName('component:PortableTextEditor:Synchronizer')
-const debugVerbose = debug.enabled && false
-
-// The editor will commit changes in a throttled fashion in order
-// not to overload the network and degrade performance while typing.
-const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === 'test' ? 500 : 1000
 
 /**
  * @internal
  */
 export interface SynchronizerProps {
   editorActor: EditorActor
-  getValue: () => Array<PortableTextBlock> | undefined
-  portableTextEditor: PortableTextEditor
   slateEditor: PortableTextSlateEditor
 }
 
@@ -33,90 +21,75 @@ export interface SynchronizerProps {
  * @internal
  */
 export function Synchronizer(props: SynchronizerProps) {
-  const readOnly = useSelector(props.editorActor, (s) => s.context.readOnly)
-  const value = useSelector(props.editorActor, (s) => s.context.value)
-  const {editorActor, getValue, portableTextEditor, slateEditor} = props
-  const pendingPatches = useRef<Patch[]>([])
+  const {editorActor, slateEditor} = props
 
-  const syncValue = useSyncValue({
-    editorActor,
-    portableTextEditor,
-    readOnly,
-    slateEditor,
+  const value = useSelector(props.editorActor, (s) => s.context.value)
+  const readOnly = useSelector(props.editorActor, (s) =>
+    s.matches({'edit mode': 'read only'}),
+  )
+  const syncActorRef = useActorRef(syncMachine, {
+    input: {
+      keyGenerator: props.editorActor.getSnapshot().context.keyGenerator,
+      readOnly: props.editorActor
+        .getSnapshot()
+        .matches({'edit mode': 'read only'}),
+      schema: props.editorActor.getSnapshot().context.schema,
+      slateEditor,
+    },
+  })
+  const mutationActorRef = useActorRef(mutationMachine, {
+    input: {
+      schema: editorActor.getSnapshot().context.schema,
+      slateEditor,
+    },
   })
 
   useEffect(() => {
-    IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
-  }, [slateEditor])
-
-  const onFlushPendingPatches = useCallback(() => {
-    if (pendingPatches.current.length > 0) {
-      debug('Flushing pending patches')
-      if (debugVerbose) {
-        debug(`Patches:\n${JSON.stringify(pendingPatches.current, null, 2)}`)
+    const subscription = mutationActorRef.on('*', (event) => {
+      if (event.type === 'has pending patches') {
+        syncActorRef.send({type: 'has pending patches'})
+      }
+      if (event.type === 'mutation') {
+        syncActorRef.send({type: 'mutation'})
+        editorActor.send(event)
       }
-      const snapshot = getValue()
-      editorActor.send({
-        type: 'mutation',
-        patches: pendingPatches.current,
-        snapshot,
-      })
-      pendingPatches.current = []
+    })
+
+    return () => {
+      subscription.unsubscribe()
     }
-    IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
-  }, [editorActor, slateEditor, getValue])
+  }, [mutationActorRef, syncActorRef, editorActor])
 
-  // Flush pending patches immediately on unmount
   useEffect(() => {
+    const subscription = syncActorRef.on('*', (event) => {
+      props.editorActor.send(event)
+    })
+
     return () => {
-      onFlushPendingPatches()
+      subscription.unsubscribe()
     }
-  }, [onFlushPendingPatches])
+  }, [props.editorActor, syncActorRef])
 
-  // Subscribe to, and handle changes from the editor
   useEffect(() => {
-    const onFlushPendingPatchesThrottled = throttle(
-      () => {
-        // If the editor is normalizing (each operation) it means that it's not in the middle of a bigger transform,
-        // and we can flush these changes immediately.
-        if (Editor.isNormalizing(slateEditor)) {
-          onFlushPendingPatches()
-          return
-        }
-        // If it's in the middle of something, try again.
-        onFlushPendingPatchesThrottled()
-      },
-      FLUSH_PATCHES_THROTTLED_MS,
-      {
-        leading: false,
-        trailing: true,
-      },
-    )
+    syncActorRef.send({type: 'toggle readOnly'})
+  }, [syncActorRef, readOnly])
 
+  useEffect(() => {
+    debug('Value from props changed, syncing new value')
+    syncActorRef.send({type: 'update value', value})
+  }, [syncActorRef, value])
+
+  // Subscribe to, and handle changes from the editor
+  useEffect(() => {
     debug('Subscribing to patch events')
     const sub = editorActor.on('patch', (event) => {
-      IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, true)
-      pendingPatches.current.push(event.patch)
-      onFlushPendingPatchesThrottled()
+      mutationActorRef.send(event)
     })
     return () => {
       debug('Unsubscribing to patch events')
       sub.unsubscribe()
     }
-  }, [editorActor, onFlushPendingPatches, slateEditor])
-
-  // This hook must be set up after setting up the subscription above, or it will not pick up validation errors from the useSyncValue hook.
-  // This will cause the editor to not be able to signal a validation error and offer invalid value resolution of the initial value.
-  const isInitialValueFromProps = useRef(true)
-  useEffect(() => {
-    debug('Value from props changed, syncing new value')
-    syncValue(value)
-    // Signal that we have our first value, and are ready to roll.
-    if (isInitialValueFromProps.current) {
-      editorActor.send({type: 'ready'})
-      isInitialValueFromProps.current = false
-    }
-  }, [editorActor, syncValue, value])
+  }, [editorActor, mutationActorRef, slateEditor])
 
   return null
 }

package/src/{utils/getPortableTextMemberSchemaTypes.ts → editor/create-editor-schema.ts}

@@ -6,11 +6,11 @@ import type {
   SchemaType,
   SpanSchemaType,
 } from '@sanity/types'
-import type {PortableTextMemberSchemaTypes} from '../types/editor'
+import type {EditorSchema} from './define-schema'
 
-export function getPortableTextMemberSchemaTypes(
+export function createEditorSchema(
   portableTextType: ArraySchemaType<PortableTextBlock>,
-): PortableTextMemberSchemaTypes {
+): EditorSchema {
   if (!portableTextType) {
     throw new Error("Parameter 'portabletextType' missing (required)")
   }

package/src/editor/create-editor.ts

@@ -14,8 +14,8 @@ import {
 import type {Behavior} from '../behaviors/behavior.types'
 import type {PickFromUnion} from '../type-utils'
 import type {EditableAPI} from '../types/editor'
-import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
+import {createEditorSchema} from './create-editor-schema'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {
@@ -107,7 +107,7 @@ function editorConfigToMachineInput(config: EditorConfig) {
     readOnly: config.readOnly,
     schema: config.schemaDefinition
       ? compileSchemaDefinition(config.schemaDefinition)
-      : getPortableTextMemberSchemaTypes(
+      : createEditorSchema(
           config.schema.hasOwnProperty('jsonType')
             ? config.schema
             : compileType(config.schema),

package/src/editor/define-schema.ts

@@ -7,7 +7,7 @@ import {
 } from '@sanity/types'
 import startCase from 'lodash.startcase'
 import type {PortableTextMemberSchemaTypes} from '../types/editor'
-import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
+import {createEditorSchema} from './create-editor-schema'
 
 /**
  * @alpha
@@ -41,6 +41,11 @@ export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
   return definition
 }
 
+/**
+ * @alpha
+ */
+export type EditorSchema = PortableTextMemberSchemaTypes
+
 export function compileSchemaDefinition<
   TSchemaDefinition extends SchemaDefinition,
 >(definition?: TSchemaDefinition) {
@@ -111,7 +116,7 @@ export function compileSchemaDefinition<
     types: [portableTextSchema, ...blockObjects, ...inlineObjects],
   }).get('portable-text')
 
-  const pteSchema = getPortableTextMemberSchemaTypes(schema)
+  const pteSchema = createEditorSchema(schema)
 
   return {
     ...pteSchema,
@@ -127,5 +132,5 @@ export function compileSchemaDefinition<
           } as ObjectSchemaType)
         : blockObject,
     ),
-  } satisfies PortableTextMemberSchemaTypes
+  } satisfies EditorSchema
 }