@wordpress/format-library 5.48.0 → 5.49.1-next.v.202606191442.0

package/src/text-color/inline.js

@@ -16,19 +16,14 @@ import {
 	getColorObjectByAttributeValues,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	Popover,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
+import { Tabs } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { textColor as settings, transparentValue } from './index';
-import { unlock } from '../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
 
 const TABS = [
 	{ name: 'color', title: __( 'Text' ) },
@@ -168,18 +163,18 @@ export default function InlineColorUI( {
 			className="format-library__inline-color-popover"
 			anchor={ popoverAnchor }
 		>
-			<Tabs>
-				<Tabs.TabList>
+			<Tabs.Root defaultValue={ TABS[ 0 ].name }>
+				<Tabs.List>
 					{ TABS.map( ( tab ) => (
-						<Tabs.Tab tabId={ tab.name } key={ tab.name }>
+						<Tabs.Tab value={ tab.name } key={ tab.name }>
 							{ tab.title }
 						</Tabs.Tab>
 					) ) }
-				</Tabs.TabList>
+				</Tabs.List>
 				{ TABS.map( ( tab ) => (
-					<Tabs.TabPanel
-						tabId={ tab.name }
-						focusable={ false }
+					<Tabs.Panel
+						value={ tab.name }
+						tabIndex={ -1 }
 						key={ tab.name }
 					>
 						<ColorPicker
@@ -188,9 +183,9 @@ export default function InlineColorUI( {
 							value={ value }
 							onChange={ onChange }
 						/>
-					</Tabs.TabPanel>
+					</Tabs.Panel>
 				) ) }
-			</Tabs>
+			</Tabs.Root>
 		</Popover>
 	);
 }

package/src/default-formats.native.js

@@ -1,10 +0,0 @@
-/**
- * Internal dependencies
- */
-import { bold } from './bold';
-import { italic } from './italic';
-import { link } from './link';
-import { strikethrough } from './strikethrough';
-import { textColor } from './text-color';
-
-export default [ bold, italic, link, strikethrough, textColor ];

package/src/link/index.native.js

@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-import Clipboard from '@react-native-clipboard/clipboard';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withSpokenMessages } from '@wordpress/components';
-import { RichTextToolbarButton } from '@wordpress/block-editor';
-import {
-	applyFormat,
-	getActiveFormat,
-	getTextContent,
-	isCollapsed,
-	removeFormat,
-	slice,
-} from '@wordpress/rich-text';
-import { isURL } from '@wordpress/url';
-import { link as linkIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import ModalLinkUI from './modal';
-import { isValidHref } from './utils';
-
-const name = 'core/link';
-
-export const link = {
-	name,
-	title: __( 'Link' ),
-	tagName: 'a',
-	className: null,
-	attributes: {
-		url: 'href',
-		target: 'target',
-		rel: 'rel',
-	},
-	edit: withSpokenMessages(
-		class LinkEdit extends Component {
-			constructor() {
-				super( ...arguments );
-
-				this.addLink = this.addLink.bind( this );
-				this.stopAddingLink = this.stopAddingLink.bind( this );
-				this.onRemoveFormat = this.onRemoveFormat.bind( this );
-				this.getURLFromClipboard =
-					this.getURLFromClipboard.bind( this );
-				this.state = {
-					addingLink: false,
-				};
-			}
-
-			addLink() {
-				const { value, onChange } = this.props;
-				const text = getTextContent( slice( value ) );
-
-				if ( text && isURL( text ) && isValidHref( text ) ) {
-					const newValue = applyFormat( value, {
-						type: name,
-						attributes: { url: text },
-					} );
-					newValue.start = newValue.end;
-					newValue.activeFormats = [];
-					onChange( { ...newValue, needsSelectionUpdate: true } );
-				} else {
-					this.setState( { addingLink: true } );
-					this.getURLFromClipboard();
-				}
-			}
-
-			stopAddingLink() {
-				this.setState( { addingLink: false, clipboardURL: undefined } );
-			}
-
-			getLinkSelection() {
-				const { value, isActive } = this.props;
-				const startFormat = getActiveFormat( value, 'core/link' );
-
-				// If the link isn't selected, get the link manually by looking around the cursor
-				// TODO: handle partly selected links.
-				if ( startFormat && isCollapsed( value ) && isActive ) {
-					let startIndex = value.start;
-					let endIndex = value.end;
-
-					while (
-						value.formats[ startIndex ]?.find(
-							( format ) => format?.type === startFormat.type
-						)
-					) {
-						startIndex--;
-					}
-
-					endIndex++;
-
-					while (
-						value.formats[ endIndex ]?.find(
-							( format ) => format?.type === startFormat.type
-						)
-					) {
-						endIndex++;
-					}
-
-					return {
-						...value,
-						start: startIndex + 1,
-						end: endIndex,
-					};
-				}
-
-				return value;
-			}
-
-			onRemoveFormat() {
-				const { onChange, speak, value } = this.props;
-				const startFormat = getActiveFormat( value, 'core/link' );
-
-				// Before we try to remove anything we check if there is something at the caret position to remove.
-				if ( isCollapsed( value ) && startFormat === undefined ) {
-					return;
-				}
-
-				const linkSelection = this.getLinkSelection();
-
-				onChange( removeFormat( linkSelection, name ) );
-				speak( __( 'Link removed.' ), 'assertive' );
-			}
-
-			async getURLFromClipboard() {
-				const clipboardText = await Clipboard.getString();
-				if ( ! clipboardText ) {
-					return;
-				}
-				// Check if pasted text is URL.
-				if ( ! isURL( clipboardText ) ) {
-					return;
-				}
-				this.setState( { clipboardURL: clipboardText } );
-			}
-
-			render() {
-				const { isActive, activeAttributes, onChange } = this.props;
-				const linkSelection = this.getLinkSelection();
-				// If no URL is set and we have a clipboard URL let's use it.
-				if ( ! activeAttributes.url && this.state.clipboardURL ) {
-					activeAttributes.url = this.state.clipboardURL;
-				}
-				return (
-					<>
-						<ModalLinkUI
-							isVisible={ this.state.addingLink }
-							isActive={ isActive }
-							activeAttributes={ activeAttributes }
-							onClose={ this.stopAddingLink }
-							onChange={ onChange }
-							onRemove={ this.onRemoveFormat }
-							value={ linkSelection }
-						/>
-						<RichTextToolbarButton
-							name="link"
-							icon={ linkIcon }
-							title={ __( 'Link' ) }
-							onClick={ this.addLink }
-							isActive={ isActive }
-							shortcutType="primary"
-							shortcutCharacter="k"
-						/>
-					</>
-				);
-			}
-		}
-	),
-};

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;
-}