@portabletext/editor 1.44.1 → 1.44.3

package/src/editor/Editable.tsx

@@ -38,13 +38,10 @@ import {debugWithName} from '../internal-utils/debug'
 import {getDragSelection} from '../internal-utils/drag-selection'
 import {getEventPosition} from '../internal-utils/event-position'
 import {parseBlocks} from '../internal-utils/parse-blocks'
-import {
-  moveRangeByOperation,
-  toPortableTextRange,
-  toSlateRange,
-} from '../internal-utils/ranges'
+import {moveRangeByOperation, toSlateRange} from '../internal-utils/ranges'
 import {normalizeSelection} from '../internal-utils/selection'
 import {getSelectionDomNodes} from '../internal-utils/selection-elements'
+import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {fromSlateValue, isEqualToEmptyEditor} from '../internal-utils/values'
 import * as selectors from '../selectors'
 import type {
@@ -341,12 +338,13 @@ export const PortableTextEditable = forwardRef<
               (newRange && newRange !== slateRange) ||
               (newRange === null && slateRange)
             ) {
-              const value = PortableTextEditor.getValue(portableTextEditor)
-              const newRangeSelection = toPortableTextRange(
-                value,
-                newRange,
-                schemaTypes,
-              )
+              const newRangeSelection = newRange
+                ? slateRangeToSelection({
+                    schema: schemaTypes,
+                    editor: slateEditor,
+                    range: newRange,
+                  })
+                : null
               if (rangeDecorationItem.onMoved) {
                 rangeDecorationItem.onMoved({
                   newSelection: newRangeSelection,
@@ -379,7 +377,7 @@ export const PortableTextEditable = forwardRef<
         return rangeDecorationState
       })
     },
-    [portableTextEditor, rangeDecorations, schemaTypes, slateEditor],
+    [rangeDecorations, schemaTypes, slateEditor],
   )
 
   // Restore selection from props when the editor has been initialized properly with it's value
@@ -516,11 +514,13 @@ export const PortableTextEditable = forwardRef<
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
       const value = PortableTextEditor.getValue(portableTextEditor)
-      const ptRange = toPortableTextRange(
-        value,
-        slateEditor.selection,
-        schemaTypes,
-      )
+      const ptRange = slateEditor.selection
+        ? slateRangeToSelection({
+            schema: schemaTypes,
+            editor: slateEditor,
+            range: slateEditor.selection,
+          })
+        : null
       const path = ptRange?.focus.path || []
       const onPasteResult = onPaste?.({event, value, path, schemaTypes})
 

package/src/editor/components/Leaf.tsx

@@ -144,12 +144,12 @@ export const Leaf = (props: LeafProps) => {
       return undefined
     }
 
-    const onBlur = editorActor.on('blur', () => {
+    const onBlur = editorActor.on('blurred', () => {
       setFocused(false)
       setSelected(false)
     })
 
-    const onFocus = editorActor.on('focus', () => {
+    const onFocus = editorActor.on('focused', () => {
       const sel = PortableTextEditor.getSelection(portableTextEditor)
       if (
         sel &&

package/src/editor/create-editor.ts

@@ -12,11 +12,7 @@ import {
   type Snapshot,
 } from 'xstate'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
-import type {
-  CustomBehaviorEvent,
-  ExternalBehaviorEvent,
-  SyntheticBehaviorEvent,
-} from '../behaviors/behavior.types.event'
+import type {ExternalBehaviorEvent} from '../behaviors/behavior.types.event'
 import {coreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
 import type {EditableAPI} from '../types/editor'
@@ -63,11 +59,7 @@ export type EditorConfig = {
 /**
  * @public
  */
-export type EditorEvent =
-  | ExternalEditorEvent
-  | ExternalBehaviorEvent
-  | SyntheticBehaviorEvent
-  | CustomBehaviorEvent
+export type EditorEvent = ExternalEditorEvent | ExternalBehaviorEvent
 
 /**
  * @public
@@ -154,7 +146,41 @@ function createInternalEditorFromActor(
       }
     },
     send: (event) => {
-      editorActor.send(event)
+      switch (event.type) {
+        case 'add behavior':
+        case 'remove behavior':
+        case 'update behaviors':
+        case 'update key generator':
+        case 'update readOnly':
+        case 'patches':
+        case 'update value':
+        case 'update schema':
+        case 'update maxBlocks':
+          editorActor.send(event)
+          break
+
+        case 'insert.block object':
+          editorActor.send({
+            type: 'behavior event',
+            behaviorEvent: {
+              type: 'insert.block',
+              block: {
+                _type: event.blockObject.name,
+                ...(event.blockObject.value ?? {}),
+              },
+              placement: event.placement,
+            },
+            editor: slateEditor.instance,
+          })
+          break
+
+        default:
+          editorActor.send({
+            type: 'behavior event',
+            behaviorEvent: event,
+            editor: slateEditor.instance,
+          })
+      }
     },
     on: (event, listener) => {
       const subscription = editorActor.on(event, (event) => {

package/src/editor/editor-machine.ts

@@ -13,13 +13,7 @@ import {coreBehaviors} from '../behaviors/behavior.core'
 import {defaultBehaviors} from '../behaviors/behavior.default'
 import {performEvent} from '../behaviors/behavior.perform-event'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
-import type {
-  CustomBehaviorEvent,
-  ExternalBehaviorEvent,
-  InternalBehaviorEvent,
-  NativeBehaviorEvent,
-  SyntheticBehaviorEvent,
-} from '../behaviors/behavior.types.event'
+import type {BehaviorEvent} from '../behaviors/behavior.types.event'
 import type {Converter} from '../converters/converter.types'
 import type {EventPosition} from '../internal-utils/event-position'
 import type {NamespaceEvent} from '../type-utils'
@@ -167,6 +161,7 @@ export type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
  * @internal
  */
 export type InternalEditorEvent =
+  | ExternalEditorEvent
   | {
       type: 'normalizing'
     }
@@ -178,28 +173,15 @@ export type InternalEditorEvent =
     }
   | {
       type: 'behavior event'
-      behaviorEvent:
-        | InternalBehaviorEvent
-        | SyntheticBehaviorEvent
-        | NativeBehaviorEvent
+      behaviorEvent: BehaviorEvent
       editor: PortableTextSlateEditor
       defaultActionCallback?: () => void
       nativeEvent?: {preventDefault: () => void}
     }
-  | {
-      type: 'custom behavior event'
-      behaviorEvent: CustomBehaviorEvent
-      editor: PortableTextSlateEditor
-      nativeEvent?: {preventDefault: () => void}
-    }
-  | CustomBehaviorEvent
-  | ExternalBehaviorEvent
-  | ExternalEditorEvent
   | MutationEvent
   | InternalPatchEvent
   | NamespaceEvent<EditorEmittedEvent, 'notify'>
   | NamespaceEvent<UnsetEvent, 'notify'>
-  | SyntheticBehaviorEvent
   | {
       type: 'dragstart'
       origin: Pick<EventPosition, 'selection'>
@@ -213,15 +195,9 @@ export type InternalEditorEvent =
  */
 export type InternalEditorEmittedEvent =
   | EditorEmittedEvent
-  | ExternalBehaviorEvent
   | InternalPatchEvent
   | PatchesEvent
   | UnsetEvent
-  | {
-      type: 'custom.*'
-      event: CustomBehaviorEvent
-    }
-  | SyntheticBehaviorEvent
 
 /**
  * @internal
@@ -318,7 +294,7 @@ export const editorMachine = setup({
       pendingEvents: [],
     }),
     'handle behavior event': ({context, event, self}) => {
-      assertEvent(event, ['behavior event', 'custom behavior event'])
+      assertEvent(event, ['behavior event'])
 
       performEvent({
         behaviors: [...context.behaviors.values(), ...defaultBehaviors],
@@ -447,54 +423,6 @@ export const editorMachine = setup({
             'behavior event': {
               actions: 'handle behavior event',
             },
-            'custom behavior event': {
-              actions: 'handle behavior event',
-            },
-            'annotation.*': {
-              actions: emit(({event}) => event),
-            },
-            'block.*': {
-              actions: emit(({event}) => event),
-            },
-            'blur': {
-              actions: emit(({event}) => event),
-            },
-            'custom.*': {
-              actions: emit(({event}) => ({type: 'custom.*', event})),
-            },
-            'decorator.*': {
-              actions: emit(({event}) => event),
-            },
-            'delete.*': {
-              actions: emit(({event}) => event),
-            },
-            'focus': {
-              actions: emit(({event}) => event),
-            },
-            'history.*': {
-              actions: emit(({event}) => event),
-            },
-            'insert.*': {
-              actions: emit(({event}) => event),
-            },
-            'list item.*': {
-              actions: emit(({event}) => event),
-            },
-            'move.*': {
-              actions: emit(({event}) => event),
-            },
-            'select': {
-              actions: emit(({event}) => event),
-            },
-            'select.*': {
-              actions: emit(({event}) => event),
-            },
-            'style.*': {
-              actions: emit(({event}) => event),
-            },
-            'text block.*': {
-              actions: emit(({event}) => event),
-            },
           },
           initial: 'idle',
           states: {

package/src/editor/editor-selector.ts

@@ -1,10 +1,10 @@
 import {useSelector} from '@xstate/react'
+import {slateChildrenToBlocks} from '../internal-utils/slate-children-to-blocks'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {Editor, InternalEditor} from './create-editor'
 import type {EditorActor} from './editor-machine'
 import type {EditorSnapshot} from './editor-snapshot'
 import {getActiveDecorators} from './get-active-decorators'
-import {getValue} from './get-value'
 
 function defaultCompare<T>(a: T, b: T) {
   return a === b
@@ -77,7 +77,10 @@ export function getEditorSnapshot({
       readOnly: editorActorSnapshot.matches({'edit mode': 'read only'}),
       schema: editorActorSnapshot.context.schema,
       selection: editorActorSnapshot.context.selection,
-      value: getValue({editorActorSnapshot, slateEditorInstance}),
+      value: slateChildrenToBlocks(
+        editorActorSnapshot.context.schema,
+        slateEditorInstance.children,
+      ),
     },
     beta: {
       hasTag: (tag) => editorActorSnapshot.hasTag(tag),

package/src/editor/editor-snapshot.ts

@@ -1,9 +1,8 @@
 import type {PortableTextBlock} from '@sanity/types'
 import type {Converter} from '../converters/converter.types'
 import type {EventPosition} from '../internal-utils/event-position'
-import {toPortableTextRange} from '../internal-utils/ranges'
-import {fromSlateValue} from '../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
+import {slateChildrenToBlocks} from '../internal-utils/slate-children-to-blocks'
+import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './define-schema'
 import type {HasTag} from './editor-machine'
@@ -62,12 +61,14 @@ export function createEditorSnapshot({
       }
     | undefined
 }) {
-  const value = fromSlateValue(
-    editor.children,
-    schema.block.name,
-    KEY_TO_VALUE_ELEMENT.get(editor),
-  )
-  const selection = toPortableTextRange(value, editor.selection, schema)
+  const value = slateChildrenToBlocks(schema, editor.children)
+  const selection = editor.selection
+    ? slateRangeToSelection({
+        schema,
+        editor,
+        range: editor.selection,
+      })
+    : null
 
   const context = {
     activeDecorators: getActiveDecorators({

package/src/editor/plugins/create-with-event-listeners.ts

@@ -1,81 +1,16 @@
 import {Editor} from 'slate'
 import {insertSoftBreakActionImplementation} from '../../behavior-actions/behavior.action.insert-break'
 import {performAction} from '../../behavior-actions/behavior.actions'
-import {toPortableTextRange} from '../../internal-utils/ranges'
-import {fromSlateValue} from '../../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../../internal-utils/weakMaps'
+import {slateRangeToSelection} from '../../internal-utils/slate-utils'
 import type {EditorActor} from '../editor-machine'
 import {isApplyingBehaviorActions} from '../with-applying-behavior-actions'
 
-export function createWithEventListeners(
-  editorActor: EditorActor,
-  subscriptions: Array<() => () => void>,
-) {
+export function createWithEventListeners(editorActor: EditorActor) {
   return function withEventListeners(editor: Editor) {
     if (editorActor.getSnapshot().context.maxBlocks !== undefined) {
       return editor
     }
 
-    subscriptions.push(() => {
-      const subscription = editorActor.on('*', (event) => {
-        switch (event.type) {
-          // These events are not relevant for Behaviors
-          case 'blurred':
-          case 'done loading':
-          case 'editable':
-          case 'error':
-          case 'focused':
-          case 'invalid value':
-          case 'loading':
-          case 'mutation':
-          case 'patch':
-          case 'internal.patch':
-          case 'patches':
-          case 'read only':
-          case 'ready':
-          case 'selection':
-          case 'value changed':
-          case 'unset':
-            break
-
-          case 'custom.*':
-            editorActor.send({
-              type: 'custom behavior event',
-              behaviorEvent: event.event,
-              editor,
-            })
-            break
-
-          case 'insert.block object':
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'insert.block',
-                block: {
-                  _type: event.blockObject.name,
-                  ...(event.blockObject.value ?? {}),
-                },
-                placement: event.placement,
-              },
-              editor,
-            })
-            break
-
-          default:
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: event,
-              editor,
-            })
-            break
-        }
-      })
-
-      return () => {
-        subscription.unsubscribe()
-      }
-    })
-
     const {deleteBackward, deleteForward, insertBreak, insertText, select} =
       editor
 
@@ -225,15 +160,11 @@ export function createWithEventListeners(
         type: 'behavior event',
         behaviorEvent: {
           type: 'select',
-          selection: toPortableTextRange(
-            fromSlateValue(
-              editor.children,
-              editorActor.getSnapshot().context.schema.block.name,
-              KEY_TO_VALUE_ELEMENT.get(editor),
-            ),
+          selection: slateRangeToSelection({
+            schema: editorActor.getSnapshot().context.schema,
+            editor,
             range,
-            editorActor.getSnapshot().context.schema,
-          ),
+          }),
         },
         editor,
         defaultActionCallback: () => {

package/src/editor/plugins/createWithEditableAPI.ts

@@ -20,8 +20,12 @@ import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
 import type {BehaviorActionImplementation} from '../../behavior-actions/behavior.actions'
 import {debugWithName} from '../../internal-utils/debug'
-import {toPortableTextRange, toSlateRange} from '../../internal-utils/ranges'
-import {isListItemActive, isStyleActive} from '../../internal-utils/slate-utils'
+import {toSlateRange} from '../../internal-utils/ranges'
+import {
+  isListItemActive,
+  isStyleActive,
+  slateRangeToSelection,
+} from '../../internal-utils/slate-utils'
 import {fromSlateValue, toSlateValue} from '../../internal-utils/values'
 import {
   KEY_TO_VALUE_ELEMENT,
@@ -187,17 +191,13 @@ export function createEditableAPI(
           editor,
         })
 
-        return (
-          toPortableTextRange(
-            fromSlateValue(
-              editor.children,
-              types.block.name,
-              KEY_TO_VALUE_ELEMENT.get(editor),
-            ),
-            editor.selection,
-            types,
-          )?.focus.path ?? []
-        )
+        return editor.selection
+          ? (slateRangeToSelection({
+              schema: editorActor.getSnapshot().context.schema,
+              editor,
+              range: editor.selection,
+            })?.focus.path ?? [])
+          : []
       }
 
       if (!editor.selection) {
@@ -256,17 +256,13 @@ export function createEditableAPI(
       })
       editor.onChange()
 
-      return (
-        toPortableTextRange(
-          fromSlateValue(
-            editor.children,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ),
-          editor.selection,
-          types,
-        )?.focus.path || []
-      )
+      return editor.selection
+        ? (slateRangeToSelection({
+            schema: editorActor.getSnapshot().context.schema,
+            editor,
+            range: editor.selection,
+          })?.focus.path ?? [])
+        : []
     },
     insertBlock: <TSchemaType extends {name: string}>(
       type: TSchemaType,
@@ -285,17 +281,13 @@ export function createEditableAPI(
         editor,
       })
 
-      return (
-        toPortableTextRange(
-          fromSlateValue(
-            editor.children,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ),
-          editor.selection,
-          types,
-        )?.focus.path ?? []
-      )
+      return editor.selection
+        ? (slateRangeToSelection({
+            schema: editorActor.getSnapshot().context.schema,
+            editor,
+            range: editor.selection,
+          })?.focus.path ?? [])
+        : []
     },
     hasBlockStyle: (style: string): boolean => {
       try {
@@ -511,15 +503,11 @@ export function createEditableAPI(
         if (existing) {
           return existing
         }
-        ptRange = toPortableTextRange(
-          fromSlateValue(
-            editor.children,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ),
-          editor.selection,
-          types,
-        )
+        ptRange = slateRangeToSelection({
+          schema: editorActor.getSnapshot().context.schema,
+          editor,
+          range: editor.selection,
+        })
         SLATE_TO_PORTABLE_TEXT_RANGE.set(editor.selection, ptRange)
       }
       return ptRange

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -1,15 +1,8 @@
 import type {BaseRange} from 'slate'
 import {debugWithName} from '../../internal-utils/debug'
-import {
-  toPortableTextRange,
-  type ObjectWithKeyAndType,
-} from '../../internal-utils/ranges'
+import {slateRangeToSelection} from '../../internal-utils/slate-utils'
 import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../../internal-utils/weakMaps'
-import type {
-  EditorSelection,
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
+import type {EditorSelection, PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPortableTextSelections')
@@ -18,7 +11,6 @@ const debugVerbose = debug.enabled && false
 // This plugin will make sure that we emit a PT selection whenever the editor has changed.
 export function createWithPortableTextSelections(
   editorActor: EditorActor,
-  types: PortableTextMemberSchemaTypes,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   let prevSelection: BaseRange | null = null
   return function withPortableTextSelections(
@@ -26,14 +18,17 @@ export function createWithPortableTextSelections(
   ): PortableTextSlateEditor {
     const emitPortableTextSelection = () => {
       if (prevSelection !== editor.selection) {
-        let ptRange: EditorSelection = null
+        let ptRange: EditorSelection | null = null
         if (editor.selection) {
           const existing = SLATE_TO_PORTABLE_TEXT_RANGE.get(editor.selection)
           if (existing) {
             ptRange = existing
           } else {
-            const value = editor.children satisfies ObjectWithKeyAndType[]
-            ptRange = toPortableTextRange(value, editor.selection, types)
+            ptRange = slateRangeToSelection({
+              schema: editorActor.getSnapshot().context.schema,
+              editor,
+              range: editor.selection,
+            })
             SLATE_TO_PORTABLE_TEXT_RANGE.set(editor.selection, ptRange)
           }
         }

package/src/editor/plugins/with-plugins.ts

@@ -65,14 +65,9 @@ export const withPlugins = <T extends Editor>(
     editorActor,
     schemaTypes,
   })
-  const withPortableTextSelections = createWithPortableTextSelections(
-    editorActor,
-    schemaTypes,
-  )
-  const withEventListeners = createWithEventListeners(
-    editorActor,
-    options.subscriptions,
-  )
+  const withPortableTextSelections =
+    createWithPortableTextSelections(editorActor)
+  const withEventListeners = createWithEventListeners(editorActor)
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
   return withEventListeners(

package/src/internal-utils/event-position.ts

@@ -3,9 +3,12 @@ import {DOMEditor, isDOMNode} from 'slate-dom'
 import type {EditorSchema, EditorSelection} from '..'
 import type {PortableTextSlateEditor} from '../types/editor'
 import * as utils from '../utils'
-import {toPortableTextRange} from './ranges'
-import {getFirstBlock, getLastBlock, getNodeBlock} from './slate-utils'
-import {fromSlateValue} from './values'
+import {
+  getFirstBlock,
+  getLastBlock,
+  getNodeBlock,
+  slateRangeToSelection,
+} from './slate-utils'
 
 export type EventPosition = {
   block: 'start' | 'end'
@@ -175,11 +178,11 @@ export function getEventSelection({
   const range = getSlateRangeFromEvent(slateEditor, event)
 
   const selection = range
-    ? toPortableTextRange(
-        fromSlateValue(slateEditor.children, schema.block.name),
-        range,
+    ? slateRangeToSelection({
         schema,
-      )
+        editor: slateEditor,
+        range,
+      })
     : null
 
   return selection