Make Code Block more powerful

[Benbinbin]

Highlight

The key point of Code Block is how to highlight, the @lexical/code module use Prism.js, but it has some limitaions.

I want to know if there're other tools to make code highlight and find code-hike/lighter is an alternative solution.

Tip

Code Hike built by @pomber is so wonderful, which is a plugin for MDX (an extentable Markdown syntax).

It provides a lot of useful components to make smooth animation for "code walkthroughs", can make blog posts, documentation, coding tutorial more fun.

And I also like this Twitter thread from him, showing the potential of web to show code and explanation for code block.

I also find a plugin for Rehype, call rehype-pretty-code for Rehype,

Note

Rehype is a tool that transforms HTML between ASTs (abstract syntax trees).

It can provide more powerful feature, like the line or word highlight within the code block, and inline code highlight.

It use shiki as code highlighter, which use some library, like vscode-textmate, to tokenize code text and highlight them.

Tip

Shikiji is an ESM-focused rewrite of shiki, and add more features to make code more interactive at web.

Although most of these resources are about Markdown or MDX, I think some idea from them is also suitable for Rich Text Editor.

[Benbinbin]

Shikiji Transformers can parse specific annotation into a special style, like line highlight, line focus, whitespace and tab visual hint, these are some great examples to make code block more powerful.

[SalahAdDin]

We have also HighlightJS as an alternative.

[Benbinbin]

Writter Experience

I think CodeMirror is good enough alternative as the block code for a rich text editor, it has provided more fluent UX, like autocompletion, linting

Now the Lexical CodeNode provide some basic UX, like auto indent for the insert new line, but it just preserve the same indent as the previous line, this is not "smart" enough

and some special behavior of block code seems to make the Lexical Core module more complex, for example the insert nodes

If we want to provide the really smooth writter experience, maybe we should use some library (like the textmate for VS Code, Lezer for CodeMirror, Tree-sitter for Github) to parser the code and build the syntax tree, not just listen some COMMAND trigger by user

[yf-yang]

Thanks for starting this discussion thread! It could help more people who are interested in using code blocks.

Lexical is a rich text editor framework, which means that: 1. You can build a code editor based on Lexical. 2. Lexical is not specialized for code editor scenarios. This implies that if you want to build a code editor, Lexical offers you the flexibility to create your own; however, it does require some effort to do so. If you're looking for a solution that requires minimal effort, then it might not be as suitable as CodeMirror.

I don't believe that integrating CodeMirror into the code node is a wise idea (nor do I think the maintainers have the time or willingness to undertake such a task). In fact, if I understand correctly, the author of CodeMirror also developed another rich text editor, ProseMirror. Lexical is inspired by ProseMirror, applying React-like intrinsic mechanisms for improved functionality. From my experience, their behaviors are quite similar. Both manage an internal state, and you can configure their views. The difference is that in CodeMirror, one part is the state, and the other is the view, whereas in Lexical, states are composed of nodes, each with its own exportDOM method to configure the view. Therefore, you are suggesting add a state management framework into another, which is weird (CodeMirror is more like a vanilla JS framework and Lexical is more like a hybrid of React and vanilla JS).

Returning to your original question: if you want to enhance Lexical to make it more suitable for a code editor, you could create plugins for code completion, linting, etc. The idea would be to listen to editor changes, then trigger an event to communicate with your language server. When you receive information in response, update the editor to modify Lexical's internal state.

[Benbinbin]

Thanks, build a fully functional code editor from the ground up just using the Lexical sound great!

But this way must be harder than using existing solution, like CodeMirror.

Still looking forward to a "native" and better UX block code for Lexical.

[SalahAdDin]

Is there any official consideration on this issue?