@prosekit/extensions 0.11.4 → 0.11.5

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

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

@@ -0,0 +1,164 @@
+import { jsonFromHTML } from '@prosekit/core'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { formatHTML } from '../testing/format-html'
+import {
+  htmlFromMarkdown,
+  markdownFromHTML,
+} from '../testing/markdown'
+
+describe('defineCodeBlockSpec', () => {
+  it('can parse and serialize code blocks', () => {
+    const { editor, n } = setupTest()
+    const doc = n.doc(
+      n.codeBlock({ language: 'javascript' }, 'console.log("Hello, javascript!");'),
+      n.codeBlock({ language: 'JS' }, 'print("Hello, JS!");'),
+      n.codeBlock({ language: 'UNKNOWN_LANG' }, 'print hello world'),
+      n.codeBlock('hello world'),
+    )
+    editor.set(doc)
+    const html = editor.getDocHTML()
+    expect(formatHTML(html)).toMatchInlineSnapshot(
+      `
+      "
+      <div>
+        <pre data-language="javascript">
+          <code class="language-javascript">
+            console.log("Hello, javascript!");
+          </code>
+        </pre>
+        <pre data-language="JS">
+          <code class="language-JS">
+            print("Hello, JS!");
+          </code>
+        </pre>
+        <pre data-language="UNKNOWN_LANG">
+          <code class="language-UNKNOWN_LANG">
+            print hello world
+          </code>
+        </pre>
+        <pre>
+          <code>
+            hello world
+          </code>
+        </pre>
+      </div>
+      "
+    `,
+    )
+
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "attrs": {
+              "language": "javascript",
+            },
+            "content": [
+              {
+                "text": "console.log("Hello, javascript!");",
+                "type": "text",
+              },
+            ],
+            "type": "codeBlock",
+          },
+          {
+            "attrs": {
+              "language": "JS",
+            },
+            "content": [
+              {
+                "text": "print("Hello, JS!");",
+                "type": "text",
+              },
+            ],
+            "type": "codeBlock",
+          },
+          {
+            "attrs": {
+              "language": "UNKNOWN_LANG",
+            },
+            "content": [
+              {
+                "text": "print hello world",
+                "type": "text",
+              },
+            ],
+            "type": "codeBlock",
+          },
+          {
+            "attrs": {
+              "language": "",
+            },
+            "content": [
+              {
+                "text": "hello world",
+                "type": "text",
+              },
+            ],
+            "type": "codeBlock",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+
+    const json2 = jsonFromHTML(html, { schema: editor.schema })
+    expect(json2).toEqual(json)
+  })
+
+  it('can parse html generated by remark', () => {
+    const { editor } = setupTest()
+
+    const markdown = ['```javascript', '1234', '```'].join('\n')
+    const html = htmlFromMarkdown(markdown)
+
+    expect(html).toMatchInlineSnapshot(`
+      "<pre><code class="language-javascript">1234
+      </code></pre>
+      "
+    `)
+    const json = jsonFromHTML(html, { schema: editor.schema })
+
+    expect(json).toMatchObject(
+      {
+        content: [
+          {
+            attrs: {
+              language: 'javascript',
+            },
+            content: [
+              {
+                text: '1234' + '\n',
+                type: 'text',
+              },
+            ],
+            type: 'codeBlock',
+          },
+        ],
+        type: 'doc',
+      },
+    )
+  })
+
+  it('can generate html that can be parsed by remark', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.codeBlock({ language: 'javascript' }, '123')))
+    const html = editor.getDocHTML()
+    expect(html).toMatchInlineSnapshot(`"<div><pre data-language="javascript"><code class="language-javascript">123</code></pre></div>"`)
+    let markdown = markdownFromHTML(html)
+    expect(markdown).toMatchInlineSnapshot(`
+      "\`\`\`javascript
+      123
+      \`\`\`
+      "
+    `)
+    expect(markdown).toContain('```javascript')
+  })
+})

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

@@ -0,0 +1,71 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+
+import type { CodeBlockAttrs } from './code-block-types'
+
+/**
+ * @internal
+ */
+export type CodeBlockSpecExtension = Extension<{
+  Nodes: {
+    codeBlock: CodeBlockAttrs
+  }
+}>
+
+/**
+ * Defines the `codeBlock` node spec.
+ *
+ * @public
+ */
+export function defineCodeBlockSpec(): CodeBlockSpecExtension {
+  return defineNodeSpec({
+    name: 'codeBlock',
+    content: 'text*',
+    group: 'block',
+    code: true,
+    defining: true,
+    marks: '',
+    attrs: { language: { default: '', validate: 'string' } },
+    parseDOM: [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs: (node): CodeBlockAttrs => {
+          const language = extractLanguageFromElement(node)
+            || extractLanguageFromElement(node.querySelector('code'))
+          return { language }
+        },
+      },
+    ],
+    toDOM(node) {
+      const { language } = node.attrs as CodeBlockAttrs
+      return [
+        'pre',
+        { 'data-language': language || undefined },
+        // `class: language-${language}` is used by remark-rehype to highlight the code block
+        ['code', { class: language ? `language-${language}` : undefined }, 0],
+      ]
+    },
+  })
+}
+
+function extractLanguageFromElement(element: HTMLElement | null | undefined): string {
+  if (!element) {
+    return ''
+  }
+
+  const attr = element.getAttribute('data-language')
+  if (attr) {
+    return attr
+  }
+
+  const className = element.className
+  const match = className.match(/language-(\w+)/)
+  if (match) {
+    return match[1]
+  }
+
+  return ''
+}

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

@@ -0,0 +1,8 @@
+/**
+ * The attributes for the `codeBlock` node.
+ *
+ * @public
+ */
+export interface CodeBlockAttrs {
+  language: string
+}

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

@@ -0,0 +1,46 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineCodeBlockCommands,
+  type CodeBlockCommandsExtension,
+} from './code-block-commands'
+import {
+  defineCodeBlockEnterRule,
+  defineCodeBlockInputRule,
+} from './code-block-input-rule'
+import { defineCodeBlockKeymap } from './code-block-keymap'
+import {
+  defineCodeBlockSpec,
+  type CodeBlockSpecExtension,
+} from './code-block-spec'
+
+/**
+ * @internal
+ */
+export type CodeBlockExtension = Union<
+  [CodeBlockSpecExtension, CodeBlockCommandsExtension]
+>
+
+/**
+ * Adds `codeBlock` nodes to the editor. This includes the following extensions:
+ *
+ * - {@link defineCodeBlockSpec}
+ * - {@link defineCodeBlockInputRule}
+ * - {@link defineCodeBlockEnterRule}
+ * - {@link defineCodeBlockKeymap}
+ * - {@link defineCodeBlockCommands}.
+ *
+ * @public
+ */
+export function defineCodeBlock(): CodeBlockExtension {
+  return union(
+    defineCodeBlockSpec(),
+    defineCodeBlockInputRule(),
+    defineCodeBlockEnterRule(),
+    defineCodeBlockKeymap(),
+    defineCodeBlockCommands(),
+  )
+}