lexical
lexical copied to clipboard
Bug: Pasting certain text breaks the editor
I tried copying a character from a google search result (as seen in the video), and pasting it into lexical. This creates additional nodes that cannot be removed (in my example, I can't delete the newline, link, or paragraph nodes).
https://github.com/user-attachments/assets/2de118a1-b9c2-4cbf-9adb-13e9bd69e783
I'm not sure how deep this issue goes, so if someone could guide me in how I could remove paste/drag-drop formatting altogether, that would be very much appreciated.
Also, this is the HTML of the text I copied:
<meta charset='utf-8'><a jsname="UWckNb" href="https://symbl.cc/en/00B2/" data-ved="2ahUKEwjon6Wh2aWIAxV0lokEHbkOEZoQFnoECBsQAQ" style="color: var(--JKqx2); text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); outline: 0px; font-family: Arial, sans-serif; font-size: small; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255);"><h3 class="LC20lb MBeuO DKV0Md" style="font-weight: 400; margin: 18px 0px 3px; padding: 5px 0px 0px; font-size: 22px; line-height: 1.3; font-family: Arial, sans-serif; display: inline-block;">²</h3></a>
I suspect that the bug has to do with having a heading element inside of a link. To remove formatting you would have to register a PASTE_COMMAND handler at a higher priority than the editor's and modify the event or handle it directly. The way copy and paste work isn't really extensible in an easier way than that.
Hi etrepum. Thanks for the tip! Would registering PASTE_COMMAND also override drag-drop?
No, that would be CONTROLLED_TEXT_INSERTION_COMMAND
No, that would be
CONTROLLED_TEXT_INSERTION_COMMAND
thanks :)
This is the plugin I came up with:
` function StripFormattingPlugin() {
const handlePaste = (e) => {
const selection = $getSelection();
if (e instanceof InputEvent || e instanceof ClipboardEvent) {
let text = '';
if (e instanceof InputEvent) {
text = e.dataTransfer?.getData('text/plain');
} else {
text = e.clipboardData?.getData('text/plain');
}
e.preventDefault();
if (selection) {
selection.insertText(text);
}
return true;
}
return false;
};
const [editor] = useLexicalComposerContext();
useEffect(() => {
return mergeRegister(
editor.registerCommand(PASTE_COMMAND, handlePaste, COMMAND_PRIORITY_CRITICAL),
editor.registerCommand(CONTROLLED_TEXT_INSERTION_COMMAND, handlePaste, COMMAND_PRIORITY_CRITICAL)
)
}, [editor]);
} `
@tom-sze , can you please close this issue?