@wordpress/format-library 5.47.0 → 5.48.1

package/src/link/modal-screens/link-picker-screen.native.js

@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { Keyboard } from 'react-native';
-import { useNavigation, useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useMemo, useRef } from '@wordpress/element';
-
-import { LinkPicker } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import linkSettingsScreens from './screens';
-
-const LinkPickerScreen = () => {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const navigateToLinkTimeoutRef = useRef( null );
-	const navigateBackTimeoutRef = useRef( null );
-
-	const onLinkPicked = ( { url, title } ) => {
-		Keyboard.dismiss();
-		navigateToLinkTimeoutRef.current = setTimeout( () => {
-			navigation.navigate( linkSettingsScreens.settings, {
-				inputValue: url,
-				text: title,
-			} );
-		}, 100 );
-	};
-
-	const onCancel = () => {
-		Keyboard.dismiss();
-		navigateBackTimeoutRef.current = setTimeout( () => {
-			navigation.goBack();
-		}, 100 );
-	};
-
-	useEffect( () => {
-		return () => {
-			clearTimeout( navigateToLinkTimeoutRef.current );
-			clearTimeout( navigateBackTimeoutRef.current );
-		};
-	}, [] );
-
-	const { inputValue } = route.params;
-	return useMemo( () => {
-		return (
-			<LinkPicker
-				value={ inputValue }
-				onLinkPicked={ onLinkPicked }
-				onCancel={ onCancel }
-			/>
-		);
-	}, [ inputValue ] );
-};
-
-export default LinkPickerScreen;

package/src/link/modal-screens/link-settings-screen.native.js

@@ -1,229 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState, useContext, useEffect, useMemo } from '@wordpress/element';
-import { prependHTTP } from '@wordpress/url';
-import { BottomSheet, BottomSheetContext } from '@wordpress/components';
-import {
-	create,
-	insert,
-	isCollapsed,
-	applyFormat,
-	getTextContent,
-	slice,
-} from '@wordpress/rich-text';
-import { external, textColor } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { createLinkFormat, isValidHref } from '../utils';
-import linkSettingsScreens from './screens';
-
-import styles from '../modal.scss';
-
-const LinkSettingsScreen = ( {
-	onRemove,
-	onClose,
-	onChange,
-	speak,
-	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,
-		onHandleClosingBottomSheet,
-		listProps,
-	} = useContext( BottomSheetContext );
-
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { inputValue = activeAttributes.url || '' } = route.params || {};
-	const onLinkCellPressed = () => {
-		shouldEnableBottomSheetMaxHeight( false );
-		navigation.navigate( linkSettingsScreens.picker, { inputValue } );
-	};
-	useEffect( () => {
-		onHandleClosingBottomSheet( () => {
-			submit( inputValue, { skipStateUpdates: true } );
-		} );
-	}, [ inputValue, opensInNewWindow, text ] );
-
-	useEffect( () => {
-		const { isActiveLink, isRemovingLink } = linkValues;
-		if ( !! inputValue && ! isActiveLink && isVisible ) {
-			submitLink( { shouldCloseBottomSheet: false } );
-		} else if (
-			( ( inputValue === '' && isActiveLink ) || isRemovingLink ) &&
-			isVisible
-		) {
-			removeLink( { shouldCloseBottomSheet: false } );
-		}
-	}, [
-		inputValue,
-		isVisible,
-		linkValues.isActiveLink,
-		linkValues.isRemovingLink,
-	] );
-
-	const clearFormat = ( { skipStateUpdates = false } = {} ) => {
-		onChange( { ...value, activeFormats: [] } );
-		if ( ! skipStateUpdates ) {
-			setLinkValues( { isActiveLink: false, isRemovingLink: true } );
-		}
-	};
-
-	const submitLink = ( {
-		shouldCloseBottomSheet = true,
-		skipStateUpdates = false,
-	} = {} ) => {
-		const url = prependHTTP( inputValue );
-		const linkText = text || inputValue;
-		const format = createLinkFormat( {
-			url,
-			opensInNewWindow,
-			text: linkText,
-		} );
-		let newAttributes;
-		if ( isCollapsed( value ) && ! isActive ) {
-			// Insert link.
-			const toInsert = applyFormat(
-				create( { text: linkText } ),
-				format,
-				0,
-				linkText.length
-			);
-			newAttributes = insert( value, toInsert );
-		} else if ( text !== getTextContent( slice( value ) ) ) {
-			// Edit text in selected link.
-			const toInsert = applyFormat(
-				create( { text } ),
-				format,
-				0,
-				text.length
-			);
-			newAttributes = insert( value, toInsert, value.start, value.end );
-		} else {
-			// Transform selected text into link.
-			newAttributes = applyFormat( value, format );
-		}
-		// Move selection to end of link.
-		const textLength = newAttributes.text.length;
-		// check for zero width spaces
-		if ( newAttributes.end > textLength ) {
-			newAttributes.start = textLength;
-			newAttributes.end = textLength;
-		} else {
-			newAttributes.start = newAttributes.end;
-		}
-		newAttributes.activeFormats = [];
-		onChange( { ...newAttributes, needsSelectionUpdate: true } );
-		if ( ! skipStateUpdates ) {
-			setLinkValues( { isActiveLink: true, isRemovingLink: false } );
-		}
-
-		if ( ! isValidHref( url ) ) {
-			speak(
-				__(
-					'Warning: the link has been inserted but may have errors. Please test it.'
-				),
-				'assertive'
-			);
-		} else if ( isActive ) {
-			speak( __( 'Link edited.' ), 'assertive' );
-		} else {
-			speak( __( 'Link inserted' ), 'assertive' );
-		}
-
-		if ( shouldCloseBottomSheet ) {
-			onClose();
-		}
-	};
-
-	const removeLink = ( {
-		shouldCloseBottomSheet = true,
-		skipStateUpdates = false,
-	} = {} ) => {
-		clearFormat( { skipStateUpdates } );
-		onRemove();
-		if ( shouldCloseBottomSheet ) {
-			onClose();
-		}
-	};
-
-	const submit = ( submitValue, { skipStateUpdates = false } = {} ) => {
-		if ( submitValue === '' ) {
-			removeLink( { skipStateUpdates } );
-		} else {
-			submitLink( { skipStateUpdates } );
-		}
-	};
-
-	useEffect( () => {
-		const unsubscribe = navigation.addListener( 'focus', () => {
-			const { params = {} } = route;
-			if ( ! text && params.text ) {
-				setText( params.text );
-			}
-		} );
-		return unsubscribe;
-	}, [ navigation, route.params?.text, text ] );
-
-	return useMemo( () => {
-		const shouldShowLinkOptions = !! inputValue;
-
-		return (
-			<>
-				<BottomSheet.LinkCell
-					value={ inputValue }
-					onPress={ onLinkCellPressed }
-				/>
-				<BottomSheet.Cell
-					icon={ textColor }
-					label={ __( 'Link text' ) }
-					value={ text }
-					placeholder={ __( 'Add link text' ) }
-					onChangeValue={ setText }
-					onSubmit={ submit }
-					separatorType={ shouldShowLinkOptions ? undefined : 'none' }
-				/>
-				{ shouldShowLinkOptions && (
-					<>
-						<BottomSheet.SwitchCell
-							icon={ external }
-							label={ __( 'Open in new tab' ) }
-							value={ opensInNewWindow }
-							onValueChange={ setOpensInNewWindows }
-							separatorType="fullWidth"
-						/>
-						<BottomSheet.Cell
-							label={ __( 'Remove link' ) }
-							labelStyle={ styles.clearLinkButton }
-							separatorType="none"
-							onPress={ removeLink }
-						/>
-					</>
-				) }
-			</>
-		);
-	}, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] );
-};
-
-export default LinkSettingsScreen;

package/src/link/modal-screens/screens.native.js

@@ -1,4 +0,0 @@
-export default {
-	settings: 'linkSettings',
-	picker: 'linkPicker',
-};

package/src/link/modal.native.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { BottomSheet, withSpokenMessages } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import screens from './modal-screens/screens';
-import LinkSettingsScreen from './modal-screens/link-settings-screen';
-import LinkPickerScreen from './modal-screens/link-picker-screen';
-
-const ModalLinkUI = ( { isVisible, ...restProps } ) => {
-	return useMemo( () => {
-		return (
-			<BottomSheet
-				isVisible={ isVisible }
-				hideHeader
-				onClose={ restProps.onClose }
-				hasNavigation
-				testID="link-settings-modal"
-			>
-				<BottomSheet.NavigationContainer animate main>
-					<BottomSheet.NavigationScreen name={ screens.settings }>
-						<LinkSettingsScreen
-							isVisible={ isVisible }
-							{ ...restProps }
-						/>
-					</BottomSheet.NavigationScreen>
-					<BottomSheet.NavigationScreen
-						name={ screens.picker }
-						isScrollable
-						fullScreen
-					>
-						<LinkPickerScreen />
-					</BottomSheet.NavigationScreen>
-				</BottomSheet.NavigationContainer>
-			</BottomSheet>
-		);
-	}, [ isVisible ] );
-};
-
-export default withSpokenMessages( ModalLinkUI );

package/src/link/modal.native.scss

@@ -1,16 +0,0 @@
-.clearLinkButton {
-	color: $alert-red;
-}
-
-.container {
-	padding-bottom: 0;
-	padding-left: $block-edge-to-content;
-	padding-right: $block-edge-to-content;
-	padding-top: $block-edge-to-content*0.5;
-}
-
-.content {
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-	padding-bottom: 0;
-}