@prosekit/extensions 0.11.4 → 0.11.6

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

package/src/link/index.ts

@@ -0,0 +1,156 @@
+import {
+  addMark,
+  defineCommands,
+  defineMarkSpec,
+  expandMark,
+  removeMark,
+  toggleMark,
+  union,
+  type Extension,
+  type PlainExtension,
+  type Union,
+} from '@prosekit/core'
+import { InputRule } from '@prosekit/pm/inputrules'
+
+import { defineEnterRule } from '../enter-rule'
+import { defineInputRule } from '../input-rule'
+import { defineMarkRule } from '../mark-rule'
+
+import { defineLinkPasteRule } from './link-paste-rule'
+import {
+  LINK_ENTER_RE,
+  LINK_INPUT_RE,
+  LINK_MARK_RE,
+} from './link-regex'
+import type { LinkAttrs } from './link-types'
+
+export { defineLinkPasteRule }
+export type { LinkAttrs }
+
+/**
+ * @internal
+ */
+export type LinkSpecExtension = Extension<{
+  Marks: {
+    link: LinkAttrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineLinkSpec(): LinkSpecExtension {
+  return defineMarkSpec<'link', LinkAttrs>({
+    name: 'link',
+    inclusive: false,
+    attrs: {
+      href: { validate: 'string' },
+      target: { default: null, validate: 'string|null' },
+      rel: { default: null, validate: 'string|null' },
+    },
+    parseDOM: [
+      {
+        tag: 'a[href]',
+        getAttrs: (dom: HTMLElement) => {
+          return {
+            href: dom.getAttribute('href') || '',
+            target: dom.getAttribute('target') || null,
+            rel: dom.getAttribute('rel') || null,
+          }
+        },
+      },
+    ],
+    toDOM(node) {
+      const { href, target, rel } = node.attrs as LinkAttrs
+      return ['a', { href, target, rel }, 0]
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export type LinkCommandsExtension = Extension<{
+  Commands: {
+    addLink: [attrs: LinkAttrs]
+    removeLink: []
+    toggleLink: [attrs: LinkAttrs]
+    expandLink: []
+  }
+}>
+
+export function defineLinkCommands(): LinkCommandsExtension {
+  return defineCommands({
+    addLink: (attrs: LinkAttrs) => addMark({ type: 'link', attrs }),
+    removeLink: () => removeMark({ type: 'link' }),
+    toggleLink: (attrs: LinkAttrs) => toggleMark({ type: 'link', attrs }),
+    expandLink: () => expandMark({ type: 'link' }),
+  })
+}
+
+/**
+ * Apply link marks after pressing Space.
+ *
+ * @internal
+ */
+export function defineLinkInputRule(): PlainExtension {
+  return defineInputRule(
+    new InputRule(LINK_INPUT_RE, (state, match, from) => {
+      const href = match[1]
+      if (!href) return null
+
+      const mark = state.schema.marks.link.create({ href })
+      return state.tr.addMark(from, from + href.length, mark).insertText(' ')
+    }),
+  )
+}
+
+/**
+ * Apply link marks after typing Enter.
+ *
+ * @internal
+ */
+export function defineLinkEnterRule(): PlainExtension {
+  return defineEnterRule({
+    regex: LINK_ENTER_RE,
+    handler: ({ state, from, match }) => {
+      const href = match[1]
+      if (!href) return null
+
+      const mark = state.schema.marks.link.create({ href })
+      const tr = state.tr.addMark(from, from + href.length, mark)
+      return tr.docChanged ? tr : null
+    },
+  })
+}
+
+/**
+ * Apply and remove link marks to the text during typing.
+ *
+ * @internal
+ */
+export function defineLinkMarkRule(): PlainExtension {
+  return defineMarkRule({
+    regex: LINK_MARK_RE,
+    type: 'link',
+    attrs: (match) => ({ href: match[1] }),
+  })
+}
+
+/**
+ * @internal
+ */
+export type LinkExtension = Union<[LinkSpecExtension, LinkCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineLink(): LinkExtension {
+  return union(
+    defineLinkSpec(),
+    defineLinkCommands(),
+    defineLinkInputRule(),
+    defineLinkEnterRule(),
+    defineLinkPasteRule(),
+  )
+}

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

@@ -0,0 +1,194 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import {
+  pasteHTML,
+  pasteText,
+} from '../testing/clipboard'
+
+describe('defineLinkPasteRule', () => {
+  const { editor, n, m } = setupTest()
+
+  it('should convert URLs to links when pasting plain text', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Visit https://example.com for more info</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Visit ',
+        m.link({ href: 'https://example.com' }, 'https://example.com'),
+        ' for more info',
+      )).toJSON(),
+    )
+  })
+
+  it('should handle multiple URLs in pasted text', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Check https://google.com and https://github.com</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Check ',
+        m.link({ href: 'https://google.com' }, 'https://google.com'),
+        ' and ',
+        m.link({ href: 'https://github.com' }, 'https://github.com'),
+      )).toJSON(),
+    )
+  })
+
+  it('should handle URLs without protocol', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Visit example.com for details</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Visit ',
+        m.link({ href: 'example.com' }, 'example.com'),
+        ' for details',
+      )).toJSON(),
+    )
+  })
+
+  it('should not modify text without URLs', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteText(editor.view, 'This is just plain text without any links')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('This is just plain text without any links')).toJSON(),
+    )
+  })
+
+  it('should preserve existing marks when adding links', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Visit <strong>https://example.com</strong> for info</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Visit ',
+        m.bold(m.link({ href: 'https://example.com' }, 'https://example.com')),
+        ' for info',
+      )).toJSON(),
+    )
+  })
+
+  it('should not convert URLs inside existing links', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p><a href="https://google.com">Visit https://example.com for more</a></p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        m.link({ href: 'https://google.com' }, 'Visit https://example.com for more'),
+      )).toJSON(),
+    )
+  })
+
+  it('should not convert URLs inside code blocks', () => {
+    const doc = n.doc(n.codeBlock('<a>'))
+    editor.set(doc)
+
+    pasteText(editor.view, 'https://example.com')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.codeBlock('https://example.com')).toJSON(),
+    )
+  })
+
+  it('should not convert URLs inside code marks', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p><code>https://example.com</code></p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(m.code('https://example.com'))).toJSON(),
+    )
+  })
+
+  it('should handle URLs with paths and query parameters', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Visit https://example.com/path?param=value#section</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Visit ',
+        m.link({ href: 'https://example.com/path?param=value#section' }, 'https://example.com/path?param=value#section'),
+      )).toJSON(),
+    )
+  })
+
+  it('should handle URLs at the beginning of text', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>https://example.com is a great site</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        m.link({ href: 'https://example.com' }, 'https://example.com'),
+        ' is a great site',
+      )).toJSON(),
+    )
+  })
+
+  it('should handle URLs at the end of text', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Check out https://example.com</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Check out ',
+        m.link({ href: 'https://example.com' }, 'https://example.com'),
+      )).toJSON(),
+    )
+  })
+
+  it('should handle URLs with punctuation after them', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<p>Visit https://example.com, it is great!</p>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(
+        'Visit ',
+        m.link({ href: 'https://example.com' }, 'https://example.com'),
+        ', it is great!',
+      )).toJSON(),
+    )
+  })
+
+  it('should handle URLs inside nested block structures', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    pasteHTML(editor.view, '<blockquote><p>Quote: Visit https://example.com for more info</p></blockquote>')
+
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.blockquote(n.p(
+        'Quote: Visit ',
+        m.link({ href: 'https://example.com' }, 'https://example.com'),
+        ' for more info',
+      ))).toJSON(),
+    )
+  })
+})

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

@@ -0,0 +1,22 @@
+import type { PlainExtension } from '@prosekit/core'
+
+import { defineMarkPasteRule } from '../paste-rule'
+
+import { LINK_MARK_RE } from './link-regex'
+import type { LinkAttrs } from './link-types'
+
+/**
+ * @internal
+ */
+export function defineLinkPasteRule(): PlainExtension {
+  return defineMarkPasteRule({
+    type: 'link',
+    regex: LINK_MARK_RE,
+    getAttrs: (match: RegExpExecArray): LinkAttrs | false => {
+      if (match[1]) {
+        return { href: match[1] } satisfies LinkAttrs
+      }
+      return false
+    },
+  })
+}

package/src/link/link-regex.spec.ts

@@ -0,0 +1,82 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { LINK_MARK_RE } from './link-regex'
+
+describe('LINK_MARK_RE', () => {
+  const cases = [
+    ['Not a link', null],
+
+    ['example.com', 'example.com'],
+    ['https://example.com', 'https://example.com'],
+    ['Foo https://example.com Bar', 'https://example.com'],
+    ['https://example.com/', 'https://example.com/'],
+    ['https://example.com/?query=1', 'https://example.com/?query=1'],
+    ['https://example.com/#fragment', 'https://example.com/#fragment'],
+    [
+      'https://example.com/path?query=1#fragment',
+      'https://example.com/path?query=1#fragment',
+    ],
+    [
+      'https://example.com/path?query=1#fragment',
+      'https://example.com/path?query=1#fragment',
+    ],
+    [
+      'Foo https://example.com/path?query=1#fragment Bar',
+      'https://example.com/path?query=1#fragment',
+    ],
+
+    // Ignore the period at the end
+    ['https://example.com.', 'https://example.com'],
+    ['https://example.com.uk', 'https://example.com.uk'],
+
+    // .goog is a TLD
+    ['Foo www.goog', 'www.goog'],
+    // .googl is not a TLD
+    ['Foo www.googl', null],
+    // .google is a TLD
+    ['Foo www.google', 'www.google'],
+
+    // Don't match ? when there is nothing after it
+    ['www.example.com?', 'www.example.com'],
+    ['www.example.com/?', 'www.example.com/'],
+    ['www.example.com/?=', 'www.example.com/?='],
+
+    // Don't match . when there is nothing after it
+    ['www.example.com.', 'www.example.com'],
+    ['www.example.com/.', 'www.example.com/'],
+    ['www.example.com/subpath.', 'www.example.com/subpath'],
+    ['www.example.com/subpath/.', 'www.example.com/subpath/'],
+    ['www.example.com/.gitignore', 'www.example.com/.gitignore'],
+
+    // with ( and )
+    [
+      'https://en.wikipedia.org/wiki/Specials_(Unicode_block)',
+      'https://en.wikipedia.org/wiki/Specials_(Unicode_block)',
+    ],
+
+    // with '
+    [
+      `https://en.wikipedia.org/wiki/The_Power_of_the_Powerless#Havel's_greengrocer`,
+      `https://en.wikipedia.org/wiki/The_Power_of_the_Powerless#Havel's_greengrocer`,
+    ],
+
+    // Trailing punctuation
+    [`www.example.com?a!`, `www.example.com?a`],
+    [`www.example.com?a! `, `www.example.com?a`],
+    [`www.example.com?a!!`, `www.example.com?a`],
+    [`www.example.com?a!b`, `www.example.com?a!b`],
+    [`www.example.com?a!b `, `www.example.com?a!b`],
+    [`www.example.com?a!b! `, `www.example.com?a!b`],
+    [`www.example.com?a!b!! `, `www.example.com?a!b`],
+  ] as const
+
+  it.each(cases)('should handle %s', (str, expected) => {
+    LINK_MARK_RE.lastIndex = 0
+    const received = LINK_MARK_RE.exec(str)?.[0] ?? null
+    expect(received).toEqual(expected)
+  })
+})