@prosekit/extensions 0.11.3 → 0.11.5

package/src/loro/loro.ts

@@ -0,0 +1,75 @@
+import {
+  Priority,
+  union,
+  withPriority,
+  type PlainExtension,
+  type Union,
+} from '@prosekit/core'
+import type {
+  CursorAwareness,
+  LoroDocType,
+  LoroSyncPluginProps,
+  LoroUndoPluginProps,
+} from 'loro-prosemirror'
+
+import {
+  defineLoroCommands,
+  type LoroCommandsExtension,
+} from './loro-commands'
+import {
+  defineLoroCursorPlugin,
+  type LoroCursorOptions,
+} from './loro-cursor-plugin'
+import { defineLoroKeymap } from './loro-keymap'
+import { defineLoroSyncPlugin } from './loro-sync-plugin'
+import { defineLoroUndoPlugin } from './loro-undo-plugin'
+
+export interface LoroOptions {
+  /**
+   * The Loro instance handles the state of shared data.
+   */
+  doc: LoroDocType
+
+  /**
+   * The Awareness instance.
+   */
+  awareness: CursorAwareness
+
+  /**
+   * Extra options for `LoroSyncPlugin`.
+   */
+  sync?: Omit<LoroSyncPluginProps, 'doc'>
+
+  /**
+   * Extra options for the `LoroUndoPlugin`.
+   */
+  undo?: Omit<LoroUndoPluginProps, 'doc'>
+
+  /**
+   * Extra options for `LoroCursorPlugin`.
+   */
+  cursor?: Omit<LoroCursorOptions, 'awareness'>
+}
+
+/**
+ * @internal
+ */
+export type LoroExtension = Union<[LoroCommandsExtension, PlainExtension]>
+
+/**
+ * @public
+ */
+export function defineLoro(options: LoroOptions): LoroExtension {
+  const { doc, awareness, sync, undo, cursor } = options
+
+  return withPriority(
+    union([
+      defineLoroKeymap(),
+      defineLoroCommands(),
+      defineLoroCursorPlugin({ ...cursor, awareness }),
+      defineLoroUndoPlugin({ ...undo, doc }),
+      defineLoroSyncPlugin({ ...sync, doc }),
+    ]),
+    Priority.high,
+  )
+}

package/src/loro/style.css

@@ -0,0 +1,33 @@
+.ProseMirror-loro-cursor:first-child {
+  margin-top: 16px;
+}
+
+/* This gives the remote user caret. The colors are automatically overwritten */
+.ProseMirror-loro-cursor {
+  position: relative;
+  margin-right: -1px;
+  margin-left: -1px;
+  border-right: 1px solid black;
+  border-left: 1px solid black;
+  border-color: orange;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* This renders the username above the caret */
+.ProseMirror-loro-cursor > div {
+  position: absolute;
+  top: -1.05em;
+  left: -1px;
+  padding-right: 2px;
+  padding-left: 2px;
+  background-color: rgb(250, 129, 0);
+  color: white;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 13px;
+  line-height: normal;
+  font-family: serif;
+  white-space: nowrap;
+  user-select: none;
+}

package/src/mark-rule/apply.ts

@@ -0,0 +1,129 @@
+import {
+  getMarkType,
+  maybeRun,
+  OBJECT_REPLACEMENT_CHARACTER,
+} from '@prosekit/core'
+import type {
+  Mark,
+  ProseMirrorNode,
+} from '@prosekit/pm/model'
+import type {
+  EditorState,
+  Transaction,
+} from '@prosekit/pm/state'
+
+import { getCheckRanges } from './range'
+import type { MarkRuleOptions } from './types'
+
+type MarkRange = [from: number, to: number, mark: Mark]
+
+function getExpectedMarkings(
+  rules: MarkRuleOptions[],
+  doc: ProseMirrorNode,
+  from: number,
+  to: number,
+): MarkRange[] {
+  const text = doc.textBetween(from, to, null, OBJECT_REPLACEMENT_CHARACTER)
+  const ranges: MarkRange[] = []
+
+  for (const rule of rules) {
+    rule.regex.lastIndex = 0
+    const matches = text.matchAll(rule.regex)
+    const markType = getMarkType(doc.type.schema, rule.type)
+
+    for (const match of matches) {
+      const index = match.index
+      if (index == null) continue
+      const attrs = maybeRun(rule.attrs, match)
+      const mark = markType.create(attrs)
+      ranges.push([from + index, from + index + match[0].length, mark])
+    }
+  }
+
+  // Sort by start position. If start positions are equal, the longer match
+  // should be prioritized.
+  ranges.sort((a, b) => a[0] - b[0] || b[1] - a[1])
+
+  // Remove overlapped marks.
+  const result: MarkRange[] = []
+  let freeIndex = 0
+
+  for (const range of ranges) {
+    if (range[0] >= freeIndex) {
+      result.push(range)
+      freeIndex = range[1]
+    }
+  }
+
+  return result
+}
+
+function getReceivedMarkings(
+  rules: MarkRuleOptions[],
+  doc: ProseMirrorNode,
+  from: number,
+  to: number,
+): MarkRange[] {
+  const result: MarkRange[] = []
+  const schema = doc.type.schema
+  const markTypes = rules.map((rule) => getMarkType(schema, rule.type))
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (!node.isInline) {
+      return
+    }
+
+    for (const markType of markTypes) {
+      const mark = node.marks.find((mark) => mark.type === markType)
+      if (mark) {
+        result.push([pos, pos + node.nodeSize, mark])
+      }
+    }
+  })
+  return result
+}
+
+function markRangeEquals(a: MarkRange, b: MarkRange): boolean {
+  return a[0] === b[0] && a[1] === b[1] && a[2].eq(b[2])
+}
+
+function markRangeDiffs(a: MarkRange[], b: MarkRange[]): MarkRange[] {
+  return a.filter((x) => !b.some((y) => markRangeEquals(x, y)))
+}
+
+export function applyMarkRules(
+  rules: MarkRuleOptions[],
+  transactions: readonly Transaction[],
+  oldState: EditorState,
+  newState: EditorState,
+): Transaction | null {
+  if (transactions.length === 0 || transactions.every((tr) => !tr.docChanged)) {
+    return null
+  }
+
+  const ranges = getCheckRanges(transactions, oldState, newState)
+
+  const toRemove: MarkRange[] = []
+  const toCreate: MarkRange[] = []
+
+  for (const [from, to] of ranges) {
+    const expected = getExpectedMarkings(rules, newState.doc, from, to)
+    const received = getReceivedMarkings(rules, newState.doc, from, to)
+
+    toRemove.push(...markRangeDiffs(received, expected))
+    toCreate.push(...markRangeDiffs(expected, received))
+  }
+
+  if (toCreate.length === 0 && toRemove.length === 0) {
+    return null
+  }
+
+  const tr = newState.tr
+  for (const [from, to, mark] of toRemove) {
+    tr.removeMark(from, to, mark)
+  }
+  for (const [from, to, mark] of toCreate) {
+    tr.addMark(from, to, mark)
+  }
+  return tr
+}

package/src/mark-rule/index.ts

@@ -0,0 +1,2 @@
+export { defineMarkRule } from './mark-rule'
+export type { MarkRuleOptions } from './types'

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

@@ -0,0 +1,123 @@
+import {
+  createEditor,
+  defineBaseCommands,
+  defineMarkSpec,
+  elementFromNode,
+  union,
+  type Editor,
+} from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { defineText } from '../text'
+
+import { defineMarkRule } from './index'
+
+describe('defineMarkRule', () => {
+  const editor = createEditor({
+    extension: union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseCommands(),
+      defineMarkSpec({
+        name: 'tag' as const,
+        toDOM: () => {
+          return ['mark-tag', 0]
+        },
+      }),
+      defineMarkRule({
+        regex: /#\d+/g,
+        type: 'tag',
+      }),
+      defineMarkSpec({
+        name: 'link' as const,
+        toDOM: () => {
+          return ['mark-link', 0]
+        },
+      }),
+      defineMarkRule({
+        regex: /example\.com(#\d+)?/g,
+        type: 'link',
+      }),
+      defineMarkSpec({
+        name: 'email' as const,
+        toDOM: () => {
+          return ['mark-email', 0]
+        },
+      }),
+      defineMarkRule({
+        regex: /[a-z]+@example\.com/g,
+        type: 'email',
+      }),
+    ),
+  })
+
+  const triggerMarkRule = (doc: ProseMirrorNode): string => {
+    setDoc(editor, doc)
+    editor.commands.insertText({ from: 1, text: ' ' })
+    return elementFromNode(editor.state.doc).innerHTML
+  }
+
+  const n = { ...editor.nodes, p: editor.nodes.paragraph }
+
+  it('can match tag', () => {
+    const doc = n.doc(n.p('#12345'))
+    const html = triggerMarkRule(doc)
+
+    expect(html).toMatchInlineSnapshot(`"<p> <mark-tag>#12345</mark-tag></p>"`)
+  })
+
+  it('can match link', () => {
+    const doc = n.doc(n.p('example.com'))
+    const html = triggerMarkRule(doc)
+
+    expect(html).toMatchInlineSnapshot(
+      `"<p> <mark-link>example.com</mark-link></p>"`,
+    )
+  })
+
+  it('can match link with anchor', () => {
+    const doc = n.doc(n.p('example.com#12345'))
+    const html = triggerMarkRule(doc)
+
+    expect(html).toMatchInlineSnapshot(
+      `"<p> <mark-link>example.com#12345</mark-link></p>"`,
+    )
+  })
+
+  it('can match email', () => {
+    const doc = n.doc(n.p('hello@example.com'))
+    const html = triggerMarkRule(doc)
+
+    expect(html).toMatchInlineSnapshot(
+      `"<p> <mark-email>hello@example.com</mark-email></p>"`,
+    )
+  })
+
+  it('can match email and tag', () => {
+    const doc = n.doc(n.p('hello@example.com#12345'))
+    const html = triggerMarkRule(doc)
+
+    expect(html).toMatchInlineSnapshot(
+      `"<p> <mark-email>hello@example.com</mark-email><mark-tag>#12345</mark-tag></p>"`,
+    )
+  })
+})
+
+function setDoc(editor: Editor, doc: ProseMirrorNode) {
+  if (!editor.mounted) {
+    const div = document.createElement('div')
+    editor.mount(div)
+  }
+
+  const tr = editor.state.tr
+  tr.replaceWith(0, tr.doc.content.size, doc.content)
+  editor.view.dispatch(tr)
+}

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

@@ -0,0 +1,48 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  pluginFacet,
+  type PlainExtension,
+  type PluginPayload,
+} from '@prosekit/core'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+  type EditorState,
+  type Transaction,
+} from '@prosekit/pm/state'
+
+import { applyMarkRules } from './apply'
+import type { MarkRuleOptions } from './types'
+
+/**
+ * A mark rule is something that can automatically apply marks to text if it
+ * matches a certain pattern, and remove them if it doesn't match anymore.
+ */
+export function defineMarkRule(options: MarkRuleOptions): PlainExtension {
+  return defineFacetPayload(markRuleFacet, [options]) as PlainExtension
+}
+
+const markRuleFacet = defineFacet<MarkRuleOptions, PluginPayload>({
+  reduce: () => {
+    let rules: MarkRuleOptions[] = []
+
+    const plugin = new ProseMirrorPlugin({
+      key: new PluginKey('prosekit-mark-rule'),
+      appendTransaction: (
+        transactions: readonly Transaction[],
+        oldState: EditorState,
+        newState: EditorState,
+      ) => {
+        return applyMarkRules(rules, transactions, oldState, newState)
+      },
+    })
+
+    return function reducer(input) {
+      rules = input
+      return plugin
+    }
+  },
+
+  parent: pluginFacet,
+})

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'