Is there a 'Lexical way' to copy text content to clipboard ?

[aaronzomback]

I'm currently trying to create a copy to clipboard function, where I have a clipboard icon above the editor.

Here is my current implementation:

  const stringifiedEditorState = editor?.getEditorState()
  const parsedEditorState = stringifiedEditorState && editor?.parseEditorState(stringifiedEditorState.toJSON())
  const captionPreview = parsedEditorState?.read(() => $getRoot().getTextContent())
  const onCopyToClipboard = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation()
    setTextCopied(true)
    navigator.clipboard.writeText(captionPreview ?? '')
    setTimeout(() => setTextCopied(false), 1500)
  }

I am able to receive the copied content, but for some reason it seems to enter 1 more line than between new paragraph nodes.

I took a look at the copyToClipboard plugin, but I don't understand how the API is supposed to work or help.

Any insights would be greatly appreciated.

❗️I can also confirm it seems to be registering linebreaks for each paragraph node. But it also registers multiple sometimes as confirmed by the /n line breaks in the console log

[ivailop7]

There isn't an 'officially endorsed way', but a slightly better implementation you can have a look is this one:

lexical/packages/lexical-playground/src/nodes/TableComponent.tsx

Lines 1139 to 1168 in 5162dd2

	const copyDataToClipboard = (
	event: ClipboardEvent,
	htmlString: string,
	lexicalString: string,
	plainTextString: string,
	) => {
	const clipboardData =
	event instanceof KeyboardEvent ? null : event.clipboardData;
	event.preventDefault();
	if (clipboardData != null) {
	clipboardData.setData('text/html', htmlString);
	clipboardData.setData('text/plain', plainTextString);
	clipboardData.setData('application/x-lexical-editor', lexicalString);
	} else {
	const clipboard = navigator.clipboard;
	if (clipboard != null) {
	// Most browsers only support a single item in the clipboard at one time.
	// So we optimize by only putting in HTML.
	const data = [
	new ClipboardItem({
	'text/html': new Blob([htmlString as BlobPart], {
	type: 'text/html',
	}),
	}),
	];
	clipboard.write(data);
	}
	}
	};

[aaronzomback]

Thanks @ivailop7 for your reply --

I actually think to solve the problem I'm facing I need to override ParagraphNodes with LineBreakNodes since the ParagraphNode contains too many \n line break characters causing too much space between lines when copy + pasting the text content into social media posts.

I'm not sure if this is the correct approach, since it seems initially a ParagraphNode must be appended to the RootNode in order for text content to be inserted.

From your experience, do you have any better ideas how this can be achieved ?

Thanks a lot