@wordpress/format-library 3.0.4 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.0.4",
+	"version": "3.0.8",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,24 +25,24 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/block-editor": "^7.0.4",
-		"@wordpress/components": "^19.0.0",
-		"@wordpress/compose": "^5.0.4",
-		"@wordpress/data": "^6.1.2",
-		"@wordpress/dom": "^3.2.5",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/html-entities": "^3.2.2",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/rich-text": "^5.0.4",
-		"@wordpress/url": "^3.2.3",
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/block-editor": "^8.0.2",
+		"@wordpress/components": "^19.0.2",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/data": "^6.1.4",
+		"@wordpress/dom": "^3.2.7",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/html-entities": "^3.2.3",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/url": "^3.3.1",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "9a1dd3474d937468e4cf9caf9886ad61ef0a8f50"
 }

package/src/bold/index.js

@@ -20,11 +20,11 @@ export const bold = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

package/src/code/index.js

@@ -46,7 +46,7 @@ export const code = {
 	},
 	edit( { value, onChange, onFocus, isActive } ) {
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 
@@ -56,6 +56,7 @@ export const code = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/italic/index.js

@@ -20,11 +20,11 @@ export const italic = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

package/src/keyboard/index.js

@@ -16,7 +16,7 @@ export const keyboard = {
 	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 keyboard = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/link/inline.js

@@ -12,6 +12,8 @@ import {
 	applyFormat,
 	useAnchorRef,
 	removeFormat,
+	slice,
+	replace,
 } from '@wordpress/rich-text';
 import {
 	__experimentalLinkControl as LinkControl,
@@ -22,8 +24,9 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { createLinkFormat, isValidHref } from './utils';
+import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
+import useLinkInstanceKey from './use-link-instance-key';
 
 function InlineLinkUI( {
 	isActive,
@@ -35,6 +38,11 @@ function InlineLinkUI( {
 	stopAddingLink,
 	contentRef,
 } ) {
+	const richLinkTextValue = getRichTextValueFromSelection( value, isActive );
+
+	// Get the text content minus any HTML tags.
+	const richTextText = richLinkTextValue.text;
+
 	/**
 	 * Pending settings to be applied to the next link. When inserting a new
 	 * link, toggle values cannot be applied immediately, because there is not
@@ -60,6 +68,7 @@ function InlineLinkUI( {
 		type: activeAttributes.type,
 		id: activeAttributes.id,
 		opensInNewTab: activeAttributes.target === '_blank',
+		title: richTextText,
 		...nextLinkValue,
 	};
 
@@ -99,7 +108,7 @@ function InlineLinkUI( {
 		}
 
 		const newUrl = prependHTTP( nextValue.url );
-		const format = createLinkFormat( {
+		const linkFormat = createLinkFormat( {
 			url: newUrl,
 			type: nextValue.type,
 			id:
@@ -109,17 +118,46 @@ function InlineLinkUI( {
 			opensInNewWindow: nextValue.opensInNewTab,
 		} );
 
+		const newText = nextValue.title || newUrl;
 		if ( isCollapsed( value ) && ! isActive ) {
-			const newText = nextValue.title || newUrl;
+			// Scenario: we don't have any actively selected text or formats.
 			const toInsert = applyFormat(
 				create( { text: newText } ),
-				format,
+				linkFormat,
 				0,
 				newText.length
 			);
 			onChange( insert( value, toInsert ) );
 		} else {
-			const newValue = applyFormat( value, format );
+			// Scenario: we have any active text selection or an active format
+			let newValue;
+
+			if ( newText === richTextText ) {
+				// If we're not updating the text then ignore
+				newValue = applyFormat( value, linkFormat );
+			} else {
+				// Create new RichText value for the new text in order that we
+				// can apply formats to it.
+				newValue = create( { text: newText } );
+
+				// Apply the new Link format to this new text value.
+				newValue = applyFormat(
+					newValue,
+					linkFormat,
+					0,
+					newText.length
+				);
+
+				// Update the original (full) RichTextValue replacing the
+				// target text with the *new* RichTextValue containing:
+				// 1. The new text content.
+				// 2. The new link format.
+				// Note original formats will be lost when applying this change.
+				// That is expected behaviour.
+				// See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
+				newValue = replace( value, richTextText, newValue );
+			}
+
 			newValue.start = newValue.end;
 			newValue.activeFormats = [];
 			onChange( newValue );
@@ -147,6 +185,12 @@ function InlineLinkUI( {
 
 	const anchorRef = useAnchorRef( { ref: contentRef, value, settings } );
 
+	// Generate a string based key that is unique to this anchor reference.
+	// This is used to force re-mount the LinkControl component to avoid
+	// potential stale state bugs caused by the component not being remounted
+	// See https://github.com/WordPress/gutenberg/pull/34742.
+	const forceRemountKey = useLinkInstanceKey( anchorRef );
+
 	// The focusOnMount prop shouldn't evolve during render of a Popover
 	// otherwise it causes a render of the content.
 	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
@@ -185,6 +229,7 @@ function InlineLinkUI( {
 			position="bottom center"
 		>
 			<LinkControl
+				key={ forceRemountKey }
 				value={ linkValue }
 				onChange={ onChangeLink }
 				onRemove={ removeLink }
@@ -193,9 +238,34 @@ function InlineLinkUI( {
 				createSuggestion={ createPageEntity && handleCreate }
 				withCreateSuggestion={ userCanCreatePages }
 				createSuggestionButtonText={ createButtonText }
+				hasTextControl
 			/>
 		</Popover>
 	);
 }
 
+function getRichTextValueFromSelection( value, isActive ) {
+	// Default to the selection ranges on the RichTextValue object.
+	let textStart = value.start;
+	let textEnd = value.end;
+
+	// If the format is currently active then the rich text value
+	// should always be taken from the bounds of the active format
+	// and not the selected text.
+	if ( isActive ) {
+		const boundary = getFormatBoundary( value, {
+			type: 'core/link',
+		} );
+
+		textStart = boundary.start;
+
+		// Text *selection* always extends +1 beyond the edge of the format.
+		// We account for that here.
+		textEnd = boundary.end + 1;
+	}
+
+	// Get a RichTextValue containing the selected text content.
+	return slice( value, textStart, textEnd );
+}
+
 export default withSpokenMessages( InlineLinkUI );

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/use-link-instance-key.js

@@ -0,0 +1,34 @@
+// Weakly referenced map allows unused ids to be garbage collected.
+const weakMap = new WeakMap();
+
+// Incrementing zero-based ID value
+let id = -1;
+
+const prefix = 'link-control-instance';
+
+function getKey( _id ) {
+	return `${ prefix }-${ _id }`;
+}
+
+/**
+ * Builds a unique link control key for the given object reference.
+ *
+ * @param {Object} instance an unique object reference specific to this link control instance.
+ * @return {string} the unique key to use for this link control.
+ */
+function useLinkInstanceKey( instance ) {
+	if ( ! instance ) {
+		return;
+	}
+	if ( weakMap.has( instance ) ) {
+		return getKey( weakMap.get( instance ) );
+	}
+
+	id += 1;
+
+	weakMap.set( instance, id );
+
+	return getKey( id );
+}
+
+export default useLinkInstanceKey;