@wordpress/format-library 3.0.2 → 3.0.6

package/src/link/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startsWith } from 'lodash';
+import { startsWith, find, partialRight } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,3 +111,134 @@ export function createLinkFormat( { url, type, id, opensInNewWindow } ) {
 
 	return format;
 }
+
+/* eslint-disable jsdoc/no-undefined-types */
+/**
+ * Get the start and end boundaries of a given format from a rich text value.
+ *
+ *
+ * @param {RichTextValue} value      the rich text value to interrogate.
+ * @param {string}        format     the identifier for the target format (e.g. `core/link`, `core/bold`).
+ * @param {number?}       startIndex optional startIndex to seek from.
+ * @param {number?}       endIndex   optional endIndex to seek from.
+ * @return {Object}	object containing start and end values for the given format.
+ */
+/* eslint-enable jsdoc/no-undefined-types */
+export function getFormatBoundary(
+	value,
+	format,
+	startIndex = value.start,
+	endIndex = value.end
+) {
+	const EMPTY_BOUNDARIES = {
+		start: null,
+		end: null,
+	};
+
+	const { formats } = value;
+	let targetFormat;
+	let initialIndex;
+
+	if ( ! formats?.length ) {
+		return EMPTY_BOUNDARIES;
+	}
+
+	// Clone formats to avoid modifying source formats.
+	const newFormats = formats.slice();
+
+	const formatAtStart = find( newFormats[ startIndex ], {
+		type: format.type,
+	} );
+
+	const formatAtEnd = find( newFormats[ endIndex ], {
+		type: format.type,
+	} );
+
+	const formatAtEndMinusOne = find( newFormats[ endIndex - 1 ], {
+		type: format.type,
+	} );
+
+	if ( !! formatAtStart ) {
+		// Set values to conform to "start"
+		targetFormat = formatAtStart;
+		initialIndex = startIndex;
+	} else if ( !! formatAtEnd ) {
+		// Set values to conform to "end"
+		targetFormat = formatAtEnd;
+		initialIndex = endIndex;
+	} else if ( !! formatAtEndMinusOne ) {
+		// This is an edge case which will occur if you create a format, then place
+		// the caret just before the format and hit the back ARROW key. The resulting
+		// value object will have start and end +1 beyond the edge of the format boundary.
+		targetFormat = formatAtEndMinusOne;
+		initialIndex = endIndex - 1;
+	} else {
+		return EMPTY_BOUNDARIES;
+	}
+
+	const index = newFormats[ initialIndex ].indexOf( targetFormat );
+
+	const walkingArgs = [ newFormats, initialIndex, targetFormat, index ];
+
+	// Walk the startIndex "backwards" to the leading "edge" of the matching format.
+	startIndex = walkToStart( ...walkingArgs );
+
+	// Walk the endIndex "forwards" until the trailing "edge" of the matching format.
+	endIndex = walkToEnd( ...walkingArgs );
+
+	// Safe guard: start index cannot be less than 0
+	startIndex = startIndex < 0 ? 0 : startIndex;
+
+	// // Return the indicies of the "edges" as the boundaries.
+	return {
+		start: startIndex,
+		end: endIndex,
+	};
+}
+
+/**
+ * Walks forwards/backwards towards the boundary of a given format within an
+ * array of format objects. Returns the index of the boundary.
+ *
+ * @param {Array}  formats         the formats to search for the given format type.
+ * @param {number} initialIndex    the starting index from which to walk.
+ * @param {Object} targetFormatRef a reference to the format type object being sought.
+ * @param {number} formatIndex     the index at which we expect the target format object to be.
+ * @param {string} direction       either 'forwards' or 'backwards' to indicate the direction.
+ * @return {number} the index of the boundary of the given format.
+ */
+function walkToBoundary(
+	formats,
+	initialIndex,
+	targetFormatRef,
+	formatIndex,
+	direction
+) {
+	let index = initialIndex;
+
+	const directions = {
+		forwards: 1,
+		backwards: -1,
+	};
+
+	const directionIncrement = directions[ direction ] || 1; // invalid direction arg default to forwards
+	const inverseDirectionIncrement = directionIncrement * -1;
+
+	while (
+		formats[ index ] &&
+		formats[ index ][ formatIndex ] === targetFormatRef
+	) {
+		// Increment/decrement in the direction of operation.
+		index = index + directionIncrement;
+	}
+
+	// Restore by one in inverse direction of operation
+	// to avoid out of bounds.
+	index = index + inverseDirectionIncrement;
+
+	return index;
+}
+
+const walkToStart = partialRight( walkToBoundary, 'backwards' );
+
+const walkToEnd = partialRight( walkToBoundary, 'forwards' );

package/src/strikethrough/index.js

@@ -16,7 +16,7 @@ export const strikethrough = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 
@@ -26,6 +26,7 @@ export const strikethrough = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/subscript/index.js

@@ -16,7 +16,7 @@ export const subscript = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const subscript = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/superscript/index.js

@@ -16,7 +16,7 @@ export const superscript = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const superscript = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/text-color/index.js

@@ -15,13 +15,44 @@ import { removeFormat } from '@wordpress/rich-text';
 /**
  * Internal dependencies
  */
-import { default as InlineColorUI, getActiveColor } from './inline';
+import { default as InlineColorUI, getActiveColors } from './inline';
 
 const name = 'core/text-color';
-const title = __( 'Text color' );
+const title = __( 'Highlight' );
 
 const EMPTY_ARRAY = [];
 
+function getComputedStyleProperty( element, property ) {
+	const { ownerDocument } = element;
+	const { defaultView } = ownerDocument;
+	const style = defaultView.getComputedStyle( element );
+	const value = style.getPropertyValue( property );
+
+	if (
+		property === 'background-color' &&
+		value === 'rgba(0, 0, 0, 0)' &&
+		element.parentElement
+	) {
+		return getComputedStyleProperty( element.parentElement, property );
+	}
+
+	return value;
+}
+
+function fillComputedColors( element, { color, backgroundColor } ) {
+	if ( ! color && ! backgroundColor ) {
+		return;
+	}
+
+	return {
+		color: color || getComputedStyleProperty( element, 'color' ),
+		backgroundColor:
+			backgroundColor === 'rgba(0, 0, 0, 0)'
+				? getComputedStyleProperty( element, 'background-color' )
+				: backgroundColor,
+	};
+}
+
 function TextColorEdit( {
 	value,
 	onChange,
@@ -38,15 +69,14 @@ function TextColorEdit( {
 	const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [
 		setIsAddingColor,
 	] );
-	const colorIndicatorStyle = useMemo( () => {
-		const activeColor = getActiveColor( name, value, colors );
-		if ( ! activeColor ) {
-			return undefined;
-		}
-		return {
-			backgroundColor: activeColor,
-		};
-	}, [ value, colors ] );
+	const colorIndicatorStyle = useMemo(
+		() =>
+			fillComputedColors(
+				contentRef.current,
+				getActiveColors( value, name, colors )
+			),
+		[ value, colors ]
+	);
 
 	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
 	if ( ! hasColorsToChoose && ! isActive ) {
@@ -56,19 +86,13 @@ function TextColorEdit( {
 	return (
 		<>
 			<RichTextToolbarButton
-				key={ isActive ? 'text-color' : 'text-color-not-active' }
 				className="format-library-text-color-button"
-				name={ isActive ? 'text-color' : undefined }
+				isActive={ isActive }
 				icon={
-					<>
-						<Icon icon={ textColorIcon } />
-						{ isActive && (
-							<span
-								className="format-library-text-color-button__indicator"
-								style={ colorIndicatorStyle }
-							/>
-						) }
-					</>
+					<Icon
+						icon={ textColorIcon }
+						style={ colorIndicatorStyle }
+					/>
 				}
 				title={ title }
 				// If has no colors to choose but a color is active remove the color onClick
@@ -77,6 +101,7 @@ function TextColorEdit( {
 						? enableIsAddingColor
 						: () => onChange( removeFormat( value, name ) )
 				}
+				role="menuitemcheckbox"
 			/>
 			{ isAddingColor && (
 				<InlineColorUI
@@ -95,11 +120,29 @@ function TextColorEdit( {
 export const textColor = {
 	name,
 	title,
-	tagName: 'span',
+	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', 'rgba(0, 0, 0, 0)' ].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

@@ -16,75 +16,122 @@ import {
 } from '@wordpress/rich-text';
 import {
 	ColorPalette,
-	URLPopover,
 	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	store as blockEditorStore,
+	useCachedTruthy,
 } from '@wordpress/block-editor';
+import { Popover, TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { textColor as settings } from './index';
 
-export function getActiveColor( formatName, formatValue, colors ) {
-	const activeColorFormat = getActiveFormat( formatValue, formatName );
+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' )
+				accumulator.backgroundColor = value;
+		}
+		return accumulator;
+	}, {} );
+}
+
+function parseClassName( className = '', colorSettings ) {
+	return className.split( ' ' ).reduce( ( accumulator, name ) => {
+		const match = name.match( /^has-([^-]+)-color$/ );
+		if ( match ) {
+			const [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ );
+			const colorObject = getColorObjectByAttributeValues(
+				colorSettings,
+				colorSlug
+			);
+			accumulator.color = colorObject.color;
+		}
+		return accumulator;
+	}, {} );
+}
+
+export function getActiveColors( value, name, colorSettings ) {
+	const activeColorFormat = getActiveFormat( value, name );
+
 	if ( ! activeColorFormat ) {
-		return;
+		return {};
 	}
-	const styleColor = activeColorFormat.attributes.style;
-	if ( styleColor ) {
-		return styleColor.replace( new RegExp( `^color:\\s*` ), '' );
+
+	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', 'rgba(0, 0, 0, 0)' ].join( ':' ) );
 	}
-	const currentClass = activeColorFormat.attributes.class;
-	if ( currentClass ) {
-		const colorSlug = currentClass.replace(
-			/.*has-([^\s]*)-color.*/,
-			'$1'
-		);
-		return getColorObjectByAttributeValues( colors, colorSlug ).color;
+
+	if ( color ) {
+		const colorObject = getColorObjectByColorValue( colorSettings, color );
+
+		if ( colorObject ) {
+			classNames.push( getColorClassName( 'color', colorObject.slug ) );
+		} else {
+			styles.push( [ 'color', color ].join( ':' ) );
+		}
 	}
+
+	if ( styles.length ) attributes.style = styles.join( ';' );
+	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+
+	return applyFormat( value, { type: name, attributes } );
 }
 
-const ColorPicker = ( { name, value, onChange } ) => {
+function ColorPicker( { name, property, value, onChange } ) {
 	const colors = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return get( getSettings(), [ 'colors' ], [] );
-	} );
+	}, [] );
 	const onColorChange = useCallback(
 		( color ) => {
-			if ( color ) {
-				const colorObject = getColorObjectByColorValue( colors, color );
-				onChange(
-					applyFormat( value, {
-						type: name,
-						attributes: colorObject
-							? {
-									class: getColorClassName(
-										'color',
-										colorObject.slug
-									),
-							  }
-							: {
-									style: `color:${ color }`,
-							  },
-					} )
-				);
-			} else {
-				onChange( removeFormat( value, name ) );
-			}
+			onChange(
+				setColors( value, name, colors, { [ property ]: color } )
+			);
 		},
-		[ colors, onChange ]
+		[ colors, onChange, property ]
+	);
+	const activeColors = useMemo(
+		() => getActiveColors( value, name, colors ),
+		[ name, value, colors ]
 	);
-	const activeColor = useMemo( () => getActiveColor( name, value, colors ), [
-		name,
-		value,
-		colors,
-	] );
 
-	return <ColorPalette value={ activeColor } onChange={ onColorChange } />;
-};
+	return (
+		<ColorPalette
+			value={ activeColors[ property ] }
+			onChange={ onColorChange }
+		/>
+	);
+}
 
 export default function InlineColorUI( {
 	name,
@@ -93,15 +140,44 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
-	const anchorRef = useAnchorRef( { ref: contentRef, value, settings } );
+	/* 
+	 As you change the text color by typing a HEX value into a field,
+	 the return value of document.getSelection jumps to the field you're editing,
+	 not the highlighted text. Given that useAnchorRef uses document.getSelection,
+	 it will return null, since it can't find the <mark> element within the HEX input.
+	 This caches the last truthy value of the selection anchor reference.
+	 */
+	const anchorRef = useCachedTruthy(
+		useAnchorRef( { ref: contentRef, value, settings } )
+	);
+
 	return (
-		<URLPopover
-			value={ value }
+		<Popover
 			onClose={ onClose }
 			className="components-inline-color-popover"
 			anchorRef={ anchorRef }
 		>
-			<ColorPicker name={ name } value={ value } onChange={ onChange } />
-		</URLPopover>
+			<TabPanel
+				tabs={ [
+					{
+						name: 'color',
+						title: __( 'Text' ),
+					},
+					{
+						name: 'backgroundColor',
+						title: __( 'Background' ),
+					},
+				] }
+			>
+				{ ( tab ) => (
+					<ColorPicker
+						name={ name }
+						property={ tab.name }
+						value={ value }
+						onChange={ onChange }
+					/>
+				) }
+			</TabPanel>
+		</Popover>
 	);
 }

package/src/text-color/style.scss

@@ -1,19 +1,8 @@
-.components-inline-color__indicator {
-	position: absolute;
-	background: #000;
-	height: 3px;
-	width: 20px;
-	bottom: 6px;
-	left: auto;
-	right: auto;
-	margin: 0 5px;
-}
-
 .components-inline-color-popover {
 
 	.components-popover__content {
-		> div {
-			padding: 20px 18px;
+		.components-tab-panel__tab-content {
+			padding: 16px;
 		}
 
 		.components-color-palette {
@@ -32,14 +21,3 @@
 		}
 	}
 }
-
-.format-library-text-color-button {
-	position: relative;
-}
-.format-library-text-color-button__indicator {
-	height: 4px;
-	width: 20px;
-	position: absolute;
-	bottom: 10px;
-	left: 8px;
-}

package/src/underline/index.js

@@ -9,10 +9,11 @@ import {
 } from '@wordpress/block-editor';
 
 const name = 'core/underline';
+const title = __( 'Underline' );
 
 export const underline = {
 	name,
-	title: __( 'Underline' ),
+	title,
 	tagName: 'span',
 	className: null,
 	attributes: {
@@ -26,6 +27,7 @@ export const underline = {
 					attributes: {
 						style: 'text-decoration: underline;',
 					},
+					title,
 				} )
 			);
 		};