Inline examples in the documentation

🚨 PLEASE DO NOT WORK ON THIS ISSUE: This work is earmarked for a Meta intern.

Compared to other rich text editors, our documentation lacks inline/iframe examples of various Lexical concepts and plugins.

As we have opened up Lexical to the OSS community, more and more functionality is being added to the official playground.

This creates a kitchen sink example which is confusing to navigate for first time and existing users alike. It also blocks many developers who try to navigate the playground’s codebase to simply copy and paste example code.

To solve this issue, my proposal is to break down the playground into several smaller examples, each one highlighting a different piece of functionality, or different plugin.

These example can then be collated into iframes in an “Examples” section within our docs.

Some examples of other inline example pages from other RTEs:

• TipTap examples page
• ProseMirror examples page
• SlateJS examples page
• QuillJS examples page
• TinyMCE examples page

This work will also involve changing some of our E2Es which rely exclusively on the playground.

[echarles]

Sandpack has a plugin for docusaurus https://github.com/codesandbox/sandpack/tree/main/plugins/docusaurus

and their docs website on https://sandpack.codesandbox.io/docs/ is built with docusaurus (the introduction page has such a “Live coding environment in minutes”).

[echarles]

There are other examples that allow to show live code and also generate a button to open that code in codesanbox

• https://syncedstore.org/docs/react
• https://plate.udecode.io/docs/plugins/alignment

I have looked at a docusaurus plugin that would allow to embed a codesandbox in a docusaurus webpage but have not found any. Maybe it exists somewhere, or it should not be too difficult to implement. This would allow to directly embed the existing codesanbox plain and rich text.