Skip to content

Commit

Permalink
fix (WP 6.6): icon list on paste (#3230)
Browse files Browse the repository at this point in the history
* remove unused useCopy

* add onPaste

* fix on paste for lists from ms word and gdocs

* update onPaste
  • Loading branch information
mxkae committed Jul 13, 2024
1 parent c4c940b commit 802c73c
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 35 deletions.
3 changes: 3 additions & 0 deletions src/block/icon-list-item/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getUseSvgDef } from '../icon-list/util'
import {
convertToListItems,
useOnSplit,
useOnPaste,
useEnter,
} from './util'

Expand Down Expand Up @@ -95,6 +96,7 @@ const Edit = props => {

const useEnterRef = useEnter( text, clientId )
const onSplit = useOnSplit( clientId, attributes )
const onPaste = useOnPaste( clientId, parentBlock?.clientId, attributes, setAttributes )

const onMerge = forward => {
mergeBlocks( forward )
Expand Down Expand Up @@ -168,6 +170,7 @@ const Edit = props => {
className={ textClassNames }
onSplit={ onSplit }
onMerge={ onMerge }
onPaste={ onPaste }
onReplace={ onReplace
? ( blocks, ...args ) => {
onReplace(
Expand Down
80 changes: 45 additions & 35 deletions src/block/icon-list-item/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@
*/
import { useRefEffect } from '@wordpress/compose'
import { useCallback, useRef } from '@wordpress/element'
import { useSelect, useDispatch } from '@wordpress/data'
import {
useSelect, useDispatch, dispatch,
} from '@wordpress/data'
import {
cloneBlock,
switchToBlockType,
createBlock,
getDefaultBlockName,
pasteHandler,
} from '@wordpress/blocks'
import { store as blockEditorStore } from '@wordpress/block-editor'
import { ENTER } from '@wordpress/keycodes'
Expand Down Expand Up @@ -71,40 +74,6 @@ export const useOnSplit = ( clientId, attributes ) => {
}, [ clientId, attributes ] )
}

export const useCopy = clientId => {
const {
getBlockRootClientId, getBlockName, getBlockAttributes,
} =
useSelect( blockEditorStore )

return useRefEffect( node => {
function onCopy( event ) {
// The event propagates through all nested lists, so don't override
// when copying nested list items.
if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
return
}

const rootClientId = getBlockRootClientId( clientId )
event.clipboardData.setData(
'__unstableWrapperBlockName',
getBlockName( rootClientId )
)
event.clipboardData.setData(
'__unstableWrapperBlockAttributes',
JSON.stringify( getBlockAttributes( rootClientId ) )
)
}

node.addEventListener( 'copy', onCopy )
node.addEventListener( 'cut', onCopy )
return () => {
node.removeEventListener( 'copy', onCopy )
node.removeEventListener( 'cut', onCopy )
}
}, [] )
}

export const useEnter = ( text, clientId ) => {
const {
removeBlocks, selectionChange, insertBlocks,
Expand Down Expand Up @@ -181,3 +150,44 @@ export const useEnter = ( text, clientId ) => {
[ clientId ]
)
}

export const useOnPaste = ( clientId, parentClientId, attributes, setAttributes ) => {
const { insertBlocks } = useDispatch( blockEditorStore )
const { getBlockIndex } = useSelect( blockEditorStore )

return useCallback( event => {
event.preventDefault()
const html = event.clipboardData.getData( 'text/html' )
const plain = event.clipboardData.getData( 'text/plain' )

// Convert first to core/list block.
const list = pasteHandler( {
HTML: html,
plainText: plain,
mode: 'BLOCKS',
} )

// If list[0] has inner blocks, it has been converted to core/list block, else list has core/paragraph elements.
const items = list[ 0 ].innerBlocks.length ? list[ 0 ].innerBlocks : list

const content = items.map( item => item.attributes.content.toPlainText().replaceAll( '\n', '<br>' ) )

// If current icon list item has no text, use the first item as text.
if ( ! attributes.text ) {
const firstItem = content.shift()
setAttributes( { text: firstItem } )
}

// create new icon list items
const newBlocks = content.map( text => {
const block = createBlock( 'stackable/icon-list-item', {
...attributes,
text,
} )

return block
} )
dispatch( 'core/block-editor' ).__unstableMarkNextChangeAsNotPersistent()
insertBlocks( newBlocks, getBlockIndex( clientId ) + 1, parentClientId )
}, [ clientId, parentClientId, attributes, setAttributes ] )
}

0 comments on commit 802c73c

Please sign in to comment.