facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.4k stars 1.64k forks source link

Proposal: Upstream more of `PLAYGROUND_TRANSFORMERS` (package `lexical-playground`) to `TRANSFORMERS` (package `lexical-markdown`) #6276

Open vadimkantorov opened 3 months ago

vadimkantorov commented 3 months ago

I'm calling $convertFromMarkdownString like following:

            editorRef.current?.update(() => {
                const editorState = editorRef.current?.getEditorState()
                if (editorState != null) {
                    $convertFromMarkdownString(markdown, TRANSFORMERS)
                    $getRoot().selectStart()
                }
            })

Normally it renders markdown correctly on the first calling, but not for images:

# hello world

![](https://raw.githubusercontent.com/vadimkantorov/moncms/gh-pages/assets/cat-typing.29244fe9.gif)

gets rendered as image:

header is rendered correctly, but not the image. It is important for markdown documents with images to be rendered correctly on the first go (also setting <img src="https://raw.githubusercontent.com/vadimkantorov/moncms/gh-pages/assets/cat-typing.29244fe9.gif" height="100px" /> does not seem to be recognized/rendered by the Lexical's markdown plugin, right?).

If I then click on M↓ twice, the images gets then rendered. How can I render it directly on the first go? (also when clicking M↓ twice, the caret jumps to the end which may cause unneeded scroll-downs)

This problem is relevant for both v0.12.5 and v0.16.0

Thanks!

vadimkantorov commented 3 months ago

So the problem was in using TRANSFOMERS from https://github.com/facebook/lexical/blob/main/packages/lexical-markdown/src/index.ts instead of PLAYGROUND_TRANSFORMERS from https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts

So maybe a question becomes if more of PLAYGROUND_TRANSFOMERS should be upstreamed/added to TRANSFORMERS

vadimkantorov commented 3 months ago

But HTML images <img src="https://raw.githubusercontent.com/vadimkantorov/moncms/gh-pages/assets/yellow-flower.a2a7c7a2.jpg" height="100px"/> are still not being rendered/recognized even with PLAYGROUND_TRANSFORMERS (here img tags are needed to specify image height which is impossible to do in bare markdown)

Recognized okay in GitHub Issues Markdown, example below: