Make source code snippets into CodeMirror editor instances

[alerque]

• Display code views as CodeMirror editor instances
• Add ignore file covering current build artifacts
• Enable syntax highlighting in CodeMirror
• [NFY] Setup Typst syntax highlighting via WASM module

[alerque]

@kxxt This is not at all your fault, just my lack of experience with building stuff for the modern web, but I'm absolutely baffled how to bundle/build your codemirror-lang-typst module in a way that can be used in the browser. This builds and has the JS code inlinned and copies the WASM module to the static output directory where it is served, but I can't seem to orchestrate it all to get around the browser error:

Failed to load Typst language support: TypeError: (void 0) is not a function
    js http://127.0.0.1:1111/codemirror.js:16984
    __init http://127.0.0.1:1111/codemirror.js:4
    js http://127.0.0.1:1111/codemirror.js:17025
    __init http://127.0.0.1:1111/codemirror.js:4
    <anonymous> http://127.0.0.1:1111/codemirror.js:29383
    promise callback*window.initCodeMirror http://127.0.0.1:1111/codemirror.js:29383
    <anonymous> http://127.0.0.1:1111/dropcaps:476
    <anonymous> http://127.0.0.1:1111/dropcaps:473
    addEventListener eval:4
    <anonymous> http://127.0.0.1:1111/dropcaps:472
codemirror.js:29386:15

Do you know of any projects building for a browser environment that I could take a gander at?

[kxxt]

Do you know of any projects building for a browser environment that I could take a gander at?

I am using it in an overleaf fork(overleaf/overleaf#1385), which uses the React stack and webpack bundler
(The relevant changes for webpack are in services/web/webpack.config.js and the usage is in services/web/frontend/js/features/source-editor/languages/typst/index.ts).

Aside from that, I know that the TeXlyre editor is also using this package: https://github.com/TeXlyre/texlyre/blob/main/src/services/EditorLoader.ts
It uses the Vite bundler.

I don't know if there are other projects using the esbuild bundler with my package but I could take a deeper look at integration issues with it later.

[kxxt]

@alerque But in case if you only want syntax highlighting and not a full-featured editor, there are also https://shiki.style/ .
polytype.dev looks very interesting!

[kxxt]

Hi @alerque, I took a deeper look at it and created a PR #21.

The primary reason that it didn't work is because of the missing esbuild wasm plugin.
The secondary reason that it didn't work is it is targeting es2020, which might not support top-level-await that are used in the typst wasm module. I added top-level-await to supported but that requires the browser to support it.

But if the purpose is only syntax highlighting static text, I think codemirror is too heavy weight for it and https://shiki.style/ should be more suitable.

[alerque]

But if the purpose is only syntax highlighting static text, I think codemirror is too heavy weight for it and shiki.style should be more suitable.

I agree if the only purpose was for syntax, shiki would be a better approach. My ultimate goal is to get some or all of the typesetters working in a sandboxed playground mode where the source snippets can be played with in place, hence the desire to get CodeMirror spun up anyway.

And thanks immensely for this. I spent half my day tinkering with webpack and got what felt like very close, but still not quite there. In fact many of the changes you made were things I got onto locally as well, but the combination of exports and module types still wasn't working. Your implementation with esbuild and the plugin works great!.