Use format-library in gutenberg-mobile (#12249)

* Store current selection in RichText state * Make native RichText use format-library This is a work in progress. Sometimes it works, sometimes it doesn't, I haven't figured out the right way to wire the RichText structure into Aztec * Fix bad merge * Don't use applyRecord for now * Missing newlines * Do not change lastContent on formatChange, let the component rerender and update record. Also minor cleanup * Make sure the component rerenders when isSelected changes so FormatToolbar is removed * Make a simple version of Link that displays on mobile * Rerender on selection change to update record * Make it update onFormatChange when url changes * Cleanup changes in Heading and Paragraph * Remove unnecessary components and styles added while testing * Improve link editing UI * Fix adding a new url without a selection * Fix editing the text part of the url * Fill modal URL to current value * Pressing Remove dismisses the popup. Improve styles * Bring back multilineTag prop * Remove unused param in shouldComponentUpdate * Remove withBlockEditContext for now, it will need a better refactor to properly deal with focus from Aztec * Temporary fix for whitespace in HTML, will need to be addressed later * Make sure end is always greater than start for the text selection * Remove unsupported css property * Disable autoCapitalize and autoCorrect for URLInput * Fix lint errors in mobile and in rnmobile/rich-text-formats * Use a template string to generate html for Aztec in RichText * Preprocess the HTML value before sending it to Aztec, removing whitespaces in the process * Use custom button instead of native provided by react-native * Add some padding to our custom button * Send active formats to RCTAztecView so we can type new words in a format * Handle multiple formats with format placeholder * Cleanup applyFormat * Make applyFormat support applying multiple formats at once * Keep formatting when onSelectionChange is emitted without changes * Keep the same order of formats * Prevent inserting anything other that a formatting element from the link modal * Make sure wrapping tags returned by aztec are removed so it's not added to formats * Improve styling of the modal * Make sure we don't pass undefined values in activeFormats * Update formatPlaceholder when user decides to unselect a format in an existing formatted text * Update props.value on format change * Force update native view onFormatChange by not setting this.lastContent * Handle inserting a link * Fix updating format properties * Expand link selection automatically so we can edit a link without selecting it explicitly * Force an aztec text refresh on format change so we make sure the active formats are in sync * Add comment and make the code more consistent for debugging * Make sure we don't use format ref inside the placeholder formats * Make sure we don't use format ref inside the placeholder formats * Do not try to call valueToFormat on format change without selection * Fix editing link url * Add the ability to remove a link without selection * Do not remove trailing whitespace characters * Unescape spaces coming from Aztec * Fix code styling issues * Pick the formats of the first char when in text start * Fix lint errors * RichText value may be undefined * Update lastEventCount on enter and selection changes * Update ModalLinkUI to avoid the keyboard * Lint fixes
WordPress · Mar 6, 2019 · b59227a · b59227a
1 parent 3fc71fc
commit b59227a
Show file tree

Hide file tree

Showing 20 changed files with 910 additions and 184 deletions.
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
@@ -14,7 +14,7 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText, BlockControls } from '@wordpress/editor';
-import { parse, createBlock } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -62,14 +62,7 @@ class HeadingEdit extends Component {
 					style={ {
 						minHeight: Math.max( minHeight, this.state.aztecHeight ),
 					} }
-					onChange={ ( event ) => {
-						// Create a React Tree from the new HTML
-						const newParaBlock = parse( `<!-- wp:heading {"level":${ level }} --><${ tagName }>${ event.content }</${ tagName }><!-- /wp:heading -->` )[ 0 ];
-						setAttributes( {
-							...this.props.attributes,
-							content: newParaBlock.attributes.content,
-						} );
-					} }
+					onChange={ ( value ) => setAttributes( { content: value } ) }
 					onMerge={ mergeBlocks }
 					onSplit={
 						insertBlocksAfter ?

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { parse, createBlock } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
 
 /**
@@ -99,12 +99,9 @@ class ParagraphEdit extends Component {
 						...style,
 						minHeight: Math.max( minHeight, this.state.aztecHeight ),
 					} }
-					onChange={ ( event ) => {
-						// Create a React Tree from the new HTML
-						const newParaBlock = parse( '<!-- wp:paragraph --><p>' + event.content + '</p><!-- /wp:paragraph -->' )[ 0 ];
+					onChange={ ( nextContent ) => {
 						setAttributes( {
-							...this.props.attributes,
-							content: newParaBlock.attributes.content,
+							content: nextContent,
 						} );
 					} }
 					onSplit={ this.splitBlock }

diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js
@@ -1,7 +1,11 @@
 export * from './colors';
 export * from './font-sizes';
 export { default as PlainText } from './plain-text';
-export { default as RichText } from './rich-text';
+export {
+	default as RichText,
+	RichTextShortcut,
+	RichTextToolbarButton,
+} from './rich-text';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockControls } from './block-controls';
@@ -13,3 +17,4 @@ export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as InspectorControls } from './inspector-controls';
 export { default as BottomSheet } from './mobile/bottom-sheet';
 export { default as Picker } from './mobile/picker';
+export { default as URLInput } from './url-input';
diff --git a/packages/editor/src/components/rich-text/format-toolbar/index.native.js b/packages/editor/src/components/rich-text/format-toolbar/index.native.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+
+import { Toolbar, Slot } from '@wordpress/components';
+
+const FormatToolbar = ( { controls } ) => {
+	return (
+		<Toolbar>
+			{ controls.map( ( format ) =>
+				<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
+			) }
+			<Slot name="RichText.ToolbarControls" />
+		</Toolbar>
+	);
+};
+
+export default FormatToolbar;