@prosekit/extensions 0.11.4 → 0.11.6

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

@@ -0,0 +1,51 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { inputText } from '../testing/keyboard'
+
+describe('defineBoldInputRule', () => {
+  const { editor, n, m } = setupTest()
+  it('should add bold 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('**word*')).toJSON(),
+    )
+
+    await inputText('*')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(m.bold('word'))).toJSON(),
+    )
+  })
+
+  it('should not add bold marks when typing "**" inside a code block', async () => {
+    const doc = n.doc(n.codeBlock('<a>'))
+    editor.set(doc)
+
+    await inputText('**word** ')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.codeBlock('**word** ')).toJSON(),
+    )
+  })
+
+  it('should not add bold marks when typing "**" inside a code mark', async () => {
+    const doc = n.doc(n.p(m.code('code <a>')))
+    editor.set(doc)
+
+    await inputText('**word** ')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(m.code('code **word** '))).toJSON(),
+    )
+  })
+})

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

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

package/src/bold/bold-keymap.ts

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

package/src/bold/bold-spec.ts

@@ -0,0 +1,53 @@
+import {
+  defineMarkSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type BoldSpecExtension = Extension<{
+  Marks: {
+    bold: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineBoldSpec(): BoldSpecExtension {
+  return defineMarkSpec({
+    name: 'bold',
+    parseDOM: [
+      { tag: 'strong' },
+      // This works around a Google Docs misbehavior where
+      // pasted content will be inexplicably wrapped in `<b>`
+      // tags with a font-weight normal.
+      {
+        tag: 'b',
+        getAttrs: (node: string | HTMLElement): null | false => {
+          return (
+            typeof node !== 'string'
+            && node.style.fontWeight !== 'normal'
+            && null
+          )
+        },
+      },
+      { style: 'font-weight=400', clearMark: (m) => m.type.name == 'strong' },
+      {
+        style: 'font-weight',
+        getAttrs: (value: string | HTMLElement): null | false => {
+          return (
+            typeof value === 'string'
+            && /^(bold(er)?|[5-9]\d{2,})$/.test(value)
+            && null
+          )
+        },
+      },
+    ],
+    toDOM() {
+      return ['strong', 0]
+    },
+  })
+}

package/src/bold/bold.ts

@@ -0,0 +1,32 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineBoldCommands,
+  type BoldCommandsExtension,
+} from './bold-commands'
+import { defineBoldInputRule } from './bold-input-rule'
+import { defineBoldKeymap } from './bold-keymap'
+import {
+  defineBoldSpec,
+  type BoldSpecExtension,
+} from './bold-spec'
+
+/**
+ * @internal
+ */
+export type BoldExtension = Union<[BoldSpecExtension, BoldCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineBold(): BoldExtension {
+  return union(
+    defineBoldSpec(),
+    defineBoldCommands(),
+    defineBoldKeymap(),
+    defineBoldInputRule(),
+  )
+}

package/src/bold/index.ts

@@ -0,0 +1,14 @@
+export {
+  defineBold,
+  type BoldExtension,
+} from './bold'
+export {
+  defineBoldCommands,
+  type BoldCommandsExtension,
+} from './bold-commands'
+export { defineBoldInputRule } from './bold-input-rule'
+export { defineBoldKeymap } from './bold-keymap'
+export {
+  defineBoldSpec,
+  type BoldSpecExtension,
+} from './bold-spec'

package/src/code/code-commands.ts

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

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

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

package/src/code/code-keymap.ts

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

package/src/code/code-spec.ts

@@ -0,0 +1,28 @@
+import {
+  defineMarkSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type CodeSpecExtension = Extension<{
+  Marks: {
+    code: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineCodeSpec(): CodeSpecExtension {
+  return defineMarkSpec({
+    name: 'code',
+    parseDOM: [{ tag: 'code' }],
+    code: true,
+    toDOM() {
+      return ['code', 0]
+    },
+  })
+}

package/src/code/code.ts

@@ -0,0 +1,32 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineCodeCommands,
+  type CodeCommandsExtension,
+} from './code-commands'
+import { defineCodeInputRule } from './code-input-rule'
+import { defineCodeKeymap } from './code-keymap'
+import {
+  defineCodeSpec,
+  type CodeSpecExtension,
+} from './code-spec'
+
+/**
+ * @internal
+ */
+export type CodeExtension = Union<[CodeSpecExtension, CodeCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineCode(): CodeExtension {
+  return union(
+    defineCodeSpec(),
+    defineCodeCommands(),
+    defineCodeKeymap(),
+    defineCodeInputRule(),
+  )
+}

package/src/code/index.ts

@@ -0,0 +1,14 @@
+export {
+  defineCode,
+  type CodeExtension,
+} from './code'
+export {
+  defineCodeCommands,
+  type CodeCommandsExtension,
+} from './code-commands'
+export { defineCodeInputRule } from './code-input-rule'
+export { defineCodeKeymap } from './code-keymap'
+export {
+  defineCodeSpec,
+  type CodeSpecExtension,
+} from './code-spec'

package/src/code-block/code-block-commands.ts

@@ -0,0 +1,44 @@
+import {
+  defineCommands,
+  insertNode,
+  setBlockType,
+  setNodeAttrs,
+  toggleNode,
+  type Extension,
+} from '@prosekit/core'
+
+import type { CodeBlockAttrs } from './code-block-types'
+
+/**
+ * @internal
+ */
+export type CodeBlockCommandsExtension = Extension<{
+  Commands: {
+    setCodeBlock: [attrs?: CodeBlockAttrs]
+    insertCodeBlock: [attrs?: CodeBlockAttrs]
+    toggleCodeBlock: [attrs?: CodeBlockAttrs]
+    setCodeBlockAttrs: [attrs: CodeBlockAttrs]
+  }
+}>
+
+/**
+ * Adds commands for working with `codeBlock` nodes.
+ *
+ * @public
+ */
+export function defineCodeBlockCommands(): CodeBlockCommandsExtension {
+  return defineCommands({
+    setCodeBlock: (attrs?: CodeBlockAttrs) => {
+      return setBlockType({ type: 'codeBlock', attrs })
+    },
+    insertCodeBlock: (attrs?: CodeBlockAttrs) => {
+      return insertNode({ type: 'codeBlock', attrs })
+    },
+    toggleCodeBlock: (attrs?: CodeBlockAttrs) => {
+      return toggleNode({ type: 'codeBlock', attrs })
+    },
+    setCodeBlockAttrs: (attrs: CodeBlockAttrs) => {
+      return setNodeAttrs({ type: 'codeBlock', attrs })
+    },
+  })
+}

package/src/code-block/code-block-highlight.ts

@@ -0,0 +1,40 @@
+import {
+  definePlugin,
+  type Extension,
+} from '@prosekit/core'
+import {
+  createHighlightPlugin,
+  type Parser,
+} from 'prosemirror-highlight'
+
+/**
+ * @public
+ *
+ * An alias for the `Parser` type from the `prosemirror-highlight` package.
+ */
+export type HighlightParser = Parser
+
+/**
+ * @public
+ */
+export type CodeBlockHighlightOptions = {
+  parser: HighlightParser
+}
+
+/**
+ * Adds syntax highlighting to code blocks. This function requires a `Parser`
+ * instance from the `prosemirror-highlight` package. See the
+ * [documentation](https://github.com/ocavue/prosemirror-highlight) for more
+ * information.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineCodeBlockHighlight({
+  parser,
+}: CodeBlockHighlightOptions): Extension {
+  return definePlugin(
+    createHighlightPlugin({ parser }),
+  )
+}

package/src/code-block/code-block-input-rule.ts

@@ -0,0 +1,36 @@
+import type { PlainExtension } from '@prosekit/core'
+
+import { defineTextBlockEnterRule } from '../enter-rule'
+import { defineTextBlockInputRule } from '../input-rule'
+
+import type { CodeBlockAttrs } from './code-block-types'
+
+/**
+ * Adds input rules for `codeBlock` nodes.
+ *
+ * @public
+ */
+export function defineCodeBlockInputRule(): PlainExtension {
+  return defineTextBlockInputRule({
+    regex: /^```(\S*)\s$/,
+    type: 'codeBlock',
+    attrs: getAttrs,
+  })
+}
+
+/**
+ * Adds enter rules for `codeBlock` nodes.
+ *
+ * @public
+ */
+export function defineCodeBlockEnterRule(): PlainExtension {
+  return defineTextBlockEnterRule({
+    regex: /^```(\S*)$/,
+    type: 'codeBlock',
+    attrs: getAttrs,
+  })
+}
+
+function getAttrs(match: RegExpMatchArray): CodeBlockAttrs {
+  return { language: match[1] || '' }
+}

package/src/code-block/code-block-keymap.ts

@@ -0,0 +1,61 @@
+import {
+  defaultBlockAt,
+  defineKeymap,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  TextSelection,
+  type Command,
+} from '@prosekit/pm/state'
+
+/**
+ * Defines the keymap for code blocks.
+ */
+export function defineCodeBlockKeymap(): PlainExtension {
+  return defineKeymap({
+    Enter: existCodeBlock,
+  })
+}
+
+/**
+ * Exit a code block and insert a default block below if the cursor is at the
+ * end of the code block and the code block is ended with two new lines.
+ */
+const existCodeBlock: Command = (state, dispatch) => {
+  if (!state.selection.empty) {
+    return false
+  }
+
+  const { $head } = state.selection
+  const parent = $head.parent
+  if (
+    parent.isTextblock
+    && parent.type.spec.code
+    && $head.parentOffset === parent.content.size
+    && parent.textContent.endsWith('\n\n')
+  ) {
+    const grandParent = $head.node(-1)
+    const insertIndex = $head.indexAfter(-1)
+    const type = defaultBlockAt(grandParent.contentMatchAt(insertIndex))
+
+    if (!type || !grandParent.canReplaceWith(insertIndex, insertIndex, type)) {
+      return false
+    }
+
+    if (dispatch) {
+      const { tr } = state
+      tr.delete($head.pos - 2, $head.pos)
+      const pos = tr.selection.$head.after()
+      const node = type.createAndFill()
+      if (node) {
+        tr.replaceWith(pos, pos, node)
+        tr.setSelection(TextSelection.near(tr.doc.resolve(pos), 1))
+        dispatch(tr.scrollIntoView())
+      }
+    }
+
+    return true
+  }
+
+  return false
+}

package/src/code-block/code-block-shiki.ts

@@ -0,0 +1,58 @@
+import type { Extension } from '@prosekit/core'
+import type { SpecialLanguage } from 'shiki'
+
+import { defineCodeBlockHighlight } from './code-block-highlight'
+import type {
+  ShikiBundledLanguage,
+  ShikiBundledTheme,
+} from './shiki-bundle'
+import type { ShikiHighlighterOptions } from './shiki-highlighter-chunk'
+import { createLazyParser } from './shiki-parser'
+
+/**
+ * The options to configure the Shiki highlighter.
+ *
+ * @public
+ */
+export interface CodeBlockShikiOptions extends Omit<ShikiHighlighterOptions, 'themes' | 'langs' | 'engine'> {
+  /**
+   * A list of Shiki themes to pre-load. The first theme in the list will be
+   * used to render the code block.
+   *
+   * @default ['one-dark-pro']
+   */
+  themes?: ShikiBundledTheme[]
+
+  /**
+   * A list of Shiki languages to pre-load.
+   *
+   * @default ['text']
+   */
+  langs?: (ShikiBundledLanguage | SpecialLanguage)[]
+
+  /**
+   * The RegExp engine to use. By default, the JavaScript engine is used.
+   */
+  engine?: ShikiHighlighterOptions['engine']
+}
+
+/**
+ * Adds syntax highlighting to code blocks using the [Shiki](https://github.com/shikijs/shiki) package.
+ *
+ * It will set two CSS variables on the code block elements:
+ *
+ * - `--prosemirror-highlight`: sets text color
+ * - `--prosemirror-highlight-bg`: sets background color
+ *
+ * @param options - The options to configure the Shiki highlighter.
+ *
+ * @public
+ */
+export function defineCodeBlockShiki({
+  themes = ['one-dark-pro'],
+  langs = ['text'],
+  ...rest
+}: CodeBlockShikiOptions = {}): Extension {
+  const parser = createLazyParser({ themes, langs, ...rest })
+  return defineCodeBlockHighlight({ parser })
+}