@portabletext/editor 1.12.2 → 1.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -46,7 +46,6 @@
     "@xstate/react": "^5.0.0",
     "debug": "^4.3.4",
     "get-random-values-esm": "^1.0.2",
-    "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
@@ -112,6 +111,10 @@
     "dev": "pkg-utils watch",
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:chromium": "vitest --run --project chromium",
+    "test:chromium:watch": "vitest --project chromium",
+    "test:unit": "vitest --run --project unit",
+    "test:unit:watch": "vitest --project unit"
   }
 }

package/src/editor/plugins/createWithHotKeys.ts

@@ -1,5 +1,4 @@
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
-import {isHotkey} from 'is-hotkey-esm'
 import type {KeyboardEvent} from 'react'
 import {Editor, Node, Path, Range, Transforms} from 'slate'
 import type {ReactEditor} from 'slate-react'
@@ -7,6 +6,7 @@ import type {PortableTextSlateEditor} from '../../types/editor'
 import type {HotkeyOptions} from '../../types/options'
 import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
+import {isHotkey} from '../../utils/is-hotkey'
 import type {EditorActor} from '../editor-machine'
 import type {PortableTextEditor} from '../PortableTextEditor'
 

package/src/utils/is-hotkey.test.ts

@@ -0,0 +1,61 @@
+import {expect, test} from 'vitest'
+import {isHotkey, type KeyboardEventLike} from './is-hotkey'
+
+function e(value: string | number, ...modifiers: string[]) {
+  return {
+    ...(typeof value === 'string' ? {key: value} : {keyCode: value}),
+    altKey: modifiers.includes('alt'),
+    ctrlKey: modifiers.includes('ctrl'),
+    metaKey: modifiers.includes('meta'),
+    shiftKey: modifiers.includes('shift'),
+  } as KeyboardEventLike
+}
+
+type TestCase = [KeyboardEventLike, string, boolean]
+
+const testCases = [
+  [e(83, 'meta'), 'Meta+S', true],
+  [e(83, 'alt', 'meta'), 'Meta+Alt+s', true],
+  [e(83, 'meta'), 'meta+s', true],
+  [e(83, 'meta'), 'cmd+s', true],
+  [e(32, 'meta'), 'cmd+space', true],
+  [e(187, 'meta'), 'cmd+=', true],
+  [e(83, 'ctrl'), 'mod+s', true],
+  [e(16, 'shift'), 'shift', true],
+  [e(93, 'meta'), 'meta', true],
+  [e(65), 'a', true],
+  [e(83, 'alt', 'meta'), 'cmd+s', false],
+  [e('a', 'ctrl'), 'a', false],
+  [e(83, 'alt', 'meta'), 'cmd+alt?+s', true],
+  [e(83, 'meta'), 'cmd+alt?+s', true],
+  [e('?'), '?', true],
+  [e(13), 'enter', true],
+  [e(65, 'meta'), 'cmd+a', true],
+  [e(83, 'meta'), 'cmd+s', true],
+  [e('s', 'meta'), 'Meta+S', true],
+  [e('ß', 'alt', 'meta'), 'Meta+Alt+ß', true],
+  [e('s', 'meta'), 'meta+s', true],
+  [e('s', 'meta'), 'cmd+s', true],
+  [e(' ', 'meta'), 'cmd+space', true],
+  [e('+', 'meta'), 'cmd++', true],
+  [e('s', 'ctrl'), 'mod+s', true],
+  [e('Shift', 'shift'), 'shift', true],
+  [e('a'), 'a', true],
+  [e('s', 'alt', 'meta'), 'cmd+s', false],
+  [e('a', 'ctrl'), 'a', false],
+  [e('s', 'alt', 'meta'), 'cmd+alt?+s', true],
+  [e('s', 'meta'), 'cmd+alt?+s', true],
+  [e('Enter'), 'enter', true],
+  [e('a', 'meta'), 'meta+a', true],
+  [e('s', 'meta'), 'meta+s', true],
+] satisfies Array<TestCase>
+
+test(isHotkey.name, () => {
+  for (const testCase of testCases) {
+    expect(isHotkey(testCase[1], testCase[0])).toBe(testCase[2])
+  }
+
+  expect(() => isHotkey('ctrlalt+k', e('k', 'ctrl', 'alt'))).toThrowError(
+    'Unknown modifier: "ctrlalt"',
+  )
+})

package/src/utils/is-hotkey.ts

@@ -0,0 +1,209 @@
+export interface KeyboardEventLike {
+  key: string
+  keyCode: number
+  altKey: boolean
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+}
+
+interface HotKey {
+  keyCode?: number | undefined
+  key?: string | undefined
+  altKey: boolean | null
+  ctrlKey: boolean | null
+  metaKey: boolean | null
+  shiftKey: boolean | null
+}
+
+const IS_MAC =
+  typeof window !== 'undefined' &&
+  /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent)
+
+type Modifier = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+
+const modifiers: Record<string, Modifier | undefined> = {
+  alt: 'altKey',
+  control: 'ctrlKey',
+  meta: 'metaKey',
+  shift: 'shiftKey',
+}
+
+const aliases: Record<string, string | undefined> = {
+  add: '+',
+  break: 'pause',
+  cmd: 'meta',
+  command: 'meta',
+  ctl: 'control',
+  ctrl: 'control',
+  del: 'delete',
+  down: 'arrowdown',
+  esc: 'escape',
+  ins: 'insert',
+  left: 'arrowleft',
+  mod: IS_MAC ? 'meta' : 'control',
+  opt: 'alt',
+  option: 'alt',
+  return: 'enter',
+  right: 'arrowright',
+  space: ' ',
+  spacebar: ' ',
+  up: 'arrowup',
+  win: 'meta',
+  windows: 'meta',
+}
+
+const keyCodes: Record<string, number | undefined> = {
+  'backspace': 8,
+  'tab': 9,
+  'enter': 13,
+  'shift': 16,
+  'control': 17,
+  'alt': 18,
+  'pause': 19,
+  'capslock': 20,
+  'escape': 27,
+  ' ': 32,
+  'pageup': 33,
+  'pagedown': 34,
+  'end': 35,
+  'home': 36,
+  'arrowleft': 37,
+  'arrowup': 38,
+  'arrowright': 39,
+  'arrowdown': 40,
+  'insert': 45,
+  'delete': 46,
+  'meta': 91,
+  'numlock': 144,
+  'scrolllock': 145,
+  ';': 186,
+  '=': 187,
+  ',': 188,
+  '-': 189,
+  '.': 190,
+  '/': 191,
+  '`': 192,
+  '[': 219,
+  '\\': 220,
+  ']': 221,
+  "'": 222,
+  'f1': 112,
+  'f2': 113,
+  'f3': 114,
+  'f4': 115,
+  'f5': 116,
+  'f6': 117,
+  'f7': 118,
+  'f8': 119,
+  'f9': 120,
+  'f10': 121,
+  'f11': 122,
+  'f12': 123,
+  'f13': 124,
+  'f14': 125,
+  'f15': 126,
+  'f16': 127,
+  'f17': 128,
+  'f18': 129,
+  'f19': 130,
+  'f20': 131,
+}
+
+export function isHotkey(hotkey: string, event: KeyboardEventLike): boolean {
+  return compareHotkey(parseHotkey(hotkey), event)
+}
+
+function parseHotkey(hotkey: string): HotKey {
+  // Ensure that all the modifiers are set to false unless the hotkey has them.
+  const parsedHotkey: HotKey = {
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+  }
+
+  // Special case to handle the `+` key since we use it as a separator.
+  const hotkeySegments = hotkey.replace('++', '+add').split('+')
+
+  for (const rawHotkeySegment of hotkeySegments) {
+    const optional =
+      rawHotkeySegment.endsWith('?') && rawHotkeySegment.length > 1
+    const hotkeySegment = optional
+      ? rawHotkeySegment.slice(0, -1)
+      : rawHotkeySegment
+    const keyName = toKeyName(hotkeySegment)
+    const modifier = modifiers[keyName]
+    const alias = aliases[hotkeySegment]
+    const code = keyCodes[keyName]
+
+    if (
+      hotkeySegment.length > 1 &&
+      modifier === undefined &&
+      alias === undefined &&
+      code === undefined
+    ) {
+      throw new TypeError(`Unknown modifier: "${hotkeySegment}"`)
+    }
+
+    if (hotkeySegments.length === 1 || modifier === undefined) {
+      parsedHotkey.key = keyName
+      parsedHotkey.keyCode = toKeyCode(hotkeySegment)
+    }
+
+    if (modifier !== undefined) {
+      parsedHotkey[modifier] = optional ? null : true
+    }
+  }
+
+  return parsedHotkey
+}
+
+function compareHotkey(
+  parsedHotkey: HotKey,
+  event: KeyboardEventLike,
+): boolean {
+  const matchingModifiers =
+    (parsedHotkey.altKey != null
+      ? parsedHotkey.altKey === event.altKey
+      : true) &&
+    (parsedHotkey.ctrlKey != null
+      ? parsedHotkey.ctrlKey === event.ctrlKey
+      : true) &&
+    (parsedHotkey.metaKey != null
+      ? parsedHotkey.metaKey === event.metaKey
+      : true) &&
+    (parsedHotkey.shiftKey != null
+      ? parsedHotkey.shiftKey === event.shiftKey
+      : true)
+
+  if (!matchingModifiers) {
+    return false
+  }
+
+  if (parsedHotkey.keyCode !== undefined && event.keyCode !== undefined) {
+    if (parsedHotkey.keyCode === 91 && event.keyCode === 93) {
+      return true
+    }
+
+    return parsedHotkey.keyCode === event.keyCode
+  }
+
+  return (
+    parsedHotkey.keyCode === event.keyCode ||
+    parsedHotkey.key === event.key.toLowerCase()
+  )
+}
+
+function toKeyCode(name: string): number {
+  const keyName = toKeyName(name)
+  const keyCode = keyCodes[keyName] ?? keyName.toUpperCase().charCodeAt(0)
+
+  return keyCode
+}
+
+function toKeyName(name: string): string {
+  const keyName = name.toLowerCase()
+
+  return aliases[keyName] ?? keyName
+}