lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: Pasting certain text breaks the editor

Open tom-sze opened this issue 1 year ago • 5 comments

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>

tom-sze avatar Sep 03 '24 04:09 tom-sze

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.

etrepum avatar Sep 03 '24 19:09 etrepum

Hi etrepum. Thanks for the tip! Would registering PASTE_COMMAND also override drag-drop?

tom-sze avatar Sep 03 '24 19:09 tom-sze

No, that would be CONTROLLED_TEXT_INSERTION_COMMAND

etrepum avatar Sep 03 '24 19:09 etrepum

No, that would be CONTROLLED_TEXT_INSERTION_COMMAND

thanks :)

tom-sze avatar Sep 03 '24 19:09 tom-sze

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 avatar Sep 03 '24 20:09 tom-sze

@tom-sze , can you please close this issue?

moy2010 avatar Oct 04 '24 17:10 moy2010