Merge pull request wix-incubator#14 from philpettican/release/1.3.0

Release/1.3.0

Author: philpettican

README.md

@@ -168,7 +168,11 @@ To focus or blur sections, use these methods
 To know when the title or content are in focus, use the following methods.
 
 *  `setTitleFocusHandler(callbackHandler) `
+*  `setTitleBlurHandler(callbackHandler) `
 *  `setContentFocusHandler(callbackHandler) `
+*  `setContentBlurHandler(callbackHandler) `
+*  `isTitleFocused() `
+*  `isContentFocused() `
 
 This method registers a function that will get called whenver the cursor position changes or a change is made to the styling of the editor at the cursor's position., The callback will be called with an array of `actions` that are active at the cusor position, allowing a toolbar to respond to changes.
 
@@ -319,7 +323,9 @@ This is a set of consts of all supported actions. These will be passed in arrays
 	  	setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
 	  	setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
 	  	setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
+		setTitleBlurHandler: 'SET_TITLE_BLUR_HANDLER',
 	  	setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
+		setContentBlurHandler: 'SET_CONTENT_BLUR_HANDLER',
 	  	prepareInsert: 'PREPARE_INSERT',
 	  	restoreSelection: 'RESTORE_SELECTION',
 	  	setCustomCSS: 'SET_CUSTOM_CSS',

example/App.js

@@ -45,9 +45,19 @@ export default class RichTextExample extends Component {
 	setFocusHandlers() {
 		this.richtext.setTitleFocusHandler(() => {
 			//alert('title focus');
+			//console.log(`isTitleFocused: ${this.richtext.isTitleFocused()}`);
+		});
+		this.richtext.setTitleBlurHandler(() => {
+			//alert('title blur');
+			//console.log(`isTitleFocused: ${this.richtext.isTitleFocused()}`);
 		});
 		this.richtext.setContentFocusHandler(() => {
 			//alert('content focus');
+			//console.log(`isContentFocused: ${this.richtext.isContentFocused()}`);
+		});
+		this.richtext.setContentBlurHandler(() => {
+			//alert('content blur');
+			//console.log(`isContentFocused: ${this.richtext.isContentFocused()}`);
 		});
 	}
 }

example/android/app/build.gradle

@@ -77,7 +77,8 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     entryFile: "index.js",
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: false,  // clean and rebuild if changing,
+    cliPath: "node_modules/@haul-bundler/cli/bin/haul.js"
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

example/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	presets: ['module:metro-react-native-babel-preset'],
+	presets: ['module:@haul-bundler/babel-preset-react-native'],
 };

example/haul.config.js

@@ -0,0 +1,9 @@
+import { withPolyfills, makeConfig } from "@haul-bundler/preset-0.60";
+
+export default makeConfig({
+  bundles: {
+    index: {
+      entry: withPolyfills('./index'),
+    },
+  },
+});

example/ios/example.xcodeproj/project.pbxproj

@@ -371,7 +371,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "# added by Haul\nexport CLI_PATH=node_modules/@haul-bundler/cli/bin/haul.js\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -385,7 +385,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "# added by Haul\nexport CLI_PATH=node_modules/@haul-bundler/cli/bin/haul.js\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		6235428805B1C264DEBB160C /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;

example/package.json

@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "haul": "haul start"
   },
   "dependencies": {
     "react": "16.9.0",
@@ -19,6 +20,9 @@
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/runtime": "^7.7.7",
+    "@haul-bundler/babel-preset-react-native": "^0.16.0",
+    "@haul-bundler/cli": "^0.21.0",
+    "@haul-bundler/preset-0.60": "^0.18.0",
     "@react-native-community/eslint-config": "^0.0.5",
     "babel-jest": "^24.9.0",
     "eslint": "^6.8.0",

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/wix/react-native-zss-rich-text-editor.git"
   },
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React Native Wrapper for ZSSRichTextEditor",
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE",

src/RichTextEditor.js

@@ -54,6 +54,8 @@ export default class RichTextEditor extends Component {
 			linkTitle: '',
 			linkUrl: '',
 			keyboardHeight: 0,
+			isTitleFocused: false,
+			isContentFocused: false,
 		};
 		this._selectedTextChangeListeners = [];
 	}
@@ -198,10 +200,16 @@ export default class RichTextEditor extends Component {
 					});
 					break;
 				case messages.TITLE_FOCUSED:
-					this.titleFocusHandler && this.titleFocusHandler();
+					this._titleFocusHandler();
+					break;
+				case messages.TITLE_BLURRED:
+					this._titleBlurHandler();
 					break;
 				case messages.CONTENT_FOCUSED:
-					this.contentFocusHandler && this.contentFocusHandler();
+					this._contentFocusHandler();
+					break;
+				case messages.CONTENT_BLURRED:
+					this._contentBlurHandler();
 					break;
 				case messages.SELECTION_CHANGE: {
 					const items = message.data.items;
@@ -412,6 +420,16 @@ export default class RichTextEditor extends Component {
 		});
 	}
 
+	isTitleFocused() {
+		const { isTitleFocused } = this.state;
+		return isTitleFocused;
+	}
+
+	isContentFocused() {
+		const { isContentFocused } = this.state;
+		return isContentFocused;
+	}
+
 	focusTitle() {
 		this._sendAction(actions.focusTitle);
 	}
@@ -601,6 +619,10 @@ export default class RichTextEditor extends Component {
 	}
 
 	init() {
+		this._sendAction(actions.setTitleFocusHandler);
+		this._sendAction(actions.setTitleBlurHandler);
+		this._sendAction(actions.setContentFocusHandler);
+		this._sendAction(actions.setContentBlurHandler);
 		this._sendAction(actions.init);
 		this.setPlatform();
 		if (this.props.footerHeight) {
@@ -676,14 +698,52 @@ export default class RichTextEditor extends Component {
 		});
 	}
 
+	_titleFocusHandler() {
+		this.setState({
+			isTitleFocused: true,
+		}, () => {
+			this.titleFocusHandler && this.titleFocusHandler();
+		});
+	};
+
+	_titleBlurHandler() {
+		this.setState({
+			isTitleFocused: false,
+		}, () => {
+			this.titleBlurHandler && this.titleBlurHandler();
+		});
+	}
+
+	_contentFocusHandler() {
+		this.setState({
+			isContentFocused: true,
+		}, () => {
+			this.contentFocusHandler && this.contentFocusHandler();
+		});
+	}
+
+	_contentBlurHandler() {
+		this.setState({
+			isContentFocused: false,
+		}, () => {
+			this.contentBlurHandler && this.contentBlurHandler();
+		});
+	}
+
 	setTitleFocusHandler(callbackHandler) {
 		this.titleFocusHandler = callbackHandler;
-		this._sendAction(actions.setTitleFocusHandler);
+	}
+
+	setTitleBlurHandler(callbackHandler) {
+		this.titleBlurHandler = callbackHandler;
 	}
 
 	setContentFocusHandler(callbackHandler) {
 		this.contentFocusHandler = callbackHandler;
-		this._sendAction(actions.setContentFocusHandler);
+	}
+
+	setContentBlurHandler(callbackHandler) {
+		this.contentBlurHandler = callbackHandler;
 	}
 
 	addSelectedTextChangeListener(listener) {

src/WebviewMessageHandler.js

@@ -101,8 +101,12 @@ export const MessageConverter = action => {
 			return `zss_editor.setFooterHeight('${action.data}');`;
 		case `${actions.setTitleFocusHandler}`:
 			return `zss_editor.setTitleFocusHandler();`;
+		case `${actions.setTitleBlurHandler}`:
+			return `zss_editor.setTitleBlurHandler();`;
 		case `${actions.setContentFocusHandler}`:
 			return `zss_editor.setContentFocusHandler();`;
+		case `${actions.setContentBlurHandler}`:
+			return `zss_editor.setContentBlurHandler();`;
 		case `${actions.getTitleHtml}`:
 			return `var html = zss_editor.getTitleHTML();
       ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));`;