@portabletext/editor 1.12.2 → 1.13.0

package/src/editor/behavior/behavior.utils.ts

@@ -16,8 +16,8 @@ import type {BehaviorContext} from './behavior.types'
 
 export function selectionIsCollapsed(context: BehaviorContext) {
   return (
-    context.selection?.anchor.path.join() ===
-      context.selection?.focus.path.join() &&
+    JSON.stringify(context.selection?.anchor.path) ===
+      JSON.stringify(context.selection?.focus.path) &&
     context.selection?.anchor.offset === context.selection?.focus.offset
   )
 }

package/src/editor/editor-machine.ts

@@ -71,6 +71,7 @@ export type InternalEditorEvent =
       type: 'behavior event'
       behaviorEvent: BehaviorEvent
       editor: PortableTextSlateEditor
+      nativeEvent?: {preventDefault: () => void}
     }
   | {
       type: 'behavior action intends'
@@ -271,10 +272,11 @@ export const editorMachine = setup({
 
       for (const eventBehavior of eventBehaviors) {
         const shouldRun =
-          eventBehavior.guard?.({
+          eventBehavior.guard === undefined ||
+          eventBehavior.guard({
             context: behaviorContext,
             event: event.behaviorEvent,
-          }) ?? true
+          })
 
         if (!shouldRun) {
           continue
@@ -303,6 +305,7 @@ export const editorMachine = setup({
         }
 
         if (behaviorOverwritten) {
+          event.nativeEvent?.preventDefault()
           break
         }
       }

package/src/editor/plugins/createWithHotKeys.ts

@@ -1,12 +1,12 @@
 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 {Editor, Node, Range} from 'slate'
 import type {ReactEditor} from 'slate-react'
 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'
 
@@ -80,53 +80,6 @@ export function createWithHotkeys(
       const isTab = isHotkey('tab', event.nativeEvent)
       const isShiftEnter = isHotkey('shift+enter', event.nativeEvent)
       const isShiftTab = isHotkey('shift+tab', event.nativeEvent)
-      const isArrowDown = isHotkey('down', event.nativeEvent)
-      const isArrowUp = isHotkey('up', event.nativeEvent)
-
-      // Check if the user is in a void block, in that case, add an empty text block below if there is no next block
-      if (isArrowDown && editor.selection) {
-        const focusBlock = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        ) as SlateTextBlock | VoidElement
-
-        if (focusBlock && Editor.isVoid(editor, focusBlock)) {
-          const nextPath = Path.next(editor.selection.focus.path.slice(0, 1))
-          const nextBlock = Node.has(editor, nextPath)
-          if (!nextBlock) {
-            Transforms.insertNodes(
-              editor,
-              editor.pteCreateTextBlock({decorators: []}),
-              {
-                at: nextPath,
-              },
-            )
-            Transforms.select(editor, {path: [...nextPath, 0], offset: 0})
-            editor.onChange()
-            return
-          }
-        }
-      }
-      if (isArrowUp && editor.selection) {
-        const isFirstBlock = editor.selection.focus.path[0] === 0
-        const focusBlock = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        ) as SlateTextBlock | VoidElement
-
-        if (isFirstBlock && focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Transforms.insertNodes(
-            editor,
-            editor.pteCreateTextBlock({decorators: []}),
-            {
-              at: [0],
-            },
-          )
-          Transforms.select(editor, {path: [0, 0], offset: 0})
-          editor.onChange()
-          return
-        }
-      }
 
       // Tab for lists
       // Only steal tab when we are on a plain text span or we are at the start of the line (fallback if the whole block is annotated or contains a single inline object)

package/src/index.ts

@@ -9,6 +9,10 @@ export {
   createMarkdownBehaviors,
   type MarkdownBehaviorsConfig,
 } from './editor/behavior/behavior.markdown'
+export {
+  createCodeEditorBehaviors,
+  type CodeEditorBehaviorsConfig,
+} from './editor/behavior/behavior.code-editor'
 export {
   defineBehavior,
   type Behavior,

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

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