-
-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support remark syntax plugins in @mdx-js/monaco
#264
Comments
It may be possible for the main thread and worker to talk via a proxy sending requests between the two. Which is how https://partytown.builder.io/ works. |
Yes, that’s how Monaco editor works as well. The problem is we can’t pass functions (like unified plugins), because they aren’t supported by the structured clone algorithm. It’s not a big deal. I dealt with it before in |
Partytown's approach may be able to help:
|
The source implementing function serializing/proxy support https://github.com/BuilderIO/partytown/blob/main/src/lib/web-worker/worker-serialization.ts |
It appears Partytown requires even more configuration of the build tool. In my experience maintaining various Monaco editor related projects, this is the part users struggle with. Partytown really looks like a cool project, but I don’t think having a library depend on it is a good choice. The difference when using the approach by window.MonacoEnvironment = {
getWorker(moduleId, label) {
switch (label) {
case 'editorWorkerService':
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
case 'css':
case 'less':
case 'scss':
return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url))
case 'handlebars':
case 'html':
case 'razor':
return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url))
case 'json':
return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url))
case 'mdx':
- return new Worker(new URL('@mdx-js/monaco/mdx.worker', import.meta.url))
+ return new Worker(new URL('./mdx.worker', import.meta.url))
case 'javascript':
case 'typescript':
return new Worker(new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url))
default:
throw new Error(`Unknown label ${label}`)
}
}
}; and the addition of this file: import { initialize } from '@mdx-js/mdx.worker'
import remarkFrontmatter from 'remark-frontmatter'
import remarkGfm from 'remark-gfm'
initialize({
plugins: [remarkFrontmatter, remarkGfm]
}) |
Initial checklist
Problem
The language service was written with support for remark/micromark syntax plugins in mind, but not the Monaco editor integration.
The language service is used in a web worker. Since unified plugins are functions, they can’t be passed from the main thread to the worker. This means the user will need to define a custom worker in order to use remark plugins.
Solution
Mimic https://github.com/remcohaszing/monaco-tailwindcss to allow users to define a custom worker and inject options.
Alternatives
🤷
The text was updated successfully, but these errors were encountered: