@wordpress/block-editor 12.24.0 → 12.25.0

package/src/components/rich-text/event-listeners/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import beforeInputRules from './before-input-rules';
+import inputRules from './input-rules';
+import insertReplacementText from './insert-replacement-text';
+import removeBrowserShortcuts from './remove-browser-shortcuts';
+import shortcuts from './shortcuts';
+import inputEvents from './input-events';
+import undoAutomaticChange from './undo-automatic-change';
+import pasteHandler from './paste-handler';
+import _delete from './delete';
+import enter from './enter';
+import firefoxCompat from './firefox-compat';
+
+const allEventListeners = [
+	beforeInputRules,
+	inputRules,
+	insertReplacementText,
+	removeBrowserShortcuts,
+	shortcuts,
+	inputEvents,
+	undoAutomaticChange,
+	pasteHandler,
+	_delete,
+	enter,
+	firefoxCompat,
+];
+
+export function useEventListeners( props ) {
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const refEffects = useMemo(
+		() => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ),
+		[ propsRef ]
+	);
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! props.isSelected ) {
+				return;
+			}
+			const cleanups = refEffects.map( ( effect ) => effect( element ) );
+			return () => {
+				cleanups.forEach( ( cleanup ) => cleanup() );
+			};
+		},
+		[ refEffects, props.isSelected ]
+	);
+}

package/src/components/rich-text/event-listeners/input-events.js

@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { inputEvents } = props.current;
+	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/event-listeners/input-rules.js

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, toHTMLString } from '@wordpress/rich-text';
+import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+
+/**
+ * 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 default ( props ) => ( element ) => {
+	function inputRule() {
+		const { getValue, onReplace, selectionChange, registry } =
+			props.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 ] );
+		registry.dispatch( blockEditorStore ).__unstableMarkAutomaticChange();
+
+		return true;
+	}
+
+	function onInput( event ) {
+		const { inputType, type } = event;
+		const {
+			getValue,
+			onChange,
+			__unstableAllowPrefixTransformations,
+			formatTypes,
+			registry,
+		} = props.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 )
+		);
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		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/event-listeners/insert-replacement-text.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ * @param {Object} props
+ */
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		if ( event.inputType !== 'insertReplacementText' ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+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 default ( props ) => ( element ) => {
+	function _onPaste( event ) {
+		const {
+			disableFormats,
+			onChange,
+			value,
+			formatTypes,
+			tagName,
+			onReplace,
+			onSplit,
+			__unstableEmbedURLOnPaste,
+			pastePlainText,
+		} = props.current;
+
+		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/event-listeners/remove-browser-shortcuts.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { isKeyboardEvent } from '@wordpress/keycodes';
+
+/**
+ * Hook to prevent default behaviors for key combinations otherwise handled
+ * internally by RichText.
+ */
+export default () => ( 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/event-listeners/shortcuts.js

@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { keyboardShortcuts } = props.current;
+	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/event-listeners/undo-automatic-change.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( keyCode !== BACKSPACE && keyCode !== ESCAPE ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		const { didAutomaticChange, getSettings } =
+			registry.select( blockEditorStore );
+
+		const { __experimentalUndo } = getSettings();
+
+		if ( ! __experimentalUndo ) {
+			return;
+		}
+
+		if ( ! didAutomaticChange() ) {
+			return;
+		}
+
+		event.preventDefault();
+		__experimentalUndo();
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

package/src/components/rich-text/index.js

@@ -12,7 +12,7 @@ import {
 	forwardRef,
 	createContext,
 } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
@@ -29,19 +29,9 @@ import { useBlockEditContext } from '../block-edit';
 import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
-import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
-import { usePasteHandler } from './use-paste-handler';
-import { useBeforeInputRules } from './use-before-input-rules';
-import { useInputRules } from './use-input-rules';
-import { useDelete } from './use-delete';
-import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
-import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
-import { useShortcuts } from './use-shortcuts';
-import { useInputEvents } from './use-input-events';
-import { useInsertReplacementText } from './use-insert-replacement-text';
-import { useFirefoxCompat } from './use-firefox-compat';
+import { useEventListeners } from './event-listeners';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
@@ -357,6 +347,7 @@ export function RichTextWrapper(
 		anchorRef.current?.focus();
 	}
 
+	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>
@@ -400,48 +391,30 @@ export function RichTextWrapper(
 					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
-					useBeforeInputRules( { value, onChange } ),
-					useInputRules( {
+					useEventListeners( {
+						registry,
 						getValue,
 						onChange,
 						__unstableAllowPrefixTransformations,
 						formatTypes,
 						onReplace,
 						selectionChange,
-					} ),
-					useInsertReplacementText(),
-					useRemoveBrowserShortcuts(),
-					useShortcuts( keyboardShortcuts ),
-					useInputEvents( inputEvents ),
-					useUndoAutomaticChange(),
-					usePasteHandler( {
 						isSelected,
 						disableFormats,
-						onChange,
 						value,
-						formatTypes,
 						tagName,
-						onReplace,
 						onSplit,
 						__unstableEmbedURLOnPaste,
 						pastePlainText,
-					} ),
-					useDelete( {
-						value,
 						onMerge,
 						onRemove,
-					} ),
-					useEnter( {
 						removeEditorOnlyFormats,
-						value,
-						onReplace,
-						onSplit,
-						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,
 						onSplitAtDoubleLineEnd,
+						keyboardShortcuts,
+						inputEvents,
 					} ),
-					useFirefoxCompat(),
 					anchorRef,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }

package/src/components/rich-text/index.native.js

@@ -118,6 +118,7 @@ export function RichTextWrapper(
 			getBlock,
 			isMultiSelecting,
 			hasMultiSelection,
+			getSelectedBlockClientId,
 		} = select( blockEditorStore );
 
 		const selectionStart = getSelectionStart();
@@ -154,6 +155,7 @@ export function RichTextWrapper(
 			didAutomaticChange: didAutomaticChange(),
 			disabled: isMultiSelecting() || hasMultiSelection(),
 			undo,
+			getSelectedBlockClientId,
 			...extraProps,
 		};
 	};
@@ -164,6 +166,7 @@ export function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		isSelected,
+		getSelectedBlockClientId,
 		didAutomaticChange,
 		disabled,
 		undo,
@@ -175,6 +178,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
@@ -209,6 +213,12 @@ export function RichTextWrapper(
 		[ clientId, identifier ]
 	);
 
+	const clearCurrentSelectionOnUnmount = useCallback( () => {
+		if ( getSelectedBlockClientId() === clientId ) {
+			clearSelectedBlock();
+		}
+	}, [ clearSelectedBlock, clientId, getSelectedBlockClientId ] );
+
 	const onDelete = useCallback(
 		( { value, isReverse } ) => {
 			if ( onMerge ) {
@@ -590,6 +600,7 @@ export function RichTextWrapper(
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
+			clearCurrentSelectionOnUnmount={ clearCurrentSelectionOnUnmount }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/rich-text/multiline.js

@@ -84,7 +84,9 @@ function RichTextMultiline(
 							const newValues = values.slice();
 							let offset = 0;
 							if ( forward ) {
-								if ( ! newValues[ index + 1 ] ) return;
+								if ( ! newValues[ index + 1 ] ) {
+									return;
+								}
 								newValues.splice(
 									index,
 									2,
@@ -92,7 +94,9 @@ function RichTextMultiline(
 								);
 								offset = newValues[ index ].length - 1;
 							} else {
-								if ( ! newValues[ index - 1 ] ) return;
+								if ( ! newValues[ index - 1 ] ) {
+									return;
+								}
 								newValues.splice(
 									index - 1,
 									2,

package/src/components/rich-text/native/index.native.js

@@ -873,6 +873,17 @@ export class RichText extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		const { clearCurrentSelectionOnUnmount } = this.props;
+
+		// There are cases when the component is unmounted e.g. scrolling in a
+		// long post due to virtualization, so the block selection needs to be cleared
+		// so it doesn't auto-focus when it's added back.
+		if ( this._editor?.isFocused() ) {
+			clearCurrentSelectionOnUnmount?.();
+		}
+	}
+
 	getHtmlToRender( record, tagName ) {
 		// Save back to HTML from React tree.
 		let value = this.valueToFormat( record );

package/src/components/rich-text/use-format-types.js

@@ -29,7 +29,9 @@ const interactiveContentTags = new Set( [
 ] );
 
 function prefixSelectKeys( selected, prefix ) {
-	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	if ( typeof selected !== 'object' ) {
+		return { [ prefix ]: selected };
+	}
 	return Object.fromEntries(
 		Object.entries( selected ).map( ( [ key, value ] ) => [
 			`${ prefix }.${ key }`,
@@ -39,7 +41,9 @@ function prefixSelectKeys( selected, prefix ) {
 }
 
 function getPrefixedSelectKeys( selected, prefix ) {
-	if ( selected[ prefix ] ) return selected[ prefix ];
+	if ( selected[ prefix ] ) {
+		return selected[ prefix ];
+	}
 	return Object.keys( selected )
 		.filter( ( key ) => key.startsWith( prefix + '.' ) )
 		.reduce( ( accumulator, key ) => {