@portabletext/editor 1.49.8 → 1.49.9

package/package.json

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

package/src/editor/Editable.tsx

@@ -1169,6 +1169,7 @@ export const PortableTextEditable = forwardRef<
   return hasInvalidValue ? null : (
     <SlateEditable
       {...restProps}
+      data-read-only={readOnly}
       autoFocus={false}
       className={restProps.className || 'pt-editable'}
       decorate={decorate}

package/src/editor/PortableTextEditor.tsx

@@ -14,10 +14,9 @@ import {
 } from 'react'
 import {Subject} from 'rxjs'
 import {Slate} from 'slate-react'
-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,
@@ -30,13 +29,14 @@ import type {
 } from '../types/editor'
 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')
 
@@ -132,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)
 
@@ -141,45 +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()
 
-      editorActor.on('*', (event) => {
-        const change = eventToChange(event)
+      this.unsubscribers.push(
+        (() => {
+          const subscription = actors.editorActor.on('*', (event) => {
+            const change = eventToChange(event)
 
-        if (change) {
-          props.onChange(change)
+            if (change) {
+              props.onChange(change)
 
-          this.change$.next(change)
-        }
-      })
+              this.change$.next(change)
+            }
+          })
+
+          return () => {
+            subscription.unsubscribe()
+          }
+        })(),
+      )
+
+      for (const subscription of subscriptions) {
+        this.unsubscribers.push(subscription())
+      }
+
+      this.actors = actors
 
-      this.editor = createInternalEditor(editorActor)
-      this.schemaTypes = legacySchema
+      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 (
@@ -233,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,

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,4 +1,4 @@
-import {createActor, type ActorRefFrom} from 'xstate'
+import {createActor} from 'xstate'
 import {createCoreConverters} from '../converters/converters.core'
 import type {Editor, EditorConfig} from '../editor'
 import {debugWithName} from '../internal-utils/debug'
@@ -10,6 +10,7 @@ import {createEditorPriority} from '../priority/priority.types'
 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,
@@ -17,11 +18,11 @@ import {
 import {getEditorSnapshot} from './editor-selector'
 import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
-import {mutationMachine} from './mutation-machine'
+import {mutationMachine, type MutationActor} from './mutation-machine'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
-import {syncMachine} from './sync-machine'
+import {syncMachine, type SyncActor} from './sync-machine'
 
-const debug = debugWithName('createInternalEditor')
+const debug = debugWithName('setup')
 
 export type InternalEditor = Editor & {
   _internal: {
@@ -61,18 +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,
   })
 
-  mutationActor.start()
-  syncActor.start()
-
-  return {
+  const editor = {
     getSnapshot: () =>
       getEditorSnapshot({
         editorActorSnapshot: editorActor.getSnapshot(),
@@ -182,32 +195,28 @@ export function createInternalEditor(editorActor: EditorActor): InternalEditor {
       editorActor,
       slateEditor,
     },
-  }
-}
+  } satisfies InternalEditor
 
-const actors = new WeakMap<
-  EditorActor,
-  {
-    syncActor: ActorRefFrom<typeof syncMachine>
-    mutationActor: ActorRefFrom<typeof mutationMachine>
+  return {
+    actors: {
+      editorActor,
+      mutationActor,
+      syncActor,
+    },
+    editor,
+    subscriptions,
   }
->()
+}
 
 function createActors(config: {
   editorActor: EditorActor
   slateEditor: PortableTextSlateEditor
+  subscriptions: Array<() => () => void>
 }): {
-  syncActor: ActorRefFrom<typeof syncMachine>
-  mutationActor: ActorRefFrom<typeof mutationMachine>
+  syncActor: SyncActor
+  mutationActor: MutationActor
 } {
-  const existingActor = actors.get(config.editorActor)
-
-  if (existingActor) {
-    debug('Reusing existing actors')
-    return existingActor
-  }
-
-  debug('Creating new actors')
+  debug('Creating new Actors')
 
   const mutationActor = createActor(mutationMachine, {
     input: {
@@ -228,67 +237,82 @@ function createActors(config: {
     },
   })
 
-  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.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({
-          ...event,
-          type: 'internal.patch',
-          value: fromSlateValue(
-            config.slateEditor.children,
-            config.editorActor.getSnapshot().context.schema.block.name,
-            KEY_TO_VALUE_ELEMENT.get(config.slateEditor),
-          ),
+          type: 'mutation',
+          patches: event.patches,
+          snapshot: event.snapshot,
+          value: event.snapshot,
         })
-        break
+      }
+    })
 
-      default:
-        config.editorActor.send(event)
+    return () => {
+      subscription.unsubscribe()
     }
   })
 
-  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'})
+  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()
     }
   })
 
-  actors.set(config.editorActor, {
-    syncActor,
-    mutationActor,
+  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 {

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-provider.tsx

@@ -1,12 +1,12 @@
-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 {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 {
@@ -42,36 +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)
         }}
       />
-      <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
  */

package/src/editor/sync-machine.ts

@@ -14,6 +14,7 @@ import {
   type AnyEventObject,
   type CallbackLogicFunction,
 } from 'xstate'
+import type {ActorRefFrom} from 'xstate'
 import {debugWithName} from '../internal-utils/debug'
 import {validateValue} from '../internal-utils/validateValue'
 import {toSlateValue, VOID_CHILD_KEY} from '../internal-utils/values'
@@ -77,6 +78,8 @@ const syncValueCallback: CallbackLogicFunction<
 
 const syncValueLogic = fromCallback(syncValueCallback)
 
+export type SyncActor = ActorRefFrom<typeof syncMachine>
+
 /**
  * Sync value with the editor state
  *

package/src/internal-utils/applyPatch.ts

@@ -24,16 +24,16 @@ import type {
 } from '@sanity/types'
 import {
   Element,
+  Node,
   Text,
   Transforms,
   type Descendant,
-  type Node,
   type Path as SlatePath,
 } from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {debugWithName} from './debug'
-import {toSlateValue} from './values'
+import {isEqualToEmptyEditor, toSlateValue} from './values'
 import {KEY_TO_SLATE_ELEMENT} from './weakMaps'
 
 const debug = debugWithName('applyPatches')
@@ -173,9 +173,20 @@ function insertPatch(
     const targetBlockIndex = targetBlockPath[0]
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
+
     debug(`Inserting blocks at path [${normalizedIdx}]`)
     debugState(editor, 'before')
+
+    const editorWasEmptyBefore = isEqualToEmptyEditor(editor.children, schema)
+
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
+
+    if (editorWasEmptyBefore) {
+      Transforms.removeNodes(editor, {
+        at: [position === 'after' ? targetBlockIndex + 1 : targetBlockIndex],
+      })
+    }
+
     debugState(editor, 'after')
     return true
   }
@@ -319,9 +330,15 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
     debugState(editor, 'before')
     const previousSelection = editor.selection
     Transforms.deselect(editor)
-    editor.children.forEach((_child, i) => {
-      Transforms.removeNodes(editor, {at: [i]})
+
+    const children = Node.children(editor, [], {
+      reverse: true,
     })
+
+    for (const [_, path] of children) {
+      Transforms.removeNodes(editor, {at: path})
+    }
+
     Transforms.insertNodes(editor, editor.pteCreateTextBlock({decorators: []}))
     if (previousSelection) {
       Transforms.select(editor, {