@wordpress/format-library 3.0.19 → 3.1.0

package/src/link/modal-screens/link-settings-screen.native.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { useNavigation, useRoute } from '@react-navigation/native';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useContext, useEffect, useMemo } from '@wordpress/element';
 import { prependHTTP } from '@wordpress/url';
-
 import { BottomSheet, BottomSheetContext } from '@wordpress/components';
 import {
 	create,
@@ -62,16 +62,19 @@ const LinkSettingsScreen = ( {
 	};
 	useEffect( () => {
 		onHandleClosingBottomSheet( () => {
-			submit( inputValue );
+			submit( inputValue, { skipStateUpdates: true } );
 		} );
 	}, [ inputValue, opensInNewWindow, text ] );
 
 	useEffect( () => {
 		const { isActiveLink, isRemovingLink } = linkValues;
 		if ( !! inputValue && ! isActiveLink && isVisible ) {
-			submitLink( false );
-		} else if ( ( inputValue === '' && isActiveLink ) || isRemovingLink ) {
-			removeLink( false );
+			submitLink( { shouldCloseBottomSheet: false } );
+		} else if (
+			( ( inputValue === '' && isActiveLink ) || isRemovingLink ) &&
+			isVisible
+		) {
+			removeLink( { shouldCloseBottomSheet: false } );
 		}
 	}, [
 		inputValue,
@@ -80,12 +83,17 @@ const LinkSettingsScreen = ( {
 		linkValues.isRemovingLink,
 	] );
 
-	const clearFormat = () => {
+	const clearFormat = ( { skipStateUpdates = false } = {} ) => {
 		onChange( { ...value, activeFormats: [] } );
-		setLinkValues( { isActiveLink: false, isRemovingLink: true } );
+		if ( ! skipStateUpdates ) {
+			setLinkValues( { isActiveLink: false, isRemovingLink: true } );
+		}
 	};
 
-	const submitLink = ( shouldCloseBottomSheet = true ) => {
+	const submitLink = ( {
+		shouldCloseBottomSheet = true,
+		skipStateUpdates = false,
+	} = {} ) => {
 		const url = prependHTTP( inputValue );
 		const linkText = text || inputValue;
 		const format = createLinkFormat( {
@@ -127,7 +135,9 @@ const LinkSettingsScreen = ( {
 		}
 		newAttributes.activeFormats = [];
 		onChange( { ...newAttributes, needsSelectionUpdate: true } );
-		setLinkValues( { isActiveLink: true, isRemovingLink: false } );
+		if ( ! skipStateUpdates ) {
+			setLinkValues( { isActiveLink: true, isRemovingLink: false } );
+		}
 
 		if ( ! isValidHref( url ) ) {
 			speak(
@@ -147,19 +157,22 @@ const LinkSettingsScreen = ( {
 		}
 	};
 
-	const removeLink = ( shouldCloseBottomSheet = true ) => {
-		clearFormat();
+	const removeLink = ( {
+		shouldCloseBottomSheet = true,
+		skipStateUpdates = false,
+	} = {} ) => {
+		clearFormat( { skipStateUpdates } );
 		onRemove();
 		if ( shouldCloseBottomSheet ) {
 			onClose();
 		}
 	};
 
-	const submit = ( submitValue ) => {
+	const submit = ( submitValue, { skipStateUpdates = false } = {} ) => {
 		if ( submitValue === '' ) {
-			removeLink();
+			removeLink( { skipStateUpdates } );
 		} else {
-			submitLink();
+			submitLink( { skipStateUpdates } );
 		}
 	};
 

package/src/link/test/index.native.js

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { Keyboard, Platform } from 'react-native';
+import { render, fireEvent, waitFor } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { Slot, SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { link } from '../index';
+
+const { edit: LinkEdit } = link;
+
+// Simplified tree to render link format component
+const LinkEditSlot = ( props ) => (
+	<SlotFillProvider>
+		<Slot name="RichText.ToolbarControls.link" />
+		<LinkEdit { ...props } />
+	</SlotFillProvider>
+);
+
+jest.useFakeTimers( 'legacy' );
+jest.spyOn( Keyboard, 'dismiss' );
+
+describe( 'Android', () => {
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render(
+			<LinkEditSlot
+				activeAttributes={ {} }
+				onChange={ () => {} }
+				value={ {
+					text: '',
+					formats: [],
+					replacements: [],
+				} }
+			/>
+		);
+		fireEvent.press( screen.getByA11yLabel( 'Link' ) );
+		fireEvent.press(
+			screen.getByA11yLabel( 'Link to, Search or type URL' )
+		);
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const { getByA11yLabel } = render(
+			<LinkEditSlot
+				activeAttributes={ {} }
+				onChange={ () => {} }
+				value={ {
+					text: '',
+					formats: [],
+					replacements: [],
+				} }
+			/>
+		);
+		fireEvent.press( getByA11yLabel( 'Link' ) );
+		fireEvent.press( getByA11yLabel( 'Link to, Search or type URL' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () => getByA11yLabel( 'Apply' ) );
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
+
+describe( 'iOS', () => {
+	const originalPlatform = Platform.OS;
+	beforeAll( () => {
+		Platform.OS = 'ios';
+	} );
+
+	afterAll( () => {
+		Platform.OS = originalPlatform;
+	} );
+
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render(
+			<LinkEditSlot
+				activeAttributes={ {} }
+				onChange={ () => {} }
+				value={ {
+					text: '',
+					formats: [],
+					replacements: [],
+				} }
+			/>
+		);
+		fireEvent.press( screen.getByA11yLabel( 'Link' ) );
+		fireEvent.press(
+			screen.getByA11yLabel( 'Link to, Search or type URL' )
+		);
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const { getByA11yLabel } = render(
+			<LinkEditSlot
+				activeAttributes={ {} }
+				onChange={ () => {} }
+				value={ {
+					text: '',
+					formats: [],
+					replacements: [],
+				} }
+			/>
+		);
+		fireEvent.press( getByA11yLabel( 'Link' ) );
+		fireEvent.press( getByA11yLabel( 'Link to, Search or type URL' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () => getByA11yLabel( 'Apply' ) );
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/link/test/modal.native.js

@@ -5,11 +5,11 @@ import ModalLinkUI from '../modal';
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 describe( 'LinksUI', () => {
 	it( 'LinksUI renders', () => {
-		const wrapper = shallow( <ModalLinkUI /> );
-		expect( wrapper ).toBeTruthy();
+		const screen = render( <ModalLinkUI /> );
+		expect( screen.container ).toBeTruthy();
 	} );
 } );

package/src/text-color/index.native.js

@@ -0,0 +1,194 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { BlockControls, useSetting } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { Icon, textColor as textColorIcon } from '@wordpress/icons';
+import { removeFormat } from '@wordpress/rich-text';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getActiveColors } from './inline.js';
+import { transparentValue } from './index.js';
+import { default as InlineColorUI } from './inline';
+import styles from './style.scss';
+
+const name = 'core/text-color';
+const title = __( 'Text color' );
+
+const EMPTY_ARRAY = [];
+
+function getComputedStyleProperty( element, property ) {
+	const {
+		props: { style = {} },
+	} = element;
+
+	if ( property === 'background-color' ) {
+		const { backgroundColor, baseColors } = style;
+
+		if ( backgroundColor !== 'transparent' ) {
+			return backgroundColor;
+		} else if ( baseColors && baseColors?.color?.background ) {
+			return baseColors?.color?.background;
+		}
+
+		return 'transparent';
+	}
+}
+
+function fillComputedColors( element, { color, backgroundColor } ) {
+	if ( ! color && ! backgroundColor ) {
+		return;
+	}
+
+	return {
+		color: color || getComputedStyleProperty( element, 'color' ),
+		backgroundColor: getComputedStyleProperty(
+			element,
+			'background-color'
+		),
+	};
+}
+
+function TextColorEdit( {
+	value,
+	onChange,
+	isActive,
+	activeAttributes,
+	contentRef,
+} ) {
+	const allowCustomControl = useSetting( 'color.custom' );
+	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+	const [ isAddingColor, setIsAddingColor ] = useState( false );
+	const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [
+		setIsAddingColor,
+	] );
+	const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [
+		setIsAddingColor,
+	] );
+	const colorIndicatorStyle = useMemo(
+		() =>
+			fillComputedColors(
+				contentRef,
+				getActiveColors( value, name, colors )
+			),
+		[ value, colors ]
+	);
+
+	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
+
+	const onPressButton = useCallback( () => {
+		if ( hasColorsToChoose ) {
+			enableIsAddingColor();
+		} else {
+			onChange( removeFormat( value, name ) );
+		}
+	}, [ hasColorsToChoose, value ] );
+
+	const outlineStyle = usePreferredColorSchemeStyle(
+		styles[ 'components-inline-color__outline' ],
+		styles[ 'components-inline-color__outline--dark' ]
+	);
+
+	if ( ! hasColorsToChoose && ! isActive ) {
+		return null;
+	}
+
+	const isActiveStyle = {
+		...colorIndicatorStyle,
+		...( ! colorIndicatorStyle?.backgroundColor
+			? { backgroundColor: 'transparent' }
+			: {} ),
+		...styles[ 'components-inline-color--is-active' ],
+	};
+
+	const customContainerStyles =
+		styles[ 'components-inline-color__button-container' ];
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					{ isActive && (
+						<View style={ outlineStyle } pointerEvents="none" />
+					) }
+
+					<ToolbarButton
+						name="text-color"
+						isActive={ isActive }
+						icon={
+							<Icon
+								icon={ textColorIcon }
+								style={
+									colorIndicatorStyle?.color && {
+										color: colorIndicatorStyle.color,
+									}
+								}
+							/>
+						}
+						title={ title }
+						extraProps={ {
+							isActiveStyle,
+							customContainerStyles,
+						} }
+						// If has no colors to choose but a color is active remove the color onClick
+						onClick={ onPressButton }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ isAddingColor && (
+				<InlineColorUI
+					name={ name }
+					onClose={ disableIsAddingColor }
+					activeAttributes={ activeAttributes }
+					value={ value }
+					onChange={ onChange }
+					contentRef={ contentRef }
+				/>
+			) }
+		</>
+	);
+}
+
+export const textColor = {
+	name,
+	title,
+	tagName: 'mark',
+	className: 'has-inline-color',
+	attributes: {
+		style: 'style',
+		class: 'class',
+	},
+	/*
+	 * Since this format relies on the <mark> tag, it's important to
+	 * prevent the default yellow background color applied by most
+	 * browsers. The solution is to detect when this format is used with a
+	 * text color but no background color, and in such cases to override
+	 * the default styling with a transparent background.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/pull/35516
+	 */
+	__unstableFilterAttributeValue( key, value ) {
+		if ( key !== 'style' ) return value;
+		// We need to remove the extra spaces within the styles on mobile
+		const newValue = value.replace( / /g, '' );
+		// We should not add a background-color if it's already set
+		if ( newValue && newValue.includes( 'background-color' ) )
+			return newValue;
+		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
+		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+		// rules will already include a `;`.
+		return newValue ? [ addedCSS, newValue ].join( ';' ) : addedCSS;
+	},
+	edit: TextColorEdit,
+};

package/src/text-color/inline.js

@@ -42,7 +42,7 @@ function parseCSS( css = '' ) {
 	}, {} );
 }
 
-function parseClassName( className = '', colorSettings ) {
+export function parseClassName( className = '', colorSettings ) {
 	return className.split( ' ' ).reduce( ( accumulator, name ) => {
 		// `colorSlug` could contain dashes, so simply match the start and end.
 		if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {

package/src/text-color/inline.native.js

@@ -0,0 +1,186 @@
+/**
+ * External dependencies
+ */
+
+import { reject } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo } from '@wordpress/element';
+import {
+	applyFormat,
+	removeFormat,
+	getActiveFormat,
+} from '@wordpress/rich-text';
+import {
+	useSetting,
+	getColorClassName,
+	getColorObjectByColorValue,
+} from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { textColor as settings } from './index';
+import { transparentValue } from './index.js';
+import { parseClassName } from './inline.js';
+
+function parseCSS( css = '' ) {
+	return css.split( ';' ).reduce( ( accumulator, rule ) => {
+		if ( rule ) {
+			const [ property, value ] = rule.replace( / /g, '' ).split( ':' );
+			if ( property === 'color' ) accumulator.color = value;
+			if ( property === 'background-color' && value !== transparentValue )
+				accumulator.backgroundColor = value;
+		}
+		return accumulator;
+	}, {} );
+}
+
+function getActiveColors( value, name, colorSettings ) {
+	const activeColorFormat = getActiveFormat( value, name );
+
+	if ( ! activeColorFormat ) {
+		return {};
+	}
+
+	return {
+		...parseCSS( activeColorFormat.attributes.style ),
+		...parseClassName( activeColorFormat.attributes.class, colorSettings ),
+	};
+}
+
+function setColors( value, name, colorSettings, colors ) {
+	const { color, backgroundColor } = {
+		...getActiveColors( value, name, colorSettings ),
+		...colors,
+	};
+
+	if ( ! color && ! backgroundColor ) {
+		return removeFormat( value, name );
+	}
+
+	const styles = [];
+	const classNames = [];
+	const attributes = {};
+
+	if ( backgroundColor ) {
+		styles.push( [ 'background-color', backgroundColor ].join( ':' ) );
+	} else {
+		// Override default browser color for mark element.
+		styles.push( [ 'background-color', transparentValue ].join( ':' ) );
+	}
+
+	if ( color ) {
+		const colorObject = getColorObjectByColorValue( colorSettings, color );
+
+		if ( colorObject ) {
+			classNames.push( getColorClassName( 'color', colorObject.slug ) );
+			styles.push( [ 'color', colorObject.color ].join( ':' ) );
+		} else {
+			styles.push( [ 'color', color ].join( ':' ) );
+		}
+	}
+
+	if ( styles.length ) attributes.style = styles.join( ';' );
+	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+
+	const format = { type: name, attributes };
+	const hasNoSelection = value.start === value.end;
+	const isAtTheEnd = value.end === value.text.length;
+	const previousCharacter = value.text.charAt( value.end - 1 );
+
+	// Force formatting due to limitations in the native implementation
+	if (
+		hasNoSelection &&
+		( value.text.length === 0 ||
+			( previousCharacter === ' ' && isAtTheEnd ) )
+	) {
+		// For cases where there's no text selected, there's a space before
+		// the current caret position and it's at the end of the text.
+		return applyFormat( value, format, value.start - 1, value.end + 1 );
+	} else if ( hasNoSelection && isAtTheEnd ) {
+		// If there's no selection and is at the end of the text
+		// manually add the format within the current caret position.
+		const newFormat = applyFormat( value, format );
+		const { activeFormats } = newFormat;
+		newFormat.formats[ value.start ] = [
+			...reject( activeFormats, { type: format.type } ),
+			format,
+		];
+		return newFormat;
+	} else if ( hasNoSelection ) {
+		return removeFormat( value, format );
+	}
+
+	return applyFormat( value, format );
+}
+
+function ColorPicker( { name, value, onChange } ) {
+	const property = 'color';
+	const colors = useSetting( 'color.palette' ) || settings.colors;
+	const colorSettings = {
+		colors,
+	};
+
+	const onColorChange = useCallback(
+		( color ) => {
+			if ( color !== '' ) {
+				onChange(
+					setColors( value, name, colors, { [ property ]: color } )
+				);
+				// Remove formatting if the color was reset, there's no
+				// current selection and the previous character is a space
+			} else if (
+				value?.start === value?.end &&
+				value.text?.charAt( value?.end - 1 ) === ' '
+			) {
+				onChange(
+					removeFormat( value, name, value.end - 1, value.end )
+				);
+			} else {
+				onChange( removeFormat( value, name ) );
+			}
+		},
+		[ colors, onChange, property ]
+	);
+	const activeColors = useMemo(
+		() => getActiveColors( value, name, colors ),
+		[ name, value, colors ]
+	);
+
+	return (
+		<ColorSettings
+			colorValue={ activeColors[ property ] }
+			onColorChange={ onColorChange }
+			defaultSettings={ colorSettings }
+			hideNavigation
+		/>
+	);
+}
+
+export default function InlineColorUI( { name, value, onChange, onClose } ) {
+	return (
+		<BottomSheet
+			isVisible
+			onClose={ onClose }
+			hideHeader
+			contentStyle={ { paddingLeft: 0, paddingRight: 0 } }
+			hasNavigation
+			leftButton={ null }
+			testID="inline-text-color-modal"
+		>
+			<BottomSheet.NavigationContainer animate main>
+				<BottomSheet.NavigationScreen name="text-color">
+					<ColorPicker
+						name={ name }
+						value={ value }
+						onChange={ onChange }
+					/>
+				</BottomSheet.NavigationScreen>
+			</BottomSheet.NavigationContainer>
+		</BottomSheet>
+	);
+}

package/src/text-color/style.native.scss

@@ -0,0 +1,23 @@
+.components-inline-color--is-active {
+	border-radius: 18px;
+}
+
+.components-inline-color__outline {
+	border-color: $light-dim;
+	top: 6px;
+	bottom: 6px;
+	left: 11px;
+	right: 11px;
+	border-radius: 24px;
+	border-width: $border-width;
+	position: absolute;
+	z-index: 2;
+}
+
+.components-inline-color__outline--dark {
+	border-color: $dark-ultra-dim;
+}
+
+.components-inline-color__button-container {
+	padding: 6px;
+}

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text color allows toggling the highlight color feature to selected text 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\">Hello this is a test</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Text color allows toggling the highlight color feature to type new text 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\"></mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Text color creates a paragraph block with the text color format 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello <mark style=\\"background-color:rgba(0,0,0,0);color:#cf2e2e\\" class=\\"has-inline-color has-vivid-red-color\\">this is a test</mark></p>
+<!-- /wp:paragraph -->"
+`;