diff --git a/shortcode-paste-handler.js b/shortcode-paste-handler.js index db8b079..8b77bee 100644 --- a/shortcode-paste-handler.js +++ b/shortcode-paste-handler.js @@ -1,4 +1,6 @@ +// Wait until the DOM is fully loaded wp.domReady(() => { + // Define the blocks that should be treated as plain text blocks const allowedPlainTextBlocks = [ 'core/paragraph', 'core/heading', @@ -7,42 +9,52 @@ wp.domReady(() => { 'core/preformatted' ]; + // Subscribe to the WordPress editor data store to monitor changes wp.data.subscribe(() => { const { isTyping, getSelectedBlock } = wp.data.select('core/block-editor'); + // Only proceed if the user is not currently typing if (!isTyping()) { const block = getSelectedBlock(); + // Check if the currently selected block is one of the allowed plain text blocks if (block && allowedPlainTextBlocks.includes(block.name)) { const blockElement = document.querySelector(`[data-block="${block.clientId}"]`); if (blockElement) { - // Remove any existing paste listener first to avoid duplicates + // Ensure that any existing paste listener is removed to prevent duplication blockElement.removeEventListener('paste', handlePaste); - // Add the paste event listener + // Add a new paste event listener to handle the shortcode paste logic blockElement.addEventListener('paste', handlePaste, { once: true }); } } } }); + /** + * Handle the paste event and prevent shortcode blocks from being automatically inserted. + * @param {ClipboardEvent} event - The paste event triggered by the user. + */ function handlePaste(event) { + // Get the pasted content from the clipboard as plain text const clipboardData = event.clipboardData.getData('text'); - // Check if the pasted content contains a shortcode + // Check if the pasted content contains a shortcode (e.g., [shortcode]) if (/\[[^\]]+\]/.test(clipboardData)) { - event.preventDefault(); + event.preventDefault(); // Stop the default paste behavior + // Get the current text selection range const selection = window.getSelection(); if (selection.rangeCount > 0) { - const range = selection.getRangeAt(0); - range.deleteContents(); - range.insertNode(document.createTextNode(clipboardData)); + const range = selection.getRangeAt(0); // Get the first range + range.deleteContents(); // Remove any selected content + range.insertNode(document.createTextNode(clipboardData)); // Insert the pasted content as plain text - // Trigger the block content update + // Update the block's content in the Gutenberg editor const blockId = event.target.closest('[data-block]').dataset.block; const blockElement = document.querySelector(`[data-block="${blockId}"]`); + // Dispatch an update to refresh the block's content wp.data.dispatch('core/block-editor').updateBlockAttributes(blockId, { content: blockElement.innerText });