@wordpress/editor 14.47.0 → 14.48.1

package/src/components/error-boundary/index.native.js

@@ -1,192 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import { logException } from '@wordpress/react-native-bridge';
-import {
-	usePreferredColorSchemeStyle,
-	withPreferredColorScheme,
-} from '@wordpress/compose';
-import { cautionFilled } from '@wordpress/icons';
-import { Icon as WCIcon } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-import styles from './style.scss';
-
-function getContent() {
-	try {
-		// While `select` in a component is generally discouraged, it is
-		// used here because it (a) reduces the chance of data loss in the
-		// case of additional errors by performing a direct retrieval and
-		// (b) avoids the performance cost associated with unnecessary
-		// content serialization throughout the lifetime of a non-erroring
-		// application.
-		return select( editorStore ).getEditedPostContent();
-	} catch {}
-}
-
-function CopyButton( {
-	text,
-	label,
-	accessibilityLabel,
-	accessibilityHint,
-	secondary = false,
-} ) {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles[ 'copy-button__container' ],
-		styles[ 'copy-button__container--dark' ]
-	);
-
-	const containerSecondaryStyle = usePreferredColorSchemeStyle(
-		styles[ 'copy-button__container--secondary' ],
-		styles[ 'copy-button__container--secondary-dark' ]
-	);
-
-	const textStyle = usePreferredColorSchemeStyle(
-		styles[ 'copy-button__text' ],
-		styles[ 'copy-button__text--dark' ]
-	);
-
-	const textSecondaryStyle = usePreferredColorSchemeStyle(
-		styles[ 'copy-button__text--secondary' ],
-		styles[ 'copy-button__text--secondary-dark' ]
-	);
-
-	return (
-		<TouchableOpacity
-			activeOpacity={ 0.5 }
-			accessibilityLabel={ accessibilityLabel }
-			style={ [ containerStyle, secondary && containerSecondaryStyle ] }
-			accessibilityRole="button"
-			accessibilityHint={ accessibilityHint }
-			onPress={ () => {
-				Clipboard.setString(
-					typeof text === 'function' ? text() : text || ''
-				);
-			} }
-		>
-			<Text style={ [ textStyle, secondary && textSecondaryStyle ] }>
-				{ label }
-			</Text>
-		</TouchableOpacity>
-	);
-}
-
-class ErrorBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	componentDidCatch( error ) {
-		logException( error, {
-			context: {
-				component_stack: error.componentStack,
-			},
-			isHandled: true,
-			handledBy: 'Editor-level Error Boundary',
-		} );
-	}
-
-	static getDerivedStateFromError( error ) {
-		return { error };
-	}
-
-	render() {
-		const { error } = this.state;
-		if ( ! error ) {
-			return this.props.children;
-		}
-
-		const { getStylesFromColorScheme } = this.props;
-
-		const iconContainerStyle = getStylesFromColorScheme(
-			styles[ 'error-boundary__icon-container' ],
-			styles[ 'error-boundary__icon-container--dark' ]
-		);
-
-		const titleStyle = getStylesFromColorScheme(
-			styles[ 'error-boundary__title' ],
-			styles[ 'error-boundary__title--dark' ]
-		);
-
-		const messageStyle = getStylesFromColorScheme(
-			styles[ 'error-boundary__message' ],
-			styles[ 'error-boundary__message--dark' ]
-		);
-
-		return (
-			<SafeAreaView>
-				<ScrollView
-					style={ styles[ 'error-boundary__scroll' ] }
-					contentContainerStyle={
-						styles[ 'error-boundary__scroll-container' ]
-					}
-				>
-					<View style={ styles[ 'error-boundary__container' ] }>
-						<View style={ iconContainerStyle }>
-							<WCIcon
-								icon={ cautionFilled }
-								{ ...styles[ 'error-boundary__icon' ] }
-							/>
-						</View>
-						<Text style={ titleStyle }>
-							{ __(
-								'The editor has encountered an unexpected error'
-							) }
-						</Text>
-						<Text style={ messageStyle }>
-							{ __(
-								'You can copy your post text in case your content is impacted. Copy error details to debug and share with support.'
-							) }
-						</Text>
-						<View
-							style={
-								styles[ 'error-boundary__actions-container' ]
-							}
-						>
-							<CopyButton
-								label={ __( 'Copy post text' ) }
-								accessibilityLabel={ __(
-									'Button to copy post text'
-								) }
-								accessibilityHint={ __(
-									'Tap here to copy post text'
-								) }
-								text={ getContent }
-							/>
-							<CopyButton
-								label={ __( 'Copy error details' ) }
-								accessibilityLabel={ __(
-									'Button to copy error details'
-								) }
-								accessibilityHint={ __(
-									'Tap here to copy error details'
-								) }
-								text={ error.stack }
-								secondary
-							/>
-						</View>
-					</View>
-				</ScrollView>
-			</SafeAreaView>
-		);
-	}
-}
-
-export default withPreferredColorScheme( ErrorBoundary );

package/src/components/error-boundary/style.native.scss

@@ -1,116 +0,0 @@
-.error-boundary__scroll {
-	height: 100%;
-	width: 100%;
-}
-
-.error-boundary__scroll-container {
-	flex-grow: 1;
-	max-height: 580px;
-	align-items: center;
-	justify-content: center;
-}
-
-
-.error-boundary__container {
-	width: 100%;
-	max-width: 600px;
-	justify-content: center;
-	align-items: center;
-	padding: 0 24px;
-}
-
-.error-boundary__icon-container {
-	$size: 40px;
-
-	width: $size;
-	height: $size;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 8px;
-	background-color: rgba(60, 60, 67, 0.3);
-	border-radius: 20px;
-}
-
-.error-boundary__icon-container--dark {
-	background-color: rgba(235, 235, 245, 0.3);
-}
-
-.error-boundary__icon {
-	width: 24px;
-	height: 24px;
-	fill: $white;
-}
-
-.error-boundary__title {
-	font-size: 20px;
-	font-weight: 600;
-	line-height: 25px;
-	color: $black;
-	text-align: center;
-	margin-bottom: 8px;
-}
-
-.error-boundary__title--dark {
-	color: $white;
-}
-
-.error-boundary__message {
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 21px;
-	color: rgba(60, 60, 67, 0.6);
-	text-align: center;
-	margin-bottom: 16px;
-}
-
-.error-boundary__message--dark {
-	color: rgba(235, 235, 245, 0.6);
-}
-
-.error-boundary__actions-container {
-	width: 100%;
-	max-width: 400px;
-	justify-content: center;
-	gap: 12px;
-	padding-top: 16px;
-}
-
-.copy-button__container {
-	border-radius: 5px;
-	padding: $grid-unit $grid-unit-20;
-	background-color: $light-primary;
-}
-
-.copy-button__container--dark {
-	background-color: $white;
-}
-
-.copy-button__container--secondary {
-	border: $border-width #c6c6c8;
-	background-color: $white;
-}
-
-.copy-button__container--secondary-dark {
-	border-color: rgba(255, 255, 255, 0.3);
-	background-color: $black;
-}
-
-.copy-button__text {
-	font-size: 17px;
-	font-weight: 400;
-	line-height: 22px;
-	text-align: center;
-	color: $white;
-}
-
-.copy-button__text--dark {
-	color: $background-dark-secondary;
-}
-
-.copy-button__text--secondary {
-	color: $black;
-}
-
-.copy-button__text--secondary-dark {
-	color: $white;
-}

package/src/components/index.native.js

@@ -1,15 +0,0 @@
-// Post Related Components.
-export { default as AutosaveMonitor } from './autosave-monitor';
-export { default as PostTitle } from './post-title';
-export { default as EditorHistoryRedo } from './editor-history/redo';
-export { default as EditorHistoryUndo } from './editor-history/undo';
-
-// State Related Components.
-export { default as EditorProvider } from './provider';
-
-// Other Components.
-export { default as EditorHelpTopics } from './editor-help';
-export { default as OfflineStatus } from './offline-status';
-export { default as ErrorBoundary } from './error-boundary';
-
-export * from './deprecated';

package/src/components/offline-status/index.native.js

@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { AccessibilityInfo, Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	usePreferredColorSchemeStyle,
-	useNetworkConnectivity,
-	usePrevious,
-} from '@wordpress/compose';
-import { Icon as WCIcon } from '@wordpress/components';
-import { offline as offlineIcon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.native.scss';
-
-/**
- * Conditionally announces messages for screen reader users. This Hook provides
- * two benefits over React Native's `accessibilityLiveRegion`:
- *
- * 1. It works on both iOS and Android.
- * 2. It allows announcing a secondary message when the component is inactive.
- *
- * @param {string}  message                   The message to announce.
- * @param {Object}  options                   Options for the Hook.
- * @param {boolean} [options.isActive]        Whether the message should be announced.
- * @param {string}  [options.inactiveMessage] The message to announce when inactive.
- */
-function useAccessibilityLiveRegion( message, { isActive, inactiveMessage } ) {
-	const { announceForAccessibility } = AccessibilityInfo;
-	const prevIsActive = usePrevious( isActive );
-
-	useEffect( () => {
-		const unconditionalMessage = typeof isActive === 'undefined';
-		const initialRender = typeof prevIsActive === 'undefined';
-
-		if (
-			unconditionalMessage ||
-			( isActive && ! prevIsActive && ! initialRender )
-		) {
-			announceForAccessibility( message );
-		} else if ( ! isActive && prevIsActive && inactiveMessage ) {
-			announceForAccessibility( inactiveMessage );
-		}
-	}, [
-		message,
-		isActive,
-		prevIsActive,
-		inactiveMessage,
-		announceForAccessibility,
-	] );
-}
-
-const OfflineStatus = () => {
-	const { isConnected } = useNetworkConnectivity();
-
-	useAccessibilityLiveRegion( __( 'Network connection re-established' ), {
-		isActive: isConnected,
-		inactiveMessage: __( 'Network connection lost, working offline' ),
-	} );
-
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.offline,
-		styles.offline__dark
-	);
-
-	const textStyle = usePreferredColorSchemeStyle(
-		styles[ 'offline--text' ],
-		styles[ 'offline--text__dark' ]
-	);
-
-	const iconStyle = usePreferredColorSchemeStyle(
-		styles[ 'offline--icon' ],
-		styles[ 'offline--icon__dark' ]
-	);
-
-	return ! isConnected ? (
-		<View
-			accessible
-			accessibilityRole="alert"
-			accessibilityLabel={ __(
-				'Network connection lost, working offline'
-			) }
-			style={ containerStyle }
-		>
-			<WCIcon fill={ iconStyle.fill } icon={ offlineIcon } />
-			<Text style={ textStyle }>{ __( 'Working Offline' ) } </Text>
-		</View>
-	) : null;
-};
-
-export default OfflineStatus;

package/src/components/offline-status/style.native.scss

@@ -1,28 +0,0 @@
-.offline {
-	background-color: $gray-lighten-30;
-	padding: $grid-unit;
-	justify-content: center;
-	align-items: center;
-	flex-direction: row;
-}
-
-.offline__dark {
-	background-color: $gray-70;
-}
-
-.offline--text {
-	color: $black;
-	padding-left: 3;
-}
-
-.offline--text__dark {
-	color: $white;
-}
-
-.offline--icon {
-	fill: $gray-70;
-}
-
-.offline--icon__dark {
-	fill: $gray-10;
-}

package/src/components/offline-status/test/index.native.js

@@ -1,108 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, screen } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestConnectionStatus,
-	subscribeConnectionStatus,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import OfflineStatus from '../index';
-import { AccessibilityInfo } from 'react-native';
-
-jest.mock( '../style.native.scss', () => ( {
-	'offline--icon': {
-		fill: '',
-	},
-} ) );
-
-describe( 'when network connectivity is unavailable', () => {
-	beforeAll( () => {
-		requestConnectionStatus.mockImplementation( ( callback ) => {
-			callback( false );
-			return { remove: jest.fn() };
-		} );
-	} );
-
-	it( 'should display a helpful message', () => {
-		render( <OfflineStatus /> );
-
-		expect( screen.getByText( 'Working Offline' ) ).toBeVisible();
-	} );
-
-	it( 'should display an accessible message', () => {
-		render( <OfflineStatus /> );
-
-		expect(
-			screen.getByLabelText( 'Network connection lost, working offline' )
-		).toBeVisible();
-	} );
-
-	it( 'should announce network status', () => {
-		render( <OfflineStatus /> );
-
-		expect(
-			AccessibilityInfo.announceForAccessibility
-		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
-	} );
-
-	it( 'should announce changes to network status', () => {
-		let subscriptionCallback;
-		subscribeConnectionStatus.mockImplementation( ( callback ) => {
-			subscriptionCallback = callback;
-			return { remove: jest.fn() };
-		} );
-		render( <OfflineStatus /> );
-
-		act( () => subscriptionCallback( { isConnected: false } ) );
-
-		expect(
-			AccessibilityInfo.announceForAccessibility
-		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
-	} );
-} );
-
-describe( 'when network connectivity is available', () => {
-	beforeAll( () => {
-		requestConnectionStatus.mockImplementation( ( callback ) => {
-			callback( true );
-			return { remove: jest.fn() };
-		} );
-	} );
-
-	it( 'should not display a helpful message', () => {
-		render( <OfflineStatus /> );
-
-		expect( screen.queryByText( 'Working Offline' ) ).toBeNull();
-	} );
-
-	it( 'should not announce network status', () => {
-		render( <OfflineStatus /> );
-
-		expect(
-			AccessibilityInfo.announceForAccessibility
-		).not.toHaveBeenCalled();
-	} );
-
-	it( 'should announce changes to network status', () => {
-		let subscriptionCallback;
-		subscribeConnectionStatus.mockImplementation( ( callback ) => {
-			subscriptionCallback = callback;
-			return { remove: jest.fn() };
-		} );
-		render( <OfflineStatus /> );
-
-		act( () => subscriptionCallback( { isConnected: false } ) );
-
-		expect(
-			AccessibilityInfo.announceForAccessibility
-		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
-	} );
-} );