@portabletext/editor 1.12.2 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "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",
@@ -60,7 +59,7 @@
     "@portabletext/toolkit": "^2.0.16",
     "@sanity/block-tools": "^3.65.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.13",
+    "@sanity/pkg-utils": "^6.11.14",
     "@sanity/schema": "^3.65.1",
     "@sanity/types": "^3.65.1",
     "@testing-library/jest-dom": "^6.6.3",
@@ -70,8 +69,8 @@
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^2.1.5",
     "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
@@ -87,7 +86,7 @@
     "vite": "^5.4.11",
     "vitest": "^2.1.5",
     "vitest-browser-react": "^0.0.4",
-    "racejar": "1.0.1"
+    "racejar": "1.1.0"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.65.1",
@@ -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/Editable.tsx

@@ -420,9 +420,19 @@ export const PortableTextEditable = forwardRef<
         if (result !== undefined) {
           event.preventDefault()
         }
+      } else if (event.nativeEvent.clipboardData) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'copy',
+            data: event.nativeEvent.clipboardData,
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
       }
     },
-    [onCopy],
+    [onCopy, editorActor, slateEditor],
   )
 
   // Handle incoming pasting events in the editor
@@ -473,15 +483,14 @@ export const PortableTextEditable = forwardRef<
             editorActor.send({type: 'done loading'})
           })
       } else if (event.nativeEvent.clipboardData) {
-        event.preventDefault()
-
         editorActor.send({
           type: 'behavior event',
           behaviorEvent: {
             type: 'paste',
-            clipboardData: event.nativeEvent.clipboardData,
+            data: event.nativeEvent.clipboardData,
           },
           editor: slateEditor,
+          nativeEvent: event,
         })
       }
 
@@ -659,8 +668,53 @@ export const PortableTextEditable = forwardRef<
       if (!event.isDefaultPrevented()) {
         slateEditor.pteWithHotKeys(event)
       }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.down',
+            keyboardEvent: {
+              key: event.key,
+              code: event.code,
+              altKey: event.altKey,
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+            },
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
+      }
+    },
+    [props, editorActor, slateEditor],
+  )
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (props.onKeyUp) {
+        props.onKeyUp(event)
+      }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.up',
+            keyboardEvent: {
+              key: event.key,
+              code: event.code,
+              altKey: event.altKey,
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+            },
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
+      }
     },
-    [props, slateEditor],
+    [props, editorActor, slateEditor],
   )
 
   const scrollSelectionIntoViewToSlate = useMemo(() => {
@@ -753,6 +807,7 @@ export const PortableTextEditable = forwardRef<
       onDOMBeforeInput={handleOnBeforeInput}
       onFocus={handleOnFocus}
       onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
       onPaste={handlePaste}
       readOnly={readOnly}
       // We have implemented our own placeholder logic with decorations.

package/src/editor/behavior/behavior.action.insert-break.ts

@@ -23,15 +23,16 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
     }),
   )[0] ?? [undefined]
   const focusDecorators =
-    focusSpan.marks?.filter((mark) =>
+    focusSpan?.marks?.filter((mark) =>
       schema.decorators.some((decorator) => decorator.value === mark),
     ) ?? []
   const focusAnnotations =
-    focusSpan.marks?.filter(
+    focusSpan?.marks?.filter(
       (mark) =>
         !schema.decorators.some((decorator) => decorator.value === mark),
     ) ?? []
 
+  const anchorBlockPath = editor.selection.anchor.path.slice(0, 1)
   const focusBlockPath = editor.selection.focus.path.slice(0, 1)
   const focusBlock = Node.descendant(editor, focusBlockPath) as
     | SlateTextBlock
@@ -39,45 +40,37 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 
   if (editor.isTextBlock(focusBlock)) {
     const [start, end] = Range.edges(editor.selection)
+    const lastFocusBlockChild =
+      focusBlock.children[focusBlock.children.length - 1]
+    const atTheEndOfBlock = isEqual(start, {
+      path: [...focusBlockPath, focusBlock.children.length - 1],
+      offset: editor.isTextSpan(lastFocusBlockChild)
+        ? lastFocusBlockChild.text.length
+        : 0,
+    })
     const atTheStartOfBlock = isEqual(end, {
       path: [...focusBlockPath, 0],
       offset: 0,
     })
 
-    if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
+    if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
       Editor.insertNode(
         editor,
         editor.pteCreateTextBlock({
-          decorators: focusAnnotations.length === 0 ? focusDecorators : [],
+          decorators: [],
           listItem: focusBlock.listItem,
           level: focusBlock.level,
         }),
       )
 
-      const [nextBlockPath] = Path.next(focusBlockPath)
-
-      Transforms.select(editor, {
-        anchor: {path: [nextBlockPath, 0], offset: 0},
-        focus: {path: [nextBlockPath, 0], offset: 0},
-      })
-
       return
     }
 
-    const lastFocusBlockChild =
-      focusBlock.children[focusBlock.children.length - 1]
-    const atTheEndOfBlock = isEqual(start, {
-      path: [...focusBlockPath, focusBlock.children.length - 1],
-      offset: editor.isTextSpan(lastFocusBlockChild)
-        ? lastFocusBlockChild.text.length
-        : 0,
-    })
-
-    if (atTheEndOfBlock && Range.isCollapsed(editor.selection)) {
+    if (atTheStartOfBlock && Range.isCollapsed(editor.selection)) {
       Editor.insertNode(
         editor,
         editor.pteCreateTextBlock({
-          decorators: [],
+          decorators: focusAnnotations.length === 0 ? focusDecorators : [],
           listItem: focusBlock.listItem,
           level: focusBlock.level,
         }),
@@ -85,7 +78,7 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 
       const [nextBlockPath] = Path.next(focusBlockPath)
 
-      Transforms.setSelection(editor, {
+      Transforms.select(editor, {
         anchor: {path: [nextBlockPath, 0], offset: 0},
         focus: {path: [nextBlockPath, 0], offset: 0},
       })
@@ -93,9 +86,11 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
       return
     }
 
+    const selectionAcrossBlocks = anchorBlockPath[0] !== focusBlockPath[0]
+
     const isInTheMiddleOfNode = !atTheStartOfBlock && !atTheEndOfBlock
 
-    if (isInTheMiddleOfNode) {
+    if (isInTheMiddleOfNode && !selectionAcrossBlocks) {
       Editor.withoutNormalizing(editor, () => {
         if (!editor.selection) {
           return
@@ -202,6 +197,8 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
       return
     }
   }
+
+  Transforms.splitNodes(editor, {always: true})
 }
 
 export const insertSoftBreakActionImplementation: BehaviorActionImplementation<

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

@@ -1,4 +1,10 @@
-import {deleteBackward, deleteForward, insertText, Transforms} from 'slate'
+import {
+  deleteBackward,
+  deleteForward,
+  insertText,
+  Path,
+  Transforms,
+} from 'slate'
 import {ReactEditor} from 'slate-react'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
@@ -86,6 +92,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       Transforms.unsetNodes(action.editor, action.props, {at})
     }
   },
+  'copy': () => {},
   'delete backward': ({action}) => {
     deleteBackward(action.editor, action.unit)
   },
@@ -188,9 +195,54 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'effect': ({action}) => {
     action.effect()
   },
-  'paste': ({action}) => {
-    action.editor.insertData(action.clipboardData)
+  'key.down': () => {},
+  'key.up': () => {},
+  'move block': ({action}) => {
+    const location = toSlateRange(
+      {
+        anchor: {
+          path: action.blockPath,
+          offset: 0,
+        },
+        focus: {
+          path: action.blockPath,
+          offset: 0,
+        },
+      },
+      action.editor,
+    )
+
+    if (!location) {
+      console.error('Unable to find Slate range from selection points')
+      return
+    }
+
+    const newLocation = toSlateRange(
+      {
+        anchor: {
+          path: action.to,
+          offset: 0,
+        },
+        focus: {
+          path: action.to,
+          offset: 0,
+        },
+      },
+      action.editor,
+    )
+
+    if (!newLocation) {
+      console.error('Unable to find Slate range from selection points')
+      return
+    }
+
+    Transforms.moveNodes(action.editor, {
+      at: location,
+      to: newLocation.anchor.path.slice(0, 1),
+      mode: 'highest',
+    })
   },
+  'paste': () => {},
   'select': ({action}) => {
     const newSelection = toSlateRange(action.selection, action.editor)
 
@@ -200,6 +252,34 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       Transforms.deselect(action.editor)
     }
   },
+  'select previous block': ({action}) => {
+    if (!action.editor.selection) {
+      console.error('Unable to select previous block without a selection')
+      return
+    }
+
+    const blockPath = action.editor.selection.focus.path.slice(0, 1)
+
+    if (!Path.hasPrevious(blockPath)) {
+      console.error("There's no previous block to select")
+      return
+    }
+
+    const previousBlockPath = Path.previous(blockPath)
+
+    Transforms.select(action.editor, previousBlockPath)
+  },
+  'select next block': ({action}) => {
+    if (!action.editor.selection) {
+      console.error('Unable to select next block without a selection')
+      return
+    }
+
+    const blockPath = action.editor.selection.focus.path.slice(0, 1)
+    const nextBlockPath = [blockPath[0] + 1]
+
+    Transforms.select(action.editor, nextBlockPath)
+  },
   'reselect': ({action}) => {
     const selection = action.editor.selection
 
@@ -253,6 +333,13 @@ export function performAction({
       })
       break
     }
+    case 'move block': {
+      behaviorActionImplementations['move block']({
+        context,
+        action,
+      })
+      break
+    }
     case 'set block': {
       behaviorActionImplementations['set block']({
         context,
@@ -281,6 +368,20 @@ export function performAction({
       })
       break
     }
+    case 'select previous block': {
+      behaviorActionImplementations['select previous block']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'select next block': {
+      behaviorActionImplementations['select next block']({
+        context,
+        action,
+      })
+      break
+    }
     case 'reselect': {
       behaviorActionImplementations.reselect({
         context,
@@ -323,6 +424,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'copy': {
+      behaviorActionImplementations.copy({
+        context,
+        action,
+      })
+      break
+    }
     case 'decorator.add': {
       behaviorActionImplementations['decorator.add']({
         context,
@@ -386,6 +494,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'key.down': {
+      behaviorActionImplementations['key.down']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'key.up': {
+      behaviorActionImplementations['key.up']({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       behaviorActionImplementations.paste({
         context,

package/src/editor/behavior/behavior.code-editor.ts

@@ -0,0 +1,86 @@
+import {isHotkey} from '../../utils/is-hotkey'
+import {defineBehavior} from './behavior.types'
+import {
+  getFocusBlock,
+  getNextBlock,
+  getPreviousBlock,
+  selectionIsCollapsed,
+} from './behavior.utils'
+
+/**
+ * @alpha
+ */
+export type CodeEditorBehaviorsConfig = {
+  moveBlockUpShortcut: string
+  moveBlockDownShortcut: string
+}
+
+/**
+ * @alpha
+ */
+export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
+  return [
+    defineBehavior({
+      on: 'key.down',
+      guard: ({context, event}) => {
+        const isAltArrowUp = isHotkey(
+          config.moveBlockUpShortcut,
+          event.keyboardEvent,
+        )
+
+        if (!isAltArrowUp || !selectionIsCollapsed(context)) {
+          return false
+        }
+
+        const focusBlock = getFocusBlock(context)
+        const previousBlock = getPreviousBlock(context)
+
+        if (focusBlock && previousBlock) {
+          return {focusBlock, previousBlock}
+        }
+
+        return false
+      },
+      actions: [
+        (_, {focusBlock, previousBlock}) => [
+          {
+            type: 'move block',
+            blockPath: focusBlock.path,
+            to: previousBlock.path,
+          },
+        ],
+      ],
+    }),
+    defineBehavior({
+      on: 'key.down',
+      guard: ({context, event}) => {
+        const isAltArrowDown = isHotkey(
+          config.moveBlockDownShortcut,
+          event.keyboardEvent,
+        )
+
+        if (!isAltArrowDown || !selectionIsCollapsed(context)) {
+          return false
+        }
+
+        const focusBlock = getFocusBlock(context)
+        const nextBlock = getNextBlock(context)
+
+        if (focusBlock && nextBlock) {
+          return {focusBlock, nextBlock}
+        }
+
+        return false
+      },
+      actions: [
+        (_, {focusBlock, nextBlock}) => [
+          {
+            type: 'move block',
+            blockPath: focusBlock.path,
+            to: nextBlock.path,
+          },
+        ],
+      ],
+    }),
+  ]
+}

package/src/editor/behavior/behavior.core.block-objects.ts

@@ -1,4 +1,5 @@
 import {isPortableTextTextBlock} from '@sanity/types'
+import {isHotkey} from '../../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
 import {
   getFocusBlockObject,
@@ -9,12 +10,42 @@ import {
   selectionIsCollapsed,
 } from './behavior.utils'
 
+const arrowDownOnLonelyBlockObject = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isArrowDown = isHotkey('ArrowDown', event.keyboardEvent)
+    const focusBlockObject = getFocusBlockObject(context)
+    const nextBlock = getNextBlock(context)
+
+    return isArrowDown && focusBlockObject && !nextBlock
+  },
+  actions: [() => [{type: 'insert text block', placement: 'after'}]],
+})
+
+const arrowUpOnLonelyBlockObject = defineBehavior({
+  on: 'key.down',
+  guard: ({context, event}) => {
+    const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
+    const focusBlockObject = getFocusBlockObject(context)
+    const previousBlock = getPreviousBlock(context)
+
+    return isArrowUp && focusBlockObject && !previousBlock
+  },
+  actions: [
+    () => [
+      {type: 'insert text block', placement: 'before'},
+      {type: 'select previous block'},
+    ],
+  ],
+})
+
 const breakingBlockObject = defineBehavior({
   on: 'insert break',
   guard: ({context}) => {
     const focusBlockObject = getFocusBlockObject(context)
+    const collapsedSelection = selectionIsCollapsed(context)
 
-    return !!focusBlockObject
+    return collapsedSelection && focusBlockObject !== undefined
   },
   actions: [() => [{type: 'insert text block', placement: 'after'}]],
 })
@@ -94,6 +125,8 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
 })
 
 export const coreBlockObjectBehaviors = {
+  arrowDownOnLonelyBlockObject,
+  arrowUpOnLonelyBlockObject,
   breakingBlockObject,
   deletingEmptyTextBlockAfterBlockObject,
   deletingEmptyTextBlockBeforeBlockObject,

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

@@ -16,6 +16,8 @@ export const coreBehaviors = [
   coreDecoratorBehaviors.decoratorAdd,
   coreDecoratorBehaviors.decoratorRemove,
   coreDecoratorBehaviors.decoratorToggle,
+  coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject,
+  coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject,
   coreBlockObjectBehaviors.breakingBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,

package/src/editor/behavior/behavior.links.ts

@@ -20,7 +20,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
     on: 'paste',
     guard: ({context, event}) => {
       const selectionCollapsed = selectionIsCollapsed(context)
-      const text = event.clipboardData.getData('text/plain')
+      const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
@@ -52,7 +52,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
         return false
       }
 
-      const text = event.clipboardData.getData('text/plain')
+      const text = event.data.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined

package/src/editor/behavior/behavior.markdown.ts

@@ -190,7 +190,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const automaticHrOnPaste = defineBehavior({
     on: 'paste',
     guard: ({context, event}) => {
-      const text = event.clipboardData.getData('text/plain')
+      const text = event.data.getData('text/plain')
       const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
       const hrCharacters = text.match(hrRegExp)?.[0]
       const hrObject = config.horizontalRuleObject?.({

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

@@ -45,6 +45,10 @@ export type BehaviorEvent =
         value: {[prop: string]: unknown}
       }
     }
+  | {
+      type: 'copy'
+      data: DataTransfer
+    }
   | {
       type: 'decorator.add'
       decorator: string
@@ -81,7 +85,21 @@ export type BehaviorEvent =
     }
   | {
       type: 'paste'
-      clipboardData: NonNullable<ClipboardEvent['clipboardData']>
+      data: DataTransfer
+    }
+  | {
+      type: 'key.down'
+      keyboardEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
+    }
+  | {
+      type: 'key.up'
+      keyboardEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
     }
 
 /**
@@ -127,6 +145,11 @@ export type BehaviorActionIntend =
         children?: PortableTextTextBlock['children']
       }
     }
+  | {
+      type: 'move block'
+      blockPath: [KeyedSegment]
+      to: [KeyedSegment]
+    }
   | {
       type: 'set block'
       paths: Array<[KeyedSegment]>
@@ -156,6 +179,12 @@ export type BehaviorActionIntend =
       type: 'select'
       selection: EditorSelection
     }
+  | {
+      type: 'select previous block'
+    }
+  | {
+      type: 'select next block'
+    }
   | {
       type: 'reselect'
     }
@@ -208,7 +237,13 @@ export type BehaviorActionIntendSet<
     event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   },
   guardResponse: TGuardResponse,
-) => Array<BehaviorActionIntend>
+) => Array<
+  OmitFromUnion<
+    BehaviorActionIntend,
+    'type',
+    'copy' | 'key.down' | 'key.up' | 'paste'
+  >
+>
 
 /**
  * @alpha