@portabletext/editor 1.49.7 → 1.49.9

package/src/editor/PortableTextEditor.tsx

@@ -14,11 +14,9 @@ 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'
 import {compileType} from '../internal-utils/schema'
+import {stopActor} from '../internal-utils/stop-actor'
 import type {AddedAnnotationPaths} from '../operations/behavior.operation.annotation.add'
 import type {
   EditableAPI,
@@ -29,15 +27,16 @@ 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'
+import type {EditorActor} from './editor-machine'
 import {legacySchemaToEditorSchema} from './editor-schema'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
-import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
+import type {MutationActor} from './mutation-machine'
+import {eventToChange} from './route-events-to-changes'
+import type {SyncActor} from './sync-machine'
 
 const debug = debugWithName('component:PortableTextEditor')
 
@@ -133,6 +132,14 @@ export class PortableTextEditor extends Component<
    */
   private editable: EditableAPI
 
+  private actors?: {
+    editorActor: EditorActor
+    mutationActor: MutationActor
+    syncActor: SyncActor
+  }
+
+  private unsubscribers: Array<() => void> = []
+
   constructor(props: PortableTextEditorProps) {
     super(props)
 
@@ -142,35 +149,60 @@ export class PortableTextEditor extends Component<
         .getSnapshot()
         .context.getLegacySchema()
     } else {
-      const legacySchema = createLegacySchema(
-        props.schemaType.hasOwnProperty('jsonType')
-          ? props.schemaType
-          : compileType(props.schemaType),
-      )
-      const schema = legacySchemaToEditorSchema(legacySchema)
-      const editorActor = createActor(editorMachine, {
-        input: {
-          converters: createCoreConverters(legacySchema),
-          getLegacySchema: () => legacySchema,
-          initialValue: props.value,
-          keyGenerator: props.keyGenerator ?? defaultKeyGenerator,
-          maxBlocks:
-            props.maxBlocks === undefined
-              ? undefined
-              : Number.parseInt(props.maxBlocks.toString(), 10),
-          readOnly: props.readOnly,
-          schema,
-        },
+      const {actors, editor, subscriptions} = createInternalEditor({
+        initialValue: props.value,
+        keyGenerator: props.keyGenerator,
+        maxBlocks:
+          props.maxBlocks === undefined
+            ? undefined
+            : Number.parseInt(props.maxBlocks.toString(), 10),
+        readOnly: props.readOnly,
+        schema: props.schemaType,
       })
-      editorActor.start()
 
-      this.editor = createInternalEditor(editorActor)
-      this.schemaTypes = legacySchema
+      this.unsubscribers.push(
+        (() => {
+          const subscription = actors.editorActor.on('*', (event) => {
+            const change = eventToChange(event)
+
+            if (change) {
+              props.onChange(change)
+
+              this.change$.next(change)
+            }
+          })
+
+          return () => {
+            subscription.unsubscribe()
+          }
+        })(),
+      )
+
+      for (const subscription of subscriptions) {
+        this.unsubscribers.push(subscription())
+      }
+
+      this.actors = actors
+
+      this.editor = editor
+      this.schemaTypes = actors.editorActor
+        .getSnapshot()
+        .context.getLegacySchema()
     }
 
     this.editable = this.editor._internal.editable
   }
 
+  componentDidMount(): void {
+    if (!this.actors) {
+      return
+    }
+
+    this.actors.editorActor.start()
+    this.actors.mutationActor.start()
+    this.actors.syncActor.start()
+  }
+
   componentDidUpdate(prevProps: PortableTextEditorProps) {
     // Set up the schema type lookup table again if the source schema type changes
     if (
@@ -209,7 +241,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,
         })
@@ -224,6 +256,18 @@ export class PortableTextEditor extends Component<
     }
   }
 
+  componentWillUnmount(): void {
+    for (const unsubscribe of this.unsubscribers) {
+      unsubscribe()
+    }
+
+    if (this.actors) {
+      stopActor(this.actors.editorActor)
+      stopActor(this.actors.mutationActor)
+      stopActor(this.actors.syncActor)
+    }
+  }
+
   public setEditable = (editable: EditableAPI) => {
     this.editor._internal.editable = {
       ...this.editor._internal.editable,
@@ -244,23 +288,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 +802,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/__tests__/PortableTextEditor.test.tsx

@@ -43,6 +43,7 @@ describe('initialization', () => {
     autocorrect="false"
     class="pt-editable"
     contenteditable="true"
+    data-read-only="false"
     data-slate-editor="true"
     data-slate-node="value"
     role="textbox"

package/src/editor/create-editor.ts

@@ -1,11 +1,16 @@
+import {createActor} 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 {editorMachine} from './editor-machine'
 import {
   compileSchemaDefinitionToLegacySchema,
   legacySchemaToEditorSchema,
@@ -13,7 +18,11 @@ import {
 import {getEditorSnapshot} from './editor-selector'
 import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
+import {mutationMachine, type MutationActor} from './mutation-machine'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
+import {syncMachine, type SyncActor} from './sync-machine'
+
+const debug = debugWithName('setup')
 
 export type InternalEditor = Editor & {
   _internal: {
@@ -53,11 +62,30 @@ export function editorConfigToMachineInput(config: EditorConfig) {
   } as const
 }
 
-export function createInternalEditor(editorActor: EditorActor): InternalEditor {
-  const slateEditor = createSlateEditor({editorActor})
+export function createInternalEditor(config: EditorConfig): {
+  actors: {
+    editorActor: EditorActor
+    mutationActor: MutationActor
+    syncActor: SyncActor
+  }
+  editor: InternalEditor
+  subscriptions: Array<() => () => void>
+} {
+  debug('Creating new Editor instance')
+
+  const subscriptions: Array<() => () => void> = []
+  const editorActor = createActor(editorMachine, {
+    input: editorConfigToMachineInput(config),
+  })
+  const slateEditor = createSlateEditor({editorActor, subscriptions})
   const editable = createEditableAPI(slateEditor.instance, editorActor)
+  const {mutationActor, syncActor} = createActors({
+    editorActor,
+    slateEditor: slateEditor.instance,
+    subscriptions,
+  })
 
-  return {
+  const editor = {
     getSnapshot: () =>
       getEditorSnapshot({
         editorActorSnapshot: editorActor.getSnapshot(),
@@ -90,10 +118,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)
@@ -164,5 +195,128 @@ export function createInternalEditor(editorActor: EditorActor): InternalEditor {
       editorActor,
       slateEditor,
     },
+  } satisfies InternalEditor
+
+  return {
+    actors: {
+      editorActor,
+      mutationActor,
+      syncActor,
+    },
+    editor,
+    subscriptions,
+  }
+}
+
+function createActors(config: {
+  editorActor: EditorActor
+  slateEditor: PortableTextSlateEditor
+  subscriptions: Array<() => () => void>
+}): {
+  syncActor: SyncActor
+  mutationActor: MutationActor
+} {
+  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,
+    },
+  })
+
+  config.subscriptions.push(() => {
+    const subscription = 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,
+        })
+      }
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  })
+
+  config.subscriptions.push(() => {
+    const subscription = 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)
+      }
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  })
+
+  config.subscriptions.push(() => {
+    const subscription = config.editorActor.on('*', (event) => {
+      if (
+        config.editorActor.getSnapshot().matches({'edit mode': 'read only'})
+      ) {
+        syncActor.send({type: 'update readOnly', readOnly: true})
+      } else {
+        syncActor.send({type: 'update readOnly', readOnly: false})
+      }
+
+      if (event.type === 'internal.patch') {
+        mutationActor.send({...event, type: 'patch'})
+      }
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  })
+
+  return {
+    syncActor,
+    mutationActor,
   }
 }

package/src/editor/create-slate-editor.tsx

@@ -9,10 +9,11 @@ import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
 
-const debug = debugWithName('component:PortableTextEditor:SlateContainer')
+const debug = debugWithName('setup')
 
 type SlateEditorConfig = {
   editorActor: EditorActor
+  subscriptions: Array<() => () => void>
 }
 
 export type SlateEditor = {
@@ -20,33 +21,17 @@ export type SlateEditor = {
   initialValue: Array<Descendant>
 }
 
-const slateEditors = new WeakMap<EditorActor, SlateEditor>()
-
 export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
-  const existingSlateEditor = slateEditors.get(config.editorActor)
-
-  if (existingSlateEditor) {
-    debug('Reusing existing Slate editor instance', config.editorActor.id)
-    return existingSlateEditor
-  }
-
-  debug('Creating new Slate editor instance', config.editorActor.id)
-
-  const unsubscriptions: Array<() => void> = []
-  const subscriptions: Array<() => () => void> = []
+  debug('Creating new Slate editor instance')
 
   const instance = withPlugins(withReact(createEditor()), {
     editorActor: config.editorActor,
-    subscriptions,
+    subscriptions: config.subscriptions,
   })
 
   KEY_TO_VALUE_ELEMENT.set(instance, {})
   KEY_TO_SLATE_ELEMENT.set(instance, {})
 
-  for (const subscription of subscriptions) {
-    unsubscriptions.push(subscription())
-  }
-
   const initialValue = [instance.pteCreateTextBlock({decorators: []})]
 
   const slateEditor: SlateEditor = {
@@ -54,7 +39,5 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     initialValue,
   }
 
-  slateEditors.set(config.editorActor, slateEditor)
-
   return slateEditor
 }

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

@@ -1,20 +1,19 @@
-import {useActorRef} from '@xstate/react'
 import type React from 'react'
-import {useMemo} from 'react'
+import {useEffect} from 'react'
 import {Slate} from 'slate-react'
 import type {EditorConfig} from '../editor'
-import {Synchronizer} from './components/Synchronizer'
-import {createInternalEditor, editorConfigToMachineInput} from './create-editor'
+import {stopActor} from '../internal-utils/stop-actor'
+import useConstant from '../internal-utils/use-constant'
+import {createInternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
-import {editorMachine} from './editor-machine'
 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
@@ -43,40 +42,56 @@ export type EditorProviderProps = {
  * @group Components
  */
 export function EditorProvider(props: EditorProviderProps) {
-  const editorActor = useActorRef(editorMachine, {
-    input: editorConfigToMachineInput(props.initialConfig),
+  const {internalEditor, portableTextEditor} = useConstant(() => {
+    const internalEditor = createInternalEditor(props.initialConfig)
+    const portableTextEditor = new PortableTextEditor({
+      editor: internalEditor.editor,
+    } as unknown as PortableTextEditorProps)
+
+    return {internalEditor, portableTextEditor}
   })
-  const internalEditor = useMemo(
-    () => createInternalEditor(editorActor),
-    [editorActor],
-  )
-  const portableTextEditor = useMemo(
-    () =>
-      new PortableTextEditor({
-        editor: internalEditor,
-      } as unknown as PortableTextEditorProps),
-    [internalEditor],
-  )
+
+  useEffect(() => {
+    const unsubscribers: Array<() => void> = []
+
+    for (const subscription of internalEditor.subscriptions) {
+      unsubscribers.push(subscription())
+    }
+
+    internalEditor.actors.editorActor.start()
+    internalEditor.actors.mutationActor.start()
+    internalEditor.actors.syncActor.start()
+
+    return () => {
+      for (const unsubscribe of unsubscribers) {
+        unsubscribe()
+      }
+
+      stopActor(internalEditor.actors.editorActor)
+      stopActor(internalEditor.actors.mutationActor)
+      stopActor(internalEditor.actors.syncActor)
+    }
+  }, [internalEditor])
 
   return (
-    <EditorContext.Provider value={internalEditor}>
+    <EditorContext.Provider value={internalEditor.editor}>
       <RouteEventsToChanges
-        editorActor={editorActor}
+        editorActor={internalEditor.actors.editorActor}
         onChange={(change) => {
           portableTextEditor.change$.next(change)
         }}
       />
-      <Synchronizer
-        editorActor={editorActor}
-        slateEditor={internalEditor._internal.slateEditor.instance}
-      />
-      <EditorActorContext.Provider value={editorActor}>
+      <EditorActorContext.Provider value={internalEditor.actors.editorActor}>
         <Slate
-          editor={internalEditor._internal.slateEditor.instance}
-          initialValue={internalEditor._internal.slateEditor.initialValue}
+          editor={internalEditor.editor._internal.slateEditor.instance}
+          initialValue={
+            internalEditor.editor._internal.slateEditor.initialValue
+          }
         >
           <PortableTextEditorContext.Provider value={portableTextEditor}>
-            <PortableTextEditorSelectionProvider editorActor={editorActor}>
+            <PortableTextEditorSelectionProvider
+              editorActor={internalEditor.actors.editorActor}
+            >
               {props.children}
             </PortableTextEditorSelectionProvider>
           </PortableTextEditorContext.Provider>

package/src/editor/mutation-machine.ts

@@ -13,9 +13,12 @@ import {
   stateIn,
   type AnyEventObject,
 } from 'xstate'
+import type {ActorRefFrom} from 'xstate'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './editor-schema'
 
+export type MutationActor = ActorRefFrom<typeof mutationMachine>
+
 /**
  * Makes sure editor mutation events are debounced
  */