@prosekit/extensions 0.11.3 → 0.11.5

package/src/input-rule/index.ts

@@ -0,0 +1,237 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  getMarkType,
+  getNodeType,
+  isMarkAbsent,
+  maybeRun,
+  pluginFacet,
+  type PlainExtension,
+  type PluginPayload,
+} from '@prosekit/core'
+import {
+  InputRule,
+  inputRules,
+  textblockTypeInputRule,
+  wrappingInputRule,
+} from '@prosekit/pm/inputrules'
+import type {
+  Attrs,
+  MarkType,
+  NodeType,
+  ProseMirrorNode,
+  Schema,
+} from '@prosekit/pm/model'
+import type { Plugin } from '@prosekit/pm/state'
+
+/**
+ * Defines an input rule extension.
+ *
+ * @param rule - The ProseMirror input rule to add.
+ *
+ * @public
+ */
+export function defineInputRule(rule: InputRule): PlainExtension {
+  return defineInputRuleFacetPayload(() => rule)
+}
+
+/**
+ * Options for {@link defineMarkInputRule}.
+ *
+ * @public
+ */
+export interface MarkInputRuleOptions {
+  /**
+   * The regular expression to match against, which should end with `$` and has
+   * exactly one capture group. All other matched text outside the capture group
+   * will be deleted.
+   */
+  regex: RegExp
+
+  /**
+   * The type of mark to set.
+   */
+  type: string | MarkType
+
+  /**
+   * Attributes to set on the mark.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+
+  /**
+   * Whether this rule should fire inside marks marked as [code](https://prosemirror.net/docs/ref/#model.MarkSpec.code).
+   *
+   * @default `false`
+   */
+  inCodeMark?: boolean
+}
+
+/**
+ * @internal
+ */
+export function createMarkInputRule({
+  regex,
+  type,
+  attrs = null,
+  inCodeMark = false,
+}: MarkInputRuleOptions): InputRule {
+  const rule = new InputRule(regex, (state, match, start, end) => {
+    const { tr, schema } = state
+    const [fullText, markText] = match
+
+    if (!markText) {
+      return null
+    }
+
+    const markStart = start + fullText.indexOf(markText)
+    const markEnd = markStart + markText.length
+
+    if (!(start <= markStart && markStart < markEnd && markEnd <= end)) {
+      // Incorrect regex.
+      return null
+    }
+
+    const markType = getMarkType(schema, type)
+    const mark = markType.create(maybeRun(attrs, match))
+
+    if (!isMarkAbsent(tr.doc, markStart, markEnd, markType, attrs)) {
+      // The mark is already active.
+      return null
+    }
+
+    const initialStoredMarks = tr.storedMarks ?? []
+
+    tr.addMark(markStart, markEnd, mark)
+
+    if (markEnd < end) {
+      tr.delete(markEnd, end)
+    }
+    if (start < markStart) {
+      tr.delete(start, markStart)
+    }
+
+    // Make sure not to reactivate any marks which had previously been
+    // deactivated. By keeping track of the initial stored marks we are able to
+    // discard any unintended consequences of deleting text and adding it again.
+    tr.setStoredMarks(initialStoredMarks)
+
+    return tr
+  }, { inCodeMark })
+
+  return rule
+}
+
+/**
+ * Defines an input rule for automatically adding inline marks when a given
+ * pattern is typed.
+ *
+ * @public
+ */
+export function defineMarkInputRule(
+  options: MarkInputRuleOptions,
+): PlainExtension {
+  return defineInputRule(createMarkInputRule(options))
+}
+
+/**
+ * Defines an input rule that changes the type of a textblock when the matched
+ * text is typed into it.
+ *
+ * See also [textblockTypeInputRule](https://prosemirror.net/docs/ref/#inputrules.textblockTypeInputRule)
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineTextBlockInputRule({
+  regex,
+  type,
+  attrs,
+}: {
+  /**
+   * The regular expression to match against, which should end with `$`. It
+   * usually also starts with `^` to that it is only matched at the start of a
+   * textblock.
+   */
+  regex: RegExp
+
+  /**
+   * The node type to replace the matched text with.
+   */
+  type: string | NodeType
+
+  /**
+   * Attributes to set on the node.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+}): PlainExtension {
+  return defineInputRuleFacetPayload(({ schema }): InputRule => {
+    const nodeType = getNodeType(schema, type)
+    return textblockTypeInputRule(regex, nodeType, attrs)
+  })
+}
+
+/**
+ * Defines an input rule for automatically wrapping a textblock when a given
+ * string is typed.
+ *
+ * See also [wrappingInputRule](https://prosemirror.net/docs/ref/#inputrules.wrappingInputRule)
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineWrappingInputRule({
+  regex,
+  type,
+  attrs,
+  join,
+}: {
+  /**
+   * The regular expression to match against, which should end with `$`. It
+   * usually also starts with `^` to that it is only matched at the start of a
+   * textblock.
+   */
+  regex: RegExp
+
+  /**
+   * The type of node to wrap in.
+   */
+  type: string | NodeType
+
+  /**
+   * Attributes to set on the node.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+
+  /**
+   * By default, if there's a node with the same type above the newly wrapped
+   * node, the rule will try to
+   * [join](https://prosemirror.net/docs/ref/#transform.Transform.join) those
+   * two nodes. You can pass a join predicate, which takes a regular expression
+   * match and the node before the wrapped node, and can return a boolean to
+   * indicate whether a join should happen.
+   */
+  join?: (match: RegExpMatchArray, node: ProseMirrorNode) => boolean
+}): PlainExtension {
+  return defineInputRuleFacetPayload(({ schema }): InputRule => {
+    const nodeType = getNodeType(schema, type)
+    return wrappingInputRule(regex, nodeType, attrs, join)
+  })
+}
+
+function defineInputRuleFacetPayload(input: InputRulePayload): PlainExtension {
+  return defineFacetPayload(inputRuleFacet, [input]) as PlainExtension
+}
+
+type InputRulePayload = (context: { schema: Schema }) => InputRule
+
+const inputRuleFacet = defineFacet<InputRulePayload, PluginPayload>({
+  reducer: (inputs: InputRulePayload[]): PluginPayload => {
+    return (context): Plugin[] => {
+      const rules: InputRule[] = inputs.flatMap((callback) => callback(context))
+      return [inputRules({ rules })]
+    }
+  },
+  parent: pluginFacet,
+})

package/src/italic/index.ts

@@ -0,0 +1,14 @@
+export {
+  defineItalic,
+  type ItalicExtension,
+} from './italic'
+export {
+  defineItalicCommands,
+  type ItalicCommandsExtension,
+} from './italic-commands'
+export { defineItalicInputRule } from './italic-input-rule'
+export { defineItalicKeymap } from './italic-keymap'
+export {
+  defineItalicSpec,
+  type ItalicSpecExtension,
+} from './italic-spec'

package/src/italic/italic-commands.spec.ts

@@ -0,0 +1,75 @@
+import {
+  createEditor,
+  defineBaseCommands,
+  union,
+} from '@prosekit/core'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { defineText } from '../text'
+
+import { defineItalic } from './index'
+
+describe('command', () => {
+  const extension = union(
+    defineDoc(),
+    defineParagraph(),
+    defineText(),
+    defineItalic(),
+    defineBaseCommands(),
+  )
+  const editor = createEditor({ extension })
+  const div = document.body.appendChild(document.createElement('div'))
+  editor.mount(div)
+
+  describe('toggleItalic', () => {
+    it('can add and remove italic', () => {
+      editor.commands.insertText({ text: 'Hello world' })
+      editor.commands.selectAll()
+      editor.commands.toggleItalic()
+      expect(editor.view.state.doc.toJSON()).toMatchInlineSnapshot(`
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "marks": [
+                    {
+                      "type": "italic",
+                    },
+                  ],
+                  "text": "Hello world",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "doc",
+        }
+      `)
+      editor.commands.toggleItalic()
+      expect(editor.view.state.doc.toJSON()).toMatchInlineSnapshot(`
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "text": "Hello world",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "doc",
+        }
+      `)
+    })
+  })
+})

package/src/italic/italic-commands.ts

@@ -0,0 +1,23 @@
+import {
+  defineCommands,
+  toggleMark,
+  type Extension,
+} from '@prosekit/core'
+
+/**
+ * @internal
+ */
+export type ItalicCommandsExtension = Extension<{
+  Commands: {
+    toggleItalic: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineItalicCommands(): ItalicCommandsExtension {
+  return defineCommands({
+    toggleItalic: () => toggleMark({ type: 'italic' }),
+  })
+}

package/src/italic/italic-input-rule.spec.ts

@@ -0,0 +1,25 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { inputText } from '../testing/keyboard'
+
+describe('defineItalicInputRule', () => {
+  const { editor, n, m } = setupTest()
+  it('should add italic marks when typing "*"', async () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    await inputText('*word')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('*word')).toJSON(),
+    )
+    await inputText('*')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(m.italic('word'))).toJSON(),
+    )
+  })
+})

package/src/italic/italic-input-rule.ts

@@ -0,0 +1,18 @@
+import {
+  canUseRegexLookbehind,
+  type PlainExtension,
+} from '@prosekit/core'
+
+import { defineMarkInputRule } from '../input-rule'
+
+/**
+ * @internal
+ */
+export function defineItalicInputRule(): PlainExtension {
+  return defineMarkInputRule({
+    regex: canUseRegexLookbehind()
+      ? /(?<=\s|^)\*([^\s*]|[^\s*][^*]*[^\s*])\*$/
+      : /\*([^\s*]|[^\s*][^*]*[^\s*])\*$/,
+    type: 'italic',
+  })
+}

package/src/italic/italic-keymap.ts

@@ -0,0 +1,14 @@
+import {
+  defineKeymap,
+  toggleMark,
+  type PlainExtension,
+} from '@prosekit/core'
+
+/**
+ * @internal
+ */
+export function defineItalicKeymap(): PlainExtension {
+  return defineKeymap({
+    'Mod-i': toggleMark({ type: 'italic' }),
+  })
+}

package/src/italic/italic-spec.ts

@@ -0,0 +1,35 @@
+import {
+  defineMarkSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type ItalicSpecExtension = Extension<{
+  Marks: {
+    italic: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineItalicSpec(): ItalicSpecExtension {
+  return defineMarkSpec({
+    name: 'italic',
+    parseDOM: [
+      { tag: 'i' },
+      { tag: 'em' },
+      { style: 'font-style=italic' },
+      {
+        style: 'font-style=normal',
+        clearMark: (m) => m.type.name === 'italic',
+      },
+    ],
+    toDOM() {
+      return ['em', 0]
+    },
+  })
+}

package/src/italic/italic.ts

@@ -0,0 +1,34 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineItalicCommands,
+  type ItalicCommandsExtension,
+} from './italic-commands'
+import { defineItalicInputRule } from './italic-input-rule'
+import { defineItalicKeymap } from './italic-keymap'
+import {
+  defineItalicSpec,
+  type ItalicSpecExtension,
+} from './italic-spec'
+
+/**
+ * @internal
+ */
+export type ItalicExtension = Union<
+  [ItalicSpecExtension, ItalicCommandsExtension]
+>
+
+/**
+ * @public
+ */
+export function defineItalic(): ItalicExtension {
+  return union(
+    defineItalicSpec(),
+    defineItalicCommands(),
+    defineItalicKeymap(),
+    defineItalicInputRule(),
+  )
+}

package/src/link/index.spec.ts

@@ -0,0 +1,88 @@
+import { userEvent } from '@vitest/browser/context'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('defineLinkCommands', () => {
+  const { editor, n, m } = setupTest()
+  const href = 'https://example.com'
+  const doc1 = n.doc(n.p('<a>foo<b> bar'))
+  const doc2 = n.doc(n.p(m.link({ href }, '<a>foo<b>'), ' bar'))
+  const doc3 = n.doc(n.p(m.link({ href }, 'f<a>oo'), ' bar'))
+
+  it('should add a link', () => {
+    editor.set(doc1)
+    editor.commands.addLink({ href })
+    expect(editor.view.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('should remove a link', () => {
+    editor.set(doc1)
+    editor.commands.removeLink()
+    expect(editor.view.state.doc.toJSON()).toEqual(doc1.toJSON())
+  })
+
+  it('should toggle a link', () => {
+    editor.set(doc1)
+    editor.commands.toggleLink({ href })
+    expect(editor.view.state.doc.toJSON()).toEqual(doc2.toJSON())
+    editor.commands.toggleLink({ href })
+    expect(editor.view.state.doc.toJSON()).toEqual(doc1.toJSON())
+  })
+
+  it('should expand the selection to cover the link', () => {
+    editor.set(doc3)
+    expect(editor.view.state.selection.empty).toBe(true)
+    editor.commands.expandLink()
+    expect(editor.view.state.selection.empty).toBe(false)
+    expect(editor.view.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+})
+
+describe('defineLinkInputRule', () => {
+  it('should insert a link after pressing Space', async () => {
+    const { editor } = setupTest()
+    await userEvent.keyboard('https://example.com')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph("https://example.com"))"`,
+    )
+    await userEvent.keyboard(' ')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph(link("https://example.com"), " "))"`,
+    )
+  })
+
+  it('should handle a link before a period', async () => {
+    const { editor } = setupTest()
+    await userEvent.keyboard('https://example.com')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph("https://example.com"))"`,
+    )
+    await userEvent.keyboard('.')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph("https://example.com."))"`,
+    )
+    await userEvent.keyboard(' ')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph(link("https://example.com"), ". "))"`,
+    )
+  })
+})
+
+describe('defineLinkEnterRule', () => {
+  it('should insert a link after pressing Enter', async () => {
+    const { editor } = setupTest()
+    await userEvent.keyboard('https://example.com')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph("https://example.com"))"`,
+    )
+    await userEvent.keyboard('{Enter}')
+    expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
+      `"doc(paragraph(link("https://example.com")), paragraph)"`,
+    )
+  })
+})