@wordpress/block-editor 8.4.0 → 8.5.0

package/build-module/components/block-list/use-block-props/use-scroll-into-view.js

@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import scrollIntoView from 'dom-scroll-into-view';
-/**
- * WordPress dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { getScrollContainer } from '@wordpress/dom';
-/**
- * Internal dependencies
- */
-
-import { store as blockEditorStore } from '../../../store';
-export function useScrollIntoView(clientId) {
-  const ref = useRef();
-  const isSelectionEnd = useSelect(select => {
-    const {
-      isBlockSelected,
-      getBlockSelectionEnd
-    } = select(blockEditorStore);
-    return isBlockSelected(clientId) || getBlockSelectionEnd() === clientId;
-  }, [clientId]); // Note that we can't use `useRefEffect` here, since an element change does
-  // not mean we can scroll. `isSelectionEnd` should be the sole dependency,
-  // while with `useRefEffect`, the element is a dependency as well.
-
-  useEffect(() => {
-    if (!isSelectionEnd) {
-      return;
-    }
-
-    const extentNode = ref.current;
-
-    if (!extentNode) {
-      return;
-    } // If the block is focused, the browser will already have scrolled into
-    // view if necessary.
-
-
-    if (extentNode.contains(extentNode.ownerDocument.activeElement)) {
-      return;
-    }
-
-    const scrollContainer = getScrollContainer(extentNode) || extentNode.ownerDocument.defaultView; // If there's no scroll container, it follows that there's no scrollbar
-    // and thus there's no need to try to scroll into view.
-
-    if (!scrollContainer) {
-      return;
-    }
-
-    scrollIntoView(extentNode, scrollContainer, {
-      onlyScrollIfNeeded: true
-    });
-  }, [isSelectionEnd]);
-  return ref;
-}
-//# sourceMappingURL=use-scroll-into-view.js.map

package/build-module/components/block-list/use-block-props/use-scroll-into-view.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js"],"names":["scrollIntoView","useEffect","useRef","useSelect","getScrollContainer","store","blockEditorStore","useScrollIntoView","clientId","ref","isSelectionEnd","select","isBlockSelected","getBlockSelectionEnd","extentNode","current","contains","ownerDocument","activeElement","scrollContainer","defaultView","onlyScrollIfNeeded"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,sBAA3B;AAEA;AACA;AACA;;AACA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,kBAAT,QAAmC,gBAAnC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,gBAA1C;AAEA,OAAO,SAASC,iBAAT,CAA4BC,QAA5B,EAAuC;AAC7C,QAAMC,GAAG,GAAGP,MAAM,EAAlB;AACA,QAAMQ,cAAc,GAAGP,SAAS,CAC7BQ,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAA4CF,MAAM,CACvDL,gBADuD,CAAxD;AAIA,WACCM,eAAe,CAAEJ,QAAF,CAAf,IACAK,oBAAoB,OAAOL,QAF5B;AAIA,GAV8B,EAW/B,CAAEA,QAAF,CAX+B,CAAhC,CAF6C,CAgB7C;AACA;AACA;;AACAP,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAES,cAAP,EAAwB;AACvB;AACA;;AAED,UAAMI,UAAU,GAAGL,GAAG,CAACM,OAAvB;;AAEA,QAAK,CAAED,UAAP,EAAoB;AACnB;AACA,KATe,CAWhB;AACA;;;AACA,QAAKA,UAAU,CAACE,QAAX,CAAqBF,UAAU,CAACG,aAAX,CAAyBC,aAA9C,CAAL,EAAqE;AACpE;AACA;;AAED,UAAMC,eAAe,GACpBf,kBAAkB,CAAEU,UAAF,CAAlB,IACAA,UAAU,CAACG,aAAX,CAAyBG,WAF1B,CAjBgB,CAqBhB;AACA;;AACA,QAAK,CAAED,eAAP,EAAyB;AACxB;AACA;;AAEDnB,IAAAA,cAAc,CAAEc,UAAF,EAAcK,eAAd,EAA+B;AAC5CE,MAAAA,kBAAkB,EAAE;AADwB,KAA/B,CAAd;AAGA,GA9BQ,EA8BN,CAAEX,cAAF,CA9BM,CAAT;AAgCA,SAAOD,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport scrollIntoView from 'dom-scroll-into-view';\n\n/**\n * WordPress dependencies\n */\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../../store';\n\nexport function useScrollIntoView( clientId ) {\n\tconst ref = useRef();\n\tconst isSelectionEnd = useSelect(\n\t\t( select ) => {\n\t\t\tconst { isBlockSelected, getBlockSelectionEnd } = select(\n\t\t\t\tblockEditorStore\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tisBlockSelected( clientId ) ||\n\t\t\t\tgetBlockSelectionEnd() === clientId\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Note that we can't use `useRefEffect` here, since an element change does\n\t// not mean we can scroll. `isSelectionEnd` should be the sole dependency,\n\t// while with `useRefEffect`, the element is a dependency as well.\n\tuseEffect( () => {\n\t\tif ( ! isSelectionEnd ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst extentNode = ref.current;\n\n\t\tif ( ! extentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the block is focused, the browser will already have scrolled into\n\t\t// view if necessary.\n\t\tif ( extentNode.contains( extentNode.ownerDocument.activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollContainer =\n\t\t\tgetScrollContainer( extentNode ) ||\n\t\t\textentNode.ownerDocument.defaultView;\n\n\t\t// If there's no scroll container, it follows that there's no scrollbar\n\t\t// and thus there's no need to try to scroll into view.\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\n\t\tscrollIntoView( extentNode, scrollContainer, {\n\t\t\tonlyScrollIfNeeded: true,\n\t\t} );\n\t}, [ isSelectionEnd ] );\n\n\treturn ref;\n}\n"]}

package/src/components/block-list/use-block-props/use-multi-selection.js

@@ -1,227 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-import { getBlockClientId } from '../../../utils/dom';
-
-/**
- * Sets the `contenteditable` wrapper element to `value`.
- *
- * @param {HTMLElement} node  Block element.
- * @param {boolean}     value `contentEditable` value (true or false)
- */
-export function setContentEditableWrapper( node, value ) {
-	// Since `closest` considers `node` as a candidate, use `parentElement`.
-	node.parentElement.closest( '[contenteditable]' ).contentEditable = value;
-}
-
-/**
- * Sets a multi-selection based on the native selection across blocks.
- *
- * @param {string} clientId Block client ID.
- */
-export function useMultiSelection( clientId ) {
-	const {
-		startMultiSelect,
-		stopMultiSelect,
-		multiSelect,
-		selectBlock,
-	} = useDispatch( blockEditorStore );
-	const {
-		isSelectionEnabled,
-		isBlockSelected,
-		getBlockParents,
-		getBlockSelectionStart,
-		hasMultiSelection,
-	} = useSelect( blockEditorStore );
-	return useRefEffect(
-		( node ) => {
-			const { ownerDocument } = node;
-			const { defaultView } = ownerDocument;
-
-			let anchorElement;
-			let rafId;
-
-			function onSelectionChange( { isSelectionEnd } ) {
-				const selection = defaultView.getSelection();
-
-				// If no selection is found, end multi selection and disable the
-				// contentEditable wrapper.
-				if ( ! selection.rangeCount || selection.isCollapsed ) {
-					setContentEditableWrapper( node, false );
-					return;
-				}
-
-				const endClientId = getBlockClientId( selection.focusNode );
-				const isSingularSelection = clientId === endClientId;
-
-				if ( isSingularSelection ) {
-					selectBlock( clientId );
-
-					// If the selection is complete (on mouse up), and no
-					// multiple blocks have been selected, set focus back to the
-					// anchor element. if the anchor element contains the
-					// selection. Additionally, the contentEditable wrapper can
-					// now be disabled again.
-					if ( isSelectionEnd ) {
-						setContentEditableWrapper( node, false );
-
-						if ( selection.rangeCount ) {
-							const {
-								commonAncestorContainer,
-							} = selection.getRangeAt( 0 );
-
-							if (
-								anchorElement.contains(
-									commonAncestorContainer
-								)
-							) {
-								anchorElement.focus();
-							}
-						}
-					}
-				} else {
-					const startPath = [
-						...getBlockParents( clientId ),
-						clientId,
-					];
-					const endPath = [
-						...getBlockParents( endClientId ),
-						endClientId,
-					];
-					const depth =
-						Math.min( startPath.length, endPath.length ) - 1;
-
-					multiSelect( startPath[ depth ], endPath[ depth ] );
-				}
-			}
-
-			function onSelectionEnd() {
-				ownerDocument.removeEventListener(
-					'selectionchange',
-					onSelectionChange
-				);
-				// Equivalent to attaching the listener once.
-				defaultView.removeEventListener( 'mouseup', onSelectionEnd );
-				// The browser selection won't have updated yet at this point,
-				// so wait until the next animation frame to get the browser
-				// selection.
-				rafId = defaultView.requestAnimationFrame( () => {
-					onSelectionChange( { isSelectionEnd: true } );
-					stopMultiSelect();
-				} );
-			}
-
-			function onMouseLeave( { buttons } ) {
-				// The primary button must be pressed to initiate selection.
-				// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-				if ( buttons !== 1 ) {
-					return;
-				}
-
-				if ( ! isSelectionEnabled() || ! isBlockSelected( clientId ) ) {
-					return;
-				}
-
-				anchorElement = ownerDocument.activeElement;
-				startMultiSelect();
-
-				// `onSelectionStart` is called after `mousedown` and
-				// `mouseleave` (from a block). The selection ends when
-				// `mouseup` happens anywhere in the window.
-				ownerDocument.addEventListener(
-					'selectionchange',
-					onSelectionChange
-				);
-				defaultView.addEventListener( 'mouseup', onSelectionEnd );
-
-				// Allow cross contentEditable selection by temporarily making
-				// all content editable. We can't rely on using the store and
-				// React because re-rending happens too slowly. We need to be
-				// able to select across instances immediately.
-				setContentEditableWrapper( node, true );
-			}
-
-			function onMouseDown( event ) {
-				// The main button.
-				// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-				if ( ! isSelectionEnabled() || event.button !== 0 ) {
-					return;
-				}
-
-				if ( event.shiftKey ) {
-					const blockSelectionStart = getBlockSelectionStart();
-					// By checking `blockSelectionStart` to be set, we handle the
-					// case where we select a single block. We also have to check
-					// the selectionEnd (clientId) not to be included in the
-					// `blockSelectionStart`'s parents because the click event is
-					// propagated.
-					const startParents = getBlockParents( blockSelectionStart );
-					if (
-						blockSelectionStart &&
-						blockSelectionStart !== clientId &&
-						! startParents?.includes( clientId )
-					) {
-						const startPath = [
-							...startParents,
-							blockSelectionStart,
-						];
-						const endPath = [
-							...getBlockParents( clientId ),
-							clientId,
-						];
-						const depth =
-							Math.min( startPath.length, endPath.length ) - 1;
-						const start = startPath[ depth ];
-						const end = endPath[ depth ];
-						// Handle the case of having selected a parent block and
-						// then shift+click on a child.
-						if ( start !== end ) {
-							setContentEditableWrapper( node, true );
-							multiSelect( start, end );
-							event.preventDefault();
-						}
-					}
-				} else if ( hasMultiSelection() ) {
-					// Allow user to escape out of a multi-selection to a
-					// singular selection of a block via click. This is handled
-					// here since focus handling excludes blocks when there is
-					// multiselection, as focus can be incurred by starting a
-					// multiselection (focus moved to first block's multi-
-					// controls).
-					selectBlock( clientId );
-				}
-			}
-
-			node.addEventListener( 'mousedown', onMouseDown );
-			node.addEventListener( 'mouseleave', onMouseLeave );
-
-			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
-				node.removeEventListener( 'mouseleave', onMouseLeave );
-				ownerDocument.removeEventListener(
-					'selectionchange',
-					onSelectionChange
-				);
-				defaultView.removeEventListener( 'mouseup', onSelectionEnd );
-				defaultView.cancelAnimationFrame( rafId );
-			};
-		},
-		[
-			clientId,
-			startMultiSelect,
-			stopMultiSelect,
-			multiSelect,
-			selectBlock,
-			isSelectionEnabled,
-			isBlockSelected,
-			getBlockParents,
-		]
-	);
-}

package/src/components/block-list/use-block-props/use-scroll-into-view.js

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import scrollIntoView from 'dom-scroll-into-view';
-
-/**
- * WordPress dependencies
- */
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { getScrollContainer } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-export function useScrollIntoView( clientId ) {
-	const ref = useRef();
-	const isSelectionEnd = useSelect(
-		( select ) => {
-			const { isBlockSelected, getBlockSelectionEnd } = select(
-				blockEditorStore
-			);
-
-			return (
-				isBlockSelected( clientId ) ||
-				getBlockSelectionEnd() === clientId
-			);
-		},
-		[ clientId ]
-	);
-
-	// Note that we can't use `useRefEffect` here, since an element change does
-	// not mean we can scroll. `isSelectionEnd` should be the sole dependency,
-	// while with `useRefEffect`, the element is a dependency as well.
-	useEffect( () => {
-		if ( ! isSelectionEnd ) {
-			return;
-		}
-
-		const extentNode = ref.current;
-
-		if ( ! extentNode ) {
-			return;
-		}
-
-		// If the block is focused, the browser will already have scrolled into
-		// view if necessary.
-		if ( extentNode.contains( extentNode.ownerDocument.activeElement ) ) {
-			return;
-		}
-
-		const scrollContainer =
-			getScrollContainer( extentNode ) ||
-			extentNode.ownerDocument.defaultView;
-
-		// If there's no scroll container, it follows that there's no scrollbar
-		// and thus there's no need to try to scroll into view.
-		if ( ! scrollContainer ) {
-			return;
-		}
-
-		scrollIntoView( extentNode, scrollContainer, {
-			onlyScrollIfNeeded: true,
-		} );
-	}, [ isSelectionEnd ] );
-
-	return ref;
-}