Bug Fix: Fix ContextMenu's paste option retaining style

[citruscai]

Description

The contextmenu's paste does not retain style such as font size, highlighting, etc due to the clipboard API not supporting application/x-lexical-format. Even if you tried to register the custom web format in the clipboard, you will have to manually get the data string for the lexical form of the text. The context menu's copy option never had any problem saving the lexical format. The problem lies with the paste option only. My solution to this was to use the html/text of what's about to be pasted and convert it into LexicalJSON with the style saved to manually save in the data during insertion. This will only be done for paste that are used through ClipboardEvent. This approach serves as a band aid to the clipboard problem and I added a TODO note. Hopefully in the future, clipboard API will give us an easier way to fix this issue.

Closes #6720

Test plan

added an e2e test case that tests the context menu successfully pasting an altered rich text

Before

LEXICAL.DEV.-.Made.with.Clipchamp.mp4

After

Recording.2024-10-28.175124.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	❌ Failed (Inspect)			Oct 28, 2024 11:06pm
lexical-playground	❌ Failed (Inspect)			Oct 28, 2024 11:06pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.92 KB (0%)
lexical - esm	29.75 KB (0%)
@lexical/rich-text - cjs	38.57 KB (0%)
@lexical/rich-text - esm	31.65 KB (0%)
@lexical/plain-text - cjs	37.18 KB (0%)
@lexical/plain-text - esm	28.94 KB (0%)
@lexical/react - cjs	40.24 KB (0%)
@lexical/react - esm	33.01 KB (0%)

[etrepum]

Unfortunately this isn't the best approach to solving the issue, the way it should work is to have importDOM support all of the allowed styles. By default a very limited set of styles are supported for import (see applyTextFormatFromStyle in LexicalTextNode.ts) and font-size is not included.

There isn't really a very simple way to do it other than to add font-size support globally by patching applyTextFormatFromStyle which would not be backwards compatible (and not desired in many use cases, it would be unexpected to paste text from an email or spreadsheet and have it show up as a different size in many cases) or to configure the playground with a custom html import configuration that will preserve font-size (re #6770) in these cases.

[etrepum]

The reason why this works with JSON but not with HTML is just because the JSON is trusted, it's known to be generated with that specific lexical editor configuration (based on the namespace in the json), so the styles are taken as-is by the importJSON implementations of the respective nodes. The HTML content could be from anywhere and might not make sense in the document so it is trusted less and must be parsed much more conservatively.

[citruscai]

Unfortunately this isn't the best approach to solving the issue, the way it should work is to have importDOM support all of the allowed styles. By default a very limited set of styles are supported for import (see applyTextFormatFromStyle in LexicalTextNode.ts) and font-size is not included.

There isn't really a very simple way to do it other than to add font-size support globally by patching applyTextFormatFromStyle which would not be backwards compatible (and not desired in many use cases, it would be unexpected to paste text from an email or spreadsheet and have it show up as a different size in many cases) or to configure the playground with a custom html import configuration that will preserve font-size (re #6770) in these cases.

ok i will try to implement this approach!