@portabletext/editor 1.49.9 → 1.49.11

package/src/editor/relay-machine.ts

@@ -0,0 +1,89 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
+import type {FocusEvent} from 'react'
+import {emit, setup, type ActorRefFrom} from 'xstate'
+import type {EditorSelection, InvalidValueResolution} from '../types/editor'
+
+/**
+ * @public
+ */
+export type EditorEmittedEvent =
+  | {
+      type: 'blurred'
+      event: FocusEvent<HTMLDivElement, Element>
+    }
+  | {
+      type: 'done loading'
+    }
+  | {
+      type: 'editable'
+    }
+  | {
+      type: 'focused'
+      event: FocusEvent<HTMLDivElement, Element>
+    }
+  | {
+      type: 'invalid value'
+      resolution: InvalidValueResolution | null
+      value: Array<PortableTextBlock> | undefined
+    }
+  | {
+      type: 'loading'
+    }
+  | MutationEvent
+  | PatchEvent
+  | {
+      type: 'read only'
+    }
+  | {
+      type: 'ready'
+    }
+  | {
+      type: 'selection'
+      selection: EditorSelection
+    }
+  | {
+      type: 'value changed'
+      value: Array<PortableTextBlock> | undefined
+    }
+
+export type InternalEditorEmittedEvent = EditorEmittedEvent | UnsetEvent
+
+/**
+ * @public
+ */
+export type MutationEvent = {
+  type: 'mutation'
+  patches: Array<Patch>
+  /**
+   * @deprecated Use `value` instead
+   */
+  snapshot: Array<PortableTextBlock> | undefined
+  value: Array<PortableTextBlock> | undefined
+}
+
+export type PatchEvent = {
+  type: 'patch'
+  patch: Patch
+}
+
+export type UnsetEvent = {
+  type: 'unset'
+  previousValue: Array<PortableTextBlock>
+}
+
+export type RelayActor = ActorRefFrom<typeof relayMachine>
+
+export const relayMachine = setup({
+  types: {
+    events: {} as InternalEditorEmittedEvent,
+    emitted: {} as InternalEditorEmittedEvent,
+  },
+}).createMachine({
+  id: 'relay',
+  on: {
+    '*': {
+      actions: emit(({event}) => event),
+    },
+  },
+})

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

@@ -1,10 +1,10 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
 import type {EditorChange} from '../types/editor'
-import type {EditorActor, InternalEditorEmittedEvent} from './editor-machine'
+import type {InternalEditorEmittedEvent, RelayActor} from './relay-machine'
 
 export function RouteEventsToChanges(props: {
-  editorActor: EditorActor
+  relayActor: RelayActor
   onChange: (change: EditorChange) => void
 }) {
   // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
@@ -16,7 +16,7 @@ export function RouteEventsToChanges(props: {
   )
 
   useEffect(() => {
-    const sub = props.editorActor.on('*', (event) => {
+    const sub = props.relayActor.on('*', (event) => {
       const change = eventToChange(event)
 
       if (change) {
@@ -26,7 +26,7 @@ export function RouteEventsToChanges(props: {
     return () => {
       sub.unsubscribe()
     }
-  }, [props.editorActor])
+  }, [props.relayActor])
 
   return null
 }
@@ -59,12 +59,6 @@ export function eventToChange(
         value: event.value,
       }
     }
-    case 'error': {
-      return {
-        ...event,
-        level: 'warning',
-      }
-    }
     case 'mutation': {
       return event
     }

package/src/editor/sync-machine.ts

@@ -114,7 +114,7 @@ export const syncMachine = setup({
     },
     events: {} as
       | {
-          type: 'has pending patches'
+          type: 'has pending mutations'
         }
       | {
           type: 'mutation'
@@ -226,7 +226,7 @@ export const syncMachine = setup({
     }),
   ],
   on: {
-    'has pending patches': {
+    'has pending mutations': {
       actions: assign({
         isProcessingLocalChanges: true,
       }),

package/src/editor-event-listener.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
-import type {EditorEmittedEvent} from './editor/editor-machine'
+import type {EditorEmittedEvent} from './editor/relay-machine'
 import {useEditor} from './editor/use-editor'
 
 /**

package/src/editor.ts

@@ -6,12 +6,10 @@ import type {
 import type {ActorRef, EventObject, Snapshot} from 'xstate'
 import type {Behavior} from './behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from './behaviors/behavior.types.event'
-import type {
-  EditorEmittedEvent,
-  ExternalEditorEvent,
-} from './editor/editor-machine'
+import type {ExternalEditorEvent} from './editor/editor-machine'
 import type {SchemaDefinition} from './editor/editor-schema'
 import type {EditorSnapshot} from './editor/editor-snapshot'
+import type {EditorEmittedEvent} from './editor/relay-machine'
 
 /**
  * @public

package/src/index.ts

@@ -4,15 +4,11 @@ export type {
   PortableTextChild,
   PortableTextSpan,
 } from '@sanity/types'
-export {EditorEventListener} from './editor-event-listener'
 export type {Editor, EditorConfig, EditorEvent} from './editor'
+export {EditorEventListener} from './editor-event-listener'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
-export type {
-  EditorEmittedEvent,
-  MutationEvent,
-  PatchesEvent,
-} from './editor/editor-machine'
+export type {PatchesEvent} from './editor/editor-machine'
 export {
   EditorProvider,
   type EditorProviderProps,
@@ -30,6 +26,7 @@ export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEdit
 export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
+export type {EditorEmittedEvent, MutationEvent} from './editor/relay-machine'
 export {useEditor} from './editor/use-editor'
 export type {AddedAnnotationPaths} from './operations/behavior.operation.annotation.add'
 export type {BlockOffset} from './types/block-offset'

package/src/internal-utils/__tests__/operationToPatches.test.ts

@@ -8,6 +8,7 @@ import {legacySchemaToEditorSchema} from '../../editor/editor-schema'
 import {defaultKeyGenerator} from '../../editor/key-generator'
 import {createLegacySchema} from '../../editor/legacy-schema'
 import {withPlugins} from '../../editor/plugins/with-plugins'
+import {relayMachine} from '../../editor/relay-machine'
 import {createOperationToPatches} from '../operationToPatches'
 
 const legacySchema = createLegacySchema(schemaType)
@@ -19,11 +20,12 @@ const editorActor = createActor(editorMachine, {
     getLegacySchema: () => legacySchema,
   },
 })
-
+const relayActor = createActor(relayMachine)
 const operationToPatches = createOperationToPatches(editorActor)
 
 const editor = withPlugins(createEditor(), {
   editorActor,
+  relayActor,
   subscriptions: [],
 })
 

package/src/internal-utils/__tests__/patchToOperations.test.ts

@@ -8,6 +8,7 @@ import {legacySchemaToEditorSchema} from '../../editor/editor-schema'
 import {defaultKeyGenerator} from '../../editor/key-generator'
 import {createLegacySchema} from '../../editor/legacy-schema'
 import {withPlugins} from '../../editor/plugins/with-plugins'
+import {relayMachine} from '../../editor/relay-machine'
 import {createApplyPatch} from '../applyPatch'
 import {VOID_CHILD_KEY} from '../values'
 
@@ -24,6 +25,7 @@ const editor = withPlugins(createEditor(), {
       getLegacySchema: () => legacySchema,
     },
   }),
+  relayActor: createActor(relayMachine),
   subscriptions: [],
 })
 

package/src/internal-utils/applyPatch.ts

@@ -181,9 +181,13 @@ function insertPatch(
 
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
 
-    if (editorWasEmptyBefore) {
+    if (
+      editorWasEmptyBefore &&
+      typeof patch.path[0] === 'number' &&
+      patch.path[0] === 0
+    ) {
       Transforms.removeNodes(editor, {
-        at: [position === 'after' ? targetBlockIndex + 1 : targetBlockIndex],
+        at: [position === 'before' ? targetBlockIndex + 1 : targetBlockIndex],
       })
     }
 

package/src/plugins/plugin.event-listener.tsx

@@ -1,6 +1,6 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
-import type {EditorEmittedEvent} from '../editor/editor-machine'
+import type {EditorEmittedEvent} from '../editor/relay-machine'
 import {useEditor} from '../editor/use-editor'
 
 /**

package/src/types/editor.ts

@@ -222,7 +222,9 @@ export type ReadyChange = {
 
 /**
  * The editor produced an error
- * @beta */
+ * @beta
+ * @deprecated The change is no longer emitted
+ * */
 export type ErrorChange = {
   type: 'error'
   name: string // short computer readable name
@@ -266,7 +268,9 @@ export type InvalidValue = {
 
 /**
  * The editor performed a undo history step
- * @beta */
+ * @beta
+ * @deprecated The change is no longer emitted
+ *  */
 export type UndoChange = {
   type: 'undo'
   patches: Patch[]
@@ -275,7 +279,9 @@ export type UndoChange = {
 
 /**
  * The editor performed redo history step
- * @beta */
+ * @beta
+ * @deprecated The change is no longer emitted
+ *  */
 export type RedoChange = {
   type: 'redo'
   patches: Patch[]
@@ -285,7 +291,9 @@ export type RedoChange = {
 /**
  * The editor was either connected or disconnected to the network
  * To show out of sync warnings etc when in collaborative mode.
- * @beta */
+ * @beta
+ * @deprecated The change is no longer emitted
+ *  */
 export type ConnectionChange = {
   type: 'connection'
   value: 'online' | 'offline'