fix (text): force the replacement of parsed blocks for pasting serial…

…ized bl… (#3367)

* fix: force the replacement of parsed blocks for pasting serialized blocks

* Update src/block/text/util.js

---------

Co-authored-by: Benjamin Intal <[email protected]>

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 (
 		<>
 			<InspectorControls
@@ -141,6 +144,7 @@ const Edit = props => {
 					onMerge={ mergeBlocks }
 					onRemove={ onRemove }
 					onReplace={ onReplace }
+					onPaste={ onPaste }
 				/>
 			</BlockDiv>
 			{ props.isHovered && <MarginBottom /> }

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 ] )
+}