@portabletext/editor 2.19.0 → 2.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -74,7 +74,7 @@
     "slate-react": "0.118.2",
     "xstate": "^5.23.0",
     "@portabletext/block-tools": "^4.0.0",
-    "@portabletext/keyboard-shortcuts": "^2.0.0",
+    "@portabletext/keyboard-shortcuts": "^2.0.1",
     "@portabletext/patches": "^2.0.0",
     "@portabletext/schema": "^2.0.0"
   },

package/src/behaviors/behavior.abstract.keyboard.ts

@@ -37,6 +37,7 @@ export const abstractKeyboardBehaviors = [
       getFocusInlineObject(snapshot),
     actions: [() => [raise({type: 'delete.backward', unit: 'character'})]],
   }),
+
   /**
    * When Delete is pressed on an inline object, Slate will raise a
    * `delete.forward` event with `unit: 'block'`. This is wrong and this
@@ -51,6 +52,20 @@ export const abstractKeyboardBehaviors = [
     actions: [() => [raise({type: 'delete.forward', unit: 'character'})]],
   }),
 
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({event}) =>
+      defaultKeyboardShortcuts.deleteWord.backward.guard(event.originEvent),
+    actions: [() => [raise({type: 'delete.backward', unit: 'word'})]],
+  }),
+
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({event}) =>
+      defaultKeyboardShortcuts.deleteWord.forward.guard(event.originEvent),
+    actions: [() => [raise({type: 'delete.forward', unit: 'word'})]],
+  }),
+
   /**
    * Allow raising an `insert.break` event when pressing Enter on an inline
    * object.

package/src/keyboard-shortcuts/default-keyboard-shortcuts.ts

@@ -75,6 +75,48 @@ export const defaultKeyboardShortcuts = {
       },
     ],
   }),
+  deleteWord: {
+    backward: createKeyboardShortcut({
+      default: [
+        {
+          key: 'Backspace',
+          alt: false,
+          ctrl: true,
+          meta: false,
+          // shift is optional
+        },
+      ],
+      apple: [
+        {
+          key: 'Backspace',
+          alt: true,
+          ctrl: false,
+          meta: false,
+          // shift is optional
+        },
+      ],
+    }),
+    forward: createKeyboardShortcut({
+      default: [
+        {
+          key: 'Delete',
+          alt: false,
+          ctrl: true,
+          meta: false,
+          // shift is optional
+        },
+      ],
+      apple: [
+        {
+          key: 'Delete',
+          alt: true,
+          ctrl: false,
+          meta: false,
+          // shift is optional
+        },
+      ],
+    }),
+  },
   history: {
     undo,
     redo,

package/src/operations/behavior.operation.delete.ts

@@ -106,6 +106,24 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
     }
   }
 
+  if (operation.unit === 'word') {
+    const range = at ?? operation.editor.selection ?? undefined
+
+    if (!range) {
+      throw new Error('Unable to delete word without a selection')
+    }
+
+    if (Range.isCollapsed(range)) {
+      deleteText(operation.editor, {
+        at: range,
+        unit: 'word',
+        reverse: operation.direction === 'backward',
+      })
+
+      return
+    }
+  }
+
   const hanging = reverse
     ? endPoint
       ? isTextBlock(context, endBlock)

package/src/test/gherkin-parameter-types.ts

@@ -64,6 +64,10 @@ const parameterType = {
     name: 'select-position',
     matcher: /"(start|end|none)"/,
   }),
+  shortcut: createParameterType<'deleteWord.backward' | 'deleteWord.forward'>({
+    name: 'shortcut',
+    matcher: /"(deleteWord\.backward|deleteWord\.forward)"/,
+  }),
   style: createParameterType({
     name: 'style',
     matcher: /"(normal|blockquote|h\d)"/,
@@ -96,6 +100,7 @@ export const parameterTypes = [
   parameterType.marks,
   parameterType.placement,
   parameterType.selectPosition,
+  parameterType.shortcut,
   parameterType.style,
   parameterType.tersePt,
   parameterType.text,

package/src/test/vitest/step-definitions.tsx

@@ -4,6 +4,7 @@ import {Given, Then, When} from 'racejar'
 import {assert, expect, vi} from 'vitest'
 import {userEvent} from 'vitest/browser'
 import {getEditorSelection} from '../../internal-utils/editor-selection'
+import {IS_MAC} from '../../internal-utils/is-hotkey'
 import {getSelectionText} from '../../internal-utils/selection-text'
 import {getTextBlockKey} from '../../internal-utils/text-block-key'
 import {getTextMarks} from '../../internal-utils/text-marks'
@@ -235,6 +236,22 @@ export const stepDefinitions = [
       }
     },
   ),
+  When(
+    '{shortcut} is pressed',
+    async (_: Context, shortcut: Parameter['shortcut']) => {
+      const shortcuts: Record<Parameter['shortcut'], string> = {
+        'deleteWord.backward': IS_MAC
+          ? '{Alt>}{Backspace}{/Alt}'
+          : '{Control>}{Backspace}{/Control}',
+        'deleteWord.forward': IS_MAC
+          ? '{Alt>}{Delete}{/Alt}'
+          : '{Control>}{Delete}{/Control}',
+      }
+
+      await userEvent.keyboard(shortcuts[shortcut])
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    },
+  ),
 
   /**
    * Selection steps