From 2be122f277e1b9879633a76e8235c790da2c93a3 Mon Sep 17 00:00:00 2001 From: Marko Savic <savicmarko1985@gmail.com> Date: Tue, 8 Oct 2019 15:03:25 +0200 Subject: [PATCH] [RNMobile] Native mobile release v1.14.0 (#17676) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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> --- .../src/heading/heading-level-icon.js | 4 ++-- .../src/heading/heading-toolbar.js | 5 +++-- .../components/src/primitives/svg/index.js | 7 ++++++- .../src/primitives/svg/index.native.js | 2 +- .../rich-text/src/component/index.native.js | 18 ++++++++++++------ 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js index a65d9f4a0ecb6..aa1e964f3ec41 100644 --- a/packages/block-library/src/heading/heading-level-icon.js +++ b/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> ); diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js index f3a089a8fafef..6d19cc0822f89 100644 --- a/packages/block-library/src/heading/heading-toolbar.js +++ b/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 ), }; } diff --git a/packages/components/src/primitives/svg/index.js b/packages/components/src/primitives/svg/index.js index abb15e121dc2b..6aabda291fd88 100644 --- a/packages/components/src/primitives/svg/index.js +++ b/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' ) } />; }; diff --git a/packages/components/src/primitives/svg/index.native.js b/packages/components/src/primitives/svg/index.native.js index 2226b5fdf3fc6..8cf9a2d7cee27 100644 --- a/packages/components/src/primitives/svg/index.native.js +++ b/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 }; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 84ff6e2608c90..09ac451ed56d2 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/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; }