Underline selected text as soon as link to field is populated (#29035)

WordPress · Feb 18, 2021 · fce2a47 · fce2a47
1 parent eaf1c18
commit fce2a47
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
@@ -36,11 +36,16 @@ const LinkSettingsScreen = ( {
 	value,
 	isActive,
 	activeAttributes,
+	isVisible,
 } ) => {
 	const [ text, setText ] = useState( getTextContent( slice( value ) ) );
 	const [ opensInNewWindow, setOpensInNewWindows ] = useState(
 		activeAttributes.target === '_blank'
 	);
+	const [ linkValues, setLinkValues ] = useState( {
+		isActiveLink: isActive,
+		isRemovingLink: false,
+	} );
 
 	const {
 		shouldEnableBottomSheetMaxHeight,
@@ -61,7 +66,26 @@ const LinkSettingsScreen = ( {
 		} );
 	}, [ inputValue, opensInNewWindow, text ] );
 
-	const submitLink = () => {
+	useEffect( () => {
+		const { isActiveLink, isRemovingLink } = linkValues;
+		if ( !! inputValue && ! isActiveLink && isVisible ) {
+			submitLink( false );
+		} else if ( ( inputValue === '' && isActiveLink ) || isRemovingLink ) {
+			removeLink( false );
+		}
+	}, [
+		inputValue,
+		isVisible,
+		linkValues.isActiveLink,
+		linkValues.isRemovingLink,
+	] );
+
+	const clearFormat = () => {
+		onChange( { ...value, activeFormats: [] } );
+		setLinkValues( { isActiveLink: false, isRemovingLink: true } );
+	};
+
+	const submitLink = ( shouldCloseBottomSheet = true ) => {
 		const url = prependHTTP( inputValue );
 		const linkText = text || inputValue;
 		const format = createLinkFormat( {
@@ -103,6 +127,8 @@ const LinkSettingsScreen = ( {
 		}
 		newAttributes.activeFormats = [];
 		onChange( { ...newAttributes, needsSelectionUpdate: true } );
+		setLinkValues( { isActiveLink: true, isRemovingLink: false } );
+
 		if ( ! isValidHref( url ) ) {
 			speak(
 				__(
@@ -116,12 +142,17 @@ const LinkSettingsScreen = ( {
 			speak( __( 'Link inserted' ), 'assertive' );
 		}
 
-		onClose();
+		if ( shouldCloseBottomSheet ) {
+			onClose();
+		}
 	};
 
-	const removeLink = () => {
+	const removeLink = ( shouldCloseBottomSheet = true ) => {
+		clearFormat();
 		onRemove();
-		onClose();
+		if ( shouldCloseBottomSheet ) {
+			onClose();
+		}
 	};
 
 	const submit = ( submitValue ) => {

diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
@@ -22,7 +22,10 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => {
 			>
 				<BottomSheet.NavigationContainer animate main>
 					<BottomSheet.NavigationScreen name={ screens.settings }>
-						<LinkSettingsScreen { ...restProps } />
+						<LinkSettingsScreen
+							isVisible={ isVisible }
+							{ ...restProps }
+						/>
 					</BottomSheet.NavigationScreen>
 					<BottomSheet.NavigationScreen
 						name={ screens.picker }