From cac2c20e4e27cbfa3fdd7feab8a488180399a957 Mon Sep 17 00:00:00 2001 From: iseulde Date: Sat, 21 Sep 2019 15:14:17 +0300 Subject: [PATCH] Fix cross selection delay in Safari --- .../src/components/block-list/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 10f2c6ef07971..98b1b56d36196 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -118,6 +118,20 @@ class BlockList extends Component { this.startClientId = clientId; this.props.onStartMultiSelect(); window.addEventListener( 'mouseup', this.onSelectionEnd ); + + // Removing the contenteditable attributes within the block editor is + // essential for selection to work across editable areas. The edible + // hosts are removed, allowing selection to be extended outside the + // DOM element. `onStartMultiSelect` sets a flag in the store so the + // rich text components are updated, but the rerender may happen very + // slowly, especially in Safari for the blocks that are asynchonously + // rendered. To ensure the browser instantly removes the selection + // boundaries, we remove the contenteditable attributes manually. + Array.from( + document.querySelectorAll( '.block-editor-rich-text__editable' ) + ).forEach( ( node ) => { + node.removeAttribute( 'contenteditable' ); + } ); } /**