Merge pull request #60 from wordpress-mobile/feature/aztec-submodule

First stab at having Aztec in the RN app

.babelrc

@@ -9,6 +9,7 @@
       {
         "cwd": "babelrc",
         "alias": {
+          "react-native-aztec": "./react-native-aztec",
           "@wordpress/blocks": "./blocks",
           "@wordpress/editor": "./editor",
           "@wordpress/element": "./element",

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "gutenberg"]
 	path = gutenberg
 	url = ../../WordPress/gutenberg.git
+[submodule "react-native-aztec"]
+	path = react-native-aztec
+	url = ../react-native-aztec.git

android/app/build.gradle

@@ -94,19 +94,23 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 26
+    buildToolsVersion "26.0.2"
 
     defaultConfig {
         applicationId "com.gutenberg"
         minSdkVersion 16
-        targetSdkVersion 22
+        targetSdkVersion 26
         versionCode 1
         versionName "1.0"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
     }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_7
+        targetCompatibility JavaVersion.VERSION_1_7
+    }
     splits {
         abi {
             reset()
@@ -136,11 +140,30 @@ android {
     }
 }
 
+buildscript {
+    repositories {
+        jcenter()
+        google()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.0.1'
+    }
+}
+
+repositories {
+    jcenter()
+    google()
+    maven { url "https://jitpack.io" }
+}
+
 dependencies {
-    compile project(':react-native-recyclerview-list')
-    compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:23.0.1"
-    compile "com.facebook.react:react-native:+"  // From node_modules
+	implementation project(':react-native-aztec')
+	implementation project(':react-native-recyclerview-list')
+    // compile fileTree(dir: "libs", include: ["*.jar"])
+    implementation "com.android.support:appcompat-v7:$supportLibVersion"
+    implementation "org.wordpress:utils:$wordpressUtilsVersion"
+    implementation "com.facebook.react:react-native:+" // From node_modules.
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import org.wordpress.mobile.ReactNativeAztec.ReactAztecPackage;
 import com.github.godness84.RNRecyclerViewList.RNRecyclerviewListPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -24,6 +25,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ReactAztecPackage(),
             new RNRecyclerviewListPackage()
       );
     }

android/build.gradle

@@ -1,20 +1,33 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
 buildscript {
+    ext {
+        gradlePluginVersion = '3.0.1'
+        kotlinVersion = '1.2.31'
+        supportLibVersion = '27.1.1'
+        tagSoupVersion = '1.2.1'
+        glideVersion = '3.7.0'
+        picassoVersion = '2.5.2'
+        robolectricVersion = '3.5.1'
+        jUnitVersion = '4.12'
+        jSoupVersion = '1.10.3'
+        wordpressUtilsVersion = '1.20.2'
+        espressoVersion = '3.0.1'
+    }
+
     repositories {
         jcenter()
+        google()
     }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
 
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
+    dependencies {
+        classpath "com.android.tools.build:gradle:$gradlePluginVersion"
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     }
 }
 
 allprojects {
     repositories {
         mavenLocal()
+        google()
         jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
+#Mon Sep 08 13:53:18 PDT 2014
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'gutenberg'
+include ':react-native-aztec'
+project(':react-native-aztec').projectDir = new File(rootProject.projectDir, '../react-native-aztec/android')
 include ':react-native-recyclerview-list'
 project(':react-native-recyclerview-list').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-recyclerview-list/android')
 

ios/gutenberg.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -38,6 +37,7 @@
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
+		CF45443564B845C8BDCFBAB6 /* libRNTAztecView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3ADEFEC092CF4D00BEF1019E /* libRNTAztecView.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -343,6 +343,8 @@
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
+		F619623252704B46A619C33C /* RNTAztecView.xcodeproj */ = {isa = PBXFileReference; name = "RNTAztecView.xcodeproj"; path = "../react-native-aztec/ios/RNTAztecView.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		3ADEFEC092CF4D00BEF1019E /* libRNTAztecView.a */ = {isa = PBXFileReference; name = "libRNTAztecView.a"; path = "libRNTAztecView.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -371,6 +373,7 @@
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+				CF45443564B845C8BDCFBAB6 /* libRNTAztecView.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -557,6 +560,7 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				F619623252704B46A619C33C /* RNTAztecView.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -685,7 +689,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0610;
+				LastUpgradeCheck = 610;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
@@ -1181,6 +1185,14 @@
 				);
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/gutenberg.app/gutenberg";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Debug;
 		};
@@ -1198,6 +1210,14 @@
 				);
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/gutenberg.app/gutenberg";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Release;
 		};
@@ -1216,6 +1236,10 @@
 				);
 				PRODUCT_NAME = gutenberg;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Debug;
 		};
@@ -1233,6 +1257,10 @@
 				);
 				PRODUCT_NAME = gutenberg;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Release;
 		};
@@ -1259,6 +1287,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Debug;
 		};
@@ -1285,6 +1321,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Release;
 		};
@@ -1310,6 +1354,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/gutenberg-tvOS.app/gutenberg-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Debug;
 		};
@@ -1335,6 +1387,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/gutenberg-tvOS.app/gutenberg-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../react-native-aztec/example/iOS/example",
+				);
 			};
 			name = Release;
 		};

src/block-management/block-holder.js

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import RCTAztecView from 'react-native-aztec';
 import Toolbar from './toolbar';
 
 import type { BlockType } from '../store/';
@@ -19,9 +20,24 @@ type PropsType = BlockType & {
 	onToolbarButtonPressed: ( button: number, uid: string ) => void,
 	onBlockHolderPressed: ( uid: string ) => void,
 };
-type StateType = { selected: boolean, focused: boolean };
+type StateType = {
+	selected: boolean,
+	focused: boolean,
+	aztecHeight: number,
+};
+
+const _minHeight = 50;
 
 export default class BlockHolder extends React.Component<PropsType, StateType> {
+	constructor( props: PropsType ) {
+		super( props );
+		this.state = {
+			selected: false,
+			focused: false,
+			aztecHeight: _minHeight,
+		};
+	}
+
 	renderToolbarIfBlockFocused() {
 		if ( this.props.focused ) {
 			return (
@@ -53,6 +69,29 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 					style={ style }
 				/>
 			);
+		} else if ( this.props.name === 'aztec' ) {
+			return (
+				<RCTAztecView
+					accessibilityLabel="aztec-view"
+					style={ [
+						styles[ 'aztec-editor' ],
+						{ minHeight: Math.max( _minHeight, this.state.aztecHeight ) },
+					] }
+					text={ { text: this.props.attributes.content, eventCount: this.props.attributes.eventCount } }
+					onContentSizeChange={ ( event ) => {
+						this.setState( { ...this.state, aztecHeight: event.nativeEvent.contentSize.height } );
+					} }
+					onChange={ ( event ) => {
+						this.props.onChange( this.props.uid, {
+							...this.props.attributes,
+							content: event.nativeEvent.text,
+							eventCount: event.nativeEvent.eventCount,
+						} );
+					} }
+					color={ 'black' }
+					maxImagesWidth={ 200 }
+				/>
+			);
 		}
 
 		// Default block placeholder

src/block-management/block-holder.scss

@@ -20,3 +20,11 @@
 	padding-top: 4;
 	padding-bottom: 4;
 }
+
+.aztec_container {
+	flex: 1;
+}
+
+.aztec_editor {
+	min-height: 50;
+}