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 index 1caac7287e3a5..91590d3862b22 100644 --- 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 index e3a52bb5a29ba..67de419715954 100644 --- 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 } ) => { > - +