@wordpress/format-library 3.0.14 → 3.0.18-next.33ec3857e2.0

package/src/text-color/index.js

@@ -17,6 +17,8 @@ import { removeFormat } from '@wordpress/rich-text';
  */
 import { default as InlineColorUI, getActiveColors } from './inline';
 
+export const transparentValue = 'rgba(0, 0, 0, 0)';
+
 const name = 'core/text-color';
 const title = __( 'Highlight' );
 
@@ -30,7 +32,7 @@ function getComputedStyleProperty( element, property ) {
 
 	if (
 		property === 'background-color' &&
-		value === 'rgba(0, 0, 0, 0)' &&
+		value === transparentValue &&
 		element.parentElement
 	) {
 		return getComputedStyleProperty( element.parentElement, property );
@@ -47,7 +49,7 @@ function fillComputedColors( element, { color, backgroundColor } ) {
 	return {
 		color: color || getComputedStyleProperty( element, 'color' ),
 		backgroundColor:
-			backgroundColor === 'rgba(0, 0, 0, 0)'
+			backgroundColor === transparentValue
 				? getComputedStyleProperty( element, 'background-color' )
 				: backgroundColor,
 	};
@@ -139,7 +141,7 @@ export const textColor = {
 		if ( key !== 'style' ) return value;
 		// We should not add a background-color if it's already set
 		if ( value && value.includes( 'background-color' ) ) return value;
-		const addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' );
+		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
 		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
 		// rules will already include a `;`.
 		return value ? [ addedCSS, value ].join( ';' ) : addedCSS;

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

@@ -0,0 +1,191 @@
+/**
+ * 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 should not add a background-color if it's already set
+		if ( value && value.includes( 'background-color' ) ) return value;
+		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
+		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+		// rules will already include a `;`.
+		return value ? [ addedCSS, value ].join( ';' ) : addedCSS;
+	},
+	edit: TextColorEdit,
+};

package/src/text-color/inline.js

@@ -28,25 +28,27 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { textColor as settings } from './index';
+import { textColor as settings, transparentValue } from './index';
 
 function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.split( ':' );
 			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' )
+			if ( property === 'background-color' && value !== transparentValue )
 				accumulator.backgroundColor = value;
 		}
 		return accumulator;
 	}, {} );
 }
 
-function parseClassName( className = '', colorSettings ) {
+export function parseClassName( className = '', colorSettings ) {
 	return className.split( ' ' ).reduce( ( accumulator, name ) => {
-		const match = name.match( /^has-([^-]+)-color$/ );
-		if ( match ) {
-			const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ );
+		// `colorSlug` could contain dashes, so simply match the start and end.
+		if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {
+			const colorSlug = name
+				.replace( /^has-/, '' )
+				.replace( /-color$/, '' );
 			const colorObject = getColorObjectByAttributeValues(
 				colorSettings,
 				colorSlug
@@ -88,7 +90,7 @@ function setColors( value, name, colorSettings, colors ) {
 		styles.push( [ 'background-color', backgroundColor ].join( ':' ) );
 	} else {
 		// Override default browser color for mark element.
-		styles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) );
+		styles.push( [ 'background-color', transparentValue ].join( ':' ) );
 	}
 
 	if ( color ) {

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

@@ -0,0 +1,163 @@
+/**
+ * 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 };
+
+	// For cases when there is no text selected, formatting is forced
+	// for the first empty character
+	if (
+		value?.start === value?.end &&
+		( value?.text.length === 0 ||
+			value.text?.charAt( value.end - 1 ) === ' ' )
+	) {
+		return applyFormat( value, format, value?.start - 1, value?.end + 1 );
+	}
+
+	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 }
+		>
+			<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;
+}