feat: add new highlight plugin (Milkdown#2067)

* feat: add new highlight plugin

* feat: add highlight plugin entries

* feat: add new highlight plugin

* test: add unit test

* chore: update version

* chore: update version

* chore: f

Author: Saul-Mirone

dev/src/vite.ts

@@ -31,7 +31,11 @@ function mergeDeep<T>(target: T, ...sources: T[]): T {
   return mergeDeep(target, ...sources)
 }
 
-function viteBuild(path: string, options: BuildOptions = {}): BuildOptions {
+function viteBuild(
+  path: string,
+  options: BuildOptions = {},
+  userExternal: CustomOptions['external'] = []
+): BuildOptions {
   const dir = dirname(fileURLToPath(path))
   const packageDirName = basename(dir)
 
@@ -44,20 +48,52 @@ function viteBuild(path: string, options: BuildOptions = {}): BuildOptions {
     ...packageJson.peerDependencies,
     ...globalPackageJson.devDependencies,
   }
+
+  // Auto-detect multiple entry points from package.json exports
+  const exports = packageJson.exports || {}
+  const entries: Record<string, string> = {}
+
+  for (const [key, value] of Object.entries(exports)) {
+    if (typeof value === 'object' && value !== null && 'import' in value) {
+      const importPath = (value as any).import as string
+      if (importPath.startsWith('./src/')) {
+        const entryName = key === '.' ? 'index' : key.replace('./', '')
+        entries[entryName] = resolve(dir, importPath.replace('./', ''))
+      }
+    }
+  }
+
+  // If no entries found from exports, fall back to default index.ts
+  if (Object.keys(entries).length === 0) {
+    entries.index = resolve(dir, 'src', 'index.ts')
+  }
+
+  const isMultiEntry = Object.keys(entries).length > 1
+
   return mergeDeep<BuildOptions>(
     {
       sourcemap: true,
       emptyOutDir: false,
-      lib: {
-        entry: resolve(dir, 'src', 'index.ts'),
-        name: `milkdown_${packageDirName}`,
-        fileName: 'index',
-        formats: ['es'],
-      },
+      lib: isMultiEntry
+        ? {
+            entry: entries,
+            formats: ['es'],
+          }
+        : {
+            entry: entries.index as string,
+            name: `milkdown_${packageDirName}`,
+            fileName: 'index',
+            formats: ['es'],
+          },
       rollupOptions: {
-        external: Array.from(new Set([...Object.keys(deps), ...external])),
+        external: Array.from(
+          new Set([...Object.keys(deps), ...external, ...userExternal])
+        ),
         output: {
           dir: resolve(dir, 'lib'),
+          ...(isMultiEntry && {
+            entryFileNames: '[name].js',
+          }),
         },
       },
       minify: false,
@@ -67,6 +103,10 @@ function viteBuild(path: string, options: BuildOptions = {}): BuildOptions {
   )
 }
 
+type CustomOptions = {
+  external?: (string | RegExp)[]
+}
+
 /**
  * Config for plugins
  *
@@ -76,10 +116,10 @@ function viteBuild(path: string, options: BuildOptions = {}): BuildOptions {
  */
 export function pluginViteConfig(
   packageDirName: string,
-  options: UserConfig = {}
+  options: UserConfig & CustomOptions = {}
 ) {
   return defineConfig({
     ...options,
-    build: viteBuild(packageDirName, options.build),
+    build: viteBuild(packageDirName, options.build, options.external),
   })
 }

docs/api/plugin-highlight.md

@@ -0,0 +1,52 @@
+# @milkdown/plugin-highlight
+
+Highlight plugin for [milkdown](https://milkdown.dev).
+Built on top of [prosemirror-highlight](https://github.com/ocavue/prosemirror-highlight).
+
+Supports:
+
+- [Shiki](https://github.com/shikijs/shiki)
+- [Lowlight](https://github.com/robertknight/lowlight.js) (based on [Highlight.js](https://github.com/highlightjs/highlight.js))
+- [Refractor](https://github.com/wooorm/refractor) (based on [Prism.js](https://github.com/PrismJS/prism))
+- [Sugar high](https://github.com/huozhi/sugar-high)
+
+@highlightPluginConfig
+@highlightPlugin
+
+## Usage
+
+```typescript
+// For shiki
+import { getSingletonHighlighter } from 'shiki'
+import { createParser } from '@milkdown/plugin-highlight/shiki'
+const highlighter = await getSingletonHighlighter({
+  themes: ['github-light'],
+  langs: ['javascript', 'typescript', 'python'],
+})
+const parser = createParser(highlighter)
+
+// For lowlight
+import 'highlight.js/styles/default.css'
+import { common, createLowlight } from 'lowlight'
+import { createParser } from '@milkdown/plugin-highlight/lowlight'
+const lowlight = createLowlight(common)
+const parser = createParser(lowlight)
+
+// For refractor
+import { refractor } from 'refractor/all'
+import { createParser } from '@milkdown/plugin-highlight/refractor'
+const parser = createParser(refractor)
+
+// For sugar high
+import { createParser } from '@milkdown/plugin-highlight/sugar-high'
+const parser = createParser()
+
+// Setup
+import { highlight, highlightPluginConfig } from '@milkdown/plugin-highlight'
+Editor.make()
+  .config((ctx) => {
+    ctx.set(highlightPluginConfig.key, { parser })
+  })
+  .use(highlight)
+  .create()
+```

packages/plugins/plugin-highlight/README.md

@@ -0,0 +1,11 @@
+# @milkdown/plugin-highlight
+
+The highlight plugin of [milkdown](https://milkdown.dev/).
+
+# Official Documentation
+
+Documentation can be found on the [Milkdown website](https://milkdown.dev/).
+
+# License
+
+Milkdown is open sourced software licensed under [MIT license](https://github.com/Milkdown/milkdown/blob/main/LICENSE).

packages/plugins/plugin-highlight/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@milkdown/plugin-highlight",
+  "type": "module",
+  "version": "7.15.5",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Milkdown/milkdown.git",
+    "directory": "packages/plugins/plugin-highlight"
+  },
+  "keywords": [
+    "milkdown",
+    "milkdown plugin"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./lowlight": {
+      "import": "./src/lowlight.ts"
+    },
+    "./refractor": {
+      "import": "./src/refractor.ts"
+    },
+    "./shiki": {
+      "import": "./src/shiki.ts"
+    },
+    "./sugar-high": {
+      "import": "./src/sugar-high.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "publishConfig": {
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./lib/index.js",
+        "types": "./lib/index.d.ts"
+      },
+      "./lowlight": {
+        "import": "./lib/lowlight.js",
+        "types": "./lib/lowlight.d.ts"
+      },
+      "./refractor": {
+        "import": "./lib/refractor.js",
+        "types": "./lib/refractor.d.ts"
+      },
+      "./shiki": {
+        "import": "./lib/shiki.js",
+        "types": "./lib/shiki.d.ts"
+      },
+      "./sugar-high": {
+        "import": "./lib/sugar-high.js",
+        "types": "./lib/sugar-high.d.ts"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "@milkdown/core": "workspace:*",
+    "@milkdown/ctx": "workspace:*",
+    "@milkdown/prose": "workspace:*",
+    "@milkdown/utils": "workspace:*",
+    "prosemirror-highlight": "^0.13.0",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@milkdown/preset-commonmark": "workspace:*",
+    "sugar-high": "^0.9.3"
+  }
+}

packages/plugins/plugin-highlight/src/__test__/highlight.spec.ts

@@ -0,0 +1,97 @@
+import '@testing-library/jest-dom/vitest'
+import { defaultValueCtx, Editor, editorViewCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { createParser } from 'prosemirror-highlight/sugar-high'
+import { expect, it } from 'vitest'
+
+import { highlight, highlightPluginConfig } from '..'
+
+function createEditor() {
+  const parser = createParser()
+  const editor = Editor.make()
+  editor
+    .config((ctx) => {
+      ctx.set(highlightPluginConfig.key, { parser })
+    })
+    .use(commonmark)
+    .use(highlight)
+  return editor
+}
+
+const defaultValue = `
+\`\`\`js
+console.log('Hello, world!');
+\`\`\`
+`
+
+it('should render highlighted code', async () => {
+  const editor = createEditor()
+  editor.config((ctx) => {
+    ctx.set(defaultValueCtx, defaultValue)
+  })
+
+  await editor.create()
+
+  const view = editor.ctx.get(editorViewCtx)
+  const dom = view.dom
+
+  const spans = dom.querySelectorAll('span')
+  expect(spans).toMatchInlineSnapshot(`
+    NodeList [
+      <span
+        class="sh__token--identifier"
+        style="color: var(--sh-identifier);"
+      >
+        console
+      </span>,
+      <span
+        class="sh__token--sign"
+        style="color: var(--sh-sign);"
+      >
+        .
+      </span>,
+      <span
+        class="sh__token--property"
+        style="color: var(--sh-property);"
+      >
+        log
+      </span>,
+      <span
+        class="sh__token--sign"
+        style="color: var(--sh-sign);"
+      >
+        (
+      </span>,
+      <span
+        class="sh__token--string"
+        style="color: var(--sh-string);"
+      >
+        '
+      </span>,
+      <span
+        class="sh__token--string"
+        style="color: var(--sh-string);"
+      >
+        Hello, world!
+      </span>,
+      <span
+        class="sh__token--string"
+        style="color: var(--sh-string);"
+      >
+        '
+      </span>,
+      <span
+        class="sh__token--sign"
+        style="color: var(--sh-sign);"
+      >
+        )
+      </span>,
+      <span
+        class="sh__token--sign"
+        style="color: var(--sh-sign);"
+      >
+        ;
+      </span>,
+    ]
+  `)
+})