@wordpress/format-library 3.14.1-next.957ca95e4c.0 → 3.15.1

package/src/link/index.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
@@ -86,13 +85,21 @@ export const link = {
 					let startIndex = value.start;
 					let endIndex = value.end;
 
-					while ( find( value.formats[ startIndex ], startFormat ) ) {
+					while (
+						value.formats[ startIndex ]?.find(
+							( format ) => format?.type === startFormat.type
+						)
+					) {
 						startIndex--;
 					}
 
 					endIndex++;
 
-					while ( find( value.formats[ endIndex ], startFormat ) ) {
+					while (
+						value.formats[ endIndex ]?.find(
+							( format ) => format?.type === startFormat.type
+						)
+					) {
 						endIndex++;
 					}
 

package/src/link/inline.js

@@ -10,7 +10,7 @@ import {
 	insert,
 	isCollapsed,
 	applyFormat,
-	useAnchorRef,
+	useAnchor,
 	removeFormat,
 	slice,
 	replace,
@@ -183,13 +183,17 @@ function InlineLinkUI( {
 		}
 	}
 
-	const anchorRef = useAnchorRef( { ref: contentRef, value, settings } );
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		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 );
+	const forceRemountKey = useLinkInstanceKey( popoverAnchor );
 
 	// The focusOnMount prop shouldn't evolve during render of a Popover
 	// otherwise it causes a render of the content.
@@ -223,11 +227,11 @@ function InlineLinkUI( {
 
 	return (
 		<Popover
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			focusOnMount={ focusOnMount.current }
 			onClose={ stopAddingLink }
 			position="bottom center"
-			__unstableShift
+			shift
 		>
 			<LinkControl
 				key={ forceRemountKey }

package/src/text-color/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -82,7 +77,7 @@ function TextColorEdit( {
 		[ value, colors ]
 	);
 
-	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
+	const hasColorsToChoose = colors.length || ! allowCustomControl;
 	if ( ! hasColorsToChoose && ! isActive ) {
 		return null;
 	}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import { View } from 'react-native';
 
 /**
@@ -89,7 +88,7 @@ function TextColorEdit( {
 		[ value, colors ]
 	);
 
-	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
+	const hasColorsToChoose = colors.length || ! allowCustomControl;
 
 	const onPressButton = useCallback( () => {
 		if ( hasColorsToChoose ) {

package/src/text-color/inline.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,7 +7,7 @@ import {
 	applyFormat,
 	removeFormat,
 	getActiveFormat,
-	useAnchorRef,
+	useAnchor,
 } from '@wordpress/rich-text';
 import {
 	ColorPalette,
@@ -112,7 +107,7 @@ function setColors( value, name, colorSettings, colors ) {
 function ColorPicker( { name, property, value, onChange } ) {
 	const colors = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		return get( getSettings(), [ 'colors' ], [] );
+		return getSettings().colors ?? [];
 	}, [] );
 	const onColorChange = useCallback(
 		( color ) => {
@@ -142,22 +137,26 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
-	/* 
+	/*
 	 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,
+	 not the highlighted text. Given that useAnchor 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 } )
+	const popoverAnchor = useCachedTruthy(
+		useAnchor( {
+			editableContentElement: contentRef.current,
+			value,
+			settings,
+		} )
 	);
 
 	return (
 		<Popover
 			onClose={ onClose }
 			className="components-inline-color-popover"
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 		>
 			<TabPanel
 				tabs={ [

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

@@ -12,7 +12,7 @@ import {
  * WordPress dependencies
  */
 import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks';
-import { registerBlock, coreBlocks } from '@wordpress/block-library';
+import { coreBlocks } from '@wordpress/block-library';
 
 const COLOR_PINK = '#f78da7';
 const paragraph = coreBlocks[ 'core/paragraph' ];
@@ -22,7 +22,7 @@ const TEXT_WITH_COLOR = `<!-- wp:paragraph -->
 <!-- /wp:paragraph -->`;
 
 beforeAll( () => {
-	registerBlock( paragraph );
+	paragraph.init();
 	setDefaultBlockName( paragraph.name );
 } );
 
@@ -164,7 +164,7 @@ describe( 'Text color', () => {
 			initialHtml: `<!-- wp:paragraph -->
 			<p>this <span class="has-inline-color has-green-color">is</span> <span class="has-inline-color has-red-color">test</span></p>
 			<!-- /wp:paragraph -->
-			
+
 			<!-- wp:paragraph -->
 			<p><span style="color:#08a5e9" class="has-inline-color">this is a test</span></p>
 			<!-- /wp:paragraph -->`,

package/src/link/test/inline.js

@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import InlineLinkUI from '../inline';
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-describe( 'InlineLinkUI', () => {
-	it( 'InlineLinkUI renders', () => {
-		const wrapper = shallow( <InlineLinkUI /> );
-		expect( wrapper ).toBeTruthy();
-	} );
-} );