Support text folding in playground for ast output editors

[dimaMachina]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Text folding currently enabled only for raw editor

Solution

enable it for ast output editors too

Alternatives

no alternatives should be enabled by default to improve dev experience

[wooorm]

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

[dimaMachina]

as an alternative you can migrate to monaco-editor that uses web workers and in the latest updates supports mdx as language https://github.com/microsoft/monaco-editor/pull/3096

[wooorm]

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

[remcohaszing]

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.

[remcohaszing]

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.

[wooorm]

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?

[remcohaszing]

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).

[wooorm]

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!

[dimaMachina]

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