@prosekit/core 0.8.2 → 0.8.4

package/src/extensions/keymap.spec.ts

@@ -0,0 +1,89 @@
+import type { Command } from '@prosekit/pm/state'
+import {
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest'
+
+import { createEditor } from '../editor/editor'
+import { defineTestExtension } from '../testing'
+
+import {
+  defineKeymap,
+  type Keymap,
+} from './keymap'
+
+describe('keymap', () => {
+  it('can register and unregister keymap', () => {
+    const div = document.body.appendChild(document.createElement('div'))
+    const extension = defineTestExtension()
+    const editor = createEditor({ extension })
+    editor.mount(div)
+
+    const command1: Command = vi.fn(() => false)
+    const command2: Command = vi.fn(() => false)
+
+    const keymap1: Keymap = { Enter: command1 }
+    const keymap2: Keymap = { Enter: command2 }
+
+    const extension1 = defineKeymap(keymap1)
+    const extension2 = defineKeymap(keymap2)
+
+    const dispose1 = editor.use(extension1)
+
+    editor.view.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(command1).toHaveBeenCalledTimes(1)
+    expect(command2).toHaveBeenCalledTimes(0)
+
+    const dispose2 = editor.use(extension2)
+
+    editor.view.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(command1).toHaveBeenCalledTimes(2)
+    expect(command2).toHaveBeenCalledTimes(1)
+
+    dispose1()
+
+    editor.view.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(command1).toHaveBeenCalledTimes(2)
+    expect(command2).toHaveBeenCalledTimes(2)
+
+    dispose2()
+
+    editor.view.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(command1).toHaveBeenCalledTimes(2)
+    expect(command2).toHaveBeenCalledTimes(2)
+  })
+
+  it('can skip unnecessary plugin update', () => {
+    const div = document.body.appendChild(document.createElement('div'))
+    const extension = defineTestExtension()
+    const editor = createEditor({ extension })
+    editor.mount(div)
+
+    const command1: Command = vi.fn(() => false)
+    const command2: Command = vi.fn(() => false)
+
+    const keymap1: Keymap = { Enter: command1 }
+    const keymap2: Keymap = { Enter: command2 }
+
+    const extension1 = defineKeymap(keymap1)
+    const extension2 = defineKeymap(keymap2)
+
+    const dispose1 = editor.use(extension1)
+    const plugins1 = [...editor.view.state.plugins]
+
+    const dispose2 = editor.use(extension2)
+    const plugins2 = [...editor.view.state.plugins]
+
+    dispose2()
+    const plugins3 = [...editor.view.state.plugins]
+
+    dispose1()
+    const plugins4 = [...editor.view.state.plugins]
+
+    expect(plugins1).toEqual(plugins2)
+    expect(plugins2).toEqual(plugins3)
+    expect(plugins3).toEqual(plugins4)
+  })
+})

package/src/extensions/keymap.ts

@@ -0,0 +1,96 @@
+import { chainCommands } from '@prosekit/pm/commands'
+import { keydownHandler } from '@prosekit/pm/keymap'
+import {
+  Plugin,
+  PluginKey,
+  type Command,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+import mapValues from 'just-map-values'
+
+import {
+  defineFacet,
+  type Facet,
+} from '../facets/facet'
+import { defineFacetPayload } from '../facets/facet-extension'
+import type { PlainExtension } from '../types/extension'
+import { toReversed } from '../utils/array'
+
+import {
+  pluginFacet,
+  type PluginPayload,
+} from './plugin'
+
+/**
+ * @public
+ */
+export interface Keymap {
+  [key: string]: Command
+}
+
+/**
+ * @public
+ */
+export function defineKeymap(keymap: Keymap): PlainExtension {
+  return defineFacetPayload(keymapFacet, [keymap]) as PlainExtension
+}
+
+/**
+ * @internal
+ */
+export type KeymapPayload = Keymap
+
+/**
+ * @internal
+ */
+export const keymapFacet: Facet<KeymapPayload, PluginPayload> = defineFacet<
+  KeymapPayload,
+  PluginPayload
+>({
+  reduce: () => {
+    type Handler = (view: EditorView, event: KeyboardEvent) => boolean
+
+    let handler: Handler | undefined
+
+    const handlerWrapper: Handler = (view, event) => {
+      if (handler) return handler(view, event)
+      return false
+    }
+
+    const plugin = new Plugin({
+      key: keymapPluginKey,
+      props: { handleKeyDown: handlerWrapper },
+    })
+
+    return (keymaps: Keymap[]) => {
+      handler = keydownHandler(
+        mergeKeymaps(
+          // The keymap at the end have a higher priority.
+          toReversed(keymaps),
+        ),
+      )
+      return plugin
+    }
+  },
+  parent: pluginFacet,
+  singleton: true,
+})
+
+function mergeKeymaps(keymaps: Keymap[]): Keymap {
+  const bindings: Record<string, Command[]> = {}
+
+  for (const keymap of keymaps) {
+    for (const [key, command] of Object.entries(keymap)) {
+      const commands = bindings[key] || (bindings[key] = [])
+      commands.push(command)
+    }
+  }
+
+  return mapValues(bindings, mergeCommands)
+}
+
+function mergeCommands(commands: Command[]): Command {
+  return chainCommands(...commands)
+}
+
+const keymapPluginKey = new PluginKey('prosekit-keymap')

package/src/extensions/mark-spec.spec.ts

@@ -0,0 +1,177 @@
+import type {
+  DOMOutputSpec,
+  TagParseRule,
+} from '@prosekit/pm/model'
+import formatHTML from 'diffable-html'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { union } from '../editor/union'
+import {
+  defineDoc,
+  defineParagraph,
+  defineText,
+  setupTestFromExtension,
+} from '../testing'
+
+import {
+  defineMarkAttr,
+  defineMarkSpec,
+} from './mark-spec'
+
+describe('defineMarkSpec', () => {
+  it('can merge mark specs', () => {
+    const toDOM1 = (): DOMOutputSpec => ['strong', { 'data-ext1': '' }]
+    const toDOM2 = (): DOMOutputSpec => ['strong', { 'data-ext2': '' }]
+    const parseDOM1: TagParseRule = { tag: 'strong[data-ext1]' }
+    const parseDOM2: TagParseRule = { tag: 'strong[data-ext2]' }
+    const toDebugString2 = () => 'ext2'
+
+    const ext1 = defineMarkSpec({
+      name: 'bold',
+      parseDOM: [parseDOM1],
+      toDOM: toDOM1,
+      attrs: {
+        foo: { default: undefined },
+        bar: { default: 'bar' },
+        baz: { default: 'baz:1 ' },
+      },
+    })
+    const ext2 = defineMarkSpec({
+      name: 'bold',
+      parseDOM: [parseDOM2],
+      toDOM: toDOM2,
+      toDebugString: toDebugString2,
+      attrs: {
+        foo: { default: 'foo' },
+        bar: { default: undefined },
+        baz: { default: 'baz:2' },
+      },
+    })
+
+    const extension = union(
+      ext1,
+      ext2,
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+    )
+    const schema = extension.schema
+    expect(schema).toBeTruthy()
+    expect(schema?.spec.marks.get('bold')).toEqual({
+      parseDOM: [parseDOM1, parseDOM2],
+      toDOM: toDOM2,
+      toDebugString: toDebugString2,
+      attrs: {
+        foo: { default: 'foo' },
+        bar: { default: 'bar' },
+        baz: { default: 'baz:2' },
+      },
+    })
+  })
+})
+
+describe('defineMarkAttr', () => {
+  it('can add a new attribute', () => {
+    const boldExt = defineMarkSpec({
+      name: 'bold',
+      parseDOM: [{ tag: 'strong' }],
+      toDOM() {
+        return ['strong', 0]
+      },
+    })
+    const textColorExt = defineMarkAttr({
+      type: 'bold',
+      attr: 'textColor',
+      default: 'black',
+      toDOM: (value) => ['style', `color: ${value}`],
+      parseDOM: (node: HTMLElement) => node.style.color,
+    })
+    const backgroundColorExt = defineMarkAttr({
+      type: 'bold',
+      attr: 'backgroundColor',
+      default: 'white',
+      toDOM: (value) => ['style', `background-color: ${value}`],
+      parseDOM: (node: HTMLElement) => node.style.backgroundColor,
+    })
+    const nodeIdExt = defineMarkAttr<'bold', 'markId', string | null>({
+      type: 'bold',
+      attr: 'markId',
+      default: null,
+      toDOM: (value) => (value ? ['data-mark-id', value] : null),
+      parseDOM: (node: HTMLElement) => node.dataset.markId || null,
+    })
+    const extension = union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      textColorExt,
+      backgroundColorExt,
+      nodeIdExt,
+      boldExt,
+    )
+    const { editor } = setupTestFromExtension(extension)
+
+    expect(Object.keys(editor.schema.marks.bold.spec.attrs || {}))
+      .toMatchInlineSnapshot(`
+      [
+        "textColor",
+        "backgroundColor",
+        "markId",
+      ]
+    `)
+
+    editor.setContent(
+      '<p><strong data-mark-id="123" style="background-color:blue;color:red;">Hello</strong></p>',
+    )
+
+    const json1 = editor.getDocJSON()
+    const html1 = editor.getDocHTML()
+    expect(json1).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "marks": [
+                  {
+                    "attrs": {
+                      "backgroundColor": "blue",
+                      "markId": "123",
+                      "textColor": "red",
+                    },
+                    "type": "bold",
+                  },
+                ],
+                "text": "Hello",
+                "type": "text",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+    expect(formatHTML(html1)).toMatchInlineSnapshot(`
+      "
+      <div>
+        <p>
+          <strong
+            data-mark-id="123"
+            style="background-color: blue; color: red;"
+          >
+            Hello
+          </strong>
+        </p>
+      </div>
+      "
+    `)
+    editor.setContent(html1)
+    const json2 = editor.getDocJSON()
+    expect(json2).toEqual(json1)
+  })
+})

package/src/extensions/mark-spec.ts

@@ -0,0 +1,181 @@
+import type {
+  MarkSpec,
+  ParseRule,
+  SchemaSpec,
+} from '@prosekit/pm/model'
+import clone from 'just-clone'
+import OrderedMap from 'orderedmap'
+
+import { defineFacet } from '../facets/facet'
+import { defineFacetPayload } from '../facets/facet-extension'
+import { schemaSpecFacet } from '../facets/schema-spec'
+import type {
+  AnyAttrs,
+  AttrSpec,
+} from '../types/attrs'
+import type { Extension } from '../types/extension'
+import { groupBy } from '../utils/array-grouping'
+import { assert } from '../utils/assert'
+import { mergeSpecs } from '../utils/merge-specs'
+import {
+  wrapOutputSpecAttrs,
+  wrapTagParseRuleAttrs,
+} from '../utils/output-spec'
+import { isNotNullish } from '../utils/type-assertion'
+
+/**
+ * @public
+ */
+export interface MarkSpecOptions<
+  MarkName extends string = string,
+  Attrs extends AnyAttrs = AnyAttrs,
+> extends MarkSpec {
+  /**
+   * The name of the mark type.
+   */
+  name: MarkName
+
+  /**
+   * The attributes that marks of this type get.
+   */
+  attrs?: { [K in keyof Attrs]: AttrSpec<Attrs[K]> }
+}
+
+/**
+ * @public
+ */
+export interface MarkAttrOptions<
+  MarkName extends string = string,
+  AttrName extends string = string,
+  AttrType = any,
+> extends AttrSpec<AttrType> {
+  /**
+   * The name of the mark type.
+   */
+  type: MarkName
+
+  /**
+   * The name of the attribute.
+   */
+  attr: AttrName
+
+  /**
+   * Returns the attribute key and value to be set on the HTML element.
+   *
+   * If the returned `key` is `"style"`, the value is a string of CSS properties and will
+   * be prepended to the existing `style` attribute on the DOM node.
+   *
+   * @param value - The value of the attribute of current ProseMirror node.
+   */
+  toDOM?: (value: AttrType) => [key: string, value: string] | null | undefined
+
+  /**
+   * Parses the attribute value from the DOM.
+   */
+  parseDOM?: (node: HTMLElement) => AttrType
+}
+
+/**
+ * @public
+ */
+export function defineMarkSpec<
+  Mark extends string,
+  Attrs extends AnyAttrs = AnyAttrs,
+>(
+  options: MarkSpecOptions<Mark, Attrs>,
+): Extension<{
+  Marks: { [K in Mark]: Attrs }
+}> {
+  const payload: MarkSpecPayload = [options, undefined]
+  return defineFacetPayload(markSpecFacet, [payload]) as Extension<{
+    Marks: any
+  }>
+}
+
+/**
+ * @public
+ */
+export function defineMarkAttr<
+  MarkType extends string = string,
+  AttrName extends string = string,
+  AttrType = any,
+>(
+  options: MarkAttrOptions<MarkType, AttrName, AttrType>,
+): Extension<{
+  Marks: { [K in MarkType]: AttrType }
+}> {
+  const payload: MarkSpecPayload = [undefined, options]
+  return defineFacetPayload(markSpecFacet, [payload]) as Extension<{
+    Marks: any
+  }>
+}
+
+type MarkSpecPayload = [
+  MarkSpecOptions | undefined,
+  MarkAttrOptions | undefined,
+]
+
+const markSpecFacet = defineFacet<MarkSpecPayload, SchemaSpec>({
+  reducer: (payloads: MarkSpecPayload[]): SchemaSpec => {
+    let specs = OrderedMap.from<MarkSpec>({})
+
+    const specPayloads = payloads.map((input) => input[0]).filter(isNotNullish)
+    const attrPayloads = payloads.map((input) => input[1]).filter(isNotNullish)
+
+    for (const { name, ...spec } of specPayloads) {
+      const prevSpec = specs.get(name)
+      if (prevSpec) {
+        specs = specs.update(name, mergeSpecs(prevSpec, spec))
+      } else {
+        // The latest spec has the highest priority, so we put it at the start
+        // of the map.
+        specs = specs.addToStart(name, spec)
+      }
+    }
+
+    const groupedAttrs = groupBy(attrPayloads, (payload) => payload.type)
+
+    for (const [type, attrs] of Object.entries(groupedAttrs)) {
+      if (!attrs) continue
+
+      const maybeSpec = specs.get(type)
+      assert(maybeSpec, `Mark type ${type} must be defined`)
+      const spec = clone(maybeSpec)
+
+      if (!spec.attrs) {
+        spec.attrs = {}
+      }
+
+      for (const attr of attrs) {
+        spec.attrs[attr.attr] = {
+          default: attr.default as unknown,
+          validate: attr.validate,
+        }
+      }
+
+      if (spec.toDOM) {
+        spec.toDOM = wrapOutputSpecAttrs(spec.toDOM, attrs)
+      }
+
+      if (spec.parseDOM) {
+        spec.parseDOM = spec.parseDOM.map((rule) => wrapParseRuleAttrs(rule, attrs))
+      }
+
+      specs = specs.update(type, spec)
+    }
+
+    return { marks: specs, nodes: {} }
+  },
+  parent: schemaSpecFacet,
+  singleton: true,
+})
+
+function wrapParseRuleAttrs(
+  rule: ParseRule,
+  attrs: MarkAttrOptions[],
+): ParseRule {
+  if (rule.tag) {
+    return wrapTagParseRuleAttrs(rule, attrs)
+  }
+  return rule
+}

package/src/extensions/mark-view-effect.ts

@@ -0,0 +1,85 @@
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+} from '@prosekit/pm/state'
+import type { MarkViewConstructor } from '@prosekit/pm/view'
+
+import { defineFacet } from '../facets/facet'
+import { defineFacetPayload } from '../facets/facet-extension'
+import type { Extension } from '../types/extension'
+import { isNotNullish } from '../utils/type-assertion'
+
+import {
+  pluginFacet,
+  type PluginPayload,
+} from './plugin'
+
+/**
+ * @internal
+ */
+export type MarkViewFactoryOptions<T> = {
+  group: string
+  factory: (args: T) => MarkViewConstructor
+}
+
+/**
+ * @internal
+ */
+export type MarkViewComponentOptions<T> = {
+  group: string
+  name: string
+  args: T
+}
+
+type MarkViewFactoryInput = [
+  MarkViewFactoryOptions<any> | null,
+  MarkViewComponentOptions<any> | null,
+]
+
+/**
+ * @internal
+ */
+export function defineMarkViewFactory<T>(
+  options: MarkViewFactoryOptions<T>,
+): Extension {
+  const input: MarkViewFactoryInput = [options, null]
+  return defineFacetPayload(markViewFactoryFacet, [input])
+}
+
+/**
+ * @internal
+ */
+export function defineMarkViewComponent<T>(
+  options: MarkViewComponentOptions<T>,
+): Extension {
+  const input: MarkViewFactoryInput = [null, options]
+  return defineFacetPayload(markViewFactoryFacet, [input])
+}
+
+const isServer = typeof window === 'undefined'
+
+const markViewFactoryFacet = defineFacet<MarkViewFactoryInput, PluginPayload>({
+  reducer: (inputs: MarkViewFactoryInput[]): PluginPayload => {
+    // Don't register mark views on the server
+    if (isServer) return []
+
+    const markViews: { [markName: string]: MarkViewConstructor } = {}
+
+    const factories = inputs.map((x) => x[0]).filter(isNotNullish)
+    const options = inputs.map((x) => x[1]).filter(isNotNullish)
+
+    for (const { group, name, args } of options) {
+      const factory = factories.find((factory) => factory.group === group)
+      if (!factory) continue
+      markViews[name] = factory.factory(args)
+    }
+
+    return () => [
+      new ProseMirrorPlugin({
+        key: new PluginKey('prosekit-mark-view-effect'),
+        props: { markViews },
+      }),
+    ]
+  },
+  parent: pluginFacet,
+})

package/src/extensions/mark-view.ts

@@ -0,0 +1,43 @@
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+} from '@prosekit/pm/state'
+import type { MarkViewConstructor } from '@prosekit/pm/view'
+
+import { defineFacet } from '../facets/facet'
+import { defineFacetPayload } from '../facets/facet-extension'
+import type { Extension } from '../types/extension'
+
+import {
+  pluginFacet,
+  type PluginPayload,
+} from './plugin'
+
+export interface MarkViewOptions {
+  name: string
+  constructor: MarkViewConstructor
+}
+
+export function defineMarkView(options: MarkViewOptions): Extension {
+  return defineFacetPayload(markViewFacet, [options])
+}
+
+const markViewFacet = defineFacet<MarkViewOptions, PluginPayload>({
+  reducer: (inputs: MarkViewOptions[]): PluginPayload => {
+    const markViews: { [markName: string]: MarkViewConstructor } = {}
+
+    for (const input of inputs) {
+      if (!markViews[input.name]) {
+        markViews[input.name] = input.constructor
+      }
+    }
+
+    return () => [
+      new ProseMirrorPlugin({
+        key: new PluginKey('prosekit-mark-view'),
+        props: { markViews },
+      }),
+    ]
+  },
+  parent: pluginFacet,
+})