@portabletext/editor 1.57.2 → 1.57.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.57.2",
+  "version": "1.57.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -81,6 +81,7 @@
     "use-effect-event": "^1.0.2",
     "xstate": "^5.20.1",
     "@portabletext/block-tools": "1.1.37",
+    "@portabletext/keyboard-shortcuts": "1.1.0",
     "@portabletext/patches": "1.1.5"
   },
   "devDependencies": {

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

@@ -16,7 +16,7 @@ interface HotKey {
   shiftKey: boolean | null
 }
 
-const IS_MAC =
+export const IS_MAC =
   typeof window !== 'undefined' &&
   /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent)
 

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

@@ -1,207 +1,82 @@
-import {isKeyboardShortcut} from './is-keyboard-shortcut'
-import {createKeyboardShortcut} from './keyboard-shortcuts'
+import {
+  bold,
+  code,
+  createKeyboardShortcut,
+  italic,
+  redo,
+  underline,
+  undo,
+} from '@portabletext/keyboard-shortcuts'
 
 export const defaultKeyboardShortcuts = {
   arrowDown: createKeyboardShortcut({
-    default: {
-      guard: (event) =>
-        isKeyboardShortcut(event, 'ArrowDown', {
-          ctrlKey: false,
-          metaKey: false,
-          shiftKey: false,
-          altKey: false,
-        }),
-      keys: ['ArrowDown'],
-    },
+    default: [
+      {
+        key: 'ArrowDown',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      },
+    ],
   }),
   arrowUp: createKeyboardShortcut({
-    default: {
-      guard: (event) =>
-        isKeyboardShortcut(event, 'ArrowUp', {
-          ctrlKey: false,
-          metaKey: false,
-          shiftKey: false,
-          altKey: false,
-        }),
-      keys: ['ArrowUp'],
-    },
+    default: [
+      {
+        key: 'ArrowUp',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      },
+    ],
   }),
   break: createKeyboardShortcut({
-    default: {
-      guard: (event) => isKeyboardShortcut(event, 'Enter', {shiftKey: false}),
-      keys: ['Enter'],
-    },
+    default: [
+      {
+        key: 'Enter',
+        shift: false,
+      },
+    ],
   }),
   lineBreak: createKeyboardShortcut({
-    default: {
-      guard: (event) => isKeyboardShortcut(event, 'Enter', {shiftKey: true}),
-      keys: ['Shift', 'Enter'],
-    },
+    default: [
+      {
+        key: 'Enter',
+        shift: true,
+      },
+    ],
   }),
   decorators: {
-    strong: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'b', {
-            altKey: false,
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-          }),
-        keys: ['Ctrl', 'B'],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'b', {
-            altKey: false,
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: false,
-          }),
-        keys: ['⌘', 'B'],
-      },
-    }),
-    em: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'i', {
-            altKey: false,
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-          }),
-        keys: ['Ctrl', 'I'],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'i', {
-            altKey: false,
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: false,
-          }),
-        keys: ['⌘', 'I'],
-      },
-    }),
-    underline: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'u', {
-            altKey: false,
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-          }),
-        keys: ['Ctrl', 'U'],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'u', {
-            altKey: false,
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: false,
-          }),
-        keys: ['⌘', 'U'],
-      },
-    }),
-    code: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, "'", {
-            altKey: false,
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-          }),
-        keys: ['Ctrl', "'"],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, "'", {
-            altKey: false,
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: false,
-          }),
-        keys: ['⌘', "'"],
-      },
-    }),
+    strong: bold,
+    em: italic,
+    underline: underline,
+    code: code,
   },
   history: {
-    undo: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'z', {
-            altKey: false,
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-          }),
-        keys: ['Ctrl', 'Z'],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'z', {
-            altKey: false,
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: false,
-          }),
-        keys: ['⌘', 'Z'],
-      },
-    }),
-    redo: createKeyboardShortcut({
-      default: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'y', {
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: false,
-            altKey: false,
-          }) ||
-          isKeyboardShortcut(event, 'z', {
-            ctrlKey: true,
-            metaKey: false,
-            shiftKey: true,
-            altKey: false,
-          }),
-        keys: ['Ctrl', 'Y'],
-      },
-      apple: {
-        guard: (event) =>
-          isKeyboardShortcut(event, 'z', {
-            ctrlKey: false,
-            metaKey: true,
-            shiftKey: true,
-            altKey: false,
-          }),
-        keys: ['⌘', 'Shift', 'Z'],
-      },
-    }),
+    undo,
+    redo,
   },
   tab: createKeyboardShortcut({
-    default: {
-      guard: (event) =>
-        isKeyboardShortcut(event, 'Tab', {
-          ctrlKey: false,
-          metaKey: false,
-          shiftKey: false,
-          altKey: false,
-        }),
-      keys: ['Tab'],
-    },
+    default: [
+      {
+        key: 'Tab',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      },
+    ],
   }),
   shiftTab: createKeyboardShortcut({
-    default: {
-      guard: (event) =>
-        isKeyboardShortcut(event, 'Tab', {
-          ctrlKey: false,
-          metaKey: false,
-          shiftKey: true,
-          altKey: false,
-        }),
-      keys: ['Shift', 'Tab'],
-    },
+    default: [
+      {
+        key: 'Tab',
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: true,
+      },
+    ],
   }),
 }

package/src/keyboard-shortcuts/is-keyboard-shortcut.test.ts

@@ -1,93 +0,0 @@
-import {expect, test} from 'vitest'
-import {isKeyboardShortcut} from './is-keyboard-shortcut'
-
-test(isKeyboardShortcut.name, () => {
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'Enter',
-        code: 'Enter',
-        metaKey: false,
-        ctrlKey: false,
-        altKey: false,
-        shiftKey: false,
-      },
-      'Enter',
-      {shiftKey: false},
-    ),
-  ).toBe(true)
-
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'Enter',
-        code: 'Enter',
-        metaKey: false,
-        ctrlKey: false,
-        altKey: false,
-        shiftKey: true,
-      },
-      'Enter',
-      {shiftKey: false},
-    ),
-  ).toBe(false)
-
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'Enter',
-        code: 'Enter',
-        metaKey: false,
-        ctrlKey: false,
-        altKey: false,
-        shiftKey: true,
-      },
-      'Enter',
-      {shiftKey: true},
-    ),
-  ).toBe(true)
-
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'Enter',
-        code: 'Enter',
-        metaKey: false,
-        ctrlKey: false,
-        altKey: false,
-        shiftKey: true,
-      },
-      'Enter',
-    ),
-  ).toBe(true)
-
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'b',
-        code: 'KeyB',
-        metaKey: false,
-        ctrlKey: true,
-        altKey: false,
-        shiftKey: false,
-      },
-      'B',
-      {ctrlKey: true, metaKey: false},
-    ),
-  ).toBe(true)
-
-  expect(
-    isKeyboardShortcut(
-      {
-        key: 'b',
-        code: 'KeyB',
-        metaKey: false,
-        ctrlKey: true,
-        altKey: false,
-        shiftKey: false,
-      },
-      'B',
-      {ctrlKey: false, metaKey: true},
-    ),
-  ).toBe(false)
-})

package/src/keyboard-shortcuts/is-keyboard-shortcut.ts

@@ -1,28 +0,0 @@
-type AllowedModifiers = {
-  ctrlKey?: boolean
-  metaKey?: boolean
-  shiftKey?: boolean
-  altKey?: boolean
-}
-
-export function isKeyboardShortcut<
-  TKeyboardEvent extends Pick<
-    KeyboardEvent,
-    'key' | 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey'
-  > = Pick<
-    KeyboardEvent,
-    'key' | 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey'
-  >,
->(event: TKeyboardEvent, key: string, allowedModifiers: AllowedModifiers = {}) {
-  return (
-    event.key.toLowerCase() === key.toLowerCase() &&
-    (allowedModifiers.ctrlKey === event.ctrlKey ||
-      allowedModifiers.ctrlKey === undefined) &&
-    (allowedModifiers.metaKey === event.metaKey ||
-      allowedModifiers.metaKey === undefined) &&
-    (allowedModifiers.shiftKey === event.shiftKey ||
-      allowedModifiers.shiftKey === undefined) &&
-    (allowedModifiers.altKey === event.altKey ||
-      allowedModifiers.altKey === undefined)
-  )
-}

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

@@ -1,120 +0,0 @@
-export type KeyboardEventGuard<
-  TKeyboardEvent extends Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  > = Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  >,
-> = (event: TKeyboardEvent) => boolean
-
-/**
- * @beta
- * Definition of an editor keyboard shortcut with platform-specific key mappings.
- *
- * @example
- * ```typescript
- * const boldShortcut: ShortcutDefinition = {
- *   default: {
- *     guard: (event) => isKeyboardShortcut(event, 'B', {ctrlKey: true, metaKey: false}),
- *     keys: ['Ctrl', 'B'],
- *   },
- *   apple: {
- *     guard: (event) => isKeyboardShortcut(event, 'B', {ctrlKey: false, metaKey: true}),
- *     keys: ['⌘', 'B'],
- *   },
- * }
- * ```
- */
-export type KeyboardShortcutDefinition<
-  TKeyboardEvent extends Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  > = Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  >,
-> = {
-  /**
-   * Default shortcut for non-Apple platforms (Windows, Linux).
-   */
-  default: {
-    guard: KeyboardEventGuard<TKeyboardEvent>
-    keys: ReadonlyArray<string>
-  }
-  /**
-   * Shortcut for Apple platforms (macOS).
-   */
-  apple?: {
-    guard: KeyboardEventGuard<TKeyboardEvent>
-    keys: ReadonlyArray<string>
-  }
-}
-
-/**
- * @beta
- * A resolved keyboard shortcut for the current platform.
- *
- * This type represents a shortcut that has been processed by `createShortcut()`
- * to select the appropriate platform-specific key combination. The `guard` function
- * determines if the shortcut applies to the current `KeyboardEvent`, while `keys`
- * contains the display-friendly key combination for the current platform.
- *
- * @example
- * ```typescript
- * const shortcut = createShortcut({
- *   guard: (event) => isKeyboardShortcut(event, 'B', {ctrlKey: true, metaKey: false}),
- *   keys: {
- *     default: ['Ctrl', 'B'],
- *     apple: ['⌘', 'B'],
- *   },
- * })
- * // On macOS: shortcut.keys = ['⌘', 'B']
- * // On Windows: shortcut.keys = ['Ctrl', 'B']
- * ```
- */
-export type KeyboardShortcut<
-  TKeyboardEvent extends Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  > = Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  >,
-> = {
-  /**
-   * Function that determines if the shortcut should be triggered for a given
-   * keyboard event.
-   */
-  guard: KeyboardEventGuard<TKeyboardEvent>
-  /**
-   * Platform-specific key combination for display purposes (resolved for the
-   * current platform).
-   */
-  keys: ReadonlyArray<string>
-}
-
-export const IS_APPLE =
-  typeof window !== 'undefined' &&
-  /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent)
-
-/**
- * @beta
- * Utility function for creating a `KeyboardShortcut` from a
- * `KeyboardShortcutDefinition`.
- */
-export function createKeyboardShortcut<
-  TKeyboardEvent extends Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  > = Pick<
-    KeyboardEvent,
-    'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-  >,
->(
-  definition: KeyboardShortcutDefinition<TKeyboardEvent>,
-): KeyboardShortcut<TKeyboardEvent> {
-  return IS_APPLE
-    ? (definition.apple ?? definition.default)
-    : definition.default
-}