@wordpress/block-editor 15.20.0 → 15.21.1

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

@@ -1,28 +0,0 @@
-
-.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

@@ -1,79 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RichText/> when applying the 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/> when applying the 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/> when applying the 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

@@ -1,345 +0,0 @@
-/**
- * External dependencies
- */
-import { Dimensions } from 'react-native';
-import {
-	fireEvent,
-	getEditorHtml,
-	initializeEditor,
-	render,
-	screen,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { select } from '@wordpress/data';
-import {
-	store as richTextStore,
-	RichTextData,
-	__unstableCreateElement,
-} 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( 'when the value changes', () => {
-		it( 'should avoid updating attributes when values are equal', async () => {
-			const handleChange = jest.fn();
-			const defaultEmptyValue = RichTextData.empty();
-			render(
-				<RichText
-					onChange={ handleChange }
-					value={ defaultEmptyValue }
-				/>
-			);
-
-			// Simulate an empty string from Aztec
-			fireEvent( screen.getByLabelText( 'Text input. Empty' ), 'change', {
-				nativeEvent: { text: '' },
-			} );
-
-			expect( handleChange ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should preserve non-breaking space HTML entity', () => {
-			const onChange = jest.fn();
-			const onSelectionChange = jest.fn();
-			// The initial value is created using an HTML element to preserve
-			// the HTML entity.
-			const initialValue = RichTextData.fromHTMLElement(
-				__unstableCreateElement( document, '&nbsp;' )
-			);
-			render(
-				<RichText
-					onChange={ onChange }
-					onSelectionChange={ onSelectionChange }
-					value={ initialValue }
-					__unstableIsSelected
-				/>
-			);
-
-			// Trigger selection event with same text value as initial.
-			fireEvent(
-				screen.getByLabelText( /Text input/ ),
-				'onSelectionChange',
-				0,
-				0,
-				initialValue.toString(),
-				{
-					nativeEvent: {
-						eventCount: 0,
-						target: undefined,
-						text: initialValue.toString(),
-					},
-				}
-			);
-
-			expect( onChange ).not.toHaveBeenCalled();
-			expect( onSelectionChange ).toHaveBeenCalled();
-		} );
-	} );
-
-	describe( 'when applying the 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.
-			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.
-			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

@@ -1,44 +0,0 @@
-/**
- * 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

@@ -1,61 +0,0 @@
-/**
- * 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

@@ -1,146 +0,0 @@
-/**
- * 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 formatting 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/remove-browser-shortcuts.native.js

@@ -1 +0,0 @@
-export const RemoveBrowserShortcuts = () => null;