@wordpress/block-editor 12.24.0 → 12.25.0

package/src/components/rich-text/use-firefox-compat.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export function useFirefoxCompat() {
-	const { isMultiSelecting } = useSelect( blockEditorStore );
-	return useRefEffect( ( element ) => {
-		function onFocus() {
-			if ( ! isMultiSelecting() ) {
-				return;
-			}
-
-			// This is a little hack to work around focus issues with nested
-			// editable elements in Firefox. For some reason the editable child
-			// element sometimes regains focus, while it should not be focusable
-			// and focus should remain on the editable parent element.
-			// To do: try to find the cause of the shifting focus.
-			const parentEditable = element.parentElement.closest(
-				'[contenteditable="true"]'
-			);
-
-			if ( parentEditable ) {
-				parentEditable.focus();
-			}
-		}
-
-		element.addEventListener( 'focus', onFocus );
-		return () => {
-			element.removeEventListener( 'focus', onFocus );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-input-events.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-export function useInputEvents( inputEvents ) {
-	return useRefEffect( ( element ) => {
-		function onInput( event ) {
-			for ( const keyboardShortcut of inputEvents.current ) {
-				keyboardShortcut( event );
-			}
-		}
-
-		element.addEventListener( 'input', onInput );
-		return () => {
-			element.removeEventListener( 'input', onInput );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-input-rules.js

@@ -1,150 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
-import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { preventEventDiscovery } from './prevent-event-discovery';
-import {
-	retrieveSelectedAttribute,
-	START_OF_SELECTED_AREA,
-} from '../../utils/selection';
-
-function findSelection( blocks ) {
-	let i = blocks.length;
-
-	while ( i-- ) {
-		const attributeKey = retrieveSelectedAttribute(
-			blocks[ i ].attributes
-		);
-
-		if ( attributeKey ) {
-			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
-				attributeKey
-			]
-				// To do: refactor this to use rich text's selection instead, so
-				// we no longer have to use on this hack inserting a special
-				// character.
-				.toString()
-				.replace( START_OF_SELECTED_AREA, '' );
-			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
-		}
-
-		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
-
-		if ( nestedSelection ) {
-			return nestedSelection;
-		}
-	}
-
-	return [];
-}
-
-export function useInputRules( props ) {
-	const {
-		__unstableMarkLastChangeAsPersistent,
-		__unstableMarkAutomaticChange,
-	} = useDispatch( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function inputRule() {
-			const { getValue, onReplace, selectionChange } = propsRef.current;
-
-			if ( ! onReplace ) {
-				return;
-			}
-
-			// We must use getValue() here because value may be update
-			// asynchronously.
-			const value = getValue();
-			const { start, text } = value;
-			const characterBefore = text.slice( start - 1, start );
-
-			// The character right before the caret must be a plain space.
-			if ( characterBefore !== ' ' ) {
-				return;
-			}
-
-			const trimmedTextBefore = text.slice( 0, start ).trim();
-			const prefixTransforms = getBlockTransforms( 'from' ).filter(
-				( { type } ) => type === 'prefix'
-			);
-			const transformation = findTransform(
-				prefixTransforms,
-				( { prefix } ) => {
-					return trimmedTextBefore === prefix;
-				}
-			);
-
-			if ( ! transformation ) {
-				return;
-			}
-
-			const content = toHTMLString( {
-				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
-			} );
-			const block = transformation.transform( content );
-
-			selectionChange( ...findSelection( [ block ] ) );
-			onReplace( [ block ] );
-			__unstableMarkAutomaticChange();
-
-			return true;
-		}
-
-		function onInput( event ) {
-			const { inputType, type } = event;
-			const {
-				getValue,
-				onChange,
-				__unstableAllowPrefixTransformations,
-				formatTypes,
-			} = propsRef.current;
-
-			// Only run input rules when inserting text.
-			if ( inputType !== 'insertText' && type !== 'compositionend' ) {
-				return;
-			}
-
-			if ( __unstableAllowPrefixTransformations && inputRule() ) {
-				return;
-			}
-
-			const value = getValue();
-			const transformed = formatTypes.reduce(
-				( accumlator, { __unstableInputRule } ) => {
-					if ( __unstableInputRule ) {
-						accumlator = __unstableInputRule( accumlator );
-					}
-
-					return accumlator;
-				},
-				preventEventDiscovery( value )
-			);
-
-			if ( transformed !== value ) {
-				__unstableMarkLastChangeAsPersistent();
-				onChange( {
-					...transformed,
-					activeFormats: value.activeFormats,
-				} );
-				__unstableMarkAutomaticChange();
-			}
-		}
-
-		element.addEventListener( 'input', onInput );
-		element.addEventListener( 'compositionend', onInput );
-		return () => {
-			element.removeEventListener( 'input', onInput );
-			element.removeEventListener( 'compositionend', onInput );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-insert-replacement-text.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-/**
- * When the browser is about to auto correct, add an undo level so the user can
- * revert the change.
- */
-export function useInsertReplacementText() {
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-	return useRefEffect( ( element ) => {
-		function onInput( event ) {
-			if ( event.inputType === 'insertReplacementText' ) {
-				__unstableMarkLastChangeAsPersistent();
-			}
-		}
-
-		element.addEventListener( 'beforeinput', onInput );
-		return () => {
-			element.removeEventListener( 'beforeinput', onInput );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-paste-handler.js

@@ -1,180 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import {
-	pasteHandler,
-	findTransform,
-	getBlockTransforms,
-} from '@wordpress/blocks';
-import { isEmpty, insert, create } from '@wordpress/rich-text';
-import { isURL } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { addActiveFormats } from './utils';
-import { splitValue } from './split-value';
-import { getPasteEventData } from '../../utils/pasting';
-
-/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
-
-export function usePasteHandler( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function _onPaste( event ) {
-			const {
-				isSelected,
-				disableFormats,
-				onChange,
-				value,
-				formatTypes,
-				tagName,
-				onReplace,
-				onSplit,
-				__unstableEmbedURLOnPaste,
-				pastePlainText,
-			} = propsRef.current;
-
-			if ( ! isSelected ) {
-				return;
-			}
-
-			const { plainText, html, files } = getPasteEventData( event );
-
-			event.preventDefault();
-
-			// Allows us to ask for this information when we get a report.
-			window.console.log( 'Received HTML:\n\n', html );
-			window.console.log( 'Received plain text:\n\n', plainText );
-
-			if ( disableFormats ) {
-				onChange( insert( value, plainText ) );
-				return;
-			}
-
-			const isInternal =
-				event.clipboardData.getData( 'rich-text' ) === 'true';
-
-			function pasteInline( content ) {
-				const transformed = formatTypes.reduce(
-					( accumulator, { __unstablePasteRule } ) => {
-						// Only allow one transform.
-						if ( __unstablePasteRule && accumulator === value ) {
-							accumulator = __unstablePasteRule( value, {
-								html,
-								plainText,
-							} );
-						}
-
-						return accumulator;
-					},
-					value
-				);
-				if ( transformed !== value ) {
-					onChange( transformed );
-				} else {
-					const valueToInsert = create( { html: content } );
-					addActiveFormats( valueToInsert, value.activeFormats );
-					onChange( insert( value, valueToInsert ) );
-				}
-			}
-
-			// If the data comes from a rich text instance, we can directly use it
-			// without filtering the data. The filters are only meant for externally
-			// pasted content and remove inline styles.
-			if ( isInternal ) {
-				pasteInline( html );
-				return;
-			}
-
-			if ( pastePlainText ) {
-				onChange( insert( value, create( { text: plainText } ) ) );
-				return;
-			}
-
-			if ( files?.length ) {
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
-				window.console.log( 'Received items:\n\n', files );
-
-				const fromTransforms = getBlockTransforms( 'from' );
-				const blocks = files
-					.reduce( ( accumulator, file ) => {
-						const transformation = findTransform(
-							fromTransforms,
-							( transform ) =>
-								transform.type === 'files' &&
-								transform.isMatch( [ file ] )
-						);
-						if ( transformation ) {
-							accumulator.push(
-								transformation.transform( [ file ] )
-							);
-						}
-						return accumulator;
-					}, [] )
-					.flat();
-				if ( ! blocks.length ) {
-					return;
-				}
-
-				if ( onReplace && isEmpty( value ) ) {
-					onReplace( blocks );
-				} else {
-					splitValue( {
-						value,
-						pastedBlocks: blocks,
-						onReplace,
-						onSplit,
-					} );
-				}
-
-				return;
-			}
-
-			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
-
-			const trimmedPlainText = plainText.trim();
-
-			if (
-				__unstableEmbedURLOnPaste &&
-				isEmpty( value ) &&
-				isURL( trimmedPlainText ) &&
-				// For the link pasting feature, allow only http(s) protocols.
-				/^https?:/.test( trimmedPlainText )
-			) {
-				mode = 'BLOCKS';
-			}
-
-			const content = pasteHandler( {
-				HTML: html,
-				plainText,
-				mode,
-				tagName,
-			} );
-
-			if ( typeof content === 'string' ) {
-				pasteInline( content );
-			} else if ( content.length > 0 ) {
-				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content, content.length - 1, -1 );
-				} else {
-					splitValue( {
-						value,
-						pastedBlocks: content,
-						onReplace,
-						onSplit,
-					} );
-				}
-			}
-		}
-
-		element.addEventListener( 'paste', _onPaste );
-		return () => {
-			element.removeEventListener( 'paste', _onPaste );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-remove-browser-shortcuts.js

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { isKeyboardEvent } from '@wordpress/keycodes';
-
-/**
- * Hook to prevent default behaviors for key combinations otherwise handled
- * internally by RichText.
- *
- * @return {import('react').RefObject} The component to be rendered.
- */
-export function useRemoveBrowserShortcuts() {
-	return useRefEffect( ( node ) => {
-		function onKeydown( event ) {
-			if (
-				isKeyboardEvent.primary( event, 'z' ) ||
-				isKeyboardEvent.primary( event, 'y' ) ||
-				isKeyboardEvent.primaryShift( event, 'z' )
-			) {
-				event.preventDefault();
-			}
-		}
-		node.addEventListener( 'keydown', onKeydown );
-		return () => {
-			node.removeEventListener( 'keydown', onKeydown );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-shortcuts.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-export function useShortcuts( keyboardShortcuts ) {
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			for ( const keyboardShortcut of keyboardShortcuts.current ) {
-				keyboardShortcut( event );
-			}
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}

package/src/components/rich-text/use-undo-automatic-change.js

@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export function useUndoAutomaticChange() {
-	const { didAutomaticChange, getSettings } = useSelect( blockEditorStore );
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			const { keyCode } = event;
-
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( keyCode !== BACKSPACE && keyCode !== ESCAPE ) {
-				return;
-			}
-
-			const { __experimentalUndo } = getSettings();
-
-			if ( ! __experimentalUndo ) {
-				return;
-			}
-
-			if ( ! didAutomaticChange() ) {
-				return;
-			}
-
-			event.preventDefault();
-			__experimentalUndo();
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}

package/src/components/text-decoration-control/style.scss

@@ -1,18 +0,0 @@
-.block-editor-text-decoration-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-decoration-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		height: $grid-unit-40;
-		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
-	}
-}

package/src/components/text-transform-control/style.scss

@@ -1,18 +0,0 @@
-.block-editor-text-transform-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-transform-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		height: $grid-unit-40;
-		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
-	}
-}