@portabletext/editor 1.49.6 → 1.49.8

package/src/editor/PortableTextEditor.tsx

@@ -14,7 +14,6 @@ import {
 } from 'react'
 import {Subject} from 'rxjs'
 import {Slate} from 'slate-react'
-import {useEffectEvent} from 'use-effect-event'
 import {createActor} from 'xstate'
 import {createCoreConverters} from '../converters/converters.core'
 import {debugWithName} from '../internal-utils/debug'
@@ -29,7 +28,6 @@ import type {
   PatchObservable,
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
-import {Synchronizer} from './components/Synchronizer'
 import {createInternalEditor, type InternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {editorMachine, type EditorActor} from './editor-machine'
@@ -38,6 +36,7 @@ import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
+import {eventToChange} from './route-events-to-changes'
 
 const debug = debugWithName('component:PortableTextEditor')
 
@@ -164,6 +163,16 @@ export class PortableTextEditor extends Component<
       })
       editorActor.start()
 
+      editorActor.on('*', (event) => {
+        const change = eventToChange(event)
+
+        if (change) {
+          props.onChange(change)
+
+          this.change$.next(change)
+        }
+      })
+
       this.editor = createInternalEditor(editorActor)
       this.schemaTypes = legacySchema
     }
@@ -209,7 +218,7 @@ export class PortableTextEditor extends Component<
       }
 
       if (this.props.value !== prevProps.value) {
-        this.editor._internal.editorActor.send({
+        this.editor.send({
           type: 'update value',
           value: this.props.value,
         })
@@ -244,23 +253,6 @@ export class PortableTextEditor extends Component<
             patches$={legacyPatches}
           />
         ) : null}
-        <RouteEventsToChanges
-          editorActor={this.editor._internal.editorActor}
-          onChange={(change) => {
-            if (!this.props.editor) {
-              this.props.onChange(change)
-            }
-            /**
-             * For backwards compatibility, we relay all changes to the
-             * `change$` Subject as well.
-             */
-            this.change$.next(change)
-          }}
-        />
-        <Synchronizer
-          editorActor={this.editor._internal.editorActor}
-          slateEditor={this.editor._internal.slateEditor.instance}
-        />
         <EditorActorContext.Provider value={this.editor._internal.editorActor}>
           <Slate
             editor={this.editor._internal.slateEditor.instance}
@@ -775,84 +767,3 @@ function RoutePatchesObservableToEditorActor(props: {
 
   return null
 }
-
-export function RouteEventsToChanges(props: {
-  editorActor: EditorActor
-  onChange: (change: EditorChange) => void
-}) {
-  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
-  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
-  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
-  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
-  const handleChange = useEffectEvent((change: EditorChange) =>
-    props.onChange(change),
-  )
-
-  useEffect(() => {
-    debug('Subscribing to editor changes')
-    const sub = props.editorActor.on('*', (event) => {
-      switch (event.type) {
-        case 'blurred': {
-          handleChange({type: 'blur', event: event.event})
-          break
-        }
-        case 'patch':
-          handleChange(event)
-          break
-        case 'loading': {
-          handleChange({type: 'loading', isLoading: true})
-          break
-        }
-        case 'done loading': {
-          handleChange({type: 'loading', isLoading: false})
-          break
-        }
-        case 'focused': {
-          handleChange({type: 'focus', event: event.event})
-          break
-        }
-        case 'value changed': {
-          handleChange({type: 'value', value: event.value})
-          break
-        }
-        case 'invalid value': {
-          handleChange({
-            type: 'invalidValue',
-            resolution: event.resolution,
-            value: event.value,
-          })
-          break
-        }
-        case 'error': {
-          handleChange({
-            ...event,
-            level: 'warning',
-          })
-          break
-        }
-        case 'mutation': {
-          handleChange(event)
-          break
-        }
-        case 'ready': {
-          handleChange(event)
-          break
-        }
-        case 'selection': {
-          handleChange(event)
-          break
-        }
-        case 'unset': {
-          handleChange(event)
-          break
-        }
-      }
-    })
-    return () => {
-      debug('Unsubscribing to changes')
-      sub.unsubscribe()
-    }
-  }, [props.editorActor])
-
-  return null
-}

package/src/editor/create-editor.ts

@@ -1,9 +1,13 @@
+import {createActor, type ActorRefFrom} from 'xstate'
 import {createCoreConverters} from '../converters/converters.core'
 import type {Editor, EditorConfig} from '../editor'
+import {debugWithName} from '../internal-utils/debug'
 import {compileType} from '../internal-utils/schema'
+import {fromSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
-import type {EditableAPI} from '../types/editor'
+import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import type {EditorActor} from './editor-machine'
 import {
@@ -13,7 +17,11 @@ import {
 import {getEditorSnapshot} from './editor-selector'
 import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
+import {mutationMachine} from './mutation-machine'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
+import {syncMachine} from './sync-machine'
+
+const debug = debugWithName('createInternalEditor')
 
 export type InternalEditor = Editor & {
   _internal: {
@@ -56,6 +64,13 @@ export function editorConfigToMachineInput(config: EditorConfig) {
 export function createInternalEditor(editorActor: EditorActor): InternalEditor {
   const slateEditor = createSlateEditor({editorActor})
   const editable = createEditableAPI(slateEditor.instance, editorActor)
+  const {mutationActor, syncActor} = createActors({
+    editorActor,
+    slateEditor: slateEditor.instance,
+  })
+
+  mutationActor.start()
+  syncActor.start()
 
   return {
     getSnapshot: () =>
@@ -90,10 +105,13 @@ export function createInternalEditor(editorActor: EditorActor): InternalEditor {
     },
     send: (event) => {
       switch (event.type) {
+        case 'update value':
+          syncActor.send(event)
+          break
+
         case 'update key generator':
         case 'update readOnly':
         case 'patches':
-        case 'update value':
         case 'update schema':
         case 'update maxBlocks':
           editorActor.send(event)
@@ -166,3 +184,115 @@ export function createInternalEditor(editorActor: EditorActor): InternalEditor {
     },
   }
 }
+
+const actors = new WeakMap<
+  EditorActor,
+  {
+    syncActor: ActorRefFrom<typeof syncMachine>
+    mutationActor: ActorRefFrom<typeof mutationMachine>
+  }
+>()
+
+function createActors(config: {
+  editorActor: EditorActor
+  slateEditor: PortableTextSlateEditor
+}): {
+  syncActor: ActorRefFrom<typeof syncMachine>
+  mutationActor: ActorRefFrom<typeof mutationMachine>
+} {
+  const existingActor = actors.get(config.editorActor)
+
+  if (existingActor) {
+    debug('Reusing existing actors')
+    return existingActor
+  }
+
+  debug('Creating new actors')
+
+  const mutationActor = createActor(mutationMachine, {
+    input: {
+      schema: config.editorActor.getSnapshot().context.schema,
+      slateEditor: config.slateEditor,
+    },
+  })
+
+  const syncActor = createActor(syncMachine, {
+    input: {
+      initialValue: config.editorActor.getSnapshot().context.initialValue,
+      keyGenerator: config.editorActor.getSnapshot().context.keyGenerator,
+      readOnly: config.editorActor
+        .getSnapshot()
+        .matches({'edit mode': 'read only'}),
+      schema: config.editorActor.getSnapshot().context.schema,
+      slateEditor: config.slateEditor,
+    },
+  })
+
+  mutationActor.on('*', (event) => {
+    if (event.type === 'has pending patches') {
+      syncActor.send({type: 'has pending patches'})
+    }
+    if (event.type === 'mutation') {
+      syncActor.send({type: 'mutation'})
+      config.editorActor.send({
+        type: 'mutation',
+        patches: event.patches,
+        snapshot: event.snapshot,
+        value: event.snapshot,
+      })
+    }
+  })
+
+  syncActor.on('*', (event) => {
+    switch (event.type) {
+      case 'invalid value':
+        config.editorActor.send({
+          ...event,
+          type: 'notify.invalid value',
+        })
+        break
+      case 'value changed':
+        config.editorActor.send({
+          ...event,
+          type: 'notify.value changed',
+        })
+        break
+      case 'patch':
+        config.editorActor.send({
+          ...event,
+          type: 'internal.patch',
+          value: fromSlateValue(
+            config.slateEditor.children,
+            config.editorActor.getSnapshot().context.schema.block.name,
+            KEY_TO_VALUE_ELEMENT.get(config.slateEditor),
+          ),
+        })
+        break
+
+      default:
+        config.editorActor.send(event)
+    }
+  })
+
+  config.editorActor.on('*', (event) => {
+    if (event.type === 'read only') {
+      syncActor.send({type: 'update readOnly', readOnly: true})
+    }
+    if (event.type === 'editable') {
+      syncActor.send({type: 'update readOnly', readOnly: false})
+    }
+    if (event.type === 'internal.patch') {
+      mutationActor.send({...event, type: 'patch'})
+    }
+  })
+
+  actors.set(config.editorActor, {
+    syncActor,
+    mutationActor,
+  })
+
+  return {
+    syncActor,
+    mutationActor,
+  }
+}

package/src/editor/editor-machine.ts

@@ -71,10 +71,6 @@ export type ExternalEditorEvent =
       type: 'update key generator'
       keyGenerator: () => string
     }
-  | {
-      type: 'update value'
-      value: Array<PortableTextBlock> | undefined
-    }
   | {
       type: 'update maxBlocks'
       maxBlocks: number | undefined
@@ -227,7 +223,7 @@ export const editorMachine = setup({
       initialReadOnly: boolean
       maxBlocks: number | undefined
       selection: EditorSelection
-      incomingValue: Array<PortableTextBlock> | undefined
+      initialValue: Array<PortableTextBlock> | undefined
       internalDrag?: {
         ghost?: HTMLElement
         origin: Pick<EventPosition, 'selection'>
@@ -402,7 +398,7 @@ export const editorMachine = setup({
     selection: null,
     initialReadOnly: input.readOnly ?? false,
     maxBlocks: input.maxBlocks,
-    incomingValue: input.initialValue,
+    initialValue: input.initialValue,
   }),
   on: {
     'notify.blurred': {
@@ -434,9 +430,6 @@ export const editorMachine = setup({
       actions: assign({keyGenerator: ({event}) => event.keyGenerator}),
     },
     'update schema': {actions: 'assign schema'},
-    'update value': {
-      actions: assign({incomingValue: ({event}) => event.value}),
-    },
     'update maxBlocks': {
       actions: assign({maxBlocks: ({event}) => event.maxBlocks}),
     },

package/src/editor/editor-provider.tsx

@@ -3,7 +3,6 @@ import type React from 'react'
 import {useMemo} from 'react'
 import {Slate} from 'slate-react'
 import type {EditorConfig} from '../editor'
-import {Synchronizer} from './components/Synchronizer'
 import {createInternalEditor, editorConfigToMachineInput} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
@@ -12,9 +11,9 @@ import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {
   PortableTextEditor,
-  RouteEventsToChanges,
   type PortableTextEditorProps,
 } from './PortableTextEditor'
+import {RouteEventsToChanges} from './route-events-to-changes'
 
 /**
  * @public
@@ -66,10 +65,6 @@ export function EditorProvider(props: EditorProviderProps) {
           portableTextEditor.change$.next(change)
         }}
       />
-      <Synchronizer
-        editorActor={editorActor}
-        slateEditor={internalEditor._internal.slateEditor.instance}
-      />
       <EditorActorContext.Provider value={editorActor}>
         <Slate
           editor={internalEditor._internal.slateEditor.instance}

package/src/editor/route-events-to-changes.tsx

@@ -0,0 +1,81 @@
+import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
+import type {EditorChange} from '../types/editor'
+import type {EditorActor, InternalEditorEmittedEvent} from './editor-machine'
+
+export function RouteEventsToChanges(props: {
+  editorActor: EditorActor
+  onChange: (change: EditorChange) => void
+}) {
+  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
+  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
+  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
+  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+  const handleChange = useEffectEvent((change: EditorChange) =>
+    props.onChange(change),
+  )
+
+  useEffect(() => {
+    const sub = props.editorActor.on('*', (event) => {
+      const change = eventToChange(event)
+
+      if (change) {
+        handleChange(change)
+      }
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [props.editorActor])
+
+  return null
+}
+
+export function eventToChange(
+  event: InternalEditorEmittedEvent,
+): EditorChange | undefined {
+  switch (event.type) {
+    case 'blurred': {
+      return {type: 'blur', event: event.event}
+    }
+    case 'patch':
+      return event
+    case 'loading': {
+      return {type: 'loading', isLoading: true}
+    }
+    case 'done loading': {
+      return {type: 'loading', isLoading: false}
+    }
+    case 'focused': {
+      return {type: 'focus', event: event.event}
+    }
+    case 'value changed': {
+      return {type: 'value', value: event.value}
+    }
+    case 'invalid value': {
+      return {
+        type: 'invalidValue',
+        resolution: event.resolution,
+        value: event.value,
+      }
+    }
+    case 'error': {
+      return {
+        ...event,
+        level: 'warning',
+      }
+    }
+    case 'mutation': {
+      return event
+    }
+    case 'ready': {
+      return event
+    }
+    case 'selection': {
+      return event
+    }
+    case 'unset': {
+      return event
+    }
+  }
+}

package/src/editor/sync-machine.ts

@@ -9,6 +9,7 @@ import {
   emit,
   fromCallback,
   not,
+  raise,
   setup,
   type AnyEventObject,
   type CallbackLogicFunction,
@@ -91,6 +92,7 @@ const syncValueLogic = fromCallback(syncValueCallback)
 export const syncMachine = setup({
   types: {
     context: {} as {
+      initialValue: Array<PortableTextBlock> | undefined
       initialValueSynced: boolean
       isProcessingLocalChanges: boolean
       keyGenerator: () => string
@@ -101,6 +103,7 @@ export const syncMachine = setup({
       previousValue: Array<PortableTextBlock> | undefined
     },
     input: {} as {
+      initialValue: Array<PortableTextBlock> | undefined
       keyGenerator: () => string
       schema: EditorSchema
       readOnly: boolean
@@ -175,6 +178,16 @@ export const syncMachine = setup({
 
       return isBusy
     },
+    'is empty value': ({event}) => {
+      return event.type === 'update value' && event.value === undefined
+    },
+    'is empty array': ({event}) => {
+      return (
+        event.type === 'update value' &&
+        Array.isArray(event.value) &&
+        event.value.length === 0
+      )
+    },
     'is new value': ({context, event}) => {
       return (
         event.type === 'update value' && context.previousValue !== event.value
@@ -194,6 +207,7 @@ export const syncMachine = setup({
 }).createMachine({
   id: 'sync',
   context: ({input}) => ({
+    initialValue: input.initialValue,
     initialValueSynced: false,
     isProcessingLocalChanges: false,
     keyGenerator: input.keyGenerator,
@@ -203,6 +217,11 @@ export const syncMachine = setup({
     pendingValue: undefined,
     previousValue: undefined,
   }),
+  entry: [
+    raise(({context}) => {
+      return {type: 'update value', value: context.initialValue}
+    }),
+  ],
   on: {
     'has pending patches': {
       actions: assign({
@@ -233,6 +252,18 @@ export const syncMachine = setup({
       ],
       on: {
         'update value': [
+          {
+            guard: and(['is empty value', not('initial value synced')]),
+            actions: ['assign initial value synced', 'emit done syncing value'],
+          },
+          {
+            guard: and(['is empty array', not('initial value synced')]),
+            actions: [
+              'assign initial value synced',
+              emit({type: 'value changed', value: []}),
+              'emit done syncing value',
+            ],
+          },
           {
             guard: and(['is busy', 'is new value']),
             target: 'busy',
@@ -383,6 +414,7 @@ async function updateValue({
   streamBlocks: boolean
   value: PortableTextBlock[] | undefined
 }) {
+  let doneSyncing = false
   let isChanged = false
   let isValid = true
 
@@ -394,6 +426,10 @@ async function updateValue({
     Editor.withoutNormalizing(slateEditor, () => {
       withoutSaving(slateEditor, () => {
         withoutPatching(slateEditor, () => {
+          if (doneSyncing) {
+            return
+          }
+
           if (hadSelection) {
             Transforms.deselect(slateEditor)
           }
@@ -428,6 +464,11 @@ async function updateValue({
         Editor.withoutNormalizing(slateEditor, () => {
           withRemoteChanges(slateEditor, () => {
             withoutPatching(slateEditor, () => {
+              if (doneSyncing) {
+                resolve()
+                return
+              }
+
               isChanged = removeExtraBlocks({
                 slateEditor,
                 slateValueFromProps,
@@ -465,6 +506,10 @@ async function updateValue({
       Editor.withoutNormalizing(slateEditor, () => {
         withRemoteChanges(slateEditor, () => {
           withoutPatching(slateEditor, () => {
+            if (doneSyncing) {
+              return
+            }
+
             isChanged = removeExtraBlocks({
               slateEditor,
               slateValueFromProps,
@@ -494,6 +539,7 @@ async function updateValue({
 
   if (!isValid) {
     debug('Invalid value, returning')
+    doneSyncing = true
     sendBack({type: 'done syncing', value})
     return
   }
@@ -509,6 +555,7 @@ async function updateValue({
         resolution: null,
         value,
       })
+      doneSyncing = true
       sendBack({type: 'done syncing', value})
       return
     }
@@ -524,6 +571,7 @@ async function updateValue({
     debug('Server value and editor value is equal, no need to sync.')
   }
 
+  doneSyncing = true
   sendBack({type: 'done syncing', value})
 }
 

package/src/editor.ts

@@ -41,7 +41,13 @@ export type EditorConfig = {
 /**
  * @public
  */
-export type EditorEvent = ExternalEditorEvent | ExternalBehaviorEvent
+export type EditorEvent =
+  | ExternalEditorEvent
+  | ExternalBehaviorEvent
+  | {
+      type: 'update value'
+      value: Array<PortableTextBlock> | undefined
+    }
 
 /**
  * @public

package/src/internal-utils/text-selection.ts

@@ -98,7 +98,9 @@ export function getTextSelection(
   }
 
   if (!anchor || !focus) {
-    throw new Error(`Unable to find selection for text "${text}"`)
+    throw new Error(
+      `Unable to find selection for text "${text}" in value "${JSON.stringify(value)}"`,
+    )
   }
 
   return {