@portabletext/editor 1.47.3 → 1.47.4

package/lib/utils/index.js

@@ -1,12 +1,15 @@
-import { sliceBlocks, isSpan } from "../_chunks-es/util.slice-blocks.js";
-import { blockOffsetToSpanSelectionPoint, getBlockEndPoint, getBlockStartPoint, getTextBlockText, isEmptyTextBlock, isEqualSelectionPoints, isKeyedSegment, reverseSelection, spanSelectionPointToBlockOffset } from "../_chunks-es/util.slice-blocks.js";
+import { isEqualSelectionPoints, sliceBlocks, isSpan } from "../_chunks-es/util.slice-blocks.js";
+import { blockOffsetToSpanSelectionPoint, getBlockEndPoint, getBlockStartPoint, getTextBlockText, isEmptyTextBlock, isKeyedSegment, reverseSelection, spanSelectionPointToBlockOffset } from "../_chunks-es/util.slice-blocks.js";
 import { blockOffsetToBlockSelectionPoint, blockOffsetToSelectionPoint, blockOffsetsToSelection, childSelectionPointToBlockOffset, selectionPointToBlockOffset } from "../_chunks-es/util.selection-point-to-block-offset.js";
-import { getSelectionEndPoint, isEqualSelections, isSelectionCollapsed } from "../_chunks-es/util.is-selection-collapsed.js";
+import { getSelectionEndPoint, isSelectionCollapsed } from "../_chunks-es/util.is-selection-collapsed.js";
 import { isTextBlock } from "../_chunks-es/util.merge-text-blocks.js";
 import { mergeTextBlocks } from "../_chunks-es/util.merge-text-blocks.js";
 function getSelectionStartPoint(selection) {
   return selection ? selection.backward ? selection.focus : selection.anchor : null;
 }
+function isEqualSelections(a, b) {
+  return !a && !b ? !0 : !a || !b ? !1 : isEqualSelectionPoints(a.anchor, b.anchor) && isEqualSelectionPoints(a.focus, b.focus);
+}
 function splitTextBlock({
   context,
   block,

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/util.get-selection-start-point.ts","../../src/utils/util.split-text-block.ts"],"sourcesContent":["import type {EditorSelection, EditorSelectionPoint} from '..'\n\n/**\n * @public\n */\nexport function getSelectionStartPoint<\n  TEditorSelection extends NonNullable<EditorSelection> | null,\n  TEditorSelectionPoint extends\n    EditorSelectionPoint | null = TEditorSelection extends NonNullable<EditorSelection>\n    ? EditorSelectionPoint\n    : null,\n>(selection: TEditorSelection): TEditorSelectionPoint {\n  if (!selection) {\n    return null as TEditorSelectionPoint\n  }\n\n  return (\n    selection.backward ? selection.focus : selection.anchor\n  ) as TEditorSelectionPoint\n}\n","import type {PortableTextTextBlock} from '@sanity/types'\nimport type {EditorSelectionPoint} from '..'\nimport type {EditorContext} from '../editor/editor-snapshot'\nimport {isSpan} from './util.is-span'\nimport {isTextBlock} from './util.is-text-block'\nimport {sliceBlocks} from './util.slice-blocks'\n\n/**\n * @beta\n */\nexport function splitTextBlock({\n  context,\n  block,\n  point,\n}: {\n  context: Pick<EditorContext, 'schema'>\n  block: PortableTextTextBlock\n  point: EditorSelectionPoint\n}): {before: PortableTextTextBlock; after: PortableTextTextBlock} | undefined {\n  const firstChild = block.children.at(0)\n  const lastChild = block.children.at(block.children.length - 1)\n\n  if (!firstChild || !lastChild) {\n    return undefined\n  }\n\n  const before = sliceBlocks({\n    blocks: [block],\n    selection: {\n      anchor: {\n        path: [{_key: block._key}, 'children', {_key: firstChild._key}],\n        offset: 0,\n      },\n      focus: point,\n    },\n  }).at(0)\n  const after = sliceBlocks({\n    blocks: [block],\n    selection: {\n      anchor: point,\n      focus: {\n        path: [{_key: block._key}, 'children', {_key: lastChild._key}],\n        offset: isSpan(context, lastChild) ? lastChild.text.length : 0,\n      },\n    },\n  }).at(0)\n\n  if (!before || !after) {\n    return undefined\n  }\n\n  if (!isTextBlock(context, before) || !isTextBlock(context, after)) {\n    return undefined\n  }\n\n  return {before, after}\n}\n"],"names":["getSelectionStartPoint","selection","backward","focus","anchor","splitTextBlock","context","block","point","firstChild","children","at","lastChild","length","before","sliceBlocks","blocks","path","_key","offset","after","isSpan","text","isTextBlock"],"mappings":";;;;;;AAKO,SAASA,uBAMdC,WAAoD;AACpD,SAAKA,YAKHA,UAAUC,WAAWD,UAAUE,QAAQF,UAAUG,SAJ1C;AAMX;ACTO,SAASC,eAAe;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAKF,GAA8E;AAC5E,QAAMC,aAAaF,MAAMG,SAASC,GAAG,CAAC,GAChCC,YAAYL,MAAMG,SAASC,GAAGJ,MAAMG,SAASG,SAAS,CAAC;AAEzD,MAAA,CAACJ,cAAc,CAACG;AAClB;AAGF,QAAME,SAASC,YAAY;AAAA,IACzBC,QAAQ,CAACT,KAAK;AAAA,IACdN,WAAW;AAAA,MACTG,QAAQ;AAAA,QACNa,MAAM,CAAC;AAAA,UAACC,MAAMX,MAAMW;AAAAA,WAAO,YAAY;AAAA,UAACA,MAAMT,WAAWS;AAAAA,QAAAA,CAAK;AAAA,QAC9DC,QAAQ;AAAA,MACV;AAAA,MACAhB,OAAOK;AAAAA,IAAAA;AAAAA,EAEV,CAAA,EAAEG,GAAG,CAAC,GACDS,QAAQL,YAAY;AAAA,IACxBC,QAAQ,CAACT,KAAK;AAAA,IACdN,WAAW;AAAA,MACTG,QAAQI;AAAAA,MACRL,OAAO;AAAA,QACLc,MAAM,CAAC;AAAA,UAACC,MAAMX,MAAMW;AAAAA,WAAO,YAAY;AAAA,UAACA,MAAMN,UAAUM;AAAAA,QAAAA,CAAK;AAAA,QAC7DC,QAAQE,OAAOf,SAASM,SAAS,IAAIA,UAAUU,KAAKT,SAAS;AAAA,MAAA;AAAA,IAC/D;AAAA,EACF,CACD,EAAEF,GAAG,CAAC;AAEP,MAAI,EAACG,CAAAA,UAAU,CAACM,UAIZ,EAACG,CAAAA,YAAYjB,SAASQ,MAAM,KAAK,CAACS,YAAYjB,SAASc,KAAK;AAIzD,WAAA;AAAA,MAACN;AAAAA,MAAQM;AAAAA,IAAK;AACvB;"}
+{"version":3,"file":"index.js","sources":["../../src/utils/util.get-selection-start-point.ts","../../src/utils/util.is-equal-selections.ts","../../src/utils/util.split-text-block.ts"],"sourcesContent":["import type {EditorSelection, EditorSelectionPoint} from '..'\n\n/**\n * @public\n */\nexport function getSelectionStartPoint<\n  TEditorSelection extends NonNullable<EditorSelection> | null,\n  TEditorSelectionPoint extends\n    EditorSelectionPoint | null = TEditorSelection extends NonNullable<EditorSelection>\n    ? EditorSelectionPoint\n    : null,\n>(selection: TEditorSelection): TEditorSelectionPoint {\n  if (!selection) {\n    return null as TEditorSelectionPoint\n  }\n\n  return (\n    selection.backward ? selection.focus : selection.anchor\n  ) as TEditorSelectionPoint\n}\n","import type {EditorSelection} from '../types/editor'\nimport {isEqualSelectionPoints} from './util.is-equal-selection-points'\n\n/**\n * @public\n */\nexport function isEqualSelections(a: EditorSelection, b: EditorSelection) {\n  if (!a && !b) {\n    return true\n  }\n\n  if (!a || !b) {\n    return false\n  }\n\n  return (\n    isEqualSelectionPoints(a.anchor, b.anchor) &&\n    isEqualSelectionPoints(a.focus, b.focus)\n  )\n}\n","import type {PortableTextTextBlock} from '@sanity/types'\nimport type {EditorSelectionPoint} from '..'\nimport type {EditorContext} from '../editor/editor-snapshot'\nimport {isSpan} from './util.is-span'\nimport {isTextBlock} from './util.is-text-block'\nimport {sliceBlocks} from './util.slice-blocks'\n\n/**\n * @beta\n */\nexport function splitTextBlock({\n  context,\n  block,\n  point,\n}: {\n  context: Pick<EditorContext, 'schema'>\n  block: PortableTextTextBlock\n  point: EditorSelectionPoint\n}): {before: PortableTextTextBlock; after: PortableTextTextBlock} | undefined {\n  const firstChild = block.children.at(0)\n  const lastChild = block.children.at(block.children.length - 1)\n\n  if (!firstChild || !lastChild) {\n    return undefined\n  }\n\n  const before = sliceBlocks({\n    blocks: [block],\n    selection: {\n      anchor: {\n        path: [{_key: block._key}, 'children', {_key: firstChild._key}],\n        offset: 0,\n      },\n      focus: point,\n    },\n  }).at(0)\n  const after = sliceBlocks({\n    blocks: [block],\n    selection: {\n      anchor: point,\n      focus: {\n        path: [{_key: block._key}, 'children', {_key: lastChild._key}],\n        offset: isSpan(context, lastChild) ? lastChild.text.length : 0,\n      },\n    },\n  }).at(0)\n\n  if (!before || !after) {\n    return undefined\n  }\n\n  if (!isTextBlock(context, before) || !isTextBlock(context, after)) {\n    return undefined\n  }\n\n  return {before, after}\n}\n"],"names":["getSelectionStartPoint","selection","backward","focus","anchor","isEqualSelections","a","b","isEqualSelectionPoints","splitTextBlock","context","block","point","firstChild","children","at","lastChild","length","before","sliceBlocks","blocks","path","_key","offset","after","isSpan","text","isTextBlock"],"mappings":";;;;;;AAKO,SAASA,uBAMdC,WAAoD;AACpD,SAAKA,YAKHA,UAAUC,WAAWD,UAAUE,QAAQF,UAAUG,SAJ1C;AAMX;ACbgBC,SAAAA,kBAAkBC,GAAoBC,GAAoB;AACpE,SAAA,CAACD,KAAK,CAACC,IACF,KAGL,CAACD,KAAK,CAACC,IACF,KAIPC,uBAAuBF,EAAEF,QAAQG,EAAEH,MAAM,KACzCI,uBAAuBF,EAAEH,OAAOI,EAAEJ,KAAK;AAE3C;ACTO,SAASM,eAAe;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAKF,GAA8E;AAC5E,QAAMC,aAAaF,MAAMG,SAASC,GAAG,CAAC,GAChCC,YAAYL,MAAMG,SAASC,GAAGJ,MAAMG,SAASG,SAAS,CAAC;AAEzD,MAAA,CAACJ,cAAc,CAACG;AAClB;AAGF,QAAME,SAASC,YAAY;AAAA,IACzBC,QAAQ,CAACT,KAAK;AAAA,IACdV,WAAW;AAAA,MACTG,QAAQ;AAAA,QACNiB,MAAM,CAAC;AAAA,UAACC,MAAMX,MAAMW;AAAAA,WAAO,YAAY;AAAA,UAACA,MAAMT,WAAWS;AAAAA,QAAAA,CAAK;AAAA,QAC9DC,QAAQ;AAAA,MACV;AAAA,MACApB,OAAOS;AAAAA,IAAAA;AAAAA,EAEV,CAAA,EAAEG,GAAG,CAAC,GACDS,QAAQL,YAAY;AAAA,IACxBC,QAAQ,CAACT,KAAK;AAAA,IACdV,WAAW;AAAA,MACTG,QAAQQ;AAAAA,MACRT,OAAO;AAAA,QACLkB,MAAM,CAAC;AAAA,UAACC,MAAMX,MAAMW;AAAAA,WAAO,YAAY;AAAA,UAACA,MAAMN,UAAUM;AAAAA,QAAAA,CAAK;AAAA,QAC7DC,QAAQE,OAAOf,SAASM,SAAS,IAAIA,UAAUU,KAAKT,SAAS;AAAA,MAAA;AAAA,IAC/D;AAAA,EACF,CACD,EAAEF,GAAG,CAAC;AAEP,MAAI,EAACG,CAAAA,UAAU,CAACM,UAIZ,EAACG,CAAAA,YAAYjB,SAASQ,MAAM,KAAK,CAACS,YAAYjB,SAASc,KAAK;AAIzD,WAAA;AAAA,MAACN;AAAAA,MAAQM;AAAAA,IAAK;AACvB;"}

package/package.json

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

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

@@ -51,7 +51,7 @@ import type {
   ScrollSelectionIntoViewFunction,
 } from '../types/editor'
 import type {HotkeyOptions} from '../types/options'
-import {isEqualSelections, isSelectionCollapsed} from '../utils'
+import {isSelectionCollapsed} from '../utils'
 import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
@@ -570,17 +570,9 @@ export const PortableTextEditable = forwardRef<
         onFocus(event)
       }
       if (!event.isDefaultPrevented()) {
-        const selectionBefore = slateEditor.selection
-          ? slateRangeToSelection({
-              schema: editorActor.getSnapshot().context.schema,
-              editor: slateEditor,
-              range: slateEditor.selection,
-            })
-          : null
-
         editorActor.send({type: 'notify.focused', event})
 
-        const selectionAfter = slateEditor.selection
+        const selection = slateEditor.selection
           ? slateRangeToSelection({
               schema: editorActor.getSnapshot().context.schema,
               editor: slateEditor,
@@ -588,15 +580,10 @@ export const PortableTextEditable = forwardRef<
             })
           : null
 
-        if (
-          selectionBefore &&
-          selectionAfter &&
-          isEqualSelections(selectionBefore, selectionAfter)
-        ) {
-          // If the selection is the same, emit it explicitly here as there is no actual onChange event triggered.
+        if (selection) {
           editorActor.send({
             type: 'notify.selection',
-            selection: selectionBefore,
+            selection,
           })
         }
       }

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)
-}