@portabletext/editor 1.47.2 → 1.47.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.47.2",
+  "version": "1.47.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,8 +79,8 @@
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/patches": "1.1.3",
-    "@portabletext/block-tools": "1.1.18"
+    "@portabletext/block-tools": "1.1.18",
+    "@portabletext/patches": "1.1.3"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/behavior-actions/behavior.action.insert.text.ts

@@ -4,5 +4,14 @@ import type {BehaviorActionImplementation} from './behavior.actions'
 export const insertTextActionImplementation: BehaviorActionImplementation<
   'insert.text'
 > = ({action}) => {
-  Transforms.insertText(action.editor, action.text)
+  if (action.editor.marks) {
+    Transforms.insertNodes(action.editor, {
+      text: action.text,
+      ...action.editor.marks,
+    })
+  } else {
+    Transforms.insertText(action.editor, action.text)
+  }
+
+  action.editor.marks = null
 }

package/src/behavior-actions/behavior.actions.ts

@@ -12,14 +12,12 @@ import {addAnnotationActionImplementation} from './behavior.action.annotation.ad
 import {removeAnnotationActionImplementation} from './behavior.action.annotation.remove'
 import {blockSetBehaviorActionImplementation} from './behavior.action.block.set'
 import {blockUnsetBehaviorActionImplementation} from './behavior.action.block.unset'
-import {blurActionImplementation} from './behavior.action.blur'
 import {decoratorAddActionImplementation} from './behavior.action.decorator.add'
 import {deleteActionImplementation} from './behavior.action.delete'
 import {deleteBackwardActionImplementation} from './behavior.action.delete.backward'
 import {deleteBlockActionImplementation} from './behavior.action.delete.block'
 import {deleteForwardActionImplementation} from './behavior.action.delete.forward'
 import {effectActionImplementation} from './behavior.action.effect'
-import {focusActionImplementation} from './behavior.action.focus'
 import {insertInlineObjectActionImplementation} from './behavior.action.insert-inline-object'
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import {insertBlockActionImplementation} from './behavior.action.insert.block'
@@ -58,10 +56,8 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'annotation.remove': removeAnnotationActionImplementation,
   'block.set': blockSetBehaviorActionImplementation,
   'block.unset': blockUnsetBehaviorActionImplementation,
-  'blur': blurActionImplementation,
   'decorator.add': decoratorAddActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
-  'focus': focusActionImplementation,
   'delete': deleteActionImplementation,
   'delete.backward': deleteBackwardActionImplementation,
   'delete.forward': deleteForwardActionImplementation,
@@ -119,13 +115,6 @@ export function performAction({
       })
       break
     }
-    case 'blur': {
-      behaviorActionImplementations.blur({
-        context,
-        action,
-      })
-      break
-    }
     case 'decorator.add': {
       behaviorActionImplementations['decorator.add']({
         context,
@@ -175,13 +164,6 @@ export function performAction({
       })
       break
     }
-    case 'focus': {
-      behaviorActionImplementations.focus({
-        context,
-        action,
-      })
-      break
-    }
     case 'history.redo': {
       behaviorActionImplementations['history.redo']({
         context,

package/src/behaviors/behavior.perform-event.ts

@@ -37,7 +37,6 @@ export function performEvent({
   schema,
   getSnapshot,
   nativeEvent,
-  defaultActionCallback,
 }: {
   mode: 'raise' | 'execute'
   behaviors: Array<Behavior>
@@ -46,7 +45,6 @@ export function performEvent({
   keyGenerator: () => string
   schema: EditorSchema
   getSnapshot: () => EditorSnapshot
-  defaultActionCallback: (() => void) | undefined
   nativeEvent:
     | {
         preventDefault: () => void
@@ -105,21 +103,6 @@ export function performEvent({
   })
 
   if (eventBehaviors.length === 0) {
-    if (defaultActionCallback) {
-      withApplyingBehaviorActions(editor, () => {
-        try {
-          defaultActionCallback()
-        } catch (error) {
-          console.error(
-            new Error(
-              `Performing action "${event.type}" failed due to: ${error.message}`,
-            ),
-          )
-        }
-      })
-      return
-    }
-
     if (!defaultAction) {
       return
     }
@@ -133,7 +116,6 @@ export function performEvent({
           },
           action: defaultAction,
         })
-        editor.onChange()
       } catch (error) {
         console.error(
           new Error(
@@ -142,6 +124,9 @@ export function performEvent({
         )
       }
     })
+
+    editor.onChange()
+
     return
   }
 
@@ -196,7 +181,6 @@ export function performEvent({
               keyGenerator,
               schema,
               getSnapshot,
-              defaultActionCallback: undefined,
               nativeEvent: undefined,
             })
 
@@ -218,26 +202,39 @@ export function performEvent({
                 keyGenerator,
                 schema,
                 getSnapshot,
-                defaultActionCallback: undefined,
                 nativeEvent: undefined,
               })
             } else {
-              try {
-                performAction({
-                  context: {
-                    keyGenerator,
-                    schema,
-                  },
-                  action: {...action.event, editor},
-                })
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Performing action "${action.event.type}" as a result of "${event.type}" failed due to: ${error.message}`,
-                  ),
-                )
+              const internalAction = {
+                ...action.event,
+                editor,
+              }
+              let actionFailed = false
+
+              withApplyingBehaviorActions(editor, () => {
+                try {
+                  performAction({
+                    context: {
+                      keyGenerator,
+                      schema,
+                    },
+                    action: internalAction,
+                  })
+                } catch (error) {
+                  console.error(
+                    new Error(
+                      `Performing action "${action.event.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+                    ),
+                  )
+                  actionFailed = true
+                }
+              })
+
+              if (actionFailed) {
                 break
               }
+
+              editor.onChange()
             }
 
             continue
@@ -247,25 +244,33 @@ export function performEvent({
             ...action,
             editor,
           }
+          let actionFailed = false
 
-          try {
-            performAction({
-              context: {
-                keyGenerator,
-                schema,
-              },
-              action: internalAction,
-            })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Performing action "${internalAction.type}" as a result of "${event.type}" failed due to: ${error.message}`,
-              ),
-            )
+          withApplyingBehaviorActions(editor, () => {
+            try {
+              performAction({
+                context: {
+                  keyGenerator,
+                  schema,
+                },
+                action: internalAction,
+              })
+            } catch (error) {
+              console.error(
+                new Error(
+                  `Performing action "${internalAction.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+                ),
+              )
+              actionFailed = true
+            }
+          })
+
+          if (actionFailed) {
             break
           }
+
+          editor.onChange()
         }
-        editor.onChange()
       })
     }
 
@@ -276,21 +281,6 @@ export function performEvent({
   }
 
   if (!behaviorOverwritten) {
-    if (defaultActionCallback) {
-      withApplyingBehaviorActions(editor, () => {
-        try {
-          defaultActionCallback()
-        } catch (error) {
-          console.error(
-            new Error(
-              `Performing "${event.type}" failed due to: ${error.message}`,
-            ),
-          )
-        }
-      })
-      return
-    }
-
     if (!defaultAction) {
       return
     }
@@ -304,7 +294,6 @@ export function performEvent({
           },
           action: defaultAction,
         })
-        editor.onChange()
       } catch (error) {
         console.error(
           new Error(
@@ -313,5 +302,6 @@ export function performEvent({
         )
       }
     })
+    editor.onChange()
   }
 }

package/src/behaviors/behavior.types.event.ts

@@ -32,7 +32,7 @@ type NamespacedBehaviorEventType<
  * External events
  **************************************/
 
-type ExternalBehaviorEventNamespace = 'insert'
+type ExternalBehaviorEventNamespace = 'blur' | 'focus' | 'insert'
 
 type ExternalBehaviorEventType<
   TNamespace extends ExternalBehaviorEventNamespace,
@@ -40,6 +40,12 @@ type ExternalBehaviorEventType<
 > = TType extends '' ? `${TNamespace}` : `${TNamespace}.${TType}`
 
 export type ExternalBehaviorEvent =
+  | {
+      type: ExternalBehaviorEventType<'blur'>
+    }
+  | {
+      type: ExternalBehaviorEventType<'focus'>
+    }
   | {
       type: ExternalBehaviorEventType<'insert', 'block object'>
       placement: InsertPlacement
@@ -61,14 +67,12 @@ const syntheticBehaviorEventTypes = [
   'annotation.remove',
   'block.set',
   'block.unset',
-  'blur',
   'decorator.add',
   'decorator.remove',
   'delete',
   'delete.backward',
   'delete.block',
   'delete.forward',
-  'focus',
   'history.redo',
   'history.undo',
   'insert.inline object',
@@ -114,9 +118,6 @@ export type SyntheticBehaviorEvent =
       at: [KeyedSegment]
       props: Array<string>
     }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'blur'>
-    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'decorator.add'>
       decorator: string
@@ -145,9 +146,6 @@ export type SyntheticBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
       unit: TextUnit
     }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'focus'>
-    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>
     }

package/src/editor/Editable.tsx

@@ -16,7 +16,7 @@ import {
   type MutableRefObject,
   type TextareaHTMLAttributes,
 } from 'react'
-import {Editor, Transforms, type Text} from 'slate'
+import {Transforms, type Text} from 'slate'
 import {
   ReactEditor,
   Editable as SlateEditable,
@@ -34,6 +34,7 @@ import {normalizeSelection} from '../internal-utils/selection'
 import {getSelectionDomNodes} from '../internal-utils/selection-elements'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {fromSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import * as selectors from '../selectors'
 import type {
   EditorSelection,
@@ -58,7 +59,6 @@ import {EditorActorContext} from './editor-actor-context'
 import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
-import {PortableTextEditor} from './PortableTextEditor'
 import {
   createDecorate,
   rangeDecorationsMachine,
@@ -444,7 +444,11 @@ export const PortableTextEditable = forwardRef<
   // Handle incoming pasting events in the editor
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
-      const value = PortableTextEditor.getValue(portableTextEditor)
+      const value = fromSlateValue(
+        slateEditor.children,
+        editorActor.getSnapshot().context.schema.block.name,
+        KEY_TO_VALUE_ELEMENT.get(slateEditor),
+      )
       const ptRange = slateEditor.selection
         ? slateRangeToSelection({
             schema: editorActor.getSnapshot().context.schema,
@@ -566,16 +570,17 @@ export const PortableTextEditable = forwardRef<
         onFocus(event)
       }
       if (!event.isDefaultPrevented()) {
-        const selection = PortableTextEditor.getSelection(portableTextEditor)
-        // Create an editor selection if it does'nt exist
-        if (selection === null) {
-          Transforms.select(slateEditor, Editor.start(slateEditor, []))
-          slateEditor.onChange()
-        }
         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) {
+
+        const selection = slateEditor.selection
+          ? slateRangeToSelection({
+              schema: editorActor.getSnapshot().context.schema,
+              editor: slateEditor,
+              range: slateEditor.selection,
+            })
+          : null
+
+        if (selection) {
           editorActor.send({
             type: 'notify.selection',
             selection,
@@ -583,7 +588,7 @@ export const PortableTextEditable = forwardRef<
         }
       }
     },
-    [editorActor, onFocus, portableTextEditor, slateEditor],
+    [editorActor, onFocus, slateEditor],
   )
 
   const handleClick = useCallback(

package/src/editor/create-editor.ts

@@ -191,6 +191,20 @@ function createInternalEditorFromActor(
           editorActor.send(event)
           break
 
+        case 'blur':
+          editorActor.send({
+            type: 'blur',
+            editor: slateEditor.instance,
+          })
+          break
+
+        case 'focus':
+          editorActor.send({
+            type: 'focus',
+            editor: slateEditor.instance,
+          })
+          break
+
         case 'insert.block object':
           editorActor.send({
             type: 'behavior event',

package/src/editor/editor-machine.ts

@@ -1,6 +1,8 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import type {FocusEvent} from 'react'
+import {Transforms} from 'slate'
+import {ReactEditor} from 'slate-react'
 import {
   assertEvent,
   assign,
@@ -161,6 +163,14 @@ export type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
  */
 export type InternalEditorEvent =
   | ExternalEditorEvent
+  | {
+      type: 'blur'
+      editor: PortableTextSlateEditor
+    }
+  | {
+      type: 'focus'
+      editor: PortableTextSlateEditor
+    }
   | {
       type: 'normalizing'
     }
@@ -174,7 +184,6 @@ export type InternalEditorEvent =
       type: 'behavior event'
       behaviorEvent: BehaviorEvent
       editor: PortableTextSlateEditor
-      defaultActionCallback?: () => void
       nativeEvent?: {preventDefault: () => void}
     }
   | MutationEvent
@@ -217,6 +226,7 @@ export const editorMachine = setup({
         ghost?: HTMLElement
         origin: Pick<EventPosition, 'selection'>
       }
+      slateEditor?: PortableTextSlateEditor
     },
     events: {} as InternalEditorEvent,
     emitted: {} as InternalEditorEmittedEvent,
@@ -292,6 +302,31 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
+    'handle blur': ({event}) => {
+      assertEvent(event, 'blur')
+
+      try {
+        ReactEditor.blur(event.editor)
+      } catch (error) {
+        console.error(new Error(`Failed to blur editor: ${error.message}`))
+      }
+    },
+    'handle focus': ({context}) => {
+      if (!context.slateEditor) {
+        console.error('No Slate editor found to focus')
+        return
+      }
+
+      try {
+        const currentSelection = context.slateEditor.selection
+        ReactEditor.focus(context.slateEditor)
+        if (currentSelection) {
+          Transforms.select(context.slateEditor, currentSelection)
+        }
+      } catch (error) {
+        console.error(new Error(`Failed to focus editor: ${error.message}`))
+      }
+    },
     'handle behavior event': ({context, event, self}) => {
       assertEvent(event, ['behavior event'])
 
@@ -313,13 +348,18 @@ export const editorMachine = setup({
             internalDrag: context.internalDrag,
           }),
         nativeEvent: event.nativeEvent,
-        defaultActionCallback:
-          event.type === 'behavior event'
-            ? event.defaultActionCallback
-            : undefined,
       })
     },
   },
+  guards: {
+    'slate is busy': ({context}) => {
+      if (!context.slateEditor) {
+        return false
+      }
+
+      return context.slateEditor.operations.length > 0
+    },
+  },
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
@@ -426,6 +466,13 @@ export const editorMachine = setup({
             'behavior event': {
               actions: 'handle behavior event',
             },
+            'blur': {
+              actions: 'handle blur',
+            },
+            'focus': {
+              target: '.focusing',
+              actions: [assign({slateEditor: ({event}) => event.editor})],
+            },
           },
           initial: 'idle',
           states: {
@@ -444,6 +491,30 @@ export const editorMachine = setup({
                 },
               },
             },
+            'focusing': {
+              initial: 'checking if busy',
+              states: {
+                'checking if busy': {
+                  always: [
+                    {
+                      guard: 'slate is busy',
+                      target: 'busy',
+                    },
+                    {
+                      target: '#editor.edit mode.editable.idle',
+                      actions: ['handle focus'],
+                    },
+                  ],
+                },
+                'busy': {
+                  after: {
+                    10: {
+                      target: 'checking if busy',
+                    },
+                  },
+                },
+              },
+            },
             'dragging internally': {
               exit: [
                 ({context}) => {

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

@@ -116,9 +116,6 @@ export function createWithEventListeners(editorActor: EditorActor) {
           text,
         },
         editor,
-        defaultActionCallback: () => {
-          insertText(text, options)
-        },
       })
       return
     }
@@ -167,9 +164,6 @@ export function createWithEventListeners(editorActor: EditorActor) {
           }),
         },
         editor,
-        defaultActionCallback: () => {
-          select(location)
-        },
       })
       return
     }

package/src/editor/plugins/createWithEditableAPI.ts

@@ -49,19 +49,13 @@ export function createEditableAPI(
   const editableApi: EditableAPI = {
     focus: (): void => {
       editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'focus',
-        },
+        type: 'focus',
         editor,
       })
     },
     blur: (): void => {
       editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'blur',
-        },
+        type: 'blur',
         editor,
       })
     },

package/src/editor/with-applying-behavior-actions.ts

@@ -28,7 +28,7 @@ export function withApplyingBehaviorActionSet(editor: Editor, fn: () => void) {
   const current = CURRENT_BEHAVIOR_ACTION_SET.get(editor)
 
   if (current) {
-    withApplyingBehaviorActions(editor, fn)
+    fn()
     return
   }
 
@@ -38,7 +38,7 @@ export function withApplyingBehaviorActionSet(editor: Editor, fn: () => void) {
       actionSetId: defaultKeyGenerator(),
     },
   )
-  withApplyingBehaviorActions(editor, fn)
+  fn()
   CURRENT_BEHAVIOR_ACTION_SET.set(editor, undefined)
 }
 

package/src/behavior-actions/behavior.action.blur.ts

@@ -1,8 +0,0 @@
-import {ReactEditor} from 'slate-react'
-import type {BehaviorActionImplementation} from './behavior.actions'
-
-export const blurActionImplementation: BehaviorActionImplementation<'blur'> = ({
-  action,
-}) => {
-  ReactEditor.blur(action.editor)
-}

package/src/behavior-actions/behavior.action.focus.ts

@@ -1,8 +0,0 @@
-import {ReactEditor} from 'slate-react'
-import type {BehaviorActionImplementation} from './behavior.actions'
-
-export const focusActionImplementation: BehaviorActionImplementation<
-  'focus'
-> = ({action}) => {
-  ReactEditor.focus(action.editor)
-}