s

src/RichTextEditor.js

@@ -145,7 +145,6 @@ export default class RichTextEditor extends Component {
           this.setContentPlaceholder(this.props.contentPlaceholder);
           this.setTitleHTML(this.props.initialTitleHTML || '');
           this.setContentHTML(this.props.initialContentHTML || '');
-
           !this.props.hiddenTitle && this.showTitle();
           this.props.enableOnChange && this.enableOnChange();
 
@@ -168,6 +167,9 @@ export default class RichTextEditor extends Component {
         case messages.CONTENT_FOCUSED:
           this.contentFocusHandler && this.contentFocusHandler();
           break;
+        case messages.CONTENT_BLUR:
+          this.contentBlurHandler && this.contentBlurHandler();
+          break;
         case messages.SELECTION_CHANGE: {
           const items = message.data.items;
           this.state.selectionChangeListeners.map((listener) => {
@@ -588,6 +590,11 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.setContentFocusHandler);
   }
 
+  setContentBlurHandler(callbackHandler) {
+    this.contentBlurHandler = callbackHandler;
+    this._sendAction(actions.setContentBlurHandler);
+  }
+
   addSelectedTextChangeListener(listener) {
     this._selectedTextChangeListeners.push(listener);
   }

src/WebviewMessageHandler.js

@@ -104,6 +104,8 @@ export const MessageConverter = (action) => {
       return `zss_editor.setTitleFocusHandler();`;
     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}));`

src/const.js

@@ -45,6 +45,7 @@ export const actions = {
   setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
+  setContentBlurHandler: 'SET_CONTENT_BLUR_HANDLER',
   prepareInsert: 'PREPARE_INSERT',
   restoreSelection: 'RESTORE_SELECTION',
   setCustomCSS: 'SET_CUSTOM_CSS',
@@ -66,6 +67,7 @@ export const messages = {
   LOG: 'LOG',
   TITLE_FOCUSED: 'TITLE_FOCUSED',
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
+  CONTENT_BLUR: 'CONTENT_BLUR',
   SELECTION_CHANGE: 'SELECTION_CHANGE',
   CONTENT_CHANGE: 'CONTENT_CHANGE',
   SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',

src/editor.html

@@ -916,7 +916,7 @@
 				whenPastingInsertAsPlainText('zss_editor_title');
 				whenPastingInsertAsPlainText('zss_editor_content');
 
-				zss_editor.focusContent();
+				// zss_editor.focusContent();
 
 				setTimeout(function() {
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'ZSS_INITIALIZED'}))
@@ -1355,6 +1355,7 @@
 			zss_editor.insertEmoji = function(url) {
 				zss_editor.restorerange();
 				document.execCommand('insertHTML', false, '<img class="emoji" src="' + encodeHtmlEntities(url) + '"/>');
+				zss_editor.blurContentEditor()
 				zss_editor.enabledEditingItems();
 			}
 
@@ -1626,6 +1627,11 @@
 				editor.focus(callbackHandler);
 			}
 
+			function addBlurEvent(editorId, callbackHandler) {
+				var editor = $('#' + editorId);
+				editor.blur(callbackHandler);
+			}
+
 			zss_editor.setTitleFocusHandler = function() {
 				addFocusEvent('zss_editor_title', function() {
 					ReactNativeWebView.postMessage(JSON.stringify({type: 'TITLE_FOCUSED'}))
@@ -1638,6 +1644,12 @@
 				});
 			}
 
+			zss_editor.setContentBlurHandler = function() {
+				addBlurEvent('zss_editor_content', function() {
+					ReactNativeWebView.postMessage(JSON.stringify({type: 'CONTENT_BLUR'}))
+				});
+			}
+
 			zss_editor.setEditorHeight = function(editorHeight) {
 				zss_editor.editorHeight = editorHeight;
 			}
@@ -1695,6 +1707,7 @@
 				padding-left: 10px;
 				padding-right: 10px;
 				line-height: 20px;
+				caret-color:rgb(90, 149, 211)
 			}
 
 			#zss_editor_title {