@portabletext/editor 1.49.10 → 1.49.11

package/package.json

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

package/src/editor/Editable.tsx

@@ -64,6 +64,7 @@ import {
   createDecorate,
   rangeDecorationsMachine,
 } from './range-decorations-machine'
+import {RelayActorContext} from './relay-actor-context'
 
 const debug = debugWithName('component:Editable')
 
@@ -160,6 +161,7 @@ export const PortableTextEditable = forwardRef<
   )
 
   const editorActor = useContext(EditorActorContext)
+  const relayActor = useContext(RelayActorContext)
   const readOnly = useSelector(editorActor, (s) =>
     s.matches({'edit mode': 'read only'}),
   )
@@ -282,8 +284,8 @@ export const PortableTextEditable = forwardRef<
           // Output selection here in those cases where the editor selection was the same, and there are no set_selection operations made.
           // The selection is usually automatically emitted to change$ by the withPortableTextSelections plugin whenever there is a set_selection operation applied.
           if (!slateEditor.operations.some((o) => o.type === 'set_selection')) {
-            editorActor.send({
-              type: 'notify.selection',
+            relayActor.send({
+              type: 'selection',
               selection: normalizedSelection,
             })
           }
@@ -291,7 +293,7 @@ export const PortableTextEditable = forwardRef<
         }
       }
     }
-  }, [editorActor, propsSelection, slateEditor])
+  }, [editorActor, propsSelection, relayActor, slateEditor])
 
   // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
@@ -435,7 +437,7 @@ export const PortableTextEditable = forwardRef<
         event.preventDefault()
 
         // Resolve it as promise (can be either async promise or sync return value)
-        editorActor.send({type: 'notify.loading'})
+        relayActor.send({type: 'loading'})
 
         Promise.resolve(onPasteResult)
           .then((result) => {
@@ -498,7 +500,7 @@ export const PortableTextEditable = forwardRef<
             return error
           })
           .finally(() => {
-            editorActor.send({type: 'notify.done loading'})
+            relayActor.send({type: 'done loading'})
           })
       } else if (event.nativeEvent.clipboardData) {
         // Prevent Slate from handling the event
@@ -529,7 +531,7 @@ export const PortableTextEditable = forwardRef<
 
       debug('No result from custom paste handler, pasting normally')
     },
-    [editorActor, onPaste, portableTextEditor, slateEditor],
+    [editorActor, onPaste, portableTextEditor, relayActor, slateEditor],
   )
 
   const handleOnFocus: FocusEventHandler<HTMLDivElement> = useCallback(
@@ -544,18 +546,18 @@ export const PortableTextEditable = forwardRef<
           Transforms.select(slateEditor, Editor.start(slateEditor, []))
           slateEditor.onChange()
         }
-        editorActor.send({type: 'notify.focused', event})
+        relayActor.send({type: 'focused', event})
         const newSelection = PortableTextEditor.getSelection(portableTextEditor)
         // If the selection is the same, emit it explicitly here as there is no actual onChange event triggered.
         if (selection === newSelection) {
-          editorActor.send({
-            type: 'notify.selection',
+          relayActor.send({
+            type: 'selection',
             selection,
           })
         }
       }
     },
-    [editorActor, onFocus, slateEditor, portableTextEditor],
+    [onFocus, slateEditor, portableTextEditor, relayActor],
   )
 
   const handleClick = useCallback(
@@ -595,10 +597,10 @@ export const PortableTextEditable = forwardRef<
         onBlur(event)
       }
       if (!event.isPropagationStopped()) {
-        editorActor.send({type: 'notify.blurred', event})
+        relayActor.send({type: 'blurred', event})
       }
     },
-    [editorActor, onBlur],
+    [relayActor, onBlur],
   )
 
   const handleOnBeforeInput = useCallback(

package/src/editor/PortableTextEditor.tsx

@@ -15,7 +15,6 @@ import {
 import {Subject} from 'rxjs'
 import {Slate} from 'slate-react'
 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 {
@@ -30,11 +29,11 @@ import type {
 import {createInternalEditor, type InternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
-import {legacySchemaToEditorSchema} from './editor-schema'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
-import {createLegacySchema} from './legacy-schema'
 import type {MutationActor} from './mutation-machine'
+import {RelayActorContext} from './relay-actor-context'
+import type {RelayActor} from './relay-machine'
 import {eventToChange} from './route-events-to-changes'
 import type {SyncActor} from './sync-machine'
 
@@ -135,6 +134,7 @@ export class PortableTextEditor extends Component<
   private actors?: {
     editorActor: EditorActor
     mutationActor: MutationActor
+    relayActor: RelayActor
     syncActor: SyncActor
   }
 
@@ -162,7 +162,7 @@ export class PortableTextEditor extends Component<
 
       this.unsubscribers.push(
         (() => {
-          const subscription = actors.editorActor.on('*', (event) => {
+          const subscription = actors.relayActor.on('*', (event) => {
             const change = eventToChange(event)
 
             if (change) {
@@ -200,6 +200,7 @@ export class PortableTextEditor extends Component<
 
     this.actors.editorActor.start()
     this.actors.mutationActor.start()
+    this.actors.relayActor.start()
     this.actors.syncActor.start()
   }
 
@@ -210,16 +211,7 @@ export class PortableTextEditor extends Component<
       !prevProps.editor &&
       this.props.schemaType !== prevProps.schemaType
     ) {
-      this.schemaTypes = createLegacySchema(
-        this.props.schemaType.hasOwnProperty('jsonType')
-          ? this.props.schemaType
-          : compileType(this.props.schemaType),
-      )
-
-      this.editor._internal.editorActor.send({
-        type: 'update schema',
-        schema: legacySchemaToEditorSchema(this.schemaTypes),
-      })
+      console.warn('Updating schema type is no longer supported')
     }
 
     if (!this.props.editor && !prevProps.editor) {
@@ -264,6 +256,7 @@ export class PortableTextEditor extends Component<
     if (this.actors) {
       stopActor(this.actors.editorActor)
       stopActor(this.actors.mutationActor)
+      stopActor(this.actors.relayActor)
       stopActor(this.actors.syncActor)
     }
   }
@@ -289,18 +282,20 @@ export class PortableTextEditor extends Component<
           />
         ) : null}
         <EditorActorContext.Provider value={this.editor._internal.editorActor}>
-          <Slate
-            editor={this.editor._internal.slateEditor.instance}
-            initialValue={this.editor._internal.slateEditor.initialValue}
-          >
-            <PortableTextEditorContext.Provider value={this}>
-              <PortableTextEditorSelectionProvider
-                editorActor={this.editor._internal.editorActor}
-              >
-                {this.props.children}
-              </PortableTextEditorSelectionProvider>
-            </PortableTextEditorContext.Provider>
-          </Slate>
+          <RelayActorContext.Provider value={this.actors!.relayActor}>
+            <Slate
+              editor={this.editor._internal.slateEditor.instance}
+              initialValue={this.editor._internal.slateEditor.initialValue}
+            >
+              <PortableTextEditorContext.Provider value={this}>
+                <PortableTextEditorSelectionProvider
+                  editorActor={this.editor._internal.editorActor}
+                >
+                  {this.props.children}
+                </PortableTextEditorSelectionProvider>
+              </PortableTextEditorContext.Provider>
+            </Slate>
+          </RelayActorContext.Provider>
         </EditorActorContext.Provider>
       </>
     )

package/src/editor/__tests__/self-solving.test.tsx

@@ -127,23 +127,23 @@ describe('Feature: Self-solving', () => {
           },
         })
         expect(onChange).toHaveBeenNthCalledWith(4, {
-          type: 'patch',
-          patch: spanPatch,
+          type: 'selection',
+          selection: {
+            ...getTextSelection(initialValue, 'foo'),
+            backward: false,
+          },
         })
         expect(onChange).toHaveBeenNthCalledWith(5, {
           type: 'patch',
-          patch: blockPatch,
+          patch: spanPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(6, {
           type: 'patch',
-          patch: strongPatch,
+          patch: blockPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(7, {
-          type: 'selection',
-          selection: {
-            ...getTextSelection(initialValue, 'foo'),
-            backward: false,
-          },
+          type: 'patch',
+          patch: strongPatch,
         })
         expect(onChange).toHaveBeenNthCalledWith(8, {
           type: 'mutation',

package/src/editor/create-editor.ts

@@ -20,6 +20,7 @@ import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
 import {mutationMachine, type MutationActor} from './mutation-machine'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
+import {relayMachine, type RelayActor} from './relay-machine'
 import {syncMachine, type SyncActor} from './sync-machine'
 
 const debug = debugWithName('setup')
@@ -32,40 +33,11 @@ export type InternalEditor = Editor & {
   }
 }
 
-function compileSchemasFromEditorConfig(config: EditorConfig) {
-  const legacySchema = config.schemaDefinition
-    ? compileSchemaDefinitionToLegacySchema(config.schemaDefinition)
-    : createLegacySchema(
-        config.schema.hasOwnProperty('jsonType')
-          ? config.schema
-          : compileType(config.schema),
-      )
-  const schema = legacySchemaToEditorSchema(legacySchema)
-
-  return {
-    legacySchema,
-    schema,
-  }
-}
-
-export function editorConfigToMachineInput(config: EditorConfig) {
-  const {legacySchema, schema} = compileSchemasFromEditorConfig(config)
-
-  return {
-    converters: createCoreConverters(legacySchema),
-    getLegacySchema: () => legacySchema,
-    keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
-    maxBlocks: config.maxBlocks,
-    readOnly: config.readOnly,
-    schema,
-    initialValue: config.initialValue,
-  } as const
-}
-
 export function createInternalEditor(config: EditorConfig): {
   actors: {
     editorActor: EditorActor
     mutationActor: MutationActor
+    relayActor: RelayActor
     syncActor: SyncActor
   }
   editor: InternalEditor
@@ -77,10 +49,16 @@ export function createInternalEditor(config: EditorConfig): {
   const editorActor = createActor(editorMachine, {
     input: editorConfigToMachineInput(config),
   })
-  const slateEditor = createSlateEditor({editorActor, subscriptions})
+  const relayActor = createActor(relayMachine)
+  const slateEditor = createSlateEditor({
+    editorActor,
+    relayActor,
+    subscriptions,
+  })
   const editable = createEditableAPI(slateEditor.instance, editorActor)
   const {mutationActor, syncActor} = createActors({
     editorActor,
+    relayActor,
     slateEditor: slateEditor.instance,
     subscriptions,
   })
@@ -122,10 +100,8 @@ export function createInternalEditor(config: EditorConfig): {
           syncActor.send(event)
           break
 
-        case 'update key generator':
         case 'update readOnly':
         case 'patches':
-        case 'update schema':
         case 'update maxBlocks':
           editorActor.send(event)
           break
@@ -168,12 +144,11 @@ export function createInternalEditor(config: EditorConfig): {
       }
     },
     on: (event, listener) => {
-      const subscription = editorActor.on(event, (event) => {
+      const subscription = relayActor.on(event, (event) => {
         switch (event.type) {
           case 'blurred':
           case 'done loading':
           case 'editable':
-          case 'error':
           case 'focused':
           case 'invalid value':
           case 'loading':
@@ -201,6 +176,7 @@ export function createInternalEditor(config: EditorConfig): {
     actors: {
       editorActor,
       mutationActor,
+      relayActor,
       syncActor,
     },
     editor,
@@ -208,18 +184,52 @@ export function createInternalEditor(config: EditorConfig): {
   }
 }
 
+function editorConfigToMachineInput(config: EditorConfig) {
+  const {legacySchema, schema} = compileSchemasFromEditorConfig(config)
+
+  return {
+    converters: createCoreConverters(legacySchema),
+    getLegacySchema: () => legacySchema,
+    keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
+    maxBlocks: config.maxBlocks,
+    readOnly: config.readOnly,
+    schema,
+    initialValue: config.initialValue,
+  } as const
+}
+
+function compileSchemasFromEditorConfig(config: EditorConfig) {
+  const legacySchema = config.schemaDefinition
+    ? compileSchemaDefinitionToLegacySchema(config.schemaDefinition)
+    : createLegacySchema(
+        config.schema.hasOwnProperty('jsonType')
+          ? config.schema
+          : compileType(config.schema),
+      )
+  const schema = legacySchemaToEditorSchema(legacySchema)
+
+  return {
+    legacySchema,
+    schema,
+  }
+}
+
 function createActors(config: {
   editorActor: EditorActor
+  relayActor: RelayActor
   slateEditor: PortableTextSlateEditor
   subscriptions: Array<() => () => void>
 }): {
-  syncActor: SyncActor
   mutationActor: MutationActor
+  syncActor: SyncActor
 } {
   debug('Creating new Actors')
 
   const mutationActor = createActor(mutationMachine, {
     input: {
+      readOnly: config.editorActor
+        .getSnapshot()
+        .matches({'edit mode': 'read only'}),
       schema: config.editorActor.getSnapshot().context.schema,
       slateEditor: config.slateEditor,
     },
@@ -239,8 +249,8 @@ function createActors(config: {
 
   config.subscriptions.push(() => {
     const subscription = mutationActor.on('*', (event) => {
-      if (event.type === 'has pending patches') {
-        syncActor.send({type: 'has pending patches'})
+      if (event.type === 'has pending mutations') {
+        syncActor.send({type: 'has pending mutations'})
       }
       if (event.type === 'mutation') {
         syncActor.send({type: 'mutation'})
@@ -251,6 +261,24 @@ function createActors(config: {
           value: event.snapshot,
         })
       }
+      if (event.type === 'patch') {
+        config.relayActor.send(event)
+      }
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  })
+
+  config.subscriptions.push(() => {
+    const subscription = config.relayActor.on('*', (event) => {
+      if (event.type === 'selection') {
+        config.editorActor.send({
+          type: 'update selection',
+          selection: event.selection,
+        })
+      }
     })
 
     return () => {
@@ -262,16 +290,10 @@ function createActors(config: {
     const subscription = syncActor.on('*', (event) => {
       switch (event.type) {
         case 'invalid value':
-          config.editorActor.send({
-            ...event,
-            type: 'notify.invalid value',
-          })
+          config.relayActor.send(event)
           break
         case 'value changed':
-          config.editorActor.send({
-            ...event,
-            type: 'notify.value changed',
-          })
+          config.relayActor.send(event)
           break
         case 'patch':
           config.editorActor.send({
@@ -298,8 +320,10 @@ function createActors(config: {
   config.subscriptions.push(() => {
     const subscription = config.editorActor.subscribe((snapshot) => {
       if (snapshot.matches({'edit mode': 'read only'})) {
+        mutationActor.send({type: 'update readOnly', readOnly: true})
         syncActor.send({type: 'update readOnly', readOnly: true})
       } else {
+        mutationActor.send({type: 'update readOnly', readOnly: false})
         syncActor.send({type: 'update readOnly', readOnly: false})
       }
     })
@@ -311,8 +335,16 @@ function createActors(config: {
 
   config.subscriptions.push(() => {
     const subscription = config.editorActor.on('*', (event) => {
-      if (event.type === 'internal.patch') {
-        mutationActor.send({...event, type: 'patch'})
+      switch (event.type) {
+        case 'editable':
+        case 'mutation':
+        case 'ready':
+        case 'read only':
+          config.relayActor.send(event)
+          break
+        case 'internal.patch':
+          mutationActor.send({...event, type: 'patch'})
+          break
       }
     })
 
@@ -322,7 +354,7 @@ function createActors(config: {
   })
 
   return {
-    syncActor,
     mutationActor,
+    syncActor,
   }
 }

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

@@ -8,11 +8,13 @@ import {
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
+import type {RelayActor} from './relay-machine'
 
 const debug = debugWithName('setup')
 
 type SlateEditorConfig = {
   editorActor: EditorActor
+  relayActor: RelayActor
   subscriptions: Array<() => () => void>
 }
 
@@ -26,6 +28,7 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
 
   const instance = withPlugins(withReact(createEditor()), {
     editorActor: config.editorActor,
+    relayActor: config.relayActor,
     subscriptions: config.subscriptions,
   })