Customizing behavior of paste and drop on Wordpress Gutenberg Editor

[mbarsott]

We have a requirement from our customer that the Paste and Drop events have a very particular behavior on the wp-admin when editing posts. They should only add one paragraph of content in text only format.

I have created js event handler functions that work fine on regular html:

function dropOneTextLineEventHandler(e) {
	e.preventDefault();
	let text = e.dataTransfer.getData("text/plain");
	e.target.innerText = getFirstParagraph(text);
}

function pasteOneTextLineEventHandler(e) {
	replaceClipboardContent()
		.then((_) => {
			return;
		})
		.catch((error) => console.error(error));
}

In the case of paste I am using the Clipboard API to replace the clipboard contents with only one paragraph in text format before the event bubbles up:

async function replaceClipboardContent() {
	let text = await navigator.clipboard.readText();
	text = getFirstParagraph(text);
	await navigator.clipboard.writeText(text);
}

And I have an even simpler function to extract the first paragraph from text:

function getFirstParagraph(text) {
	const firstLine = text.split("\n")[0];
	return firstLine ? firstLine : text;
}

On the Gutenberg side I am struggling to add the event listeners using the React components.

I have tried adding them by using a Higher Order Component on top of the Block Editors but that does not seem to work:

const withClipboardChanges = createHigherOrderComponent(
	(GutenbergComponent) => {
		return (props) => {
			useEffect(() => {
				setGlobalEditorPasteEventListener();
			}, []);
			return (
				<GutenbergComponent
					onPaste={pasteOneTextLineEventHandler}
					onDrop={dropOneTextLineEventHandler}
					{...props}
				/>
			);
		};
	},
	"withClipboardChanges"
);

addFilter(
	"editor.BlockEdit",
	"single-line-text-only-paste/with-clipboard-changes",
	withClipboardChanges
);

I also tried setting up a global paste event listener on the root container for the editor, as it seems users can paste things directly in the editor, and not directly on existing blocks:

function setGlobalEditorPasteEventListener() {
	var gutenbergContainer = document.querySelector(".is-root-container");
	gutenbergContainer.removeEventListener(
		"paste",
		pasteOneTextLineEventHandler
	);
	gutenbergContainer.addEventListener("paste", pasteOneTextLineEventHandler);
}

I also tried, with partial success, to subscribe to the wp.data events, and manually add the event listeners to the element being created, but since the element is not rendered yet, I had to add a timeout to run the code in the future, a solution that lacks elegance:

let blockList = getBlocks();

wp.data.subscribe(() => {
	const newBlockList = getBlocks();
	const isBlockAdded = newBlockList.length > blockList.length;

	if (!isBlockAdded) return;

	const addedBlocks = newBlockList.filter((x) => !blockList.includes(x));
	blockList = newBlockList;

	addedBlocks.map((blockItem) => {
		const clientId = blockItem.clientId;

		setTimeout(function () {
			const elem = document.querySelector(`[data-block="${clientId}"]`);

			elem.addEventListener("paste", pasteOneTextLineEventHandler);

			elem.addEventListener("drop", dropOneTextLineEventHandler);
		}, 100);
	});
});

I feel there is a simpler way to add the event listeners to all blocks (or at least the ones where users can paste text), but I could not find it.