Support remark plugins in Monaco and demo (#304)

Closes #264

demo/package.json

@@ -14,6 +14,8 @@
     "html-webpack-plugin": "^5.0.0",
     "mini-css-extract-plugin": "^2.0.0",
     "monaco-editor": "^0.34.0",
+    "remark-frontmatter": "^4.0.0",
+    "remark-gfm": "^3.0.0",
     "webpack": "^5.0.0",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.0.0"

demo/src/index.js

@@ -36,9 +36,7 @@ window.MonacoEnvironment = {
       }
 
       case 'mdx': {
-        return new Worker(
-          new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url)
-        )
+        return new Worker(new URL('mdx.worker.js', import.meta.url))
       }
 
       default: {

demo/src/mdx.worker.js

@@ -0,0 +1,7 @@
+import {configure} from '@mdx-js/monaco/mdx.worker.js'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+
+configure({
+  plugins: [remarkFrontmatter, remarkGfm]
+})

demo/tsconfig.json

@@ -8,6 +8,7 @@
     "strict": true,
     "paths": {
       "@mdx-js/language-service": ["../packages/language-service/index.js"],
+      "@mdx-js/monaco/mdx.worker.js": ["../packages/monaco/mdx.worker.js"],
       "@mdx-js/monaco": ["../packages/monaco/index.js"]
     }
   }

packages/monaco/README.md

@@ -82,6 +82,44 @@ const element = document.getElementById('editor')
 const editor = monaco.editor.create(element, { model })
 ```
 
+By default no plugins included.
+To support plugins, you have to create your own worker.
+Then, instead of referencing `@mdx-js/monaco/mdx.worker.js` in the
+`MonacoEnvironment`, reference your own cusotmized worker.
+
+For example, to support [frontmatter][] and [GFM][], create a file named
+`mdx.worker.js` with the following content:
+
+```js
+import {configure} from '@mdx-js/monaco/mdx.worker.js'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+
+configure({
+  plugins: [remarkFrontmatter, remarkGfm]
+})
+```
+
+And make the following change in your `MonacoEnvironment`:
+
+```diff
+  import { initializeMonacoMdx } from '@mdx-js/monaco'
+  import * as monaco from 'monaco-editor'
+
+  // Register the worker
+  window.MonacoEnvironment = {
+    getWorker(_workerId, label) {
+      switch (label) {
+        // …
+        case 'mdx':
+-         return new Worker(new URL('@mdx-js/monaco/mdx.worker.js', import.meta.url))
++         return new Worker(new URL('./mdx.worker.js', import.meta.url))
+        // …
+      }
+    }
+  }
+```
+
 ## Examples
 
 A [demo][] is available.
@@ -146,6 +184,10 @@ abide by its terms.
 
 [demo]: https://github.com/mdx-js/vscode-mdx/tree/HEAD/demo
 
+[frontmatter]: https://github.com/remarkjs/remark-frontmatter
+
+[gfm]: https://github.com/remarkjs/remark-gfm
+
 [jsdoc]: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
 
 [mdx]: https://mdxjs.com

packages/monaco/mdx.worker.js

@@ -6,23 +6,36 @@
  * @typedef {import('monaco-editor').languages.typescript.TypeScriptWorker} TypeScriptWorker
  * @typedef {import('monaco-editor').worker.IWorkerContext} IWorkerContext
  * @typedef {import('typescript').LanguageServiceHost} LanguageServiceHost
+ * @typedef {import('unified').PluggableList} PluggableList
  *
  * @typedef {object} CreateData
- * @property {CompilerOptions} compilerOptions The TypeScript compiler options configured by the user.
- * @property {string} customWorkerPath The path to a custom worker.
- * @property {IExtraLibs} extraLibs Additional libraries to load.
- * @property {InlayHintsOptions} inlayHintsOptions The TypeScript inlay hints options.
+ * @property {CompilerOptions} compilerOptions
+ *   The TypeScript compiler options configured by the user.
+ * @property {string} customWorkerPath
+ *   The path to a custom worker.
+ * @property {IExtraLibs} extraLibs
+ *   Additional libraries to load.
+ * @property {InlayHintsOptions} inlayHintsOptions
+ *   The TypeScript inlay hints options.
  *
  * @typedef {TypeScriptWorker & LanguageServiceHost} MDXWorker
  * @typedef {new (ctx: IWorkerContext, createData: CreateData) => MDXWorker} TypeScriptWorkerClass
+ *
+ * @typedef MDXWorkerOptions
+ * @property {PluggableList} [plugins]
+ *   A list of remark plugins. Only syntax parser plugins are supported. For
+ *   example `remark-frontmatter`, but not `remark-mdx-frontmatter`.
  */
 
 import {createMdxLanguageService} from '@mdx-js/language-service'
 // @ts-expect-error This module is untyped.
-import {initialize} from 'monaco-editor/esm/vs/editor/editor.worker.js'
+import {initialize as initializeWorker} from 'monaco-editor/esm/vs/editor/editor.worker.js'
 // @ts-expect-error This module is untyped.
 import {create} from 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
 
+/** @type {PluggableList | undefined} */
+let plugins
+
 /**
  * @param {TypeScriptWorkerClass} TypeScriptWorker
  * @returns {TypeScriptWorkerClass} A custom TypeScript worker which knows how to handle MDX.
@@ -32,7 +45,8 @@ function worker(TypeScriptWorker) {
     _languageService = createMdxLanguageService(
       // @ts-expect-error This is globally defined in the worker.
       ts,
-      this
+      this,
+      plugins
     )
   }
 }
@@ -45,7 +59,7 @@ self.importScripts = () => {}
 
 // eslint-disable-next-line unicorn/prefer-add-event-listener
 self.onmessage = () => {
-  initialize(
+  initializeWorker(
     /**
      * @param {IWorkerContext} ctx
      * @param {CreateData} createData
@@ -54,3 +68,13 @@ self.onmessage = () => {
     (ctx, createData) => create(ctx, {...createData, customWorkerPath: true})
   )
 }
+
+/**
+ * Configure the Monaco MDX worker.
+ *
+ * @param {MDXWorkerOptions} options
+ *   The options to set.
+ */
+export function configure(options) {
+  plugins = options.plugins
+}

packages/monaco/package.json

@@ -44,7 +44,8 @@
   "dependencies": {
     "@mdx-js/language-service": "0.0.0",
     "monaco-marker-data-provider": "^1.0.0",
-    "monaco-worker-manager": "^2.0.0"
+    "monaco-worker-manager": "^2.0.0",
+    "unified": "^10.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.0.0",