@wordpress/format-library 5.47.0 → 5.48.1

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

@@ -1,18 +0,0 @@
-/**
- * Internal dependencies
- */
-import ModalLinkUI from '../modal';
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-describe( 'LinksUI', () => {
-	it( 'LinksUI renders', () => {
-		const value = { text: '' }; // empty `RichTextValue`
-		const screen = render(
-			<ModalLinkUI isVisible value={ value } activeAttributes={ {} } />
-		);
-		expect( screen.toJSON() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,172 +0,0 @@
-/**
- * External dependencies
- */
-import { StyleSheet, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useMemo, useState } from '@wordpress/element';
-import {
-	BlockControls,
-	useSettings,
-	useMobileGlobalStylesColors,
-} from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import {
-	Icon,
-	color as colorIcon,
-	textColor as textColorIcon,
-} from '@wordpress/icons';
-import { removeFormat } from '@wordpress/rich-text';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getActiveColors } from './inline.native.js';
-import { default as InlineColorUI } from './inline';
-import styles from './style.scss';
-
-const name = 'core/text-color';
-const title = __( 'Text color' );
-
-function getComputedStyleProperty( element, property ) {
-	const style = element?.props?.style ?? {};
-
-	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 ] = useSettings( 'color.custom' );
-	const colors = useMobileGlobalStylesColors();
-	const [ isAddingColor, setIsAddingColor ] = useState( false );
-	const colorIndicatorStyle = useMemo(
-		() =>
-			fillComputedColors(
-				contentRef,
-				getActiveColors( value, name, colors )
-			),
-		[ contentRef, value, colors ]
-	);
-
-	const hasColorsToChoose = colors.length || ! allowCustomControl;
-
-	const outlineStyle = [
-		usePreferredColorSchemeStyle(
-			styles[ 'components-inline-color__outline' ],
-			styles[ 'components-inline-color__outline--dark' ]
-		),
-		{ borderWidth: StyleSheet.hairlineWidth },
-	];
-
-	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={
-									Object.keys( activeAttributes ).length
-										? textColorIcon
-										: colorIcon
-								}
-								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={
-							hasColorsToChoose
-								? () => setIsAddingColor( true )
-								: () => onChange( removeFormat( value, name ) )
-						}
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-			{ isAddingColor && (
-				<InlineColorUI
-					name={ name }
-					onClose={ () => setIsAddingColor( false ) }
-					activeAttributes={ activeAttributes }
-					value={ value }
-					onChange={ onChange }
-					contentRef={ contentRef }
-				/>
-			) }
-		</>
-	);
-}
-
-export const textColor = {
-	name,
-	title,
-	tagName: 'mark',
-	className: 'has-inline-color',
-	attributes: {
-		style: 'style',
-		class: 'class',
-	},
-	edit: TextColorEdit,
-};

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

@@ -1,169 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useMemo } from '@wordpress/element';
-import {
-	applyFormat,
-	removeFormat,
-	getActiveFormat,
-} from '@wordpress/rich-text';
-import {
-	getColorClassName,
-	getColorObjectByColorValue,
-	useMultipleOriginColorsAndGradients,
-	useMobileGlobalStylesColors,
-} from '@wordpress/block-editor';
-import { BottomSheet, ColorSettings } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-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;
-	}, {} );
-}
-
-export 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, contentRef ) {
-	const { color, backgroundColor } = {
-		...getActiveColors( value, name, colorSettings ),
-		...colors,
-	};
-
-	if ( ! color ) {
-		contentRef?.onRemoveMarkFormatting();
-		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;
-
-	if ( hasNoSelection ) {
-		contentRef?.onMarkFormatting( color );
-	}
-	return applyFormat( value, format );
-}
-
-function ColorPicker( { name, value, onChange, contentRef } ) {
-	const property = 'color';
-	const colors = useMobileGlobalStylesColors();
-	const colorSettings = useMultipleOriginColorsAndGradients();
-	colorSettings.allAvailableColors = colors;
-
-	const onColorChange = useCallback(
-		( color ) => {
-			onChange(
-				setColors(
-					value,
-					name,
-					colors,
-					{ [ property ]: color },
-					contentRef
-				)
-			);
-		},
-		[ colors, contentRef, name, onChange, value ]
-	);
-	const activeColors = useMemo(
-		() => getActiveColors( value, name, colors ),
-		[ name, value, colors ]
-	);
-
-	return (
-		<ColorSettings
-			colorValue={ activeColors[ property ] }
-			onColorChange={ onColorChange }
-			onColorCleared={ onColorChange }
-			defaultSettings={ colorSettings }
-			hideNavigation
-		/>
-	);
-}
-
-export default function InlineColorUI( {
-	name,
-	value,
-	onChange,
-	onClose,
-	contentRef,
-} ) {
-	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 }
-						contentRef={ contentRef }
-					/>
-				</BottomSheet.NavigationScreen>
-			</BottomSheet.NavigationContainer>
-		</BottomSheet>
-	);
-}

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

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

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

@@ -1,23 +0,0 @@
-// 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 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 -->"
-`;
-
-exports[`Text color supports old text color format using "span" tag 1`] = `
-"<!-- wp:paragraph -->
-<p>this <span class="has-inline-color has-green-color">is</span> <span class="has-inline-color has-red-color">test</span></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p><span style="color:#08a5e9" class="has-inline-color">this is a test</span></p>
-<!-- /wp:paragraph -->"
-`;

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

@@ -1,192 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	fireEvent,
-	getEditorHtml,
-	initializeEditor,
-	render,
-	waitFor,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import {
-	registerBlockType,
-	setDefaultBlockName,
-	unregisterBlockType,
-} from '@wordpress/blocks';
-import { coreBlocks } from '@wordpress/block-library';
-import { BlockControls, BlockEdit } from '@wordpress/block-editor';
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { textColor } from '..';
-
-const COLOR_PINK = '#f78da7';
-const paragraph = coreBlocks[ 'core/paragraph' ];
-
-const TEXT_WITH_COLOR = `<!-- 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 -->`;
-
-beforeAll( () => {
-	paragraph.init();
-	setDefaultBlockName( paragraph.name );
-} );
-
-afterAll( () => {
-	unregisterBlockType( paragraph.name );
-} );
-
-describe( 'Text color', () => {
-	it( 'shows the text color formatting button in the toolbar', async () => {
-		const screen = await initializeEditor();
-
-		// Wait for the editor placeholder
-		const paragraphPlaceholder = await screen.findByLabelText(
-			'Add paragraph block'
-		);
-		expect( paragraphPlaceholder ).toBeDefined();
-		fireEvent.press( paragraphPlaceholder );
-
-		// Wait for the block to be created
-		const [ paragraphBlock ] = await screen.findAllByLabelText(
-			/Paragraph Block\. Row 1/
-		);
-		expect( paragraphBlock ).toBeDefined();
-
-		// Look for the highlight text color button
-		const textColorButton = await screen.findByLabelText( 'Text color' );
-		expect( textColorButton ).toBeDefined();
-	} );
-
-	it( 'allows toggling the highlight color feature to selected text', async () => {
-		const screen = await initializeEditor();
-		const text = 'Hello this is a test';
-
-		// Wait for the editor placeholder
-		const paragraphPlaceholder = await screen.findByLabelText(
-			'Add paragraph block'
-		);
-		expect( paragraphPlaceholder ).toBeDefined();
-		fireEvent.press( paragraphPlaceholder );
-
-		// Wait for the block to be created
-		const [ paragraphBlock ] = await screen.findAllByLabelText(
-			/Paragraph Block\. Row 1/
-		);
-		expect( paragraphBlock ).toBeDefined();
-
-		// Update TextInput value
-		const paragraphText = screen.getByPlaceholderText( 'Start writing…' );
-		fireEvent( paragraphText, 'onSelectionChange', 0, text.length, text, {
-			nativeEvent: {
-				eventCount: 1,
-				target: undefined,
-				text,
-			},
-		} );
-
-		// Look for the highlight text color button
-		const textColorButton = await screen.findByLabelText( 'Text color' );
-		expect( textColorButton ).toBeDefined();
-		fireEvent.press( textColorButton );
-
-		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = screen.getByTestId(
-			'inline-text-color-modal'
-		);
-		await waitFor( () => inlineTextColorModal.props.isVisible );
-
-		// Look for the pink color button
-		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
-		expect( pinkColorButton ).toBeDefined();
-		fireEvent.press( pinkColorButton );
-		// TODO(jest-console): Fix the warning and remove the expect below.
-		expect( console ).toHaveWarnedWith(
-			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
-		);
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'creates a paragraph block with the text color format', async () => {
-		const screen = await initializeEditor( {
-			initialHtml: TEXT_WITH_COLOR,
-		} );
-
-		// Wait for the block to be created
-		const [ paragraphBlock ] = await screen.findAllByLabelText(
-			/Paragraph Block\. Row 1/
-		);
-		expect( paragraphBlock ).toBeDefined();
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'supports old text color format using "span" tag', async () => {
-		await initializeEditor( {
-			initialHtml: `<!-- wp:paragraph -->
-			<p>this <span class="has-inline-color has-green-color">is</span> <span class="has-inline-color has-red-color">test</span></p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p><span style="color:#08a5e9" class="has-inline-color">this is a test</span></p>
-			<!-- /wp:paragraph -->`,
-		} );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'renders when "contentRef" is undefined', () => {
-		registerBlockType( 'core/test-block', {
-			save: () => {},
-			category: 'text',
-			title: 'block title',
-			edit: ( { children } ) => <>{ children }</>,
-		} );
-		const TextColorEdit = textColor.edit;
-		// Empty text with black color set as the text color
-		const textValue = {
-			formats: [],
-			replacements: [],
-			text: '',
-			start: 0,
-			end: 0,
-			activeFormats: [
-				{
-					type: 'core/text-color',
-					attributes: {
-						style: 'background-color:rgba(0, 0, 0, 0);color:#111111',
-						class: 'has-contrast-color',
-					},
-				},
-			],
-		};
-
-		const { getByLabelText } = render(
-			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected mayDisplayControls>
-					<TextColorEdit
-						isActive
-						activeAttributes={ {} }
-						value={ textValue }
-						onChange={ jest.fn() }
-						// This ref is usually defined by the `RichText` component.
-						// However, there are rare cases (probably related to slow performance
-						// in low-end devices) where it's undefined upon mounting.
-						contentRef={ undefined }
-					/>
-				</BlockEdit>
-				<BlockControls.Slot />
-			</SlotFillProvider>
-		);
-
-		const textColorButton = getByLabelText( 'Text color' );
-		expect( textColorButton ).toBeDefined();
-	} );
-} );