refactor: editor machine events

portabletext · Jan 28, 2025 · 28fb834 · 28fb834
1 parent 099279c
commit 28fb834
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 229 deletions.
diff --git a/packages/editor/src/editor/Editable.tsx b/packages/editor/src/editor/Editable.tsx
@@ -295,7 +295,7 @@ export const PortableTextEditable = forwardRef<
           // 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: 'selection',
+              type: 'notify.selection',
               selection: normalizedSelection,
             })
           }
@@ -465,7 +465,7 @@ export const PortableTextEditable = forwardRef<
         event.preventDefault()
 
         // Resolve it as promise (can be either async promise or sync return value)
-        editorActor.send({type: 'loading'})
+        editorActor.send({type: 'notify.loading'})
 
         Promise.resolve(onPasteResult)
           .then((result) => {
@@ -494,7 +494,7 @@ export const PortableTextEditable = forwardRef<
             return error
           })
           .finally(() => {
-            editorActor.send({type: 'done loading'})
+            editorActor.send({type: 'notify.done loading'})
           })
       } else if (event.nativeEvent.clipboardData) {
         editorActor.send({
@@ -525,12 +525,12 @@ export const PortableTextEditable = forwardRef<
           Transforms.select(slateEditor, Editor.start(slateEditor, []))
           slateEditor.onChange()
         }
-        editorActor.send({type: 'focused', event})
+        editorActor.send({type: 'notify.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: 'selection',
+            type: 'notify.selection',
             selection,
           })
         }
@@ -581,7 +581,7 @@ export const PortableTextEditable = forwardRef<
         onBlur(event)
       }
       if (!event.isPropagationStopped()) {
-        editorActor.send({type: 'blurred', event})
+        editorActor.send({type: 'notify.blurred', event})
       }
     },
     [editorActor, onBlur],

diff --git a/packages/editor/src/editor/components/Synchronizer.tsx b/packages/editor/src/editor/components/Synchronizer.tsx
@@ -67,7 +67,22 @@ export function Synchronizer(props: SynchronizerProps) {
 
   useEffect(() => {
     const subscription = syncActorRef.on('*', (event) => {
-      props.editorActor.send(event)
+      switch (event.type) {
+        case 'invalid value':
+          props.editorActor.send({
+            ...event,
+            type: 'notify.invalid value',
+          })
+          break
+        case 'value changed':
+          props.editorActor.send({
+            ...event,
+            type: 'notify.value changed',
+          })
+          break
+        default:
+          props.editorActor.send(event)
+      }
     })
 
     return () => {

diff --git a/packages/editor/src/editor/create-editor.ts b/packages/editor/src/editor/create-editor.ts
@@ -11,10 +11,13 @@ import {
   type EventObject,
   type Snapshot,
 } from 'xstate'
-import type {Behavior, CustomBehaviorEvent} from '../behaviors/behavior.types'
+import type {
+  Behavior,
+  CustomBehaviorEvent,
+  SyntheticBehaviorEvent,
+} from '../behaviors/behavior.types'
 import {coreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
-import type {PickFromUnion} from '../type-utils'
 import type {EditableAPI} from '../types/editor'
 import {createEditorSchema} from './create-editor-schema'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
@@ -23,7 +26,7 @@ import {
   editorMachine,
   type EditorActor,
   type EditorEmittedEvent,
-  type InternalEditorEvent,
+  type ExternalEditorEvent,
 } from './editor-machine'
 import {getEditorSnapshot} from './editor-selector'
 import type {EditorSnapshot} from './editor-snapshot'
@@ -60,51 +63,8 @@ export type EditorConfig = {
  * @public
  */
 export type EditorEvent =
-  | PickFromUnion<
-      InternalEditorEvent,
-      'type',
-      | 'annotation.add'
-      | 'annotation.remove'
-      | 'annotation.toggle'
-      | 'block.set'
-      | 'block.unset'
-      | 'blur'
-      | 'data transfer.set'
-      | 'decorator.add'
-      | 'decorator.remove'
-      | 'decorator.toggle'
-      | 'delete.block'
-      | 'delete.text'
-      | 'deserialization.failure'
-      | 'deserialization.success'
-      | 'focus'
-      | 'insert.block'
-      | 'insert.block object'
-      | 'insert.inline object'
-      | 'insert.span'
-      | 'insert.text block'
-      | 'list item.add'
-      | 'list item.remove'
-      | 'list item.toggle'
-      | 'move.block'
-      | 'move.block down'
-      | 'move.block up'
-      | 'select'
-      | 'select.next block'
-      | 'select.previous block'
-      | 'serialization.failure'
-      | 'serialization.success'
-      | 'style.add'
-      | 'style.remove'
-      | 'style.toggle'
-      | 'text block.set'
-      | 'text block.unset'
-      | 'patches'
-      | 'update behaviors'
-      | 'update key generator'
-      | 'update readOnly'
-      | 'update value'
-    >
+  | ExternalEditorEvent
+  | SyntheticBehaviorEvent
   | CustomBehaviorEvent
 
 /**