@wordpress/block-editor 12.13.0 → 12.15.0

package/src/components/rich-text/native/style.native.scss

@@ -0,0 +1,28 @@
+
+.richText {
+	font-family: $default-regular-font;
+	color: $gray-900;
+	text-decoration-color: $blue-500;
+	background-color: transparent;
+}
+
+.richTextDark {
+	color: $white;
+	text-decoration-color: $blue-30;
+}
+
+.richTextPlaceholder {
+	color: $gray-20;
+}
+
+.richTextPlaceholderDark {
+	color: $gray-50;
+}
+
+.rich-text-selection {
+	color: $black;
+}
+
+.rich-text-selection--dark {
+	color: $white;
+}

package/src/components/rich-text/native/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RichText/> Font Size renders component with style and font size 1`] = `
+"<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={12}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;
+
+exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={13}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;

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

@@ -0,0 +1,278 @@
+/**
+ * External dependencies
+ */
+import { Dimensions } from 'react-native';
+import { getEditorHtml, render, initializeEditor } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { store as richTextStore } from '@wordpress/rich-text';
+import { coreBlocks } from '@wordpress/block-library';
+import {
+	getBlockTypes,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../../store';
+import RichText from '../index.native';
+
+/**
+ * Mock `useSelect` with various global application settings, e.g., styles.
+ *
+ * @param {Object} settings the global application settings you would like to mock.
+ */
+const mockGlobalSettings = (
+	settings = { fontSize: 'var(--wp--preset--font-size--normal)' }
+) => {
+	const { fontSize } = settings;
+	const DEFAULT_GLOBAL_STYLES = {
+		__experimentalGlobalStylesBaseStyles: { typography: { fontSize } },
+	};
+	jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
+		DEFAULT_GLOBAL_STYLES
+	);
+	jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
+		[]
+	);
+};
+
+describe( '<RichText/>', () => {
+	/**
+	 * Capture initial `window` dimensions before our integration tests modify them to stage runtime fixtures.
+	 * Reset to the initial `window` dimensions after each test is executed in case they were modified.
+	 */
+	const window = Dimensions.get( 'window' );
+
+	const decimalUnitsData = [
+		[ '1.125rem', 18 ],
+		[ '10.52px', 11 ],
+		[ '2.3136em', 37 ],
+		[ '1.42vh', 19 ],
+	];
+
+	beforeAll( () => {
+		// Register Paragraph block.
+		const paragraph = coreBlocks[ 'core/paragraph' ];
+		paragraph.init();
+		setDefaultBlockName( paragraph.name );
+	} );
+
+	beforeEach( () => {
+		mockGlobalSettings( {} );
+	} );
+
+	afterEach( () => {
+		Dimensions.set( { window } );
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks.
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'Font Size', () => {
+		it( 'should display rich text at the DEFAULT font size.', () => {
+			// Arrange.
+			const expectedFontSize = 16;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `fontSize` CSS.', () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel={ 'editor' }
+					fontSize={ 'min(2em, 3em)' }
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `style.fontSize` CSS.', () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel={ 'editor' }
+					style={ { fontSize: 'min(2em, 3em)' } }
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( `should display rich text with the default editor font size value and not use the
+		\`default font size value from the global styles for a tag different than (p)`, () => {
+			// Arrange.
+			const defaultFontSize = 16;
+			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } tagName="div" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( defaultFontSize );
+		} );
+
+		it( `should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS.`, () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } tagName="p" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		test.each( decimalUnitsData )(
+			`should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS with decimal value: %s`,
+			( unit, expected ) => {
+				// Arrange.
+				mockGlobalSettings( { fontSize: unit } );
+				// Act.
+				const { getByLabelText } = render(
+					<RichText accessibilityLabel={ 'editor' } tagName="p" />
+				);
+				// Assert.
+				const actualFontSize =
+					getByLabelText( 'editor' ).props.fontSize;
+				expect( actualFontSize ).toBe( expected );
+			}
+		);
+
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
+		when CSS is provided ambiguously from ALL possible sources.`, () => {
+			// Arrange.
+			const expectedFontSize = 1;
+			mockGlobalSettings( { fontSize: '0' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel={ 'editor' }
+					style={ { fontSize: '1' } }
+					fontSize={ '2' }
+					tagName="p"
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with
+		NEXT PRIORITY when CSS is provided ambiguously from MULTIPLE possible sources EXCLUDING \`fontSize\`.`, () => {
+			// Arrange.
+			const expectedFontSize = 1;
+			mockGlobalSettings( { fontSize: '0' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel={ 'editor' }
+					style={ { fontSize: '1' } }
+					tagName="p"
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT WIDTH.', () => {
+			// Arrange.
+			const expectedFontSize = 3;
+			Dimensions.set( { window: { ...window, width: 300 } } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vw' } />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT HEIGHT.', () => {
+			// Arrange.
+			const expectedFontSize = 3;
+			Dimensions.set( { window: { ...window, height: 300 } } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vh' } />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should update the font size when style prop with font size property is provided', () => {
+			// Arrange.
+			const fontSize = '10';
+			const style = { fontSize: '12' };
+			// Act.
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert.
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'renders component with style and font size', async () => {
+			// Arrange.
+			const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+					<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+					<!-- /wp:paragraph -->`;
+			// Act.
+			await initializeEditor( { initialHtml } );
+			// Assert.
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'should update the font size with decimals when style prop with font size property is provided', () => {
+			// Arrange.
+			const fontSize = '10';
+			const style = { fontSize: '12.56px' };
+			// Act.
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert.
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'should set the default minimum line height value if the provided value from the styles is lower', () => {
+			// Arrange.
+			const expectedLineHeight = 1;
+			const style = { lineHeight: 0.2 };
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel={ 'editor' } style={ style } />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;
+			expect( actualFontSize ).toBe( expectedLineHeight );
+		} );
+	} );
+} );

package/src/components/rich-text/native/test/performance/rich-text.native.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	typeInRichText,
+	fireEvent,
+	measurePerformance,
+	screen,
+} from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../../index.native';
+
+describe( 'RichText Performance', () => {
+	const onCreateUndoLevel = jest.fn();
+	const onChange = jest.fn();
+	const onSelectionChange = jest.fn();
+
+	it( 'performance is stable when typing using Rich Text', async () => {
+		const scenario = async () => {
+			const richTextInput = screen.getByLabelText( 'Text input. Empty' );
+
+			fireEvent( richTextInput, 'focus' );
+
+			typeInRichText(
+				richTextInput,
+				'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> text'
+			);
+		};
+
+		await measurePerformance(
+			<RichText
+				onChange={ onChange }
+				__unstableOnCreateUndoLevel={ onCreateUndoLevel }
+				onSelectionChange={ onSelectionChange }
+			/>,
+			{
+				scenario,
+			}
+		);
+	} );
+} );

package/src/components/rich-text/native/toolbar-button-with-options.native.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { Picker, ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Toolbar button component that, upon a long press, opens a Picker
+ * to allow selecting from among multiple options.
+ *
+ * @param {Object} props         Component props.
+ * @param {Object} props.options Options to pick from.
+ */
+function ToolbarButtonWithOptions( { options } ) {
+	const picker = useRef();
+
+	function presentPicker() {
+		if ( picker.current ) {
+			picker.current.presentPicker();
+		}
+	}
+
+	function onValueSelected( selectedValue ) {
+		const selectedOption = options.find(
+			( op ) => op.value === selectedValue
+		);
+		if ( selectedOption ) {
+			selectedOption.onClick();
+		}
+	}
+
+	if ( ! options || options.length === 0 ) {
+		return null;
+	}
+	const firstOption = options[ 0 ];
+	const enablePicker = options.length > 1;
+
+	return (
+		<>
+			<ToolbarGroup>
+				<ToolbarButton
+					title={ firstOption.title }
+					icon={ <Icon icon={ firstOption.icon } /> }
+					onClick={ firstOption.onClick }
+					onLongPress={ enablePicker ? presentPicker : undefined }
+				/>
+			</ToolbarGroup>
+			{ enablePicker && (
+				<Picker
+					ref={ picker }
+					options={ options }
+					onChange={ onValueSelected }
+					hideCancelButton
+				/>
+			) }
+		</>
+	);
+}
+
+export default ToolbarButtonWithOptions;

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

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as richTextStore } from '@wordpress/rich-text';
+
+function formatTypesSelector( select ) {
+	return select( richTextStore ).getFormatTypes();
+}
+
+/**
+ * Set of all interactive content tags.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content
+ */
+const interactiveContentTags = new Set( [
+	'a',
+	'audio',
+	'button',
+	'details',
+	'embed',
+	'iframe',
+	'input',
+	'label',
+	'select',
+	'textarea',
+	'video',
+] );
+
+/**
+ * This hook provides RichText with the `formatTypes` and its derived props from
+ * experimental format type settings.
+ *
+ * @param {Object}  $0                              Options
+ * @param {string}  $0.clientId                     Block client ID.
+ * @param {string}  $0.identifier                   Block attribute.
+ * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formattings or not.
+ * @param {Array}   $0.allowedFormats               Allowed formats
+ */
+export function useFormatTypes( {
+	clientId,
+	identifier,
+	withoutInteractiveFormatting,
+	allowedFormats,
+} ) {
+	const allFormatTypes = useSelect( formatTypesSelector, [] );
+	const formatTypes = useMemo( () => {
+		return allFormatTypes.filter( ( { name, tagName } ) => {
+			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
+				return false;
+			}
+
+			if (
+				withoutInteractiveFormatting &&
+				interactiveContentTags.has( tagName )
+			) {
+				return false;
+			}
+
+			return true;
+		} );
+	}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );
+	const keyedSelected = useSelect(
+		( select ) =>
+			formatTypes.reduce( ( accumulator, type ) => {
+				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
+					accumulator[ type.name ] =
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
+						);
+				}
+
+				return accumulator;
+			}, {} ),
+		[ formatTypes, clientId, identifier ]
+	);
+	const dispatch = useDispatch();
+	const prepareHandlers = [];
+	const valueHandlers = [];
+	const changeHandlers = [];
+	const dependencies = [];
+
+	formatTypes.forEach( ( type ) => {
+		if ( type.__experimentalCreatePrepareEditableTree ) {
+			const selected = keyedSelected[ type.name ];
+			const handler = type.__experimentalCreatePrepareEditableTree(
+				selected,
+				{
+					richTextIdentifier: identifier,
+					blockClientId: clientId,
+				}
+			);
+
+			if ( type.__experimentalCreateOnChangeEditableValue ) {
+				valueHandlers.push( handler );
+			} else {
+				prepareHandlers.push( handler );
+			}
+
+			for ( const key in selected ) {
+				dependencies.push( selected[ key ] );
+			}
+		}
+
+		if ( type.__experimentalCreateOnChangeEditableValue ) {
+			let dispatchers = {};
+
+			if ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {
+				dispatchers =
+					type.__experimentalGetPropsForEditableTreeChangeHandler(
+						dispatch,
+						{
+							richTextIdentifier: identifier,
+							blockClientId: clientId,
+						}
+					);
+			}
+
+			changeHandlers.push(
+				type.__experimentalCreateOnChangeEditableValue(
+					{
+						...( keyedSelected[ type.name ] || {} ),
+						...dispatchers,
+					},
+					{
+						richTextIdentifier: identifier,
+						blockClientId: clientId,
+					}
+				)
+			);
+		}
+	} );
+
+	return {
+		formatTypes,
+		prepareHandlers,
+		valueHandlers,
+		changeHandlers,
+		dependencies,
+	};
+}

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

@@ -3,7 +3,7 @@
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
+import { insert, isCollapsed, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -42,6 +42,34 @@ function findSelection( blocks ) {
 	return [];
 }
 
+/**
+ * An input rule that replaces two spaces with an en space, and an en space
+ * followed by a space with an em space.
+ *
+ * @param {Object} value Value to replace spaces in.
+ *
+ * @return {Object} Value with spaces replaced.
+ */
+function replacePrecedingSpaces( value ) {
+	if ( ! isCollapsed( value ) ) {
+		return value;
+	}
+
+	const { text, start } = value;
+	const lastTwoCharacters = text.slice( start - 2, start );
+
+	// Replace two spaces with an em space.
+	if ( lastTwoCharacters === '  ' ) {
+		return insert( value, '\u2002', start - 2, start );
+	}
+	// Replace an en space followed by a space with an em space.
+	else if ( lastTwoCharacters === '\u2002 ' ) {
+		return insert( value, '\u2003', start - 2, start );
+	}
+
+	return value;
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -122,7 +150,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				preventEventDiscovery( replacePrecedingSpaces( value ) )
 			);
 
 			if ( transformed !== value ) {