@prosekit/extensions 0.11.4 → 0.11.6

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

package/src/code-block/index.ts

@@ -0,0 +1,32 @@
+export {
+  defineCodeBlock,
+  type CodeBlockExtension,
+} from './code-block'
+export {
+  defineCodeBlockCommands,
+  type CodeBlockCommandsExtension,
+} from './code-block-commands'
+export {
+  defineCodeBlockHighlight,
+  type CodeBlockHighlightOptions,
+  type HighlightParser,
+} from './code-block-highlight'
+export {
+  defineCodeBlockEnterRule,
+  defineCodeBlockInputRule,
+} from './code-block-input-rule'
+export { defineCodeBlockKeymap } from './code-block-keymap'
+export { defineCodeBlockShiki } from './code-block-shiki'
+export {
+  defineCodeBlockSpec,
+  type CodeBlockSpecExtension,
+} from './code-block-spec'
+export type { CodeBlockAttrs } from './code-block-types'
+export {
+  shikiBundledLanguagesInfo,
+  shikiBundledThemesInfo,
+  type ShikiBundledLanguage,
+  type ShikiBundledLanguageInfo,
+  type ShikiBundledTheme,
+  type ShikiBundledThemeInfo,
+} from './shiki-bundle'

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

@@ -0,0 +1,8 @@
+export {
+  bundledLanguagesInfo as shikiBundledLanguagesInfo,
+  bundledThemesInfo as shikiBundledThemesInfo,
+  type BundledLanguage as ShikiBundledLanguage,
+  type BundledLanguageInfo as ShikiBundledLanguageInfo,
+  type BundledTheme as ShikiBundledTheme,
+  type BundledThemeInfo as ShikiBundledThemeInfo,
+} from 'shiki'

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

@@ -0,0 +1,84 @@
+import type {
+  BundledHighlighterOptions,
+  BundledLanguage,
+  BundledTheme,
+  Highlighter,
+  SpecialLanguage,
+} from 'shiki'
+import { createHighlighter } from 'shiki/bundle/full'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+
+let highlighterPromise: Promise<void> | undefined
+let highlighter: Highlighter | undefined
+const loadedLangs = new Set<BundledLanguage | SpecialLanguage>()
+const loadedThemes = new Set<BundledTheme>()
+
+export interface ShikiHighlighterOptions extends BundledHighlighterOptions<BundledLanguage, BundledTheme> {}
+
+export interface HighlighterOptions extends Omit<ShikiHighlighterOptions, 'langs' | 'themes'> {
+  themes: BundledTheme[]
+  langs: (BundledLanguage | SpecialLanguage)[]
+}
+
+function ensureHighlighter({
+  ...options
+}: HighlighterOptions): Promise<void> {
+  if (!highlighterPromise) {
+    // If no engine is provided, use the JavaScript engine, which is
+    // smaller than the WASM engine.
+    if (!options.engine) {
+      const engine = createJavaScriptRegexEngine({ forgiving: true })
+      options.engine = engine
+    }
+    highlighterPromise = createHighlighter(options).then((createdHighlighter) => {
+      highlighter = createdHighlighter
+    })
+  }
+  return highlighterPromise
+}
+
+async function loadLanguages(langs: (BundledLanguage | SpecialLanguage)[]) {
+  for (const lang of langs) {
+    if (!highlighter) break
+    await highlighter.loadLanguage(lang)
+    loadedLangs.add(lang)
+  }
+}
+
+async function loadThemes(themes: BundledTheme[]) {
+  for (const theme of themes) {
+    if (!highlighter) break
+    await highlighter.loadTheme(theme)
+    loadedThemes.add(theme)
+  }
+}
+
+export type HighlighterResult =
+  | {
+    highlighter: Highlighter
+    promise?: undefined
+  }
+  | {
+    highlighter?: undefined
+    promise: Promise<void>
+  }
+
+export function createOrGetHighlighter(
+  options: HighlighterOptions,
+): HighlighterResult {
+  if (!highlighter) {
+    return { promise: ensureHighlighter(options) }
+  }
+
+  const langs = options.langs.filter((lang) => !loadedLangs.has(lang))
+  if (langs.length > 0) {
+    return { promise: loadLanguages(langs) }
+  }
+
+  const themes = options.themes.filter((theme) => !loadedThemes.has(theme))
+  if (themes.length > 0) {
+    return { promise: loadThemes(themes) }
+  }
+
+  return { highlighter }
+}

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

@@ -0,0 +1,22 @@
+import type {
+  HighlighterOptions,
+  HighlighterResult,
+} from './shiki-highlighter-chunk'
+
+let loaded: ((options: HighlighterOptions) => HighlighterResult) | undefined
+
+async function load() {
+  const { createOrGetHighlighter } = await import('./shiki-highlighter-chunk')
+  loaded = createOrGetHighlighter
+}
+
+export function createOrGetHighlighter(
+  options: HighlighterOptions,
+): HighlighterResult {
+  if (!loaded) {
+    return { promise: load() }
+  }
+  return loaded(options)
+}
+
+export type { HighlighterOptions }

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

@@ -0,0 +1,36 @@
+import type { Parser } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/shiki'
+
+import type { ShikiBundledLanguage } from './shiki-bundle'
+import {
+  createOrGetHighlighter,
+  type HighlighterOptions,
+} from './shiki-highlighter'
+
+/**
+ * @internal
+ */
+export function createLazyParser(
+  highlighterOptions: HighlighterOptions,
+): Parser {
+  let parser: Parser | undefined
+
+  return function lazyParser(options) {
+    const language = (options.language || '') as ShikiBundledLanguage
+    const { highlighter, promise } = createOrGetHighlighter({
+      ...highlighterOptions,
+      langs: [language],
+    })
+
+    if (!highlighter) {
+      return promise
+    }
+
+    if (!parser) {
+      parser = createParser(highlighter, {
+        theme: highlighterOptions.themes[0],
+      })
+    }
+    return parser(options)
+  }
+}