Merge branch 'develop' of https://github.com/wordpress-mobile/gutenbe…

…rg-mobile into issue/609-Show-Title-block-when-HTML-mode

* 'develop' of https://github.com/wordpress-mobile/gutenberg-mobile: (44 commits)
  Updated bundles
  Add border on Title when focused (#622)
  Default to the device language for the example app
  Updates the gutenberg submodule ref.
  Updates the gutenberg submodule reference.
  Re-add rootTagsToEliminate option to RichText (#636)
  Give priority to the parent app translations
  Remove unnecessary import
  Fix lint issue
  Fallback to a locale without a regional code if not supported
  Add Greek support
  PR got merged upstream so, use upstream
  Run yarn i18n-cache on postinstall
  Run yarn prebundle before bundle:android and bundle:ios instead
  Use a forked+patched jsdom-jscore with normalization fix
  Revert "Update GB ref with fix for node.rel"
  Upload media progress bar is missing while media is uploading new (#631)
  Remove JS handling of title focus
  Update GB ref with fix for node.rel
  Update iOS translation values as arrays
  ...

.gitignore

@@ -93,3 +93,5 @@ buck-out/
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+*.pot

__mocks__/styleMock.js

@@ -25,4 +25,7 @@ module.exports = {
 	'editor-plain-text': {
 		fontFamily: 'serif',
 	},
+	blockHolderFocused: {
+		borderColor: 'gray',
+	},
 };

i18n-cache/.gitignore

@@ -0,0 +1,3 @@
+# ignore native version of this module as it will be generated
+
+index.native.js

i18n-cache/data/.gitignore

@@ -0,0 +1,3 @@
+# ignore all the contents of this folder except this file
+*
+!.gitignore

i18n-cache/index.js

@@ -0,0 +1,129 @@
+/* eslint-disable no-console */
+
+// External dependencies
+const fs = require( 'fs' );
+const path = require( 'path' );
+const fetch = require( 'node-fetch' );
+
+const supportedLocales = [
+	'ar', // Arabic
+	'bg', // Bulgarian
+	'cs', // Czech
+	'cy', // Welsh
+	'da', // Danish
+	'de', // German
+	'en-au', // English (Australia)
+	'en-ca', // English (Canada)
+	'en-gb', // English (UK)
+	'el', // Greek
+	'es', // Spanish
+	'fr', // French
+	'he', // Hebrew
+	'hr', // Croatian
+	'hu', // Hungarian
+	'id', // Indonesian
+	'is', // Icelandic
+	'it', // Italian
+	'ja', // Japanese
+	'ko', // Korean
+	'nb', // Norwegian (Bokmål)
+	'nl', // Dutch
+	'pl', // Polish
+	'pt', // Portuguese
+	'pt-br', // Portuguese (Brazil)
+	'ro', // Romainian
+	'ru', // Russian
+	'sk', // Slovak
+	'sq', // Albanian
+	'sv', // Swedish
+	'th', // Thai
+	'tr', // Turkish
+	'zh-cn', // Chinese (China)
+	'zh-tw', // Chinese (Taiwan)
+];
+
+const getLanguageUrl = ( locale ) => `https://widgets.wp.com/languages/gutenberg/${ locale }.json`;
+const getTranslationFilePath = ( locale ) => `./data/${ locale }.json`;
+
+const getTranslation = ( locale ) => require( getTranslationFilePath( locale ) );
+
+const fetchTranslation = ( locale ) => {
+	if ( ! process.env.REFRESH_I18N_CACHE ) {
+		try {
+			const localData = getTranslation( locale );
+			console.log( `Using cached locale data for ${ locale }` );
+			return Promise.resolve( { response: localData, locale, inCache: true } );
+		} catch ( error ) {
+			// translation not found, let's fetch it
+		}
+	}
+
+	console.log( 'fetching', getLanguageUrl( locale ) );
+	const localeUrl = getLanguageUrl( locale );
+	return fetch( localeUrl ).then( ( response ) => response.json() ).then( ( body ) => {
+		return { response: body, locale };
+	} ).catch( () => {
+		console.error( `Could not find translation file ${ localeUrl }` );
+	} );
+};
+
+const fetchTranslations = () => {
+	const fetchPromises = supportedLocales.map( ( locale ) => fetchTranslation( locale ) );
+
+	return Promise.all( fetchPromises ).then( ( results ) => {
+		const fetchedTranslations = results.filter( Boolean );
+		const translationFilePromises = fetchedTranslations.map( ( languageResult ) => {
+			return new Promise( ( resolve, reject ) => {
+				const translationRelativePath = getTranslationFilePath( languageResult.locale );
+				const translationAbsolutePath = path.resolve( __dirname, translationRelativePath );
+
+				if ( languageResult.inCache ) {
+					languageResult.path = translationRelativePath;
+					resolve( translationRelativePath );
+					return;
+				}
+
+				fs.writeFile( translationAbsolutePath, JSON.stringify( languageResult.response ), 'utf8', ( err ) => {
+					if ( err ) {
+						reject( err );
+					} else {
+						languageResult.path = translationRelativePath;
+						resolve( translationRelativePath );
+					}
+				} );
+			} );
+		} );
+		return Promise.all( translationFilePromises ).then( () => fetchedTranslations );
+	} );
+};
+
+module.exports = {
+	getTranslation,
+};
+
+// if run as a script
+if ( require.main === module ) {
+	fetchTranslations().then( ( translations ) => {
+		const indexNative = `/* THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY. */
+/* eslint-disable */
+
+const translations = {
+${
+	translations.filter( Boolean ).map( ( translation ) => (
+		`\t"${ translation.locale }": require( "${ translation.path }" ),`
+	) ).join( '\n' )
+}
+};
+
+export const getTranslation = ( locale ) => translations[ locale ];
+`;
+
+		fs.writeFile( path.join( __dirname, 'index.native.js' ), indexNative, 'utf8', ( error ) => {
+			if ( error ) {
+				console.error( error );
+				return;
+			}
+			console.log( 'Done.' );
+		} );
+	} );
+}

ios/gutenberg/GutenbergViewController.swift

@@ -116,6 +116,15 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
 }
 
 extension GutenbergViewController: GutenbergBridgeDataSource {
+
+    func gutenbergLocale() -> String? {
+        return Locale.preferredLanguages.first ?? "en"
+    }
+
+    func gutenbergTranslations() -> [String : [String]]? {
+        return nil
+    }
+
     func gutenbergInitialContent() -> String? {
         return nil
     }

package.json

@@ -35,6 +35,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
     "metro-react-native-babel-preset": "^0.45.5",
+    "node-fetch": "^2.3.0",
     "prettier": "git+https://github.com/Automattic/calypso-prettier.git#calypso-1.9",
     "prettier-eslint": "^8.8.2",
     "prettier-eslint-cli": "^4.7.1",
@@ -56,6 +57,9 @@
     "bundle": "yarn bundle:android && yarn bundle:ios",
     "bundle:android": "mkdir -p bundle/android && yarn react-native bundle --platform android --dev false --entry-file index.js --assets-dest bundle/android --bundle-output bundle/android/App.js --sourcemap-output bundle/android/App.js.map",
     "bundle:ios": "mkdir -p bundle/ios && yarn react-native bundle --platform ios --dev false --entry-file index.js --assets-dest bundle/ios --bundle-output bundle/ios/App.js --sourcemap-output bundle/ios/App.js.map",
+    "i18n-cache": "node i18n-cache/index.js",
+    "postinstall": "yarn i18n-cache",
+    "makepot": "xgettext -f <( find . \\( -path './gutenberg/*/src/*.native.js' -or -path './src/*.js' \\) ! -path 'node_modules' -print ) --from-code=UTF-8 -k__ -k_n -k_x -k_nx -x ./gutenberg/languages/gutenberg.pot -o ./gutenberg-mobile.pot",
     "android": "react-native run-android",
     "prewpandroid": "rm -Rf $TMPDIR/gbmobile-wpandroidfakernroot && mkdir $TMPDIR/gbmobile-wpandroidfakernroot && ln -s $(cd \"$(dirname \"../../../\")\"; pwd) $TMPDIR/gbmobile-wpandroidfakernroot/android",
     "wpandroid": "yarn android --root $TMPDIR/gbmobile-wpandroidfakernroot --variant wasabiDebug --appIdSuffix beta --appFolder WordPress --main-activity=ui.WPLaunchActivity",
@@ -80,6 +84,7 @@
     "clean:node": "rm -rf node_modules",
     "clean:watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
     "clean:babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
+    "clean:i18n-cache": "rm -rf ./i18n-cache/data/*.json && rm -f ./i18n-cache/index.native.js",
     "lint": "eslint . --ext .js",
     "lint:fix": "yarn lint --fix",
     "version": "yarn bundle && git add -A bundle"
@@ -93,7 +98,7 @@
     "jed": "^1.1.1",
     "js-beautify": "^1.7.5",
     "jsc-android": "224109.x.x",
-    "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#6eac88dd5d5e7c21ce6382abde7dbc376d7f7f59",
+    "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
     "moment": "^2.22.1",

react-native-aztec/ios/RNTAztecView/RCTAztecView.swift

@@ -73,6 +73,8 @@ class RCTAztecView: Aztec.TextView {
             constant: leftTextInset
         )
     }()
+
+    private var isInsertingDictationResult = false
 
     // MARK: - Font
 
@@ -197,7 +199,7 @@ class RCTAztecView: Aztec.TextView {
         super.insertText(text)
         updatePlaceholderVisibility()
     }
-    
+
     open override func deleteBackward() {
         guard !interceptBackspace() else {
             return
@@ -206,7 +208,19 @@ class RCTAztecView: Aztec.TextView {
         super.deleteBackward()
         updatePlaceholderVisibility()
     }
-
+
+    // MARK: - Dictation
+
+    override func dictationRecordingDidEnd() {
+        isInsertingDictationResult = true
+    }
+
+    public override func insertDictationResult(_ dictationResult: [UIDictationPhrase]) {
+        let text = dictationResult.reduce("") { $0 + $1.text }
+        insertText(text)
+        isInsertingDictationResult = false
+    }
+
     // MARK: - Custom Edit Intercepts
 
     private func interceptEnter(_ text: String) -> Bool {
@@ -278,7 +292,7 @@ class RCTAztecView: Aztec.TextView {
         guard contents["eventCount"] == nil else {
             return
         }
-        
+
         let html = contents["text"] as? String ?? ""
 
         setHTML(html)
@@ -443,8 +457,17 @@ extension RCTAztecView: UITextViewDelegate {
     }
 
     func textViewDidChange(_ textView: UITextView) {
+
+        guard isInsertingDictationResult == false else {
+            // If a dictation start with an empty UITextView,
+            // the dictation engine refreshes the TextView with an empty string when the dictation finishes.
+            // This avoid propagating that unwanted empty string to RN. (Solving #606)
+            return
+        }
+
         forceTypingAttributesIfNeeded()
         propagateContentChanges()
+        updatePlaceholderVisibility()
         //Necessary to send height information to JS after pasting text.
         textView.setNeedsLayout()
     }

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -61,6 +61,8 @@ public class WPAndroidGlueCode {
     private static final String PROP_NAME_INITIAL_DATA = "initialData";
     private static final String PROP_NAME_INITIAL_TITLE = "initialTitle";
     private static final String PROP_NAME_INITIAL_HTML_MODE_ENABLED = "initialHtmlModeEnabled";
+    private static final String PROP_NAME_LOCALE = "locale";
+    private static final String PROP_NAME_TRANSLATIONS = "translations";
 
     public void onCreate(Context context) {
         SoLoader.init(context, /* native exopackage */ false);
@@ -158,7 +160,7 @@ public void editorDidMount(boolean hasUnsupportedBlocks) {
 
     public void onCreateView(Context initContext, boolean htmlModeEnabled,
                              Application application, boolean isDebug, boolean buildGutenbergFromSource,
-                             boolean isNewPost) {
+                             boolean isNewPost, String localeString, Bundle translations) {
         mReactRootView = new ReactRootView(new MutableContextWrapper(initContext));
 
         ReactInstanceManagerBuilder builder =
@@ -185,7 +187,8 @@ public void onReactContextInitialized(ReactContext context) {
         initialProps.putString(PROP_NAME_INITIAL_DATA, "");
         initialProps.putString(PROP_NAME_INITIAL_TITLE, "");
         initialProps.putBoolean(PROP_NAME_INITIAL_HTML_MODE_ENABLED, htmlModeEnabled);
-
+        initialProps.putString(PROP_NAME_LOCALE, localeString);
+        initialProps.putBundle(PROP_NAME_TRANSLATIONS, translations);
 
         // The string here (e.g. "MyReactNativeApp") has to match
         // the string in AppRegistry.registerComponent() in index.js

react-native-gutenberg-bridge/ios/Gutenberg.swift

@@ -33,8 +33,8 @@ public class Gutenberg: NSObject {
         return RCTBridge(delegate: self, launchOptions: [:])
     }()
 
-    private var initialProps: [String: String]? {
-        var initialProps = [String: String]()
+    private var initialProps: [String: Any]? {
+        var initialProps = [String: Any]()
 
         if let initialContent = dataSource.gutenbergInitialContent() {
             initialProps["initialData"] = initialContent
@@ -43,6 +43,14 @@ public class Gutenberg: NSObject {
         if let initialTitle = dataSource.gutenbergInitialTitle() {
             initialProps["initialTitle"] = initialTitle
         }
+
+        if let locale = dataSource.gutenbergLocale() {
+            initialProps["locale"] = locale
+        }
+
+        if let translations = dataSource.gutenbergTranslations() {
+            initialProps["translations"] = translations
+        }
 
         return initialProps
     }

react-native-gutenberg-bridge/ios/GutenbergBridgeDataSource.swift

@@ -18,4 +18,16 @@ public protocol GutenbergBridgeDataSource: class {
     ///
     /// - Returns: An object conforming to TextViewAttachmentDelegate.
     func aztecAttachmentDelegate() -> TextViewAttachmentDelegate
+
+    /// Asks the data source for the locale to be used by the editor.
+    /// Return `nil` to show the default one (`en`).
+    ///
+    /// - Returns: The locale slug value or nil.
+    func gutenbergLocale() -> String?
+
+    /// Asks the data source for the list of localized strings to be used by the editor.
+    /// Return `nil` if no localization file is present for the current locale
+    ///
+    /// - Returns: Gutenberg related localization key value pairs for the current locale.
+    func gutenbergTranslations() -> [String : [String]]?
 }