@prosekit/extensions 0.11.3 → 0.11.5

package/src/paragraph/paragraph-commands.ts

@@ -0,0 +1,29 @@
+import {
+  defineCommands,
+  setBlockType,
+  type Extension,
+} from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+/**
+ * @internal
+ */
+export type ParagraphCommandsExtension = Extension<{
+  Commands: {
+    setParagraph: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function setParagraph(): Command {
+  return setBlockType({ type: 'paragraph' })
+}
+
+/**
+ * @internal
+ */
+export function defineParagraphCommands(): ParagraphCommandsExtension {
+  return defineCommands({ setParagraph })
+}

package/src/paragraph/paragraph-keymap.ts

@@ -0,0 +1,15 @@
+import {
+  defineKeymap,
+  type PlainExtension,
+} from '@prosekit/core'
+
+import { setParagraph } from './paragraph-commands'
+
+/**
+ * @internal
+ */
+export function defineParagraphKeymap(): PlainExtension {
+  return defineKeymap({
+    'mod-alt-0': setParagraph(),
+  })
+}

package/src/paragraph/paragraph-spec.ts

@@ -0,0 +1,31 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type ParagraphSpecExtension = Extension<{
+  Nodes: {
+    paragraph: Attrs
+  }
+}>
+
+/**
+ * @internal
+ *
+ * Defines a paragraph node spec.
+ */
+export function defineParagraphSpec(): ParagraphSpecExtension {
+  return defineNodeSpec({
+    name: 'paragraph',
+    content: 'inline*',
+    group: 'block',
+    parseDOM: [{ tag: 'p' }],
+    toDOM() {
+      return ['p', 0]
+    },
+  })
+}

package/src/paragraph/paragraph.ts

@@ -0,0 +1,37 @@
+import {
+  Priority,
+  union,
+  withPriority,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineParagraphCommands,
+  type ParagraphCommandsExtension,
+} from './paragraph-commands'
+import { defineParagraphKeymap } from './paragraph-keymap'
+import {
+  defineParagraphSpec,
+  type ParagraphSpecExtension,
+} from './paragraph-spec'
+
+/**
+ * @internal
+ */
+export type ParagraphExtension = Union<[ParagraphSpecExtension, ParagraphCommandsExtension]>
+
+/**
+ * @public
+ *
+ * Defines a paragraph node.
+ *
+ * The paragraph node spec has the highest priority, because it should be the
+ * default block node for most cases.
+ */
+export function defineParagraph(): ParagraphExtension {
+  return union(
+    withPriority(defineParagraphSpec(), Priority.highest),
+    defineParagraphCommands(),
+    defineParagraphKeymap(),
+  )
+}

package/src/paste-rule/index.ts

@@ -0,0 +1,10 @@
+export {
+  defineMarkPasteRule,
+  type MarkPasteRuleOptions,
+} from './mark-paste-rule'
+export {
+  definePasteRule,
+  type PasteRuleHandler,
+  type PasteRuleHandlerOptions,
+  type PasteRuleOptions,
+} from './paste-rule'

package/src/paste-rule/mark-paste-rule.spec.ts

@@ -0,0 +1,112 @@
+import {
+  defineMarkSpec,
+  union,
+} from '@prosekit/core'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineBold } from '../bold'
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { setupTestFromExtension } from '../testing'
+import {
+  pasteHTML,
+  pasteText,
+} from '../testing/clipboard'
+import { defineText } from '../text'
+
+import type { MarkPasteRuleOptions } from './mark-paste-rule'
+import { defineMarkPasteRule } from './mark-paste-rule'
+
+function setup(options?: Partial<MarkPasteRuleOptions>) {
+  return setupTestFromExtension(union(
+    defineDoc(),
+    defineText(),
+    defineParagraph(),
+    defineBold(),
+    defineMarkSpec({
+      name: 'testMark',
+      attrs: {
+        value: { validate: 'string' },
+      },
+      parseDOM: [{ tag: 'span[data-test]' }],
+      toDOM: () => ['span', { 'data-test': 'true' }, 0],
+    }),
+    defineMarkPasteRule({
+      type: 'testMark',
+      regex: /@(\w+)/g,
+      getAttrs: (match: RegExpExecArray) => ({ value: match[1] }),
+      ...options,
+    }),
+  ))
+}
+
+describe('defineMarkPasteRule', () => {
+  it('should match simple patterns and create marks', () => {
+    const { editor, n, m } = setup()
+    editor.set(n.doc(n.paragraph('<a>')))
+
+    pasteHTML(editor.view, '<p>Hello @alice and @bob</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph(
+        'Hello ',
+        m.testMark({ value: 'alice' }, '@alice'),
+        ' and ',
+        m.testMark({ value: 'bob' }, '@bob'),
+      )).toJSON(),
+    )
+  })
+
+  it('should not match plain text', () => {
+    const { editor, n } = setup()
+    editor.set(n.doc(n.paragraph('<a>')))
+
+    pasteText(editor.view, 'Hello @alice and @bob')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph('Hello @alice and @bob')).toJSON(),
+    )
+  })
+
+  it('should skip processing when attrs returns false', () => {
+    const { editor, n, m } = setup({
+      getAttrs: (match: RegExpExecArray) => {
+        return match[1] === 'skip' ? false : { value: match[1] }
+      },
+    })
+    editor.set(n.doc(n.paragraph('<a>')))
+
+    pasteHTML(editor.view, '<p>Tags: @good @skip @also</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph(
+        'Tags: ',
+        m.testMark({ value: 'good' }, '@good'),
+        ' @skip ',
+        m.testMark({ value: 'also' }, '@also'),
+      )).toJSON(),
+    )
+  })
+
+  it('should use shouldSkip to skip bold text', () => {
+    const { editor, n, m } = setup({
+      shouldSkip: (node) => node.marks.some(mark => mark.type.name === 'bold'),
+    })
+    editor.set(n.doc(n.paragraph('<a>')))
+
+    pasteHTML(editor.view, '<p>Hello <strong>@alice</strong> and @bob</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph(
+        'Hello ',
+        m.bold('@alice'), // Skipped due to shouldSkip
+        ' and ',
+        m.testMark({ value: 'bob' }, '@bob'), // Processed normally
+      )).toJSON(),
+    )
+  })
+})

package/src/paste-rule/mark-paste-rule.ts

@@ -0,0 +1,194 @@
+import {
+  getMarkType,
+  type PlainExtension,
+} from '@prosekit/core'
+import type {
+  Attrs,
+  MarkType,
+  ProseMirrorNode,
+} from '@prosekit/pm/model'
+import {
+  Fragment,
+  Slice,
+} from '@prosekit/pm/model'
+
+import { definePasteRule } from './paste-rule'
+import { splitTextByRegex } from './split-text-by-regex'
+
+/**
+ * The options for {@link defineMarkPasteRule}.
+ *
+ * @public
+ */
+export interface MarkPasteRuleOptions {
+  /**
+   * The regular expression to match against. It must have a `g` flag to match
+   * all instances of the mark.
+   */
+  regex: RegExp
+
+  /**
+   * The mark type to apply to the matched text.
+   */
+  type: string | MarkType
+
+  /**
+   * A function used to compute attributes to set on the mark created by this
+   * rule. When it returns `false`, the rule won't match. When it returns `null`
+   * or `undefined`, that is interpreted as an empty/default set of attributes.
+   * @default null
+   */
+  getAttrs?: (match: RegExpExecArray) => Attrs | null | undefined | false
+
+  /**
+   * Optional function to determine if a text node should be skipped.
+   * Default behavior: skip code nodes and nodes that already have the target mark.
+   */
+  shouldSkip?: (node: ProseMirrorNode) => boolean
+}
+
+/**
+ * Defines a paste rule that applies marks based on regex patterns.
+ *
+ * @public
+ */
+export function defineMarkPasteRule(options: MarkPasteRuleOptions): PlainExtension {
+  return definePasteRule({
+    handler: ({ slice, view, plain }) => {
+      if (plain) {
+        return slice
+      }
+
+      const markType = getMarkType(view.state.schema, options.type)
+
+      return replaceMarkInSlice({
+        markType,
+        regex: options.regex,
+        getAttrs: options.getAttrs,
+        shouldSkip: options.shouldSkip,
+      }, slice)
+    },
+  })
+}
+
+interface MarkPasteRuleHandlerOptions {
+  markType: MarkType
+  regex: RegExp
+  getAttrs?: (match: RegExpExecArray) => Attrs | null | undefined | false
+  shouldSkip?: (node: ProseMirrorNode) => boolean
+}
+
+function replaceMarkInSlice(options: MarkPasteRuleHandlerOptions, slice: Slice): Slice {
+  const newFragment = replaceMarkInFragment(options, slice.content)
+  if (!newFragment) {
+    return slice
+  }
+  return new Slice(newFragment, slice.openStart, slice.openEnd)
+}
+
+function replaceMarkInFragment(options: MarkPasteRuleHandlerOptions, fragment: Fragment): Fragment | undefined {
+  let changed = false
+  let children: ProseMirrorNode[] = []
+
+  for (const child of fragment.content) {
+    const newChild = replaceMarkInNode(options, child)
+    if (newChild) {
+      changed = true
+    }
+    children.push(newChild || child)
+  }
+
+  if (changed) {
+    return Fragment.from(children)
+  }
+
+  return
+}
+
+function replaceMarkInNode(options: MarkPasteRuleHandlerOptions, node: ProseMirrorNode): ProseMirrorNode | undefined {
+  if (node.type.spec.code) {
+    return
+  }
+  if (node.type.isInline) {
+    return
+  }
+  if (node.type.isTextblock) {
+    return replaceMarkInTextblockNode(options, node)
+  }
+
+  const newChildren = replaceMarkInFragment(options, node.content)
+  if (!newChildren) {
+    return
+  }
+  return node.copy(newChildren)
+}
+
+function replaceMarkInTextblockNode(options: MarkPasteRuleHandlerOptions, node: ProseMirrorNode): ProseMirrorNode | undefined {
+  const newChildren: ProseMirrorNode[] = []
+  let changed = false
+
+  for (const inlineNode of node.content.content) {
+    const newInlineNodes = replaceMarkInInlineNode(options, inlineNode)
+    if (newInlineNodes) {
+      changed = true
+      newChildren.push(...newInlineNodes)
+    } else {
+      newChildren.push(inlineNode)
+    }
+  }
+  if (changed) {
+    return node.copy(Fragment.from(newChildren))
+  }
+  return
+}
+
+function replaceMarkInInlineNode(options: MarkPasteRuleHandlerOptions, node: ProseMirrorNode): ProseMirrorNode[] | undefined {
+  const text = node.text
+  if (!text) {
+    return
+  }
+
+  const { markType, shouldSkip } = options
+
+  // Use custom skip logic if provided, otherwise use default
+  if (shouldSkip) {
+    if (shouldSkip(node)) {
+      return
+    }
+  } else {
+    // Default skip logic: skip if already has the target mark or has code mark
+    if (node.marks.some((mark) => mark.type === markType)) {
+      return
+    }
+    if (node.marks.some((mark) => mark.type.spec.code)) {
+      return
+    }
+  }
+
+  const chunks = splitTextByRegex(text, options.regex)
+  if (!chunks) {
+    return
+  }
+
+  const schema = node.type.schema
+  const nodes: ProseMirrorNode[] = []
+
+  for (const [text, match] of chunks) {
+    if (!text) {
+      continue
+    }
+    if (match) {
+      const attrs = options.getAttrs?.(match) ?? null
+      if (attrs !== false) {
+        const mark = markType.create(attrs)
+        nodes.push(schema.text(text, [...node.marks, mark]))
+      } else {
+        nodes.push(schema.text(text, node.marks))
+      }
+    } else {
+      nodes.push(schema.text(text, node.marks))
+    }
+  }
+
+  return nodes
+}

package/src/paste-rule/paste-rule-plugin.ts

@@ -0,0 +1,53 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  pluginFacet,
+  type PlainExtension,
+  type PluginPayload,
+} from '@prosekit/core'
+import type { Slice } from '@prosekit/pm/model'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+type PasteRulePayload = (options: { slice: Slice; view: EditorView; plain: boolean }) => Slice
+
+/**
+ * @internal
+ */
+const pasteRuleFacet = defineFacet<PasteRulePayload, PluginPayload>({
+  reduce: () => {
+    let handlers: PasteRulePayload[] = []
+
+    const transformPasted = (slice: Slice, view: EditorView, plain: boolean): Slice => {
+      for (const handler of handlers) {
+        slice = handler({ slice, view, plain })
+      }
+      return slice
+    }
+
+    const plugin = new ProseMirrorPlugin({
+      key: new PluginKey('prosekit-paste-rule'),
+      props: {
+        transformPasted,
+      },
+    })
+
+    return (inputs: PasteRulePayload[]) => {
+      // Last added rule (highest priority) is applied first
+      handlers = [...inputs].reverse()
+      return plugin
+    }
+  },
+  singleton: true,
+  parent: pluginFacet,
+})
+
+/**
+ * @internal
+ */
+export function definePasteRulePlugin(payload: PasteRulePayload): PlainExtension {
+  return defineFacetPayload(pasteRuleFacet, [payload]) as PlainExtension
+}

package/src/paste-rule/paste-rule.spec.ts

@@ -0,0 +1,96 @@
+import {
+  Priority,
+  union,
+  withPriority,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import {
+  Fragment,
+  Slice,
+} from '@prosekit/pm/model'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import {
+  defineTestExtension,
+  setupTestFromExtension,
+} from '../testing'
+
+import { definePasteRule } from './paste-rule'
+
+function replaceTextInSlice(slice: Slice, from: string, to: string): Slice {
+  return new Slice(
+    replaceTextInFragment(slice.content, from, to),
+    slice.openStart,
+    slice.openEnd,
+  )
+}
+
+function replaceTextInFragment(fragment: Fragment, from: string, to: string): Fragment {
+  return Fragment.fromArray(fragment.content.map(node => replaceTextInNode(node, from, to)))
+}
+
+function replaceTextInNode(node: ProseMirrorNode, from: string, to: string): ProseMirrorNode {
+  const text = node.text
+  if (text != null) {
+    return node.type.schema.text(text.replaceAll(from, to))
+  }
+  return node.copy(replaceTextInFragment(node.content, from, to))
+}
+
+function defineTextReplacePasteRule(from: string, to: string): PlainExtension {
+  return definePasteRule({
+    handler: ({ slice }) => {
+      return replaceTextInSlice(slice, from, to)
+    },
+  })
+}
+
+describe('paste rule', () => {
+  it('can transform pasted HTML', () => {
+    const extension = union(
+      defineTestExtension(),
+      defineTextReplacePasteRule('Foo', 'Bar'),
+    )
+    const { editor } = setupTestFromExtension(extension)
+    editor.view.pasteHTML('<div>Foo</div>')
+    expect(editor.getDocHTML()).not.toContain(`Foo`)
+    expect(editor.getDocHTML()).toContain(`Bar`)
+  })
+
+  it('can transform pasted text', () => {
+    const extension = union(
+      defineTestExtension(),
+      defineTextReplacePasteRule('Foo', 'Bar'),
+    )
+    const { editor } = setupTestFromExtension(extension)
+    editor.view.pasteText('Foo')
+    expect(editor.getDocHTML()).not.toContain(`Foo`)
+    expect(editor.getDocHTML()).toContain(`Bar`)
+  })
+
+  it('can order multiple paste rules', () => {
+    const extension = union(
+      defineTestExtension(),
+      withPriority(defineTextReplacePasteRule('Foo', 'Bar'), Priority.high),
+      withPriority(defineTextReplacePasteRule('Foo', 'Baz'), Priority.low),
+    )
+    const { editor } = setupTestFromExtension(extension)
+    editor.view.pasteText('Foo')
+    expect(editor.getDocHTML()).not.toContain(`Foo`)
+    expect(editor.getDocHTML()).toContain(`Bar`)
+    expect(editor.getDocHTML()).not.toContain(`Baz`)
+
+    editor.use(defineTextReplacePasteRule('Bar', 'Qux'))
+    editor.setContent('')
+    editor.view.pasteText('Foo')
+    expect(editor.getDocHTML()).not.toContain(`Foo`)
+    expect(editor.getDocHTML()).not.toContain(`Bar`)
+    expect(editor.getDocHTML()).not.toContain(`Baz`)
+    expect(editor.getDocHTML()).toContain(`Qux`)
+  })
+})

package/src/paste-rule/paste-rule.ts

@@ -0,0 +1,60 @@
+import type { PlainExtension } from '@prosekit/core'
+import type { Slice } from '@prosekit/pm/model'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { definePasteRulePlugin } from './paste-rule-plugin'
+
+/**
+ * @public
+ *
+ * Options for {@link PasteRuleHandler}.
+ */
+export interface PasteRuleHandlerOptions {
+  /**
+   * The slice to be pasted.
+   */
+  slice: Slice
+
+  /**
+   * The editor view.
+   */
+  view: EditorView
+
+  /**
+   * Whether the pasted content is treated as plain text. This is true when the
+   * `Shift` key is held when pasting.
+   */
+  plain: boolean
+}
+
+/**
+ * @public
+ *
+ * Can be used to transform pasted or dragged-and-dropped content before it is
+ * applied to the document.
+ */
+export type PasteRuleHandler = (options: PasteRuleHandlerOptions) => Slice
+
+/**
+ * Options for {@link definePasteRule}.
+ *
+ * @public
+ */
+export interface PasteRuleOptions {
+  /**
+   * A function to be called when a paste rule is triggered.
+   */
+  handler: PasteRuleHandler
+}
+
+/**
+ * Defines a paste rule. This rule allows you to modify pasted or dragged
+ * content before it is inserted into the document.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function definePasteRule({ handler }: PasteRuleOptions): PlainExtension {
+  return definePasteRulePlugin(handler)
+}