@prosekit/extensions 0.11.4 → 0.11.6

package/src/list/style.css

@@ -0,0 +1,128 @@
+:root {
+  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
+}
+
+.prosemirror-flat-list {
+  & {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & > .list-marker {
+    position: absolute;
+    left: 0;
+    width: 1.5em;
+    width: 1lh;
+    height: 1.5em;
+    height: 1lh;
+    text-align: center;
+  }
+
+  & > .list-content {
+    margin-left: 1.5em;
+    margin-left: 1lh;
+  }
+
+  &[data-list-kind="bullet"] > .list-marker,
+  &[data-list-kind="toggle"] > .list-marker {
+    background-color: currentColor;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  &[data-list-kind="bullet"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-bullet-icon);
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-toggle-open-icon);
+    }
+
+    &[data-list-collapsable][data-list-collapsed] > .list-marker {
+      mask-image: var(--prosekit-list-toggle-closed-icon);
+    }
+  }
+
+  &[data-list-kind="ordered"] {
+    /*
+      Ensure that the counters in children don't escape, so that the sub lists
+      won't affect the counter of the parent list.
+  
+      See also https://github.com/ocavue/prosemirror-flat-list/issues/23
+      */
+    & > * {
+      contain: style;
+    }
+
+    &::before {
+      position: absolute;
+      right: calc(100% - 1.5em);
+      right: calc(100% - 1lh);
+      content: counter(prosemirror-flat-list-counter, decimal) ". ";
+      font-variant-numeric: tabular-nums;
+    }
+    counter-increment: prosemirror-flat-list-counter;
+
+    /* 
+      Reset the counter for the first list node in the sequence.
+      */
+    &:first-child,
+    :not(&) + & {
+      counter-reset: prosemirror-flat-list-counter;
+
+      /* 
+        If the first list node has a custom order number, set the counter to that value.
+        */
+      &[data-list-order] {
+        @supports (counter-set: prosemirror-flat-list-counter 1) {
+          counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+
+        /* 
+          Safari older than version 17.2 doesn't support `counter-set` 
+          */
+        @supports not (counter-set: prosemirror-flat-list-counter 1) {
+          counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+      }
+    }
+  }
+
+  &[data-list-kind="task"] {
+    & > .list-marker {
+      &,
+      & * {
+        /* Make sure that the checkbox is at the center */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    &[data-list-collapsable] > .list-marker {
+      cursor: pointer;
+    }
+    &:not([data-list-collapsable]) > .list-marker {
+      opacity: 40%;
+      pointer-events: none;
+    }
+
+    /* If collapsed, hide the second and futher children */
+    &[data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
+      display: none;
+    }
+  }
+}

package/src/loro/index.ts

@@ -0,0 +1,17 @@
+export type {
+  LoroSyncPluginProps,
+  LoroUndoPluginProps,
+} from 'loro-prosemirror'
+export {
+  defineLoro,
+  type LoroExtension,
+  type LoroOptions,
+} from './loro'
+export { defineLoroCommands } from './loro-commands'
+export {
+  defineLoroCursorPlugin,
+  type LoroCursorOptions,
+} from './loro-cursor-plugin'
+export { defineLoroKeymap } from './loro-keymap'
+export { defineLoroSyncPlugin } from './loro-sync-plugin'
+export { defineLoroUndoPlugin } from './loro-undo-plugin'

package/src/loro/loro-commands.ts

@@ -0,0 +1,27 @@
+import {
+  defineCommands,
+  type Extension,
+} from '@prosekit/core'
+import {
+  redo,
+  undo,
+} from 'loro-prosemirror'
+
+const commands = {
+  undo: () => undo,
+  redo: () => redo,
+} as const
+
+/**
+ * @internal
+ */
+export type LoroCommandsExtension = Extension<{
+  Commands: {
+    undo: []
+    redo: []
+  }
+}>
+
+export function defineLoroCommands(): LoroCommandsExtension {
+  return defineCommands(commands)
+}

package/src/loro/loro-cursor-plugin.ts

@@ -0,0 +1,28 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import type {
+  EditorState,
+  Selection,
+} from '@prosekit/pm/state'
+import type { DecorationAttrs } from '@prosekit/pm/view'
+import type { PeerID } from 'loro-crdt'
+import {
+  LoroCursorPlugin,
+  type CursorAwareness,
+} from 'loro-prosemirror'
+
+export interface LoroCursorOptions {
+  awareness: CursorAwareness
+  getSelection?: (state: EditorState) => Selection
+  createCursor?: (user: PeerID) => Element
+  createSelection?: (user: PeerID) => DecorationAttrs
+}
+
+export function defineLoroCursorPlugin(
+  options: LoroCursorOptions,
+): PlainExtension {
+  const { awareness, ...rest } = options
+  return definePlugin(LoroCursorPlugin(awareness, rest))
+}

package/src/loro/loro-keymap.ts

@@ -0,0 +1,23 @@
+import {
+  defineKeymap,
+  isApple,
+  type Keymap,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  redo,
+  undo,
+} from 'loro-prosemirror'
+
+const keymap: Keymap = {
+  'Mod-z': undo,
+  'Shift-Mod-z': redo,
+}
+
+if (!isApple) {
+  keymap['Mod-y'] = redo
+}
+
+export function defineLoroKeymap(): PlainExtension {
+  return defineKeymap(keymap)
+}

package/src/loro/loro-sync-plugin.ts

@@ -0,0 +1,14 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  LoroSyncPlugin,
+  type LoroSyncPluginProps,
+} from 'loro-prosemirror'
+
+export function defineLoroSyncPlugin(
+  options: LoroSyncPluginProps,
+): PlainExtension {
+  return definePlugin(LoroSyncPlugin(options))
+}

package/src/loro/loro-undo-plugin.ts

@@ -0,0 +1,12 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  LoroUndoPlugin,
+  type LoroUndoPluginProps,
+} from 'loro-prosemirror'
+
+export function defineLoroUndoPlugin(options: LoroUndoPluginProps): PlainExtension {
+  return definePlugin(LoroUndoPlugin(options))
+}

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