facebook / lexical

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

Bug: when pasting markdown, the caret gets placed in the last block of code block which is quite surprising (this also triggers unwanted whole browser page scroll-downs/jumps for long markdown documents) #6305

Open vadimkantorov opened 3 weeks ago

vadimkantorov commented 3 weeks ago

Pasting/converting this:

hello world

echo hello world

places the caret inside the code block (which is quite arbitrary) and not in the beginning of the document: image

vadimkantorov commented 3 weeks ago

This problem with caret moved inside the code block still happens when pasting is done with:

$convertFromMarkdownString(markdown, PLAYGROUND_TRANSFORMERS)
$getRoot().selectStart()
etrepum commented 3 weeks ago

Related #6177

vadimkantorov commented 3 weeks ago

Also, how to ensure that the code blocks do recognize code language for things like

```shell
echo hi


This seems to work on https://playground.lexical.dev/ , but not in my "extracted playground" (extracted from release 0.16.0). Which part of Lexical code is responsible for this functionality? I'm using `PLAYGROUND_TRANSFORMERS`, but for my code "shell"-prefix gets still recognized as JavaScript
etrepum commented 3 weeks ago

The recognized languages come from prism imports

vadimkantorov commented 2 weeks ago

Regarding prism, in playground it somehow gets recognized as something none-highlightable shell image , although it is not on the list of languages in the dropdown, and seems not imported in https://github.com/facebook/lexical/blob/fcf1ae6d1b98dd4c7e288ba2e0a0f1f23f520a63/packages/lexical-code/src/CodeHighlighterPrism.ts

But in my own https://github.com/vadimkantorov/moncms/blob/gh-pages/indexEditorOnly.tsx (derived from playground's EditorOnly.tsx, everything else is precisely the playground's code) it somehow gets recognized as JavaScript (even worse than keeping it plain text): image

This happened on converting this markdown:

```shell
hello world
etrepum commented 2 weeks ago

If you want a language to appear in the list that doesn't ship bundled with lexical-code it needs to be explicitly imported. Prism just uses global variables so the import should be enough, but you need to be careful to make sure they don't get optimized out.

vadimkantorov commented 2 weeks ago

I'm still a bit tricked that playground treats shell somehow specially, because it is not on the language dropdown but still appears accepted (and in my version of playground it is silently replaced by JavaScript for some reason). I'll take a look on how lexical transforms the hint from backticks into the css class for prism...