Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [#21810] Allow default pasting behaviour in FontSizePicker #21812

Merged
merged 1 commit into from
Apr 27, 2020
Merged

fix: [#21810] Allow default pasting behaviour in FontSizePicker #21812

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 63 additions & 57 deletions packages/block-editor/src/components/copy-handler/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,83 @@
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
import { serialize, pasteHandler } from '@wordpress/blocks';
import { documentHasSelection } from '@wordpress/dom';
import { withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { getPasteEventData } from '../../utils/get-paste-event-data';

function CopyHandler( { children, handler } ) {
return (
<div onCopy={ handler } onCut={ handler } onPaste={ handler }>
{ children }
</div>
);
}
function CopyHandler( { children } ) {
const containerRef = useRef();

const {
getBlocksByClientId,
getSelectedBlockClientIds,
hasMultiSelection,
getSettings,
} = useSelect( ( select ) => select( 'core/block-editor' ), [] );

const { removeBlocks, replaceBlocks } = useDispatch( 'core/block-editor' );

export default compose( [
withDispatch( ( dispatch, ownProps, { select } ) => {
const {
getBlocksByClientId,
getSelectedBlockClientIds,
hasMultiSelection,
getSettings,
} = select( 'core/block-editor' );
const { removeBlocks, replaceBlocks } = dispatch( 'core/block-editor' );
const {
__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
} = getSettings();
const {
__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
} = getSettings();

return {
handler( event ) {
const selectedBlockClientIds = getSelectedBlockClientIds();
const handler = ( event ) => {
Copy link
Contributor

@youknowriad youknowriad Apr 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's one small subtle difference that potentially can have performance impact. Since this is an inline function, potentially, this could rerender children often. I think it's good to start like you did (without any memoization) but we just need to check that the component is not being rerendered on each "store change".

For instance you can add a "console log" inside the component and type on a paragraph and see if the logging is repeated or not as you type.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While typing console.log is not executed. When copying/pasting there are two statements in console.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine :) Thanks for the tests

const selectedBlockClientIds = getSelectedBlockClientIds();

if ( selectedBlockClientIds.length === 0 ) {
return;
}
if ( selectedBlockClientIds.length === 0 ) {
return;
}

// Always handle multiple selected blocks.
// Let native copy behaviour take over in input fields.
if ( ! hasMultiSelection() && documentHasSelection() ) {
return;
}
// Always handle multiple selected blocks.
// Let native copy behaviour take over in input fields.
if ( ! hasMultiSelection() && documentHasSelection() ) {
return;
}

event.preventDefault();
if ( ! containerRef.current.contains( event.target ) ) {
return;
}
event.preventDefault();

if ( event.type === 'copy' || event.type === 'cut' ) {
const blocks = getBlocksByClientId(
selectedBlockClientIds
);
const serialized = serialize( blocks );
if ( event.type === 'copy' || event.type === 'cut' ) {
const blocks = getBlocksByClientId( selectedBlockClientIds );
const serialized = serialize( blocks );

event.clipboardData.setData( 'text/plain', serialized );
event.clipboardData.setData( 'text/html', serialized );
}
event.clipboardData.setData( 'text/plain', serialized );
event.clipboardData.setData( 'text/html', serialized );
}

if ( event.type === 'cut' ) {
removeBlocks( selectedBlockClientIds );
} else if ( event.type === 'paste' ) {
const { plainText, html } = getPasteEventData( event );
const blocks = pasteHandler( {
HTML: html,
plainText,
mode: 'BLOCKS',
canUserUseUnfilteredHTML,
} );
if ( event.type === 'cut' ) {
removeBlocks( selectedBlockClientIds );
} else if ( event.type === 'paste' ) {
const { plainText, html } = getPasteEventData( event );
const blocks = pasteHandler( {
HTML: html,
plainText,
mode: 'BLOCKS',
canUserUseUnfilteredHTML,
} );

replaceBlocks( selectedBlockClientIds, blocks );
}
};

return (
<div
ref={ containerRef }
onCopy={ handler }
onCut={ handler }
onPaste={ handler }
>
{ children }
</div>
);
}

replaceBlocks( selectedBlockClientIds, blocks );
}
},
};
} ),
] )( CopyHandler );
export default CopyHandler;