@portabletext/editor 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -59,7 +59,7 @@
     "@portabletext/toolkit": "^2.0.15",
     "@sanity/block-tools": "^3.62.2",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.4",
+    "@sanity/pkg-utils": "^6.11.6",
     "@sanity/schema": "^3.62.2",
     "@sanity/types": "^3.62.2",
     "@sanity/ui": "^2.8.10",
@@ -78,7 +78,7 @@
     "@types/react-dom": "^18.3.1",
     "@types/ws": "~8.5.12",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/browser": "^2.1.3",
+    "@vitest/browser": "^2.1.4",
     "@xstate/react": "^4.1.3",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -96,7 +96,7 @@
     "ts-node": "^10.9.2",
     "typescript": "5.6.3",
     "vite": "^5.4.10",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.4",
     "vitest-browser-react": "^0.0.3",
     "@sanity/gherkin-driver": "^0.0.1"
   },
@@ -124,7 +124,7 @@
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
+    "test:e2e-legacy": "jest --config=e2e-tests/e2e.config.ts",
+    "test:e2e-legacy:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
   }
 }

package/src/editor/Editable.tsx

@@ -550,14 +550,6 @@ export const PortableTextEditable = forwardRef<
       if (onBeforeInput) {
         onBeforeInput(event)
       }
-
-      if (!event.defaultPrevented && event.inputType === 'insertText') {
-        editorActor.send({
-          type: 'before insert text',
-          nativeEvent: event,
-          editor: slateEditor,
-        })
-      }
     },
     [onBeforeInput],
   )
@@ -646,11 +638,6 @@ export const PortableTextEditable = forwardRef<
         props.onKeyDown(event)
       }
       if (!event.isDefaultPrevented()) {
-        editorActor.send({
-          type: 'key down',
-          nativeEvent: event.nativeEvent,
-          editor: slateEditor,
-        })
         slateEditor.pteWithHotKeys(event)
       }
     },

package/src/editor/behavior/behavior.actions.ts

@@ -33,12 +33,29 @@ export const behaviorActionImplementations: BehaviourActionImplementations = {
       Transforms.setNodes(event.editor, {style: event.style}, {at})
     }
   },
+  'delete backward': ({event}) => {
+    // Since this calls the native Editor method it will trigger a new behavior
+    // event
+    Editor.deleteBackward(event.editor, {unit: event.unit})
+  },
   'delete text': ({event}) => {
     Transforms.delete(event.editor, {
       at: toSlateRange(event.selection, event.editor)!,
     })
   },
+  'insert break': ({event}) => {
+    // Since this calls the native Editor method it will trigger a new behavior
+    // event
+    Editor.insertBreak(event.editor)
+  },
+  'insert soft break': ({event}) => {
+    // Since this calls the native Editor method it will trigger a new behavior
+    // event
+    Editor.insertSoftBreak(event.editor)
+  },
   'insert text': ({event}) => {
+    // Since this calls the native Editor method it will trigger a new behavior
+    // event
     Editor.insertText(event.editor, event.text)
   },
   'insert text block': ({context, event}) => {

package/src/editor/behavior/behavior.core.ts

@@ -1,37 +1,19 @@
-import {isHotkey} from 'is-hotkey-esm'
 import {defineBehavior} from './behavior.types'
 import {getFocusBlockObject} from './behavior.utils'
 
-const overwriteSoftReturn = defineBehavior({
-  on: 'key down',
-  guard: ({event}) => isHotkey('shift+enter', event.nativeEvent),
-  actions: [
-    ({event}) => {
-      event.nativeEvent.preventDefault()
-      return {type: 'insert text', text: '\n'}
-    },
-  ],
+const softReturn = defineBehavior({
+  on: 'insert soft break',
+  actions: [() => ({type: 'insert text', text: '\n'})],
 })
 
-const enterOnVoidBlock = defineBehavior({
-  on: 'key down',
-  guard: ({context, event}) => {
-    const isEnter = isHotkey('enter', event.nativeEvent)
-
-    if (!isEnter) {
-      return false
-    }
-
+const breakingVoidBlock = defineBehavior({
+  on: 'insert break',
+  guard: ({context}) => {
     const focusBlockObject = getFocusBlockObject(context)
 
     return !!focusBlockObject
   },
-  actions: [
-    ({event}) => {
-      event.nativeEvent.preventDefault()
-      return {type: 'insert text block', decorators: []}
-    },
-  ],
+  actions: [() => ({type: 'insert text block', decorators: []})],
 })
 
-export const coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock]
+export const coreBehaviors = [softReturn, breakingVoidBlock]

package/src/editor/behavior/behavior.types.ts

@@ -1,4 +1,5 @@
 import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {TextUnit} from 'slate'
 import type {
   EditorSelection,
   PortableTextMemberSchemaTypes,
@@ -19,14 +20,22 @@ export type BehaviorContext = {
  */
 export type BehaviorEvent =
   | {
-      type: 'key down'
-      nativeEvent: KeyboardEvent
-      editor: PortableTextSlateEditor
+      type: 'delete backward'
+      unit: TextUnit
+      default: () => void
     }
   | {
-      type: 'before insert text'
-      nativeEvent: InputEvent
-      editor: PortableTextSlateEditor
+      type: 'insert soft break'
+      default: () => void
+    }
+  | {
+      type: 'insert break'
+      default: () => void
+    }
+  | {
+      type: 'insert text'
+      text: string
+      default: () => void
     }
 
 /**
@@ -48,9 +57,11 @@ export type BehaviorGuard<
  */
 export type BehaviorActionIntend =
   | {
-      type: 'insert text'
-      text: string
-    }
+      [TBehaviorEvent in BehaviorEvent as TBehaviorEvent['type']]: Omit<
+        TBehaviorEvent,
+        'default'
+      >
+    }[BehaviorEvent['type']]
   | {
       type: 'insert text block'
       decorators: Array<string>

package/src/editor/editor-machine.ts

@@ -14,6 +14,7 @@ import type {
   EditorSelection,
   InvalidValueResolution,
   PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
 } from '../types/editor'
 import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
@@ -65,7 +66,11 @@ export type MutationEvent = {
 type EditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
-  | BehaviorEvent
+  | {
+      type: 'behavior event'
+      behaviorEvent: BehaviorEvent
+      editor: PortableTextSlateEditor
+    }
   | BehaviorAction
   | {
       type: 'update schema'
@@ -153,13 +158,14 @@ export const editorMachine = setup({
       pendingEvents: [],
     }),
     'handle behavior event': enqueueActions(({context, event, enqueue}) => {
-      assertEvent(event, ['key down', 'before insert text'])
+      assertEvent(event, ['behavior event'])
 
       const eventBehaviors = context.behaviors.filter(
-        (behavior) => behavior.on === event.type,
+        (behavior) => behavior.on === event.behaviorEvent.type,
       )
 
       if (eventBehaviors.length === 0) {
+        event.behaviorEvent.default()
         return
       }
 
@@ -178,6 +184,7 @@ export const editorMachine = setup({
         console.warn(
           `Unable to handle event ${event.type} due to missing selection`,
         )
+        event.behaviorEvent.default()
         return
       }
 
@@ -187,11 +194,13 @@ export const editorMachine = setup({
         selection,
       } satisfies BehaviorContext
 
+      let behaviorOverwritten = false
+
       for (const eventBehavior of eventBehaviors) {
         const shouldRun =
           eventBehavior.guard?.({
             context: behaviorContext,
-            event,
+            event: event.behaviorEvent,
           }) ?? true
 
         if (!shouldRun) {
@@ -199,7 +208,10 @@ export const editorMachine = setup({
         }
 
         const actions = eventBehavior.actions.map((action) =>
-          action({context: behaviorContext, event}, shouldRun),
+          action(
+            {context: behaviorContext, event: event.behaviorEvent},
+            shouldRun,
+          ),
         )
 
         for (const action of actions) {
@@ -207,12 +219,18 @@ export const editorMachine = setup({
             continue
           }
 
+          behaviorOverwritten = true
+
           enqueue.raise({
             ...action,
             editor: event.editor,
           })
         }
       }
+
+      if (!behaviorOverwritten) {
+        event.behaviorEvent.default()
+      }
     }),
   },
   actors: {
@@ -244,18 +262,22 @@ export const editorMachine = setup({
     'loading': {actions: emit({type: 'loading'})},
     'done loading': {actions: emit({type: 'done loading'})},
     'update schema': {actions: 'assign schema'},
-    'key down': {
-      actions: ['handle behavior event'],
-    },
-    'before insert text': {
-      actions: ['handle behavior event'],
-    },
+    'behavior event': {actions: 'handle behavior event'},
     'apply block style': {
       actions: [behaviorActionImplementations['apply block style']],
     },
+    'delete backward': {
+      actions: [behaviorActionImplementations['delete backward']],
+    },
     'delete text': {
       actions: [behaviorActionImplementations['delete text']],
     },
+    'insert break': {
+      actions: [behaviorActionImplementations['insert break']],
+    },
+    'insert soft break': {
+      actions: [behaviorActionImplementations['insert soft break']],
+    },
     'insert text': {
       actions: [behaviorActionImplementations['insert text']],
     },

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

@@ -0,0 +1,60 @@
+import type {Editor} from 'slate'
+import type {EditorActor} from '../editor-machine'
+
+export function createWithEventListeners(editorActor: EditorActor) {
+  return function withEventListeners(editor: Editor) {
+    const {deleteBackward, insertBreak, insertSoftBreak, insertText} = editor
+
+    editor.deleteBackward = (unit) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'delete backward',
+          unit,
+          default: () => deleteBackward(unit),
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertBreak = () => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert break',
+          default: insertBreak,
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertSoftBreak = () => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert soft break',
+          default: insertSoftBreak,
+        },
+        editor,
+      })
+      return
+    }
+
+    editor.insertText = (text, options) => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert text',
+          text,
+          default: () => insertText(text, options),
+        },
+        editor,
+      })
+      return
+    }
+
+    return editor
+  }
+}

package/src/editor/plugins/createWithInsertBreak.ts

@@ -57,6 +57,8 @@ export function createWithInsertBreak(
             editor,
             editor.pteCreateTextBlock({
               decorators: focusAnnotations.length === 0 ? focusDecorators : [],
+              listItem: focusBlock.listItem,
+              level: focusBlock.level,
             }),
           )
 
@@ -84,6 +86,8 @@ export function createWithInsertBreak(
             editor,
             editor.pteCreateTextBlock({
               decorators: [],
+              listItem: focusBlock.listItem,
+              level: focusBlock.level,
             }),
           )
 

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -383,6 +383,18 @@ export function createWithPortableTextMarkModel(
               }
             }
           }
+
+          if (atTheBeginningOfSpan && !spanIsEmpty && !!previousSpan) {
+            Transforms.insertNodes(editor, {
+              _type: 'span',
+              _key: editorActor.getSnapshot().context.keyGenerator(),
+              text: op.text,
+              marks: (previousSpan.marks ?? []).filter((mark) =>
+                decorators.includes(mark),
+              ),
+            })
+            return
+          }
         }
       }
 

package/src/editor/plugins/createWithUtils.ts

@@ -75,13 +75,19 @@ export function createWithUtils({
       }
     }
 
-    editor.pteCreateTextBlock = (options: {decorators: Array<string>}) => {
+    editor.pteCreateTextBlock = (options: {
+      decorators: Array<string>
+      listItem?: string
+      level?: number
+    }) => {
       const block = toSlateValue(
         [
           {
             _type: schemaTypes.block.name,
             _key: editorActor.getSnapshot().context.keyGenerator(),
             style: schemaTypes.styles[0].value || 'normal',
+            ...(options.listItem ? {listItem: options.listItem} : {}),
+            ...(options.level ? {level: options.level} : {}),
             markDefs: [],
             children: [
               {

package/src/editor/plugins/index.ts

@@ -3,6 +3,7 @@ import type {BaseOperation, Editor, Node, NodeEntry} from 'slate'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {createEditorOptions} from '../../types/options'
 import {createOperationToPatches} from '../../utils/operationToPatches'
+import {createWithEventListeners} from './create-with-event-listeners'
 import {createWithEditableAPI} from './createWithEditableAPI'
 import {createWithInsertBreak} from './createWithInsertBreak'
 import {createWithMaxBlocks} from './createWithMaxBlocks'
@@ -109,6 +110,7 @@ export const withPlugins = <T extends Editor>(
     editorActor,
     schemaTypes,
   )
+  const withEventListeners = createWithEventListeners(editorActor)
 
   e.destroy = () => {
     const originalFunctions = originalFnMap.get(e)
@@ -145,18 +147,20 @@ export const withPlugins = <T extends Editor>(
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
   return {
-    editor: withSchemaTypes(
-      withObjectKeys(
-        withPortableTextMarkModel(
-          withPortableTextBlockStyle(
-            withPortableTextLists(
-              withPlaceholderBlock(
-                withUtils(
-                  withMaxBlocks(
-                    withUndoRedo(
-                      withPatches(
-                        withPortableTextSelections(
-                          withEditableAPI(withInsertBreak(e)),
+    editor: withEventListeners(
+      withSchemaTypes(
+        withObjectKeys(
+          withPortableTextMarkModel(
+            withPortableTextBlockStyle(
+              withPortableTextLists(
+                withPlaceholderBlock(
+                  withUtils(
+                    withMaxBlocks(
+                      withUndoRedo(
+                        withPatches(
+                          withPortableTextSelections(
+                            withEditableAPI(withInsertBreak(e)),
+                          ),
                         ),
                       ),
                     ),

package/src/types/editor.ts

@@ -222,7 +222,11 @@ export interface PortableTextSlateEditor extends ReactEditor {
   /**
    * Helper function that creates a text block
    */
-  pteCreateTextBlock: (options: {decorators: Array<string>}) => Descendant
+  pteCreateTextBlock: (options: {
+    decorators: Array<string>
+    listItem?: string
+    level?: number
+  }) => Descendant
 
   /**
    * Undo