@wordpress/format-library 3.0.4 → 3.0.5

package/src/link/test/utils.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isValidHref } from '../utils';
+import { isValidHref, getFormatBoundary } from '../utils';
 
 describe( 'isValidHref', () => {
 	it( 'returns true if the href cannot be recognised as a url or an anchor link', () => {
@@ -96,3 +96,364 @@ describe( 'isValidHref', () => {
 		} );
 	} );
 } );
+
+describe( 'getFormatBoundary', () => {
+	const boldFormat = {
+		type: 'core/bold',
+	};
+
+	const italicFormat = {
+		type: 'core/italic',
+	};
+
+	const linkFormat = {
+		type: 'core/link',
+		attributes: {
+			url: 'http://www.wordpress.org',
+			type: 'URL',
+			id: 'www.wordpress.org',
+		},
+	};
+
+	describe( 'Invalid values', () => {
+		it( 'should return empty bounds if value contains no formats', () => {
+			const record = {
+				formats: [], // no formats here!
+				text: 'Lorem ipsum dolor.',
+				start: 8,
+				end: 8,
+			};
+
+			expect(
+				getFormatBoundary( record, { type: 'core/link' } )
+			).toEqual( {
+				start: null,
+				end: null,
+			} );
+		} );
+
+		it.each( [
+			[ 5, 12 ],
+			[ 11, 12 ],
+		] )(
+			'should return empty bounds if both start and end indexes do not contain the target format',
+			() => {
+				const record = {
+					formats: [
+						null,
+						[ italicFormat ],
+						[ italicFormat ],
+						[ italicFormat ],
+						null,
+						null, // 5
+						[ linkFormat, italicFormat ], // 6
+						[ linkFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, italicFormat ], // 10
+						null, // 11
+						[ boldFormat ], // 12
+						[ boldFormat ],
+						[ boldFormat ],
+						[ boldFormat ],
+						null,
+						null,
+					],
+
+					text: 'Lorem ipsum dolor.',
+					start: 5, // no format here
+					end: 12, // format here but it doesn't match the target format
+				};
+
+				expect(
+					getFormatBoundary( record, { type: 'core/link' } )
+				).toEqual( {
+					start: null,
+					end: null,
+				} );
+			}
+		);
+
+		it.each( [
+			[
+				"start and end are beyond the length of the provided value's formats",
+				[ 19, 22 ],
+			],
+			[ 'start and end are less than 0', [ -1, -2 ] ],
+		] )(
+			'should return empty bounds if %s',
+			( _ignored, [ start, end ] ) => {
+				const record = {
+					formats: [
+						null,
+						[ italicFormat ],
+						[ italicFormat ],
+						[ italicFormat ],
+						null,
+						null, // 5
+						[ linkFormat, italicFormat ], // 6
+						[ linkFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, italicFormat ], // 10
+						null, // 11
+						[ boldFormat ], // 12
+						[ boldFormat ],
+						[ boldFormat ],
+						[ boldFormat ],
+						null,
+						null, // 17
+					],
+
+					text: 'Lorem ipsum dolor.',
+					start,
+					end,
+				};
+
+				expect(
+					getFormatBoundary( record, { type: 'core/link' } )
+				).toEqual( {
+					start: null,
+					end: null,
+				} );
+			}
+		);
+	} );
+
+	describe( 'Collapsed values', () => {
+		it.each( [
+			[ 'inside', [ 8, 8 ] ],
+			[ 'start', [ 6, 6 ] ],
+			[ 'end', [ 10, 10 ] ],
+			[ 'just inside the start', [ 7, 7 ] ],
+			[ 'just inside the end', [ 9, 9 ] ],
+		] )(
+			'should find bounds of a format from %s of a collapsed RichTextValue',
+			( _ignored, [ start, end ] ) => {
+				const record = {
+					formats: [
+						null,
+						[ italicFormat ],
+						[ italicFormat ],
+						[ italicFormat ],
+						null,
+						null,
+						[ linkFormat, italicFormat ], // 6
+						[ linkFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, italicFormat ], // 10
+					],
+
+					text: 'Lorem ipsum dolor.',
+					start,
+					end,
+				};
+
+				expect(
+					getFormatBoundary( record, { type: 'core/link' } )
+				).toEqual( {
+					start: 6,
+					end: 10,
+				} );
+			}
+		);
+
+		it( 'should find bounds of a format from just outside the end of a collapsed RichTextValue', () => {
+			// 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.
+			// The code under test here has to cope with that by searching for formats -1 back
+			// from the end value.
+			const record = {
+				formats: [
+					null,
+					[ italicFormat ],
+					[ italicFormat ],
+					[ italicFormat ],
+					null,
+					null,
+					[ linkFormat, italicFormat ], // 6
+					[ linkFormat ],
+					[ linkFormat, boldFormat ],
+					[ linkFormat, boldFormat ],
+					[ linkFormat, italicFormat ], // 10
+				],
+
+				text: 'Lorem ipsum dolor.',
+				start: 11, // +1 beyond the end of the formats
+				end: 11, // +1 beyond the end of the formats
+			};
+
+			expect(
+				getFormatBoundary( record, { type: 'core/link' } )
+			).toEqual( {
+				start: 6,
+				end: 10,
+			} );
+		} );
+	} );
+
+	describe( 'Non-collapsed values', () => {
+		it.each( [
+			[ 'at the bounds', [ 6, 10 ] ],
+			[ 'inside the bounds', [ 7, 8 ] ],
+		] )(
+			'should find bounds of a format beginning %s of a non-collapsed RichTextValue',
+			( _ignored, [ start, end ] ) => {
+				const record = {
+					formats: [
+						null,
+						[ italicFormat ],
+						[ italicFormat ],
+						[ italicFormat ],
+						null,
+						null,
+						[ linkFormat, italicFormat ], // 6
+						[ linkFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, boldFormat ],
+						[ linkFormat, italicFormat ], // 10
+						null,
+						null,
+						[ boldFormat ],
+						[ boldFormat ],
+						[ boldFormat ],
+						null,
+						null,
+					],
+
+					text: 'Lorem ipsum dolor.',
+					start,
+					end,
+				};
+
+				expect(
+					getFormatBoundary( record, { type: 'core/link' } )
+				).toEqual( {
+					start: 6,
+					end: 10,
+				} );
+			}
+		);
+	} );
+
+	it( 'should find bounds of a format which starts at zeroth index where start/end pointers are at 0', () => {
+		const record = {
+			formats: [
+				[ linkFormat ], // 0 (th zeroth index)
+				[ linkFormat ],
+				[ linkFormat ],
+				[ linkFormat ],
+				[ linkFormat ],
+				[ linkFormat ], // 5
+				[ boldFormat ],
+				[ boldFormat ],
+				null,
+				null,
+				null,
+				null,
+				null,
+				null,
+				null,
+				[ boldFormat ],
+				[ boldFormat ],
+				[ boldFormat ],
+				null,
+				null,
+				null,
+				null,
+				null,
+				null,
+				null,
+				[ italicFormat ],
+				[ italicFormat ],
+				[ italicFormat ],
+				[ italicFormat ],
+				[ italicFormat ],
+				null,
+			],
+
+			text: "Lorem ok let's try again dolor.",
+			start: 0,
+			end: 0,
+		};
+
+		expect( getFormatBoundary( record, { type: 'core/link' } ) ).toEqual( {
+			start: 0,
+			end: 5,
+		} );
+	} );
+
+	describe( 'Single value out of bounds', () => {
+		it.each( [
+			[ 'start is outside the boundary but end is inside', [ 1, 4 ] ],
+			[ 'end is outside the boundary but start is inside', [ 4, 10 ] ],
+			[
+				'end is withins bounds but is less than start (inverted)',
+				[ 4, 1 ],
+			],
+			[ 'start is negative but end is within bounds', [ -1000, 4 ] ],
+			[ 'end is negative but start is within bounds', [ 4, -1000 ] ],
+		] )( 'should return bounds when %s', ( _ignored, [ start, end ] ) => {
+			const record = {
+				formats: [
+					[],
+					[],
+					[],
+					[],
+					[ boldFormat ], // 4
+					[ boldFormat ],
+					[ boldFormat ], // 6
+					[],
+					[],
+				],
+				text: 'Lorem ipsum dolor.',
+				start,
+				end,
+			};
+
+			expect(
+				getFormatBoundary( record, { type: 'core/bold' } )
+			).toEqual( {
+				start: 4,
+				end: 6,
+			} );
+		} );
+	} );
+
+	it( 'should respect startIndex and endIndex arguments when seeking boundary', () => {
+		const startIndex = 1;
+		const endIndex = 3;
+
+		const record = {
+			formats: [
+				[ boldFormat ],
+				[ boldFormat ],
+				[ boldFormat ],
+				[ boldFormat ],
+				[ boldFormat ],
+				[],
+				[],
+				[],
+				[],
+				[],
+			],
+			text: 'Lorem ipsum dolor.',
+			start: 10, // the value start is outside the format
+			end: 10, // the value end is outside the format
+		};
+
+		expect(
+			getFormatBoundary(
+				record,
+				{ type: 'core/bold' },
+				startIndex,
+				endIndex
+			)
+		).toEqual( {
+			start: 0,
+			end: 4,
+		} );
+	} );
+} );

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

@@ -101,6 +101,7 @@ function TextColorEdit( {
 						? enableIsAddingColor
 						: () => onChange( removeFormat( value, name ) )
 				}
+				role="menuitemcheckbox"
 			/>
 			{ isAddingColor && (
 				<InlineColorUI

package/src/text-color/inline.js

@@ -20,6 +20,7 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	store as blockEditorStore,
+	useCachedTruthy,
 } from '@wordpress/block-editor';
 import { Popover, TabPanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -139,7 +140,17 @@ 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 (
 		<Popover
 			onClose={ onClose }

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,
 				} )
 			);
 		};