support title in editor

example/app.js

@@ -20,7 +20,8 @@ export default class RichTextExample extends Component {
           <RichTextEditor
               ref={(r)=>this.richtext = r}
               style={styles.richText}
-              initialHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
+              initialTitleHTML={'Title!!'}
+              initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
           />
           <RichTextToolbar
             getEditor={() => this.richtext}
@@ -31,7 +32,9 @@ export default class RichTextExample extends Component {
   }
 
   async getHTML() {
-    const html = await this.richtext.getHtml();
+    const titleHtml = await this.richtext.getTitleHtml();
+    const contentHtml = await this.richtext.getContentHtml();
+    //alert(titleHtml + ' ' + contentHtml)
   }
 
   componentDidMount() {

src/RichTextEditor.js

@@ -11,7 +11,8 @@ const injectScript = `
 
 export default class RichTextEditor extends Component {
   static propTypes = {
-    initialHTML: PropTypes.string
+    initialTitleHTML: PropTypes.string,
+    initialContentHTML: PropTypes.string,
   };
 
   constructor(props) {
@@ -24,19 +25,31 @@ export default class RichTextEditor extends Component {
       const message = JSON.parse(str);
 
       switch (message.type) {
-        case messages.HTML_RESPONSE:
-          if (this.resolve) {
-            this.resolve(message.data);
-            this.resolve = undefined;
-            this.reject = undefined;
-            if (this.pendingHtml) {
-              clearTimeout(this.pendingHtml);
-              this.pendingHtml = undefined;
+        case messages.TITLE_HTML_RESPONSE:
+          if (this.titleResolve) {
+            this.titleResolve(message.data);
+            this.titleResolve = undefined;
+            this.titleReject = undefined;
+            if (this.pendingTitleHtml) {
+              clearTimeout(this.pendingTitleHtml);
+              this.pendingTitleHtml = undefined;
+            }
+          }
+          break;
+        case messages.CONTENT_HTML_RESPONSE:
+          if (this.contentResolve) {
+            this.contentResolve(message.data);
+            this.contentResolve = undefined;
+            this.contentReject = undefined;
+            if (this.pendingContentHtml) {
+              clearTimeout(this.pendingContentHtml);
+              this.pendingContentHtml = undefined;
             }
           }
           break;
         case messages.ZSS_INITIALIZED:
-          this.setHTML(this.props.initialHTML);
+          this.setTitleHTML(this.props.initialTitleHTML);
+          this.setContentHTML(this.props.initialContentHTML);
           break;
         case messages.LOG:
           console.log('FROM ZSS', message.data);
@@ -71,12 +84,20 @@ export default class RichTextEditor extends Component {
   //-------------------------------------------------------------------------------
   //--------------- Public API
 
-  setHTML(html) {
-    this._sendAction(actions.setHtml, html);
+  setTitleHTML(html) {
+    this._sendAction(actions.setTitleHtml, html);
   }
 
-  blurEditor() {
-    this._sendAction(actions.blurEditor);
+  setContentHTML(html) {
+    this._sendAction(actions.setContentHtml, html);
+  }
+
+  blurTitleEditor() {
+    this._sendAction(actions.blurTitleEditor);
+  }
+
+  blurContentEditor() {
+    this._sendAction(actions.blurContentEditor);
   }
 
   setBold() {
@@ -171,22 +192,44 @@ export default class RichTextEditor extends Component {
     this._sendAction(actions.setOutdent);
   }
 
-  setPlaceholder() {
-    this._sendAction(actions.setPlaceholder);
+  setTitlePlaceholder() {
+    this._sendAction(actions.setTitlePlaceholder);
   }
 
-  async getHtml() {
+  setContentPlaceholder() {
+    this._sendAction(actions.setContentPlaceholder);
+  }
+
+  async getTitleHtml() {
     return new Promise((resolve, reject) => {
-      this.resolve = resolve;
-      this.reject = reject;
-      this._sendAction(actions.getHtml);
+      this.titleResolve = resolve;
+      this.titleReject = reject;
+      this._sendAction(actions.getTitleHtml);
 
-      this.pendingHtml = setTimeout(() => {
-        if (this.reject) {
-          this.reject('timeout')
+      this.pendingTitleHtml = setTimeout(() => {
+        if (this.titleReject) {
+          this.titleReject('timeout')
         }
       }, 5000);
     });
   }
 
+  async getContentHtml() {
+    return new Promise((resolve, reject) => {
+      this.contentResolve = resolve;
+      this.contentReject = reject;
+      this._sendAction(actions.getContentHtml);
+
+      this.pendingContentHtml = setTimeout(() => {
+        if (this.contentReject) {
+          this.contentReject('timeout')
+        }
+      }, 5000);
+    });
+  }
+
+  async getHtml() {
+
+  }
+
 }

src/WebviewMessageHandler.js

@@ -5,11 +5,17 @@ export const InjectedMessageHandler = `
     WebViewBridge.onMessage = function (message) {
       const action = JSON.parse(message);
       switch(action.type) {
-        case '${actions.setHtml}':
-          zss_editor.setHTML(action.data);
+        case '${actions.setTitleHtml}':
+          zss_editor.setTitleHTML(action.data);
           break;
-        case '${actions.blurEditor}':
-          zss_editor.blurEditor();
+        case '${actions.setContentHtml}':
+          zss_editor.setContentHTML(action.data);
+          break;
+        case '${actions.blurTitleEditor}':
+          zss_editor.blurTitleEditor();
+          break;
+        case '${actions.blurContentEditor}':
+          zss_editor.blurContentEditor();
           break;
         case '${actions.setBold}':
           zss_editor.setBold();
@@ -69,7 +75,7 @@ export const InjectedMessageHandler = `
           zss_editor.setSuperscript();
           break;
         case '${actions.setStrikethrough}':
-          zss_editor.setStrikethrough();
+          zss_editor.setStrikeThrough();
           break;
         case '${actions.setHR}':
           zss_editor.setHorizontalRule();
@@ -80,12 +86,19 @@ export const InjectedMessageHandler = `
         case '${actions.setOutdent}':
           zss_editor.setOutdent();
           break;
-        case '${actions.setPlaceholder}':
-          zss_editor.setPlaceholder();
+        case '${actions.setTitlePlaceholder}':
+          zss_editor.setTitlePlaceholder();
+          break;
+        case '${actions.setContentPlaceholder}':
+          zss_editor.setContentPlaceholder();
+          break;
+        case '${actions.getTitleHtml}':
+          var html = zss_editor.getTitleHTML();
+          WebViewBridge.send(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html}));
           break;
-        case '${actions.getHtml}':
-          const html = zss_editor.getHTML();
-          WebViewBridge.send(JSON.stringify({type: '${messages.HTML_RESPONSE}', data: html}));
+        case '${actions.getContentHtml}':
+          var html = zss_editor.getContentHTML();
+          WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));
           break;
       }
     };

src/ZSSRichTextEditor/ZSSRichTextEditor.js

@@ -36,23 +36,41 @@ zss_editor.updateScrollOffset = false;
 /**
  * The initializer function that must be called onLoad
  */
-zss_editor.init = function() {
 
+function setupTouchEndEnableEditing(editorId) {
+    $(`#${editorId}`).on('touchend', function(e) {
+        zss_editor.enabledEditingItems(e);
+        var clicked = $(e.target);
+        if (!clicked.hasClass('zs_active')) {
+            $('img').removeClass('zs_active');
+        }
+    });
+}
 
-    $('#zss_editor_content').on('touchend', function(e) {
-                                zss_editor.enabledEditingItems(e);
-                                var clicked = $(e.target);
-                                if (!clicked.hasClass('zs_active')) {
-                                $('img').removeClass('zs_active');
-                                }
-                                });
-    
+function setupSelectionChange(editorId) {
     $(document).on('selectionchange',function(e){
-                   zss_editor.calculateEditorHeightWithCaretPosition();
-                   zss_editor.setScrollPosition();
-                   zss_editor.enabledEditingItems(e);
-                   });
-    
+        zss_editor.calculateEditorHeightWithCaretPosition(editorId);
+        zss_editor.setScrollPosition();
+        zss_editor.enabledEditingItems(e);
+    });
+}
+
+function setupTouchEndFocus(editorId) {
+    $(window).on('touchend', function(e) {
+        if (!zss_editor.isDragging && (e.target.id == "zss_editor_footer"||e.target.nodeName.toLowerCase() == "html")) {
+            zss_editor.focusEditor(editorId);
+        }
+    });
+}
+
+zss_editor.init = function() {
+
+    setupTouchEndEnableEditing('zss_editor_title');
+    setupTouchEndEnableEditing('zss_editor_content');
+
+    setupSelectionChange('zss_editor_title');
+    setupSelectionChange('zss_editor_content');
+
     $(window).on('scroll', function(e) {
                  zss_editor.updateOffset();
                  });
@@ -67,12 +85,9 @@ zss_editor.init = function() {
     $(window).on('touchstart', function(e) {
                  zss_editor.isDragging = false;
                  });
-    $(window).on('touchend', function(e) {
-                 if (!zss_editor.isDragging && (e.target.id == "zss_editor_footer"||e.target.nodeName.toLowerCase() == "html")) {
-                 zss_editor.focusEditor();
-                 }
-                 });
 
+    setupTouchEndFocus('zss_editor_title');
+    setupTouchEndFocus('zss_editor_content');
 
     setTimeout(function() {
         WebViewBridge.send(JSON.stringify({type: 'ZSS_INITIALIZED'}))
@@ -113,24 +128,27 @@ zss_editor.setScrollPosition = function() {
     WebViewBridge.send(JSON.stringify({type: 'SCROLL', data: position}));
 }
 
-
-zss_editor.setPlaceholder = function(placeholder) {
-    
-    var editor = $('#zss_editor_content');
+function setPlaceholder(editorId, placeholder) {
+    var editor = $(`#${editorId}`);
     
     //set placeHolder
-	editor.attr("placeholder",placeholder);
+    editor.attr("placeholder",placeholder);
 	
     //set focus			 
-	editor.focusout(function(){
-        var element = $(this);        
+    editor.focusout(function(){
+        var element = $(this);
         if (!element.text().trim().length) {
             element.empty();
         }
     });
-	
-	
-    
+}
+
+zss_editor.setTitlePlaceholder = function(placeholder) {
+    setPlaceholder('zss_editor_title', placeholder);
+}
+
+zss_editor.setContentPlaceholder = function(placeholder) {
+    setPlaceholder('zss_editor_content', placeholder);
 }
 
 zss_editor.setFooterHeight = function(footerHeight) {
@@ -151,13 +169,13 @@ zss_editor.getCaretYPosition = function() {
     return topPosition;
 }
 
-zss_editor.calculateEditorHeightWithCaretPosition = function() {
+zss_editor.calculateEditorHeightWithCaretPosition = function(editorId) {
     
     var padding = 50;
     var c = zss_editor.getCaretYPosition();
-    var e = document.getElementById('zss_editor_content');
+    var e = document.getElementById(editorId);
     
-    var editor = $('#zss_editor_content');
+    var editor = $(`#${editorId}`);
     
     var offsetY = window.document.body.scrollTop;
     var height = zss_editor.contentHeight;
@@ -488,54 +506,73 @@ zss_editor.insertImageBase64String = function(imageBase64String, alt) {
     zss_editor.enabledEditingItems();
 }
 
-zss_editor.setHTML = function(html) {
-    var editor = $('#zss_editor_content');
+function setHTML(editorId, html) {
+    var editor = $(`#${editorId}`);
     editor.html(html);
 }
 
+zss_editor.setTitleHTML = function(html) {
+    setHTML('zss_editor_title', html);
+}
+
+zss_editor.setContentHTML = function(html) {
+    setHTML('zss_editor_content', html);
+}
+
 zss_editor.insertHTML = function(html) {
     document.execCommand('insertHTML', false, html);
     zss_editor.enabledEditingItems();
 }
 
-zss_editor.getHTML = function() {
-    
+function getHtml(editorId) {
     // Images
     var img = $('img');
     if (img.length != 0) {
         $('img').removeClass('zs_active');
         $('img').each(function(index, e) {
-                      var image = $(this);
-                      var zs_class = image.attr('class');
-                      if (typeof(zs_class) != "undefined") {
-                      if (zs_class == '') {
-                      image.removeAttr('class');
-                      }
-                      }
-                      });
+            var image = $(this);
+            var zs_class = image.attr('class');
+            if (typeof(zs_class) != "undefined") {
+                if (zs_class == '') {
+                    image.removeAttr('class');
+                }
+            }
+        });
     }
-    
+
     // Blockquote
     var bq = $('blockquote');
     if (bq.length != 0) {
         bq.each(function() {
-                var b = $(this);
-                if (b.css('border').indexOf('none') != -1) {
+            var b = $(this);
+            if (b.css('border').indexOf('none') != -1) {
                 b.css({'border': ''});
-                }
-                if (b.css('padding').indexOf('0px') != -1) {
+            }
+            if (b.css('padding').indexOf('0px') != -1) {
                 b.css({'padding': ''});
-                }
-                });
+            }
+        });
     }
-    
+
     // Get the contents
-    var h = document.getElementById("zss_editor_content").innerHTML;
-    
+    var h = document.getElementById(editorId).innerHTML;
+
     return h;
 }
 
-zss_editor.getText = function() {
+zss_editor.getTitleHTML = function() {
+    return getHtml("zss_editor_title");
+}
+
+zss_editor.getContentHTML = function() {
+    return getHtml("zss_editor_content");
+}
+
+zss_editor.getTitleText = function() {
+    return $('#zss_editor_title').text();
+}
+
+zss_editor.getContentText = function() {
     return $('#zss_editor_content').text();
 }
 
@@ -658,11 +695,11 @@ zss_editor.enabledEditingItems = function(e) {
     }
 }
 
-zss_editor.focusEditor = function() {
+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 = $('#zss_editor_content');
+    var editor = $(`#${editorId}`);
     var range = document.createRange();
     range.selectNodeContents(editor.get(0));
     range.collapse(false);
@@ -672,7 +709,12 @@ zss_editor.focusEditor = function() {
     editor.focus();
 }
 
-zss_editor.blurEditor = function() {
+
+zss_editor.blurTitleEditor = function() {
+    $('#zss_editor_title').blur();
+}
+
+zss_editor.blurContentEditor = function() {
     $('#zss_editor_content').blur();
 }
 

src/const.js

@@ -1,7 +1,10 @@
 export const actions = {
-  setHtml: 'SET_HTML',
-  getHtml: 'GET_HTML',
-  blurEditor: 'BLUR_EDITOR',
+  setTitleHtml: 'SET_TITLE_HTML',
+  setContentHtml: 'SET_CONTENT_HTML',
+  getTitleHtml: 'GET_TITLE_HTML',
+  getContentHtml: 'GET_CONTENT_HTML',
+  blurTitleEditor: 'BLUR_TITLE_EDITOR',
+  blurContentEditor: 'BLUR_CONTENT_EDITOR',
   setBold: 'SET_BOLD',
   setItalic: 'SET_ITALIC',
   setUnderline: 'SET_UNDERLINE',
@@ -25,11 +28,13 @@ export const actions = {
   setHR: 'SET_HR',
   setIndent: 'SET_INDENT',
   setOutdent: 'SET_OUTDENT',
-  setPlaceholder: 'SET_PLACEHOLDER'
+  setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
+  setContentPlaceholder: 'SET_TITLE_PLACEHOLDER'
 };
 
 export const messages = {
-  HTML_RESPONSE : 'HTML_RESPONSE',
+  TITLE_HTML_RESPONSE : 'TITLE_HTML_RESPONSE',
+  CONTENT_HTML_RESPONSE : 'CONTENT_HTML_RESPONSE',
   ZSS_INITIALIZED: 'ZSS_INITIALIZED',
   SCROLL: 'SCROLL',
   LOG: 'LOG'

src/editor.html

@@ -15,8 +15,8 @@
 
 	<body onLoad="zss_editor.init();">
 		<!-- ZSSRichTextEditor Editable Content -->
-		<div id="zss_editor_title" class="zs_editor_content" contenteditable="true" placeholder="title"></div>
+		<div id="zss_editor_title" class="zs_editor_content" contenteditable="true" placeholder=""></div>
 		<div><hr></div>
-		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder="content"></div>
+		<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder=""></div>
 	</body>
 </html>