[RNMobile] Native mobile release v1.14.0 (#17676)

* Rnmobile/fix link editing on start (#17631)

* Don't try to clear links if text is clean.

* Commented LinkUI removal test when no URL.

* Don't try to remove link if we are at start of link and no actual selection is

* Mobile master to master (#17652)

* [RNMobile] Native mobile release v1.11.0 (#17181)

* [RNMobile] Fix crash when adding separator

* Build: remove global install of latest npm since we want to use the paired node/npm version (#17134)

* Build: remove global install of latest npm since we want to use the paired node/npm version
* Also update travis to remove --latest-npm flag

* [RNMobile] Try dark mode (iOS) (#17067)

* Adding dark mode component implemented on list and list block

* Adding DarkMode handling to RichText, ToolBar and SafeArea

* Mobile: Using DarkMode as HOC

* iOS DarkMode: Modified colors on block list and block container

* iOS DarkMode: Improved Header Toolbar colors

* iOS DarkMode: Removing background from buttons

* iOS DarkMode warning and unsupported

* iOS DarkMode: MediaPlaceholder

* iOS DarkMode: BottomSheets

* iOS DarkMode: Inserter

* iOS DarkMode: DefaultBlockAppender

* iOS DarkMode: PostTite

* Update hardcoded colors with variables

* iOS DarkMode: Fix bottom-sheet cell value color

* iOS DarkMode: More - PageBreak - Add Block Here

* iOS DarkMode: Better text color

* iOS Darkmode: Code block

* iOS DarkMode: HTML View

* iOS DarkMode: Improve colors on SafeArea

* Fix toolbar not avoiding keyboard regression

* Fix native unit tests

* Fix gutenberg-mobile unit tests

* Adding RNDarkMode mocks

* RNMobile: Fix crash when viewing HTML on iOS

* [RNMobile] Remove toolbar from html view

* [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186)

* Fix MaxListenersExceededWarning caused by dark-mode event emitter

* Checking for setMaxListeners trying to avoid CI error

* Adding remove listener to DarkMode HOC

* DarkMode: Binding this.onModeChanged to `this`

* DarkMode: Adding conditional needed to pass UI Tests on CI

* Fix focus title on new posts regression (#17180)

* BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193)

* Activate Travis CI on rnmobile/master branch (#17229)

* Add native support for the MediaText block (#16305)

* First working version of the MediaText component for native mobile

* Fix adding a block to an innerblock list

* Disable mediaText on production

* MediaText native: improve editor visuals

* Move BlockToolbar from BlockList to Layout

* Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender

* Update BlockMover for native to hide if locked or if it's the only block

* Make the vertical align button work, add more styling options for toolbar buttons

* Make sure registerCoreBlocks does not break in production

* Copy docblock comment from the web version for registerCoreBlocks

* Fix focusing on the media placeholder

* Only support adding image for now

* Update usage of MediaPlaceholder in MediaContainer

* Enable autoScroll for just the out most block list

* Fix JS Unit tests

* Roll back to IconButton refactor and fix tests

* Fix BlockVerticalAlignmentToolbar buttons style on mobile

* Fix thing for web and ensure ariaPressed is always passed down

* Use AriaPressed directly to style SVG on mobile

* Update snapshots

* MediaUpload and MediaPlaceholder unify props (#17145)

* Unify media placeholder and upload props within media-text (#17268)

* [RNMobile] Fix dismiss keyboard button for the post title (#17260)

* Recover border colors (#17269)

* [RNMobile] Insure tapping at end of post inserts at end

Previously, tapping at the end of the post would insert a block
immediately after the currently selected block. In addition, this commit
is cleaning out a few unusued props in the block-list file.

* Support group block on mobile (#17251)

* First working version of the MediaText component for native mobile

* Fix adding a block to an innerblock list

* Disable mediaText on production

* MediaText native: improve editor visuals

* Move BlockToolbar from BlockList to Layout

* Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender

* Update BlockMover for native to hide if locked or if it's the only block

* Make the vertical align button work, add more styling options for toolbar buttons

* Make sure registerCoreBlocks does not break in production

* Copy docblock comment from the web version for registerCoreBlocks

* Fix focusing on the media placeholder

* Only support adding image for now

* Update usage of MediaPlaceholder in MediaContainer

* Enable autoScroll for just the out most block list

* Fix JS Unit tests

* Roll back to IconButton refactor and fix tests

* Fix BlockVerticalAlignmentToolbar buttons style on mobile

* Fix thing for web and ensure ariaPressed is always passed down

* Use AriaPressed directly to style SVG on mobile

* Update snapshots

* Support group block on mobile

* Extend shouldShowInsertionPoint condition to be false when group is selected

* Code refactor

* Update package-lock

* Remove redundant bg color within button appender (#17325)

* [RNMobile] DarkMode improvements (#17309)

* Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used

* Implement dark-mode refactor on all components

* Fix broken native tests

* Fix default block appender background color on DarkMode

* DarkMode: Make `useStyle` a class function

* [RNMobile] Add autosave to mobile apps (#17329)

* [RNMobile] Fix crash when adding separator

* Build: remove global install of latest npm since we want to use the paired node/npm version (#17134)

* Build: remove global install of latest npm since we want to use the paired node/npm version
* Also update travis to remove --latest-npm flag

* [RNMobile] Try dark mode (iOS) (#17067)

* Adding dark mode component implemented on list and list block

* Adding DarkMode handling to RichText, ToolBar and SafeArea

* Mobile: Using DarkMode as HOC

* iOS DarkMode: Modified colors on block list and block container

* iOS DarkMode: Improved Header Toolbar colors

* iOS DarkMode: Removing background from buttons

* iOS DarkMode warning and unsupported

* iOS DarkMode: MediaPlaceholder

* iOS DarkMode: BottomSheets

* iOS DarkMode: Inserter

* iOS DarkMode: DefaultBlockAppender

* iOS DarkMode: PostTite

* Update hardcoded colors with variables

* iOS DarkMode: Fix bottom-sheet cell value color

* iOS DarkMode: More - PageBreak - Add Block Here

* iOS DarkMode: Better text color

* iOS Darkmode: Code block

* iOS DarkMode: HTML View

* iOS DarkMode: Improve colors on SafeArea

* Fix toolbar not avoiding keyboard regression

* Fix native unit tests

* Fix gutenberg-mobile unit tests

* Adding RNDarkMode mocks

* RNMobile: Fix crash when viewing HTML on iOS

* [RNMobile] Remove toolbar from html view

* [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186)

* Fix MaxListenersExceededWarning caused by dark-mode event emitter

* Checking for setMaxListeners trying to avoid CI error

* Adding remove listener to DarkMode HOC

* DarkMode: Binding this.onModeChanged to `this`

* DarkMode: Adding conditional needed to pass UI Tests on CI

* Fix focus title on new posts regression (#17180)

* BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193)

* Add a preliminary version of the AutosaveMonitor for mobile that calls the "bridge" and asks the native side to save the content

* Add autosave mock function for tests

* Fix merge conflicts

* Fix lint

* Re-add autosave on mobile that was removed erroneously during import-merge from rnmobile/master

* Remove native variant of AutosaveMonitor and introduces changes at  editor store level

* Default to false for `isEditedPostAutosaveable` on mobile. There was a typo in the returing value on the previous commit.

* Make sure to consider edits to the Title when checking if auto-save is needed

* Fix lint

*  Add isAppender functionality on mobile (#17195)

* Add isAppender functionality on mobile

* refactor isAppender conditions

* Replace dropZoneUIOnly in favour of showMediaSelectionUI

* deprecate dropZoneUIOnly and add disableMediaSelection prop

* Update test

* Refactor tests and change prop name

* Remove redundant empty lines

* Refactor conditions inside MediaPlaceholder

* Update block-editor CHANGELOG

* Update packages/block-editor/CHANGELOG.md

Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl>

* Autosave monitor - Make the mobile editor ping the native at each keystroke, since the deboucing logic is already well defined in the apps. (#17548)

* [RNMobile] Refactor Dark Mode HOC (#17552)

* [RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns

* Fix lint errors

* Add .native.js suffix to usePreferredColorScheme

* Update usage of theme props renamed to preferredColorScheme

* Update usage of theme props renamed to preferredColorScheme

* Add missing heading levels to the UI (H4, H5, H6) (#17533)

* Fix lint issue (#17598)

* Fix list filter on paste for RN mobile. (#17550)

* Fix method for RN mobile.

* Use array.From instead of slice.

* Remove comment and use Array.from directly

* Convert from NodeList spreadable to Array.from

* Fix lint errors.

* Fix documentation examples to use Array.from

* Add empty line.

* [RNMobile] Move MediaUploadPorgress to its own component folder (#17392)

* Move MediaUploadPorgress to its own component folder (native)

* MediaUploadProgress - Fix import to code standards

* MediaUploadProgress readme

* Mobile - MediaUploadProgress README update

* Rnmobile/fix link editing on start (#17631)

* Don't try to clear links if text is clean.

* Commented LinkUI removal test when no URL.

* Don't try to remove link if we are at start of link and no actual selection is

* Simplify the code to check for active link

* Update index.native.js

# Conflicts:
#	packages/format-library/src/link/index.native.js

* Make sure that HTML that is sent is correctly updated. (#17710)

* Make sure that HTML that is sent is correctly updated.

* Fix issue in Android.

* Fix lint issues.

* Pass active state to HeadingLevelIcon in order to native start working (#17747)

* Fix typo this.iOS -> this.isIOS (#17763)

* Fix lint errors (#17808)

* Update packages/components/src/primitives/svg/index.native.js

Co-Authored-By: etoledom <etoledom@icloud.com>

packages/block-library/src/heading/heading-level-icon.js

@@ -3,7 +3,7 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default function HeadingLevelIcon( { level } ) {
+export default function HeadingLevelIcon( { level, __unstableActive } ) {
 	const levelToPath = {
 		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
 		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@@ -17,7 +17,7 @@ export default function HeadingLevelIcon( { level } ) {
 	}
 
 	return (
-		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" __unstableActive={ __unstableActive } >
 			<Path d={ levelToPath[ level ] } />
 		</SVG>
 	);

packages/block-library/src/heading/heading-toolbar.js

@@ -17,11 +17,12 @@ import HeadingLevelIcon from './heading-level-icon';
 
 class HeadingToolbar extends Component {
 	createLevelControl( targetLevel, selectedLevel, onChange ) {
+		const isActive = targetLevel === selectedLevel;
 		return {
-			icon: <HeadingLevelIcon level={ targetLevel } />,
+			icon: <HeadingLevelIcon level={ targetLevel } __unstableActive={ isActive } />,
 			// translators: %s: heading level e.g: "1", "2", "3"
 			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive: targetLevel === selectedLevel,
+			isActive,
 			onClick: () => onChange( targetLevel ),
 		};
 	}

packages/components/src/primitives/svg/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -19,5 +24,5 @@ export const SVG = ( props ) => {
 
 	// Disable reason: We need to have a way to render HTML tag for web.
 	// eslint-disable-next-line react/forbid-elements
-	return <svg { ...appliedProps } />;
+	return <svg { ...omit( appliedProps, '__unstableActive' ) } />;
 };

packages/components/src/primitives/svg/index.native.js

@@ -19,7 +19,7 @@ export {
 export const SVG = ( props ) => {
 	const colorScheme = props.colorScheme || 'light';
 	const stylesFromClasses = ( props.className || '' ).split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
-	const defaultStyle = props.active ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
+	const defaultStyle = props.__unstableActive ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
 	const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
 
 	const safeProps = { ...props, style: styleValues };

packages/rich-text/src/component/index.native.js

@@ -440,7 +440,7 @@ export class RichText extends Component {
 	/**
 	 * Handles a paste event from the native Aztec Wrapper.
 	 *
-	 * @param {PasteEvent} event The paste event which wraps `nativeEvent`.
+	 * @param {Object} event The paste event which wraps `nativeEvent`.
 	 */
 	onPaste( event ) {
 		const {
@@ -753,13 +753,19 @@ export class RichText extends Component {
 
 	getHtmlToRender( record, tagName ) {
 		// Save back to HTML from React tree
-		const value = this.valueToFormat( record );
+		let value = this.valueToFormat( record );
 
-		if ( value === undefined || value === '' ) {
+		if ( value === undefined ) {
 			this.lastEventCount = undefined; // force a refresh on the native side
-			return '';
-		} else if ( tagName ) {
-			return `<${ tagName }>${ value }</${ tagName }>`;
+			value = '';
+		}
+		// On android if content is empty we need to send no content or else the placeholder with not show.
+		if ( ! this.isIOS && value === '' ) {
+			return value;
+		}
+
+		if ( tagName ) {
+			value = `<${ tagName }>${ value }</${ tagName }>`;
 		}
 		return value;
 	}