@prosekit/core 0.8.2 → 0.8.4

package/src/extensions/events/editor-event.ts

@@ -0,0 +1,293 @@
+import type {
+  Node,
+  Slice,
+} from '@prosekit/pm/model'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+import {
+  defineFacet,
+  type Facet,
+} from '../../facets/facet'
+import { defineFacetPayload } from '../../facets/facet-extension'
+import type { PlainExtension } from '../../types/extension'
+import type { ObjectEntries } from '../../types/object-entries'
+import { groupEntries } from '../../utils/array-grouping'
+import { combineEventHandlers } from '../../utils/combine-event-handlers'
+import {
+  pluginFacet,
+  type PluginPayload,
+} from '../plugin'
+
+export type KeyDownHandler = (
+  view: EditorView,
+  event: KeyboardEvent,
+) => boolean | void
+export type KeyPressHandler = (
+  view: EditorView,
+  event: KeyboardEvent,
+) => boolean | void
+export type TextInputHandler = (
+  view: EditorView,
+  from: number,
+  to: number,
+  text: string,
+) => boolean | void
+export type ClickOnHandler = (
+  view: EditorView,
+  pos: number,
+  node: Node,
+  nodePos: number,
+  event: MouseEvent,
+  direct: boolean,
+) => boolean | void
+export type ClickHandler = (
+  view: EditorView,
+  pos: number,
+  event: MouseEvent,
+) => boolean | void
+export type DoubleClickOnHandler = (
+  view: EditorView,
+  pos: number,
+  node: Node,
+  nodePos: number,
+  event: MouseEvent,
+  direct: boolean,
+) => boolean | void
+export type DoubleClickHandler = (
+  view: EditorView,
+  pos: number,
+  event: MouseEvent,
+) => boolean | void
+export type TripleClickOnHandler = (
+  view: EditorView,
+  pos: number,
+  node: Node,
+  nodePos: number,
+  event: MouseEvent,
+  direct: boolean,
+) => boolean | void
+export type TripleClickHandler = (
+  view: EditorView,
+  pos: number,
+  event: MouseEvent,
+) => boolean | void
+export type PasteHandler = (
+  view: EditorView,
+  event: ClipboardEvent,
+  slice: Slice,
+) => boolean | void
+export type DropHandler = (
+  view: EditorView,
+  event: DragEvent,
+  slice: Slice,
+  moved: boolean,
+) => boolean | void
+export type ScrollToSelectionHandler = (view: EditorView) => boolean
+
+function defineEventFacetPayload(payload: EditorEventPayload): PlainExtension {
+  return defineFacetPayload(editorEventFacet, [payload]) as PlainExtension
+}
+
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleKeyDown}
+ */
+export function defineKeyDownHandler(handler: KeyDownHandler): PlainExtension {
+  return defineEventFacetPayload(['keyDown', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleKeyPress}
+ */
+export function defineKeyPressHandler(
+  handler: KeyPressHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['keyPress', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleTextInput}
+ */
+export function defineTextInputHandler(
+  handler: TextInputHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['textInput', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleClickOn}
+ */
+export function defineClickOnHandler(handler: ClickOnHandler): PlainExtension {
+  return defineEventFacetPayload(['clickOn', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleClick}
+ */
+export function defineClickHandler(handler: ClickHandler): PlainExtension {
+  return defineEventFacetPayload(['click', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleDoubleClickOn}
+ */
+export function defineDoubleClickOnHandler(
+  handler: DoubleClickOnHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['doubleClickOn', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleDoubleClick}
+ */
+export function defineDoubleClickHandler(
+  handler: DoubleClickHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['doubleClick', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleTripleClickOn}
+ */
+export function defineTripleClickOnHandler(
+  handler: TripleClickOnHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['tripleClickOn', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleTripleClick}
+ */
+export function defineTripleClickHandler(
+  handler: TripleClickHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['tripleClick', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handlePaste}
+ */
+export function definePasteHandler(handler: PasteHandler): PlainExtension {
+  return defineEventFacetPayload(['paste', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleDrop}
+ */
+export function defineDropHandler(handler: DropHandler): PlainExtension {
+  return defineEventFacetPayload(['drop', handler])
+}
+/**
+ * @public
+ *
+ * See {@link https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection}
+ */
+export function defineScrollToSelectionHandler(
+  handler: ScrollToSelectionHandler,
+): PlainExtension {
+  return defineEventFacetPayload(['scrollToSelection', handler])
+}
+
+interface EditorEventMap {
+  keyDown: KeyDownHandler
+  keyPress: KeyPressHandler
+  textInput: TextInputHandler
+  clickOn: ClickOnHandler
+  click: ClickHandler
+  doubleClickOn: DoubleClickOnHandler
+  doubleClick: DoubleClickHandler
+  tripleClickOn: TripleClickOnHandler
+  tripleClick: TripleClickHandler
+  paste: PasteHandler
+  drop: DropHandler
+  scrollToSelection: ScrollToSelectionHandler
+}
+
+/**
+ * @internal
+ */
+export type EditorEventPayload = ObjectEntries<EditorEventMap>
+
+/**
+ * @internal
+ */
+export const editorEventFacet: Facet<EditorEventPayload, PluginPayload> = defineFacet<EditorEventPayload, PluginPayload>({
+  reduce: () => {
+    const [update, plugin] = setupEditorEventPlugin()
+
+    return (entries) => {
+      update(entries)
+      return plugin
+    }
+  },
+  parent: pluginFacet,
+  singleton: true,
+})
+
+// dprint-ignore
+function setupEditorEventPlugin() {
+  const [setKeyDownHandlers, handleKeyDown] = combineEventHandlers<KeyDownHandler>()
+  const [setKeyPressHandlers, handleKeyPress] = combineEventHandlers<KeyPressHandler>()
+  const [setTextInputHandlers, handleTextInput] = combineEventHandlers<TextInputHandler>()
+  const [setClickOnHandlers, handleClickOn] = combineEventHandlers<ClickOnHandler>()
+  const [setClickHandlers, handleClick] = combineEventHandlers<ClickHandler>()
+  const [setDoubleClickOnHandlers, handleDoubleClickOn] = combineEventHandlers<DoubleClickOnHandler>()
+  const [setDoubleClickHandlers, handleDoubleClick] = combineEventHandlers<DoubleClickHandler>()
+  const [setTripleClickOnHandlers, handleTripleClickOn] = combineEventHandlers<TripleClickOnHandler>()
+  const [setTripleClickHandlers, handleTripleClick] = combineEventHandlers<TripleClickHandler>()
+  const [setPasteHandlers, handlePaste] = combineEventHandlers<PasteHandler>()
+  const [setDropHandlers, handleDrop] = combineEventHandlers<DropHandler>()
+  const [setScrollToSelectionHandlers, handleScrollToSelection] = combineEventHandlers<ScrollToSelectionHandler>()
+
+  const update = (entries: EditorEventPayload[]) => {
+    const map = groupEntries<EditorEventMap>(entries)
+
+    setKeyDownHandlers(map.keyDown ?? [])
+    setKeyPressHandlers(map.keyPress ?? [])
+    setTextInputHandlers(map.textInput ?? [])
+    setClickOnHandlers(map.clickOn ?? [])
+    setClickHandlers(map.click ?? [])
+    setDoubleClickOnHandlers(map.doubleClickOn ?? [])
+    setDoubleClickHandlers(map.doubleClick ?? [])
+    setTripleClickOnHandlers(map.tripleClickOn ?? [])
+    setTripleClickHandlers(map.tripleClick ?? [])
+    setPasteHandlers(map.paste ?? [])
+    setDropHandlers(map.drop ?? [])
+    setScrollToSelectionHandlers(map.scrollToSelection ?? [])      
+  }
+
+  const plugin = new ProseMirrorPlugin({
+    key: new PluginKey('prosekit-editor-event'),
+    props: {
+      handleKeyDown,
+      handleKeyPress,
+      handleTextInput,
+      handleClickOn,
+      handleClick,
+      handleDoubleClickOn,
+      handleDoubleClick,
+      handleTripleClickOn,
+      handleTripleClick,
+      handlePaste,
+      handleDrop,
+      handleScrollToSelection,
+    },
+  })
+
+  return [update, plugin] as const 
+}

package/src/extensions/events/focus.spec.ts

@@ -0,0 +1,50 @@
+import {
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest'
+
+import { createEditor } from '../../editor/editor'
+import { union } from '../../editor/union'
+import { defineTestExtension } from '../../testing'
+
+import { defineFocusChangeHandler } from './focus'
+
+describe('defineFocusChangeHandler', () => {
+  it('should call the handler when the editor is focused or blurred', () => {
+    const div = document.body.appendChild(document.createElement('div'))
+    const handleFocusChange = vi.fn()
+
+    const extension = union(
+      defineTestExtension(),
+      defineFocusChangeHandler(handleFocusChange),
+    )
+    const editor = createEditor({ extension })
+    editor.mount(div)
+
+    expect(handleFocusChange).toHaveBeenCalledTimes(0)
+
+    editor.focus()
+    expect(handleFocusChange).toHaveBeenCalledTimes(1)
+    expect(handleFocusChange).toHaveBeenLastCalledWith(true)
+
+    editor.blur()
+    expect(handleFocusChange).toHaveBeenCalledTimes(2)
+    expect(handleFocusChange).toHaveBeenLastCalledWith(false)
+
+    editor.focus()
+    editor.focus()
+    editor.focus()
+    editor.focus()
+    expect(handleFocusChange).toHaveBeenCalledTimes(3)
+    expect(handleFocusChange).toHaveBeenLastCalledWith(true)
+
+    editor.blur()
+    editor.blur()
+    editor.blur()
+    editor.blur()
+    expect(handleFocusChange).toHaveBeenCalledTimes(4)
+    expect(handleFocusChange).toHaveBeenLastCalledWith(false)
+  })
+})

package/src/extensions/events/focus.ts

@@ -0,0 +1,28 @@
+import type { PlainExtension } from '../../types/extension'
+
+import { defineDomEventFacetPayload } from './dom-event'
+
+/**
+ * A function that is called when the editor gains or loses focus.
+ *
+ * @param hasFocus - Whether the editor has focus.
+ *
+ * @public
+ */
+export type FocusChangeHandler = (hasFocus: boolean) => void
+
+/**
+ * Registers a event handler that is called when the editor gains or loses focus.
+ *
+ * @public
+ */
+export function defineFocusChangeHandler(
+  handler: FocusChangeHandler,
+): PlainExtension {
+  const handleFocus = () => handler(true)
+  const handleBlur = () => handler(false)
+  return defineDomEventFacetPayload(
+    ['focus', handleFocus],
+    ['blur', handleBlur],
+  )
+}

package/src/extensions/events/plugin-view.ts

@@ -0,0 +1,132 @@
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+  type EditorState,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { defineFacet } from '../../facets/facet'
+import { defineFacetPayload } from '../../facets/facet-extension'
+import type { PlainExtension } from '../../types/extension'
+import {
+  pluginFacet,
+  type PluginPayload,
+} from '../plugin'
+
+/**
+ * A function that is called when the editor view is mounted.
+ *
+ * @param view - The editor view.
+ *
+ * @public
+ */
+export type MountHandler = (view: EditorView) => void
+
+/**
+ * A function that is called when the editor state is updated.
+ *
+ * @param view - The editor view.
+ * @param prevState - The previous editor state.
+ *
+ * @public
+ */
+export type UpdateHandler = (view: EditorView, prevState: EditorState) => void
+
+/**
+ * A function that is called when the editor view is unmounted.
+ *
+ * @public
+ */
+export type UnmountHandler = () => void
+
+/**
+ * Registers a event handler that is called when the editor view is mounted.
+ *
+ * @public
+ */
+export function defineMountHandler(handler: MountHandler): PlainExtension {
+  return definePluginViewFacetPayload(['mount', handler])
+}
+
+/**
+ * Registers a event handler that is called when the editor state is updated.
+ *
+ * @public
+ */
+export function defineUpdateHandler(handler: UpdateHandler): PlainExtension {
+  return definePluginViewFacetPayload(['update', handler])
+}
+
+/**
+ * Registers a event handler that is called when the editor view is unmounted.
+ *
+ * @public
+ */
+export function defineUnmountHandler(handler: UnmountHandler): PlainExtension {
+  return definePluginViewFacetPayload(['unmount', handler])
+}
+
+function definePluginViewFacetPayload(
+  input: PluginViewHandlerArgs,
+): PlainExtension {
+  return defineFacetPayload(pluginViewFacet, [input]) as PlainExtension
+}
+
+type PluginViewHandlerArgs =
+  | ['mount', MountHandler]
+  | ['update', UpdateHandler]
+  | ['unmount', UnmountHandler]
+
+const pluginViewFacet = defineFacet<PluginViewHandlerArgs, PluginPayload>({
+  reduce: () => {
+    let mountHandlers: MountHandler[] = []
+    let updateHandlers: UpdateHandler[] = []
+    let unmountHandlers: UnmountHandler[] = []
+
+    const plugin = new ProseMirrorPlugin({
+      key: pluginKey,
+      view: (view) => {
+        // Run all handlers after the view is mounted
+        mountHandlers.forEach((fn) => fn(view))
+
+        return {
+          update: (view, prevState) => {
+            updateHandlers.forEach((fn) => fn(view, prevState))
+          },
+          destroy: () => {
+            unmountHandlers.forEach((fn) => fn())
+          },
+        }
+      },
+    })
+
+    const register = (input: PluginViewHandlerArgs[]) => {
+      mountHandlers = []
+      updateHandlers = []
+      unmountHandlers = []
+
+      for (const args of input) {
+        switch (args[0]) {
+          case 'mount':
+            mountHandlers.push(args[1])
+            break
+          case 'update':
+            updateHandlers.push(args[1])
+            break
+          case 'unmount':
+            unmountHandlers.push(args[1])
+            break
+        }
+      }
+    }
+
+    return function reducer(input: PluginViewHandlerArgs[]) {
+      register(input)
+      return plugin
+    }
+  },
+  parent: pluginFacet,
+  singleton: true,
+})
+
+const pluginKey = new PluginKey('prosekit-plugin-view-handler')

package/src/extensions/history.ts

@@ -0,0 +1,81 @@
+import {
+  history,
+  redo,
+  undo,
+} from '@prosekit/pm/history'
+
+import { union } from '../editor/union'
+import type { Extension } from '../types/extension'
+import { isApple } from '../utils/env'
+
+import { defineCommands } from './command'
+import {
+  defineKeymap,
+  type Keymap,
+} from './keymap'
+import { definePlugin } from './plugin'
+
+const keymap: Keymap = {
+  'Mod-z': undo,
+  'Shift-Mod-z': redo,
+}
+
+if (!isApple) {
+  keymap['Mod-y'] = redo
+}
+
+const commands = {
+  undo: () => undo,
+  redo: () => redo,
+} as const
+
+/**
+ * Options for {@link defineHistory}.
+ *
+ * @public
+ */
+export interface HistoryOptions {
+  /**
+   * The amount of history events that are collected before the oldest events
+   * are discarded.
+   *
+   * @default 200
+   */
+  depth?: number
+
+  /**
+   * The delay in milliseconds between changes after which a new group should be
+   * started.
+   *
+   * @default 250
+   */
+  newGroupDelay?: number
+}
+
+/**
+ * @internal
+ */
+export type HistoryExtension = Extension<{
+  Commands: {
+    undo: []
+    redo: []
+  }
+}>
+
+/**
+ * Add undo/redo history to the editor.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineHistory({
+  depth = 200,
+  newGroupDelay = 250,
+}: HistoryOptions = {}): HistoryExtension {
+  return union(
+    definePlugin(history({ depth, newGroupDelay })),
+    defineKeymap(keymap),
+    defineCommands(commands),
+  )
+}

package/src/extensions/keymap-base.ts

@@ -0,0 +1,60 @@
+import {
+  baseKeymap,
+  chainCommands,
+  createParagraphNear,
+  deleteSelection,
+  joinTextblockBackward,
+  liftEmptyBlock,
+  newlineInCode,
+  selectNodeBackward,
+} from '@prosekit/pm/commands'
+import { splitSplittableBlock } from 'prosemirror-splittable'
+
+import { withPriority } from '../editor/with-priority'
+import type { PlainExtension } from '../types/extension'
+import { Priority } from '../types/priority'
+
+import { defineKeymap } from './keymap'
+
+// Replace `splitBlock` with `splitSplittableBlock`
+const customEnter = chainCommands(
+  newlineInCode,
+  createParagraphNear,
+  liftEmptyBlock,
+  splitSplittableBlock,
+)
+
+// Replace `joinBackward` with `joinTextblockBackward`
+const customBackspace = chainCommands(
+  deleteSelection,
+  joinTextblockBackward,
+  selectNodeBackward,
+)
+
+const customBaseKeymap = {
+  ...baseKeymap,
+  Enter: customEnter,
+  Backspace: customBackspace,
+}
+
+/**
+ * @internal
+ */
+export type BaseKeymapExtension = PlainExtension
+
+/**
+ * Defines some basic key bindings.
+ *
+ * @public
+ */
+export function defineBaseKeymap(options?: {
+  /**
+   * The priority of the keymap.
+   *
+   * @default Priority.low
+   */
+  priority?: Priority
+}): BaseKeymapExtension {
+  const priority = options?.priority ?? Priority.low
+  return withPriority(defineKeymap(customBaseKeymap), priority)
+}