@prosekit/extensions 0.11.4 → 0.11.6

package/src/mark-rule/range.ts

@@ -0,0 +1,107 @@
+import type {
+  ProseMirrorNode,
+  ResolvedPos,
+} from '@prosekit/pm/model'
+import type {
+  EditorState,
+  Transaction,
+} from '@prosekit/pm/state'
+import type { ProsemirrorNode } from 'prosemirror-flat-list'
+
+function getSpanTextRanges($from: ResolvedPos, $to: ResolvedPos) {
+  const nodeRange = $from.blockRange($to)
+  if (!nodeRange) {
+    return []
+  }
+
+  const stack: Array<[start: number, node: ProseMirrorNode]> = []
+  let start = nodeRange.start
+
+  for (let i = nodeRange.startIndex; i < nodeRange.endIndex; i++) {
+    const child = nodeRange.parent.child(i)
+    stack.push([start, child])
+    start += child.nodeSize
+  }
+
+  const ranges: Array<[number, number]> = []
+
+  while (stack.length > 0) {
+    const [start, node] = stack.pop()!
+    if (node.type.spec.code) {
+      continue
+    }
+
+    if (node.type.isTextblock) {
+      ranges.push([start + 1, start + 1 + node.content.size])
+      continue
+    }
+
+    node.forEach((child, offset) => {
+      stack.push([start + offset + 1, child])
+    })
+  }
+
+  return ranges
+}
+
+function getInlineTextRange(
+  $from: ResolvedPos,
+  $to: ResolvedPos,
+): [number, number] {
+  return [$from.start(), $to.end()]
+}
+
+function getTextRanges(
+  doc: ProsemirrorNode,
+  from: number,
+  to: number,
+): Array<[number, number]> {
+  const $from = doc.resolve(from)
+  const $to = doc.resolve(to)
+
+  if ($from.sameParent($to) && $from.parent.isTextblock) {
+    return [getInlineTextRange($from, $to)]
+  } else {
+    const nodeRange = $from.blockRange($to)
+    if (!nodeRange) {
+      return []
+    }
+
+    return getSpanTextRanges($from, $to)
+  }
+}
+
+function getMapRange(
+  transactions: readonly Transaction[],
+  oldState: EditorState,
+  newState: EditorState,
+) {
+  let lo = oldState.selection.from
+  let hi = oldState.selection.to
+
+  for (const tr of transactions) {
+    for (const map of tr.mapping.maps) {
+      lo = map.map(lo)
+      hi = map.map(hi)
+
+      map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+        lo = Math.min(lo, hi, newStart)
+        hi = Math.max(lo, hi, newEnd)
+      })
+    }
+  }
+
+  lo = Math.min(lo, hi, newState.selection.from)
+  hi = Math.min(lo, hi, newState.selection.to)
+
+  return [lo, hi] as const
+}
+
+export function getCheckRanges(
+  transactions: readonly Transaction[],
+  oldState: EditorState,
+  newState: EditorState,
+): Array<[number, number]> {
+  const [from, to] = getMapRange(transactions, oldState, newState)
+  return getTextRanges(newState.doc, from, to)
+}

package/src/mark-rule/types.ts

@@ -0,0 +1,30 @@
+import type {
+  Attrs,
+  MarkType,
+} from '@prosekit/pm/model'
+
+/**
+ * The options for {@link defineMarkRule}.
+ *
+ * @public
+ */
+export interface MarkRuleOptions {
+  /**
+   * The regular expression to match against. It must has a `g` flag to match
+   * all instances of the mark.
+   */
+  regex: RegExp
+
+  /**
+   * The mark type to apply to the matched text.
+   */
+  type: string | MarkType
+
+  /**
+   * Attributes to set on the mark. If a function is provided, it will be called
+   * with the matched result from the regular expression.
+   *
+   * @default null
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+}

package/src/mention/index.ts

@@ -0,0 +1,90 @@
+import {
+  defineCommands,
+  defineNodeSpec,
+  insertNode,
+  union,
+  type Extension,
+  type Union,
+} from '@prosekit/core'
+
+export interface MentionAttrs {
+  id: string
+  value: string
+  kind: string
+}
+
+/**
+ * @internal
+ */
+export type MentionSpecExtension = Extension<{
+  Nodes: {
+    mention: MentionAttrs
+  }
+}>
+
+/**
+ * @public
+ */
+export function defineMentionSpec(): MentionSpecExtension {
+  return defineNodeSpec<'mention', MentionAttrs>({
+    name: 'mention',
+    atom: true,
+    group: 'inline',
+    attrs: {
+      id: { validate: 'string' },
+      value: { validate: 'string' },
+      kind: { default: '', validate: 'string' },
+    },
+    inline: true,
+    leafText: (node) => (node.attrs as MentionAttrs).value.toString(),
+    parseDOM: [
+      {
+        tag: `span[data-mention]`,
+        getAttrs: (dom: HTMLElement): MentionAttrs => ({
+          id: dom.getAttribute('data-id') || '',
+          kind: dom.getAttribute('data-mention') || '',
+          value: dom.textContent || '',
+        }),
+      },
+    ],
+    toDOM(node) {
+      return [
+        'span',
+        {
+          'data-id': (node.attrs as MentionAttrs).id.toString(),
+          'data-mention': (node.attrs as MentionAttrs).kind.toString(),
+        },
+        (node.attrs as MentionAttrs).value.toString(),
+      ]
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export type MentionCommandsExtension = Extension<{
+  Commands: {
+    insertMention: [attrs: MentionAttrs]
+  }
+}>
+
+export function defineMentionCommands(): MentionCommandsExtension {
+  return defineCommands({
+    insertMention: (attrs: MentionAttrs) => {
+      return insertNode({ type: 'mention', attrs })
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export type MentionExtension = Union<[MentionSpecExtension, MentionCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineMention(): MentionExtension {
+  return union(defineMentionSpec(), defineMentionCommands())
+}

package/src/mod-click-prevention/index.ts

@@ -0,0 +1,35 @@
+import {
+  definePlugin,
+  isApple,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  Plugin,
+  PluginKey,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+/**
+ * @internal
+ */
+export type ModClickPreventionExtension = PlainExtension
+
+/**
+ * By default, clicking a node while holding the mod key will select the node. This
+ * extension disables that behavior.
+ *
+ * @public
+ */
+export function defineModClickPrevention(): ModClickPreventionExtension {
+  return definePlugin(new Plugin({ key, props: { handleClick } }))
+}
+
+const key = new PluginKey('prosekit-mod-click-prevention')
+
+function handleClick(_view: EditorView, _pos: number, event: MouseEvent) {
+  return !!event[selectNodeModifier]
+}
+
+const selectNodeModifier: 'metaKey' | 'ctrlKey' = isApple
+  ? 'metaKey'
+  : 'ctrlKey'

package/src/paragraph/index.ts

@@ -0,0 +1,7 @@
+export { defineParagraph } from './paragraph'
+export type { ParagraphExtension } from './paragraph'
+export { defineParagraphCommands } from './paragraph-commands'
+export type { ParagraphCommandsExtension } from './paragraph-commands'
+export { defineParagraphKeymap } from './paragraph-keymap'
+export { defineParagraphSpec } from './paragraph-spec'
+export type { ParagraphSpecExtension } from './paragraph-spec'

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
+}