Browse Source

added focus handlers + editor initialized callback

Artal Druk 8 years ago
parent
commit
d3379d3928
5 changed files with 59 additions and 12 deletions
  1. 13
    5
      example/app.js
  2. 15
    3
      src/RichTextEditor.js
  3. 6
    0
      src/WebviewMessageHandler.js
  4. 17
    0
      src/ZSSRichTextEditor/ZSSRichTextEditor.js
  5. 8
    4
      src/const.js

+ 13
- 5
example/app.js View File

22
               style={styles.richText}
22
               style={styles.richText}
23
               initialTitleHTML={'Title!!'}
23
               initialTitleHTML={'Title!!'}
24
               initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
24
               initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
25
+              editorInitializedCallback={() => this.onEditorInitialized()}
25
           />
26
           />
26
           <RichTextToolbar
27
           <RichTextToolbar
27
             getEditor={() => this.richtext}
28
             getEditor={() => this.richtext}
31
     );
32
     );
32
   }
33
   }
33
 
34
 
35
+  onEditorInitialized() {
36
+    this.setFocusHandlers();
37
+    this.getHTML();
38
+  }
39
+
34
   async getHTML() {
40
   async getHTML() {
35
     const titleHtml = await this.richtext.getTitleHtml();
41
     const titleHtml = await this.richtext.getTitleHtml();
36
     const contentHtml = await this.richtext.getContentHtml();
42
     const contentHtml = await this.richtext.getContentHtml();
37
     //alert(titleHtml + ' ' + contentHtml)
43
     //alert(titleHtml + ' ' + contentHtml)
38
   }
44
   }
39
 
45
 
40
-  componentDidMount() {
41
-
42
-    setTimeout(()=>{
43
-      this.getHTML();
44
-    }, 3000);
46
+  setFocusHandlers() {
47
+    this.richtext.setTitleFocusHandler(() => {
48
+      //alert('title focus');
49
+    });
50
+    this.richtext.setContentFocusHandler(() => {
51
+      //alert('content focus');
52
+    });
45
   }
53
   }
46
 }
54
 }
47
 
55
 

+ 15
- 3
src/RichTextEditor.js View File

13
   static propTypes = {
13
   static propTypes = {
14
     initialTitleHTML: PropTypes.string,
14
     initialTitleHTML: PropTypes.string,
15
     initialContentHTML: PropTypes.string,
15
     initialContentHTML: PropTypes.string,
16
+    editorInitializedCallback: PropTypes.func
16
   };
17
   };
17
 
18
 
18
   constructor(props) {
19
   constructor(props) {
50
         case messages.ZSS_INITIALIZED:
51
         case messages.ZSS_INITIALIZED:
51
           this.setTitleHTML(this.props.initialTitleHTML);
52
           this.setTitleHTML(this.props.initialTitleHTML);
52
           this.setContentHTML(this.props.initialContentHTML);
53
           this.setContentHTML(this.props.initialContentHTML);
54
+          this.props.editorInitializedCallback && this.props.editorInitializedCallback();
53
           break;
55
           break;
54
         case messages.LOG:
56
         case messages.LOG:
55
           console.log('FROM ZSS', message.data);
57
           console.log('FROM ZSS', message.data);
57
         case messages.SCROLL:
59
         case messages.SCROLL:
58
           this.webviewBridge.setNativeProps({contentOffset: {y: message.data}});
60
           this.webviewBridge.setNativeProps({contentOffset: {y: message.data}});
59
           break;
61
           break;
62
+        case messages.TITLE_FOCUSED:
63
+          this.titleFocusHandler && this.titleFocusHandler();
64
+          break;
65
+        case messages.CONTENT_FOCUSED:
66
+          this.contentFocusHandler && this.contentFocusHandler();
67
+          break;
60
       }
68
       }
61
-
62
     } catch(e) {
69
     } catch(e) {
63
       //alert('NON JSON MESSAGE');
70
       //alert('NON JSON MESSAGE');
64
     }
71
     }
228
     });
235
     });
229
   }
236
   }
230
 
237
 
231
-  async getHtml() {
232
-
238
+  setTitleFocusHandler(callbackHandler) {
239
+    this.titleFocusHandler = callbackHandler;
240
+    this._sendAction(actions.setTitleFocusHandler);
233
   }
241
   }
234
 
242
 
243
+  setContentFocusHandler(callbackHandler) {
244
+    this.contentFocusHandler = callbackHandler;
245
+    this._sendAction(actions.setContentFocusHandler);
246
+  }
235
 }
247
 }

+ 6
- 0
src/WebviewMessageHandler.js View File

100
           var html = zss_editor.getContentHTML();
100
           var html = zss_editor.getContentHTML();
101
           WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));
101
           WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html}));
102
           break;
102
           break;
103
+        case '${actions.setTitleFocusHandler}':
104
+          zss_editor.setTitleFocusHandler();
105
+          break;
106
+        case '${actions.setContentFocusHandler}':
107
+          zss_editor.setContentFocusHandler();
108
+          break;
103
       }
109
       }
104
     };
110
     };
105
   }
111
   }

+ 17
- 0
src/ZSSRichTextEditor/ZSSRichTextEditor.js View File

745
     
745
     
746
 }
746
 }
747
 
747
 
748
+function addFocusEvent(editorId, callbackHandler) {
749
+    var editor = $(`#${editorId}`);
750
+    editor.focus(callbackHandler);
751
+}
752
+
753
+zss_editor.setTitleFocusHandler = function() {
754
+    addFocusEvent('zss_editor_title', function() {
755
+        WebViewBridge.send(JSON.stringify({type: 'TITLE_FOCUSED'}))
756
+    });
757
+}
758
+
759
+zss_editor.setContentFocusHandler = function() {
760
+    addFocusEvent('zss_editor_content', function() {
761
+        WebViewBridge.send(JSON.stringify({type: 'CONTENT_FOCUSED'}))
762
+    });
763
+}
764
+
748
 //end
765
 //end

+ 8
- 4
src/const.js View File

29
   setIndent: 'SET_INDENT',
29
   setIndent: 'SET_INDENT',
30
   setOutdent: 'SET_OUTDENT',
30
   setOutdent: 'SET_OUTDENT',
31
   setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
31
   setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
32
-  setContentPlaceholder: 'SET_TITLE_PLACEHOLDER'
32
+  setContentPlaceholder: 'SET_TITLE_PLACEHOLDER',
33
+  setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
34
+  setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER'
33
 };
35
 };
34
 
36
 
35
 export const messages = {
37
 export const messages = {
36
-  TITLE_HTML_RESPONSE : 'TITLE_HTML_RESPONSE',
37
-  CONTENT_HTML_RESPONSE : 'CONTENT_HTML_RESPONSE',
38
+  TITLE_HTML_RESPONSE: 'TITLE_HTML_RESPONSE',
39
+  CONTENT_HTML_RESPONSE: 'CONTENT_HTML_RESPONSE',
38
   ZSS_INITIALIZED: 'ZSS_INITIALIZED',
40
   ZSS_INITIALIZED: 'ZSS_INITIALIZED',
39
   SCROLL: 'SCROLL',
41
   SCROLL: 'SCROLL',
40
-  LOG: 'LOG'
42
+  LOG: 'LOG',
43
+  TITLE_FOCUSED: 'TITLE_FOCUSED',
44
+  CONTENT_FOCUSED: 'CONTENT_FOCUSED'
41
 }
45
 }