s

src/RichTextEditor.js

@@ -147,7 +147,7 @@ export default class RichTextEditor extends Component {
           this.setContentHTML(this.props.initialContentHTML || '');
           !this.props.hiddenTitle && this.showTitle();
           this.props.enableOnChange && this.enableOnChange();
-
+          
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
 
           break;
@@ -170,6 +170,9 @@ export default class RichTextEditor extends Component {
         case messages.CONTENT_BLUR:
           this.contentBlurHandler && this.contentBlurHandler();
           break;
+        case messages.ONCHANGE_EMPTY_OR_NOT:
+          this.onChangeEmptyOrNot && this.onChangeEmptyOrNot();
+          break;
         case messages.SELECTION_CHANGE: {
           const items = message.data.items;
           this.state.selectionChangeListeners.map((listener) => {
@@ -310,7 +313,8 @@ export default class RichTextEditor extends Component {
   //-------------------------------------------------------------------------------
   //--------------- Public API
 
-  showLinkDialog(optionalTitle = '', optionalUrl = '') {
+  showLinkDialog(optionalTitle = '', optionalUrl = '', notCheckedUrlCallback) {
+    this.notCheckedUrlCallback = notCheckedUrlCallback || this.notCheckedUrlCallback;
     this.prepareInsert();
     this.setState({
       linkInitialUrl: optionalUrl,
@@ -437,11 +441,19 @@ export default class RichTextEditor extends Component {
   }
 
   insertLink(url, title) {
-    this._sendAction(actions.insertLink, {url, title});
+    if (/^(http:\/\/|https:\/\/)/.test(url)) {
+      this._sendAction(actions.insertLink, {url, title});
+    } else {
+      this.notCheckedUrlCallback && this.notCheckedUrlCallback()
+    }
   }
 
   updateLink(url, title) {
-    this._sendAction(actions.updateLink, {url, title});
+    if (/^(http:\/\/|https:\/\/)/.test(url)) {
+      this._sendAction(actions.updateLink, {url, title});
+    } else {
+      this.notCheckedUrlCallback && this.notCheckedUrlCallback()
+    }
   }
 
   insertImage(url) {
@@ -452,6 +464,10 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.insertEmoji, url);
   }
 
+  deleteEmoji(url) {
+    this._sendAction(actions.deleteEmoji, url);
+  }
+  
   setSubscript() {
     this._sendAction(actions.setSubscript);
   }
@@ -496,8 +512,8 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.setCustomCSS, css);
   }
 
-  prepareInsert() {
-    this._sendAction(actions.prepareInsert);
+  prepareInsert(showCaretPlaceholder) {
+    this._sendAction(actions.prepareInsert, showCaretPlaceholder);
   }
 
   restoreSelection() {
@@ -595,6 +611,11 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.setContentBlurHandler);
   }
 
+  setOnChangeEmptyOrNot(callbackHandler) {
+    this.onChangeEmptyOrNot = callbackHandler;
+    this._sendAction(actions.setOnChangeEmptyOrNot);
+  }
+
   addSelectedTextChangeListener(listener) {
     this._selectedTextChangeListeners.push(listener);
   }

src/WebviewMessageHandler.js

@@ -59,11 +59,13 @@ export const MessageConverter = (action) => {
     case `${actions.insertLink}`:
       return `zss_editor.insertLink('${action.data.url}', '${action.data.title}');`;
     case `${actions.updateLink}`:
-      return `zss_editor.updateLink('${action.data.url}, ${action.data.title}');`;
+      return `zss_editor.updateLink('${action.data.url}', '${action.data.title}');`;
     case `${actions.insertImage}`:
       return `zss_editor.insertImage('${action.data}');`;
     case `${actions.insertEmoji}`:
         return `zss_editor.insertEmoji('${action.data}');`;
+    case `${actions.deleteEmoji}`:
+        return `zss_editor.deleteEmoji();`;
     case `${actions.setSubscript}`:
       return `zss_editor.setSubscript();`;
     case `${actions.setSuperscript}`:
@@ -85,7 +87,7 @@ export const MessageConverter = (action) => {
     case `${actions.focusTitle}`:
       return `zss_editor.focusTitle();`;
     case `${actions.prepareInsert}`:
-      return `zss_editor.prepareInsert();`;
+      return `zss_editor.prepareInsert(${action.data});`;
     case `${actions.restoreSelection}`:
       return `zss_editor.restorerange();`;
     case `${actions.setCustomCSS}`:
@@ -106,6 +108,8 @@ export const MessageConverter = (action) => {
       return `zss_editor.setContentFocusHandler();`;
     case `${actions.setContentBlurHandler}`:
         return `zss_editor.setContentBlurHandler();`;
+    case `${actions.setOnChangeEmptyOrNot}`:
+        return `zss_editor.setOnChangeEmptyOrNot();`;
     case `${actions.getTitleHtml}`:
       return `var html = zss_editor.getTitleHTML();
       ReactNativeWebView.postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));`

src/const.js

@@ -35,6 +35,7 @@ export const actions = {
   updateLink: 'UPDATE_LINK',
   insertImage: 'INST_IMAGE',
   insertEmoji: 'INST_EMOJI',
+  deleteEmoji: 'DELETE_EMOJI',
   setSubscript: 'subscript',
   setSuperscript: 'superscript',
   setStrikethrough: 'strikeThrough',
@@ -46,6 +47,7 @@ export const actions = {
   setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
   setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
   setContentBlurHandler: 'SET_CONTENT_BLUR_HANDLER',
+  setOnChangeEmptyOrNot: 'SET_ONCHANGE_EMPTY_OR_NOT',
   prepareInsert: 'PREPARE_INSERT',
   restoreSelection: 'RESTORE_SELECTION',
   setCustomCSS: 'SET_CUSTOM_CSS',

src/editor.html

@@ -1057,12 +1057,12 @@
 				}
 			}
 
-			zss_editor.backuprange = function(){
+			zss_editor.backuprange = function(showCaretPlaceholder){
 				var selection = window.getSelection();
 				try {
 					var range = selection.getRangeAt(0);
 					zss_editor.currentSelection = {"startContainer": range.startContainer, "startOffset":range.startOffset,"endContainer":range.endContainer, "endOffset":range.endOffset};
-					if (range.endOffset === range.startOffset) {
+					if (range.endOffset === range.startOffset && showCaretPlaceholder === true) {
 						zss_editor.insertHTML('<div class="caret_placeholder">&nbsp;&nbsp;</div>');
 					}
 				} catch (err) {}
@@ -1260,8 +1260,9 @@
 			zss_editor.insertLink = function(url, title) {
 				zss_editor.restorerange();
 				var sel = window.getSelection();
-				sel.deleteFromDocument();
+				// sel.deleteFromDocument();
 				zss_editor.insertHTML('<a href="'+ url +'">'+ title +'</a>');
+				zss_editor.focusContent();
 				zss_editor.enabledEditingItems();
 			}
 
@@ -1344,8 +1345,8 @@
 
 			}
 
-			zss_editor.prepareInsert = function() {
-				zss_editor.backuprange();
+			zss_editor.prepareInsert = function(showCaretPlaceholder) {
+				zss_editor.backuprange(showCaretPlaceholder);
 			}
 
 			zss_editor.insertImage = function(url) {
@@ -1359,9 +1360,17 @@
 			zss_editor.insertEmoji = function(url) {
 				zss_editor.restorerange();
 				document.execCommand('insertHTML', false, '<img class="emoji" src="' + encodeHtmlEntities(url) + '"/>');
-				zss_editor.backuprange();
+				zss_editor.backuprange(true);
+				zss_editor.blurContentEditor();
+				zss_editor.enabledEditingItems();
+
+			}
+
+			zss_editor.deleteEmoji = function(url) {
+				zss_editor.restorerange();
+				document.execCommand('Delete', false, null);
+				zss_editor.backuprange(true);
 				zss_editor.blurContentEditor();
-				
 				zss_editor.enabledEditingItems();
 			}
 
@@ -1406,6 +1415,7 @@
 			}
 
 			zss_editor.setContentHTML = function(html) {
+				contentIsEmpty = html.length === 0; 
 				setHTML('zss_editor_content', html);
 			}
 
@@ -1590,7 +1600,6 @@
 			}
 
 			zss_editor.focusEditor = function(editorId) {
-
 				// the following was taken from http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442
 				// and ensures we move the cursor to the end of the editor
 				var editor = $('#' + editorId);
@@ -1613,19 +1622,7 @@
 			}
 
 			zss_editor.setCustomCSS = function(customCSS) {
-
 				document.getElementsByTagName('style')[1].innerHTML=customCSS;
-
-				//set focus
-				/*editor.focusout(function(){
-				 var element = $(this);
-				 if (!element.text().trim().length) {
-				 element.empty();
-				 }
-				 });*/
-
-
-
 			}
 
 			function addFocusEvent(editorId, callbackHandler) {
@@ -1657,6 +1654,17 @@
 				});
 			}
 
+			var contentIsEmpty = true;
+			zss_editor.setOnChangeEmptyOrNot = function() {
+				$('#zss_editor_content').on('input', function() {
+					if (!this.textContent && this.querySelectorAll('img, li').length === 0 && !contentIsEmpty) {
+						ReactNativeWebView.postMessage(JSON.stringify({type: 'ONCHANGE_EMPTY_OR_NOT', isEmpty: true}))
+					} else if (contentIsEmpty && (this.textContent || this.querySelectorAll('img, li').length > 0)) {
+						ReactNativeWebView.postMessage(JSON.stringify({type: 'ONCHANGE_EMPTY_OR_NOT', isEmpty: false}))
+					}
+				});
+			}
+
 			zss_editor.setEditorHeight = function(editorHeight) {
 				zss_editor.editorHeight = editorHeight;
 			}