@wordpress/block-editor 12.23.0 → 12.25.0

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

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+import { insert, remove } from '@wordpress/rich-text';
+import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { splitValue } from '../split-value';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		if ( event.target.contentEditable !== 'true' ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const {
+			removeEditorOnlyFormats,
+			value,
+			onReplace,
+			onSplit,
+			onChange,
+			disableLineBreaks,
+			onSplitAtEnd,
+			onSplitAtDoubleLineEnd,
+			registry,
+		} = props.current;
+
+		event.preventDefault();
+
+		const _value = { ...value };
+		_value.formats = removeEditorOnlyFormats( value );
+		const canSplit = onReplace && onSplit;
+
+		if ( onReplace ) {
+			const transforms = getBlockTransforms( 'from' ).filter(
+				( { type } ) => type === 'enter'
+			);
+			const transformation = findTransform( transforms, ( item ) => {
+				return item.regExp.test( _value.text );
+			} );
+
+			if ( transformation ) {
+				onReplace( [
+					transformation.transform( {
+						content: _value.text,
+					} ),
+				] );
+				registry
+					.dispatch( blockEditorStore )
+					.__unstableMarkAutomaticChange();
+				return;
+			}
+		}
+
+		const { text, start, end } = _value;
+
+		if ( event.shiftKey ) {
+			if ( ! disableLineBreaks ) {
+				onChange( insert( _value, '\n' ) );
+			}
+		} else if ( canSplit ) {
+			splitValue( {
+				value: _value,
+				onReplace,
+				onSplit,
+			} );
+		} else if ( onSplitAtEnd && start === end && end === text.length ) {
+			onSplitAtEnd();
+		} else if (
+			// For some blocks it's desirable to split at the end of the
+			// block when there are two line breaks at the end of the
+			// block, so triple Enter exits the block.
+			onSplitAtDoubleLineEnd &&
+			start === end &&
+			end === text.length &&
+			text.slice( -2 ) === '\n\n'
+		) {
+			registry.batch( () => {
+				_value.start = _value.end - 2;
+				onChange( remove( _value ) );
+				onSplitAtDoubleLineEnd();
+			} );
+		} else if ( ! disableLineBreaks ) {
+			onChange( insert( _value, '\n' ) );
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

package/src/components/rich-text/event-listeners/firefox-compat.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onFocus() {
+		const { registry } = props.current;
+		if ( ! registry.select( blockEditorStore ).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/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 );
+	};
+};