mdx-js / mdx

Markdown for the component era

Home Page:https://mdxjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support text folding in playground for ast output editors

dimaMachina opened this issue · comments

Initial checklist

Problem

Text folding currently enabled only for raw editor
image

Solution

enable it for ast output editors too
image

Alternatives

no alternatives should be enabled by default to improve dev experience

Hmm, while this feature is useful, the current editor doesn’t work well with MDX and is very heavy.
I instead plan to soon make a much lighter editor (just a textbox with proper syntax highlighting), to solve both.
And that means no folding anymore

as an alternative you can migrate to monaco-editor that uses web workers and in the latest updates supports mdx as language microsoft/monaco-editor#3096

Hmm, maybe. @remcohaszing does monaco + mdx have enough features, e.g., our plugin options and such?

I do think a whole editor is going to get heavy, and a plain textarea like https://wooorm.com/markdown-tm-language/ would be a lot lighter

Yes, the @mdx-js/monaco supports all of this. I would love for the MDX website to support this (as soon as the Volar integration is ready). It’s not mobile friendly though. A nice solution would be to use Monaco on desktop, and a light weight editor on mobile.

Note that MDX syntax highlighting in Monaco editor is not remotely as good as the tm language. To support that language would mean to pull in another heavy dependency on top of Monaco editor.

I think that’s the most important on the website here, to show the correct grammar.
I don’t think editor features are that important here, it’s a little playground, doesn’t have to be fancy IMO

What would have to be pulled into Monaco to support it?

We would need https://github.com/bolinfest/monaco-tm.

Also it is possible to cherry-pick some Monaco editor features to make it smaller, but its core is already big (I don’t have exact numbers right now).

There’s now a much simpler, faster, playground, with proper syntax highlighting.
I prefer that over adding all the features an editor can have.
I suggest using your own editor to and copy/paste into the playground.
Or use compile from @mdx-js/mdx locally to see what things turn into!

@wooorm I saw the new playground, thanks for working on it, looks very nice!