Native Mobile: RichText: fix circular dependency (#56061)

packages/block-editor/src/components/rich-text/index.native.js

@@ -17,7 +17,6 @@ import {
 } from '@wordpress/blocks';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import {
-	__experimentalRichText as RichText,
 	__unstableCreateElement,
 	isEmpty,
 	insert,
@@ -46,6 +45,7 @@ import {
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
+import RichText from './native';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -688,6 +688,8 @@ ForwardedRichTextContainer.Content.defaultProps = {
 	value: '',
 };
 
+ForwardedRichTextContainer.Raw = RichText;
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */

packages/rich-text/src/component/format-edit.js → packages/block-editor/src/components/rich-text/native/format-edit.js

@@ -1,8 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { getActiveFormat } from '../get-active-format';
-import { getActiveObject } from '../get-active-object';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 export default function FormatEdit( {
 	formatTypes,

packages/rich-text/src/get-format-colors.native.js → packages/block-editor/src/components/rich-text/native/get-format-colors.native.js

@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { getColorObjectByAttributeValues } from '@wordpress/block-editor';
+import { getColorObjectByAttributeValues } from '../../../components/colors';
 
 const FORMAT_TYPE = 'core/text-color';
 const REGEX_TO_MATCH = /^has-(.*)-color$/;

packages/block-editor/src/components/rich-text/native/index.js

@@ -0,0 +1 @@
+export default () => {};

packages/rich-text/src/component/index.native.js → packages/block-editor/src/components/rich-text/native/index.native.js

@@ -29,23 +29,25 @@ import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import { isURL } from '@wordpress/url';
 import { atSymbol, plus } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import {
+	applyFormat,
+	getActiveFormat,
+	getActiveFormats,
+	insert,
+	getTextContent,
+	isEmpty,
+	create,
+	toHTMLString,
+	isCollapsed,
+	remove,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import { useFormatTypes } from './use-format-types';
 import FormatEdit from './format-edit';
-import { applyFormat } from '../apply-format';
-import { getActiveFormat } from '../get-active-format';
-import { getActiveFormats } from '../get-active-formats';
-import { insert } from '../insert';
-import { getTextContent } from '../get-text-content';
-import { isEmpty } from '../is-empty';
-import { create } from '../create';
-import { toHTMLString } from '../to-html-string';
-import { isCollapsed } from '../is-collapsed';
-import { remove } from '../remove';
-import { getFormatColors } from '../get-format-colors';
+import { getFormatColors } from './get-format-colors';
 import styles from './style.scss';
 import ToolbarButtonWithOptions from './toolbar-button-with-options';
 

packages/rich-text/src/test/index.native.js → packages/block-editor/src/components/rich-text/native/test/index.native.js

@@ -8,7 +8,7 @@ import { getEditorHtml, render, initializeEditor } from 'test/helpers';
  * WordPress dependencies
  */
 import { select } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as richTextStore } from '@wordpress/rich-text';
 import { coreBlocks } from '@wordpress/block-library';
 import {
 	getBlockTypes,
@@ -19,8 +19,8 @@ import {
 /**
  * Internal dependencies
  */
-import { store as richTextStore } from '../store';
-import RichText from '../component/index.native';
+import { store as blockEditorStore } from '../../../../store';
+import RichText from '../index.native';
 
 /**
  * Mock `useSelect` with various global application settings, e.g., styles.

packages/rich-text/src/test/performance/rich-text.native.js → packages/block-editor/src/components/rich-text/native/test/performance/rich-text.native.js

@@ -11,7 +11,7 @@ import {
 /**
  * Internal dependencies
  */
-import RichText from '../../component/index.native';
+import RichText from '../../index.native';
 
 describe( 'RichText Performance', () => {
 	const onCreateUndoLevel = jest.fn();

packages/rich-text/src/component/use-format-types.js → packages/block-editor/src/components/rich-text/native/use-format-types.js

@@ -3,10 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { store as richTextStore } from '../store';
+import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
 	return select( richTextStore ).getFormatTypes();

packages/editor/src/components/post-title/index.native.js

@@ -7,18 +7,14 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import {
-	__experimentalRichText as RichText,
-	create,
-	insert,
-} from '@wordpress/rich-text';
+import { create, insert } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -152,7 +148,7 @@ class PostTitle extends Component {
 				accessibilityLabel={ this.getTitle( title, postType ) }
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
-				<RichText
+				<RichText.Raw
 					setRef={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
 					tagName={ 'p' }
@@ -177,7 +173,7 @@ class PostTitle extends Component {
 					disableEditingMenu={ true }
 					__unstableIsSelected={ this.props.isSelected }
 					__unstableOnCreateUndoLevel={ () => {} }
-				></RichText>
+				/>
 			</View>
 		);
 	}

packages/rich-text/src/index.ts

@@ -30,7 +30,6 @@ export {
 	default as __experimentalRichText,
 	useRichText as __unstableUseRichText,
 } from './component';
-export { default as __unstableFormatEdit } from './component/format-edit';
 
 /**
  * An object which represents a formatted string. See main `@wordpress/rich-text`