diff --git a/src/block/text/edit.js b/src/block/text/edit.js index 43c8426358..84ad8c26c5 100644 --- a/src/block/text/edit.js +++ b/src/block/text/edit.js @@ -2,6 +2,7 @@ * Internal dependencies */ import blockStyles from './style' +import { useOnPaste } from './util' /** * External dependencies @@ -118,6 +119,8 @@ const Edit = props => { version: VERSION, } ) + const onPaste = useOnPaste( clientId ) + return ( <> { onMerge={ mergeBlocks } onRemove={ onRemove } onReplace={ onReplace } + onPaste={ onPaste } /> { props.isHovered && } diff --git a/src/block/text/util.js b/src/block/text/util.js new file mode 100644 index 0000000000..068b023956 --- /dev/null +++ b/src/block/text/util.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data' +import { pasteHandler } from '@wordpress/blocks' +import { store as blockEditorStore } from '@wordpress/block-editor' +import { useCallback } from '@wordpress/element' + +export const useOnPaste = clientId => { + const { replaceBlocks } = useDispatch( blockEditorStore ) + + return useCallback( event => { + event.preventDefault() + // Get the raw HTML from the clipboard + const html = event.clipboardData?.getData( 'text/html' ) || '' + const plain = event.clipboardData?.getData( 'text/plain' ) || '' + + const blocks = pasteHandler( { + HTML: html, + plainText: plain, + mode: 'BLOCKS', + } ) + + if ( blocks ) { + event.preventDefault() + // Replace the current custom block with the parsed block(s) + replaceBlocks( clientId, blocks ) + } + }, [ clientId ] ) +}