Fix Heading Sync, add loading indicator

Fixes #1245
Fixes #1248
Fixes #1243

native/android/app/src/main/assets/editor.html

@@ -66,11 +66,13 @@
       height: 100%;
   }
 
-  #notes .ck-editor__editable p {
+  #notes .ck-editor__editable p, #notes .ck-editor__editable li {
       margin: 5px 0;
-      font-size: 14px;
+      font-size: 16px;
   }
   #notes .ck-editor__editable ul, #notes .ck-editor__editable ol {
+      padding: 0;
+      margin: 0;
       padding-left: 20px;
   }
   #notes .ck-editor__editable ul > li, #notes .ck-editor__editable ol > li {
@@ -78,16 +80,18 @@
   }
   #notes .ck-editor__editable h1 {
       margin: 2px 0;
-      font-size: 24px;
+      font-size: 22px;
       padding: 0;
   }
   #notes .ck-editor__editable h2 {
       margin: 7px 0;
       font-size: 20px;
+      padding: 0;
   }
   #notes .ck-editor__editable h3 {
       margin: 5px 0;
-      font-size: 16px;
+      font-size: 18px;
+      padding: 0;
   }
   #notes .drag-n-drop-focus,
   #notes .drag-n-drop-focus .ck-editor__editable {
@@ -106,12 +110,22 @@
     <input id="fake" type="text" style="height: 1px; border: 0; padding: 0; margin: 0; color: white; position: absolute; background: none!important;" />
     <div id="editor"> </div>
     <script>
+      var config = {
+        'heading': {
+          'options': [
+            { model: 'heading1', secTitle: 'H1', view: 'h1', title: '', class: 'ck-heading_heading1' },
+            { model: 'heading2', secTitle: 'H2', view: 'h2', title: '', class: 'ck-heading_heading2' },
+            { model: 'heading3', secTitle: 'H3', view: 'h3', title: '', class: 'ck-heading_heading3' },
+            { model: 'paragraph', secTitle: 'Aa', title: '', class: 'ck-heading_paragraph' }
+          ]
+        },
+        toolbar: []
+      };
+
       function init() {
           let initd = false;
           // ready to talk via postMessage
-          ClassicEditor.create(document.querySelector('#editor'), {
-            toolbar: []
-          }).then(editor => {
+          ClassicEditor.create(document.querySelector('#editor'), config).then(editor => {
 
             window.zss_editor = {};
 
@@ -164,7 +178,6 @@
             });
           })
             .catch(error => {
-              alert(error)
               console.error(error); // eslint-disable-line no-console
             });
       }

native/app/components/EditorPanel.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { StyleSheet, View, Dimensions } from 'react-native';
+import { StyleSheet, View, Dimensions, ProgressBarAndroid } from 'react-native';
 import { RichTextEditor } from '../react-native-zss-rich-text-editor/index';
 import { createNote, updateNote, deleteNotes, setFocusedNote } from '../actions';
-import { KINTO_LOADED } from '../utils/constants';
+import {COLOR_NOTES_BLUE, KINTO_LOADED} from '../utils/constants';
 
 import browser from '../browser';
 
@@ -22,6 +22,9 @@ class RichTextExample extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      isEditorLoading: true
+    };
     this.note = props.state.notes.find((note) => note.id === props.navigation.state.params.id);
     if (this.note && this.note.id) {
       this.props.dispatch(setFocusedNote(this.note.id));
@@ -69,11 +72,18 @@ class RichTextExample extends Component {
   }
 
   componentWillUnmount() {
+    this.setState({
+      isEditorLoading: true
+    });
     this.props.dispatch(setFocusedNote());
     browser.runtime.onMessage.removeListener(this._onLoadEvent);
   }
 
   onEditorInitialized() {
+    this.setState({
+      isEditorLoading: false
+    });
+    this.forceUpdate();
   }
 
   shouldComponentUpdate(nextProps) {
@@ -85,6 +95,10 @@ class RichTextExample extends Component {
   render() {
     return (
       <View style={styles.container}>
+        {this.state.isEditorLoading && <View style={{position: 'absolute', top: 30, left: 0, right: 0, bottom: 0, paddingBottom: 40, justifyContent: 'center', alignItems: 'center'}}>
+          <ProgressBarAndroid color={COLOR_NOTES_BLUE}
+                              styleAttr="Inverse"/>
+        </View>}
         <RichTextEditor
           ref={(r) => this.richtext = r}
           style={styles.richText}

native/app/react-native-zss-rich-text-editor/src/editor.html

@@ -66,11 +66,13 @@
       height: 100%;
   }
 
-  #notes .ck-editor__editable p {
+  #notes .ck-editor__editable p, #notes .ck-editor__editable li {
       margin: 5px 0;
-      font-size: 14px;
+      font-size: 16px;
   }
   #notes .ck-editor__editable ul, #notes .ck-editor__editable ol {
+      padding: 0;
+      margin: 0;
       padding-left: 20px;
   }
   #notes .ck-editor__editable ul > li, #notes .ck-editor__editable ol > li {
@@ -78,16 +80,18 @@
   }
   #notes .ck-editor__editable h1 {
       margin: 2px 0;
-      font-size: 24px;
+      font-size: 22px;
       padding: 0;
   }
   #notes .ck-editor__editable h2 {
       margin: 7px 0;
       font-size: 20px;
+      padding: 0;
   }
   #notes .ck-editor__editable h3 {
       margin: 5px 0;
-      font-size: 16px;
+      font-size: 18px;
+      padding: 0;
   }
   #notes .drag-n-drop-focus,
   #notes .drag-n-drop-focus .ck-editor__editable {
@@ -106,12 +110,22 @@
     <input id="fake" type="text" style="height: 1px; border: 0; padding: 0; margin: 0; color: white; position: absolute; background: none!important;" />
     <div id="editor"> </div>
     <script>
+      var config = {
+        'heading': {
+          'options': [
+            { model: 'heading1', secTitle: 'H1', view: 'h1', title: '', class: 'ck-heading_heading1' },
+            { model: 'heading2', secTitle: 'H2', view: 'h2', title: '', class: 'ck-heading_heading2' },
+            { model: 'heading3', secTitle: 'H3', view: 'h3', title: '', class: 'ck-heading_heading3' },
+            { model: 'paragraph', secTitle: 'Aa', title: '', class: 'ck-heading_paragraph' }
+          ]
+        },
+        toolbar: []
+      };
+
       function init() {
           let initd = false;
           // ready to talk via postMessage
-          ClassicEditor.create(document.querySelector('#editor'), {
-            toolbar: []
-          }).then(editor => {
+          ClassicEditor.create(document.querySelector('#editor'), config).then(editor => {
 
             window.zss_editor = {};
 
@@ -164,7 +178,6 @@
             });
           })
             .catch(error => {
-              alert(error)
               console.error(error); // eslint-disable-line no-console
             });
       }