diff --git a/demo/package.json b/demo/package.json index 438e95cc..e210f4c1 100644 --- a/demo/package.json +++ b/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" diff --git a/demo/src/index.js b/demo/src/index.js index c972e45d..0ee4a062 100644 --- a/demo/src/index.js +++ b/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: { diff --git a/demo/src/mdx.worker.js b/demo/src/mdx.worker.js new file mode 100644 index 00000000..3befd550 --- /dev/null +++ b/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] +}) diff --git a/demo/tsconfig.json b/demo/tsconfig.json index 08ec9f26..c16f5558 100644 --- a/demo/tsconfig.json +++ b/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"] } } diff --git a/packages/monaco/README.md b/packages/monaco/README.md index bf9cb531..a87deb7a 100644 --- a/packages/monaco/README.md +++ b/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 diff --git a/packages/monaco/mdx.worker.js b/packages/monaco/mdx.worker.js index a924545c..d1c2c294 100644 --- a/packages/monaco/mdx.worker.js +++ b/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 +} diff --git a/packages/monaco/package.json b/packages/monaco/package.json index 205cd83a..7a78b000 100644 --- a/packages/monaco/package.json +++ b/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",