@wordpress/format-library 3.0.5 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.0.5",
+	"version": "3.0.9",
 	"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": "^8.0.0",
-		"@wordpress/components": "^19.0.1",
-		"@wordpress/compose": "^5.0.5",
-		"@wordpress/data": "^6.1.3",
-		"@wordpress/dom": "^3.2.6",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/html-entities": "^3.2.2",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.1.0",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/rich-text": "^5.0.5",
-		"@wordpress/url": "^3.3.0",
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/block-editor": "^8.0.3",
+		"@wordpress/components": "^19.0.3",
+		"@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": "393c2b5533837fd637e998d23f0124c081a10df0"
+	"gitHead": "c6594e767659bd3289e633a17c44fdf6a4933194"
 }

package/src/link/inline.js

@@ -26,6 +26,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
+import useLinkInstanceKey from './use-link-instance-key';
 
 function InlineLinkUI( {
 	isActive,
@@ -184,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 );
@@ -222,6 +229,7 @@ function InlineLinkUI( {
 			position="bottom center"
 		>
 			<LinkControl
+				key={ forceRemountKey }
 				value={ linkValue }
 				onChange={ onChangeLink }
 				onRemove={ removeLink }

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;