A minimal runeditable code embed

[adamziel]

Let's make it easy to embed runedditable code examples in the technical documentation.

A minimal implementation already exists at https://adamziel.github.io/embed.html#IkhleSB0aGVyZSEi

One problem with it is the code editor – it has much less affordances than the one on StackBlitz. I mean code completion, files explorer, linter integration etc.

Let's build a minimal "full widget" app for embedding editable code snippets.

[eliot-akira]

StackBlitz uses Monaco Editor, the same core library as Visual Studio Code.

It integrates with language server protocol (LSP) to provide advanced editor features like code completion and linting. I've heard some people mention that Monaco can be heavy in terms of file size.

---

An alternative is CodeMirror (sponsored by Automattic, by the way). It has a community-developed extension, LSP integration for CodeMirror.

It's used by Replit, another "online IDE as a service". They previously used Monaco, and wrote an in-depth article comparing the pros and cons: Betting on CodeMirror. A relevant excerpt:

Ultimately, our reasons for moving off of Monaco came down to:

• Lack of mobile support
• A clunky API and subpar documentation
• Difficulty in customizing the core editor components and functionality
• Massive bundle size which led to degraded performance across the app

CodeMirror, in contrast to Monaco:

• Works well on mobile
• Has a modern, extensible API with excellent documentation
• Is easy to customize, style, and reconfigure
• Is very lightweight and performant

[adamziel]

Such a good research, thank you @eliot-akira! Monaco Editor is the same one used in that quick demo in the description, but mobile support is a huge advantage of CodeMirror. I'm thinking about leveraging StackBlitz and not doing a code editor for the first implementation of this, but for a second round CodeMirror looks very promising.

CodeMirror (sponsored by Automattic, by the way).

TIL!

[StevenDufresne]

I think Sandpack also uses CodeMirror.

[adamziel]

For posterity:

A code editing experiment (source code in this repo!): https://wasm.wordpress.net/wordpress.html?login=1&url=/wp-admin/post-new.php&ide=1
A wporg theme with a playground Gutenberg block: https://github.com/WordPress/wporg-wasm

[adamziel]

Related PR: #168

[adamziel]

The Interactive Code Block merged in #168 effectively solves this issue. It's yet to be documented and released in the plugin directory but let's track that separately in the playground-tools repo:

• Document Interactive Code Block playground-tools#61
• Submit the Interactive Code Block to the WordPress Plugin directory playground-tools#62