fix theme loading in editor

2025-12-21 14:09:34 +01:00 · 2020-12-07 10:55:53 +05:00
parent c31c0e4cf2
commit 4c725cd15d
6 changed files with 249 additions and 100 deletions
--- a/apps/mobile/android/app/src/main/assets/listeners.js
+++ b/apps/mobile/android/app/src/main/assets/listeners.js
@@ -296,3 +296,144 @@ function attachEditorListeners() {
    }, 1000);
  });
 }
+
+function attachMessageListener() {
+  titleInput = isTablet ? 'titleInput' : 'simpleTitleInput';
+  infoBar = isTablet ? '.info-bar' : '.info-bar-alt';
+
+  document.addEventListener('message', (data) => {
+    let message = JSON.parse(data.data);
+    let type = message.type;
+    let value;
+    if (message.value && message.type !== 'nomenu') {
+      value = message.value;
+    } else {
+      value = message.value;
+    }
+    switch (type) {
+      case 'reset': {
+        editor.history.clear();
+        editor.setText('', 'api');
+        document.getElementById(titleInput).value = '';
+        document.getElementById(titleInput).blur();
+        editor.blur();
+        document.getElementById(titleInput).blur();
+        window.blur();
+
+        info = document.querySelector(infoBar);
+        info.querySelector('#infodate').innerText = '';
+        info.querySelector('#infosaved').innerText = '';
+        info.querySelector('#infowords').innerText = '';
+        autosize();
+        break;
+      }
+      case 'keyboard':
+        var range = editor.getSelection();
+        if (range) {
+          if (range.length == 0) {
+            var bounds = editor.getBounds(range.index, range.index);
+
+            setTimeout(() => {
+              document
+                .querySelector('.app-main')
+                .scrollTo({top: bounds.top, behavior: 'smooth'});
+            }, 200);
+          }
+        }
+        break;
+      case 'blur':
+        document.getElementById(titleInput).blur();
+        editor.blur();
+        window.blur();
+        break;
+      case 'undo':
+        editor.history.undo();
+        break;
+      case 'redo':
+        editor.history.redo();
+        break;
+      case 'clearHistory':
+        editor.history.clear();
+        break;
+      case 'dateEdited':
+        linfo = document.querySelector(infoBar);
+        info.querySelector('#infodate').innerText = value;
+        break;
+      case 'saving':
+        info = document.querySelector(infoBar);
+        info.querySelector('#infosaved').innerText = value;
+        break;
+      case 'text':
+        editor.setText(value, 'api');
+
+        setTimeout(() => {
+          info = document.querySelector(infoBar);
+          info.querySelector('#infowords').innerText =
+            editor.getText().split(' ').length + ' words';
+            info.querySelector('#infosaved').innerText = 'Saved';
+        }, 100);
+
+        break;
+      case 'clearEditor':
+        editor.setText('', 'api');
+        break;
+      case 'clearTitle':
+        document.getElementById(titleInput).value = '';
+        break;
+      case 'focusEditor':
+        editor.focus();
+        break;
+      case 'focusTitle':
+        document.getElementById(titleInput).focus();
+        autosize();
+        break;
+      case 'nomenu':
+        let isenabled = value;
+        //let width = window.innerWidth;
+        let titleIn = document.getElementById('titlebar');
+        if (isenabled) {
+          //titleIn.style.width = width;
+          titleIn.style['padding-left'] = 12;
+          titleIn.style['padding-right'] = window.innerWidth * 0.4;
+        } else {
+          //titleIn.style.width = width - 120;
+          titleIn.style['padding-left'] = 60;
+          titleIn.style['padding-right'] = window.innerWidth * 0.4;
+        }
+        break;
+      case 'title':
+        document.getElementById(titleInput).value = JSON.parse(data.data).value;
+        autosize();
+        break;
+      case 'theme':
+        pageTheme.colors = value;
+        setTheme();
+        break;
+
+      case 'delta':
+        const content = value;
+        editor.setContents(content, 'api');
+
+        setTimeout(() => {
+          info = document.querySelector(infoBar);
+          info.querySelector('#infowords').innerText =
+            editor.getText().split(' ').length + ' words';
+            info.querySelector('#infosaved').innerText = 'Saved';
+
+          document.body.scrollTop = 0; // For Safari
+          document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+        }, 100);
+        autosize();
+        break;
+      case 'html':
+        editor.setContents(editor.clipboard.convert(value, 'api'), 'silent');
+        /*  setTimeout(() => {
+                   editor.setSelection(editor.getText().length - 1, 0);
+                 }, 0); */
+        break;
+      default:
+        break;
+    }
+  });
+
+}
--- a/apps/mobile/android/app/src/main/assets/plaineditor.html
+++ b/apps/mobile/android/app/src/main/assets/plaineditor.html
@@ -23,15 +23,16 @@
    <div id="toolbar"></div>
 </body>

-<script src="constants.js">
-</script>
-<script src="module.js">
-</script>
-<script src="quill.js">
-</script>
-<script src="listeners.js">
-</script>
-<script src="image-resize.min.js"></script>
+<script>
+    let editor;
+    let isTablet = false;
+    </script>
+<script src="quill.js"></script>
+<script src="constants.js"></script>
+<script src="module.js"></script>
+<script src="magic-url.js"></script>
+<script src="listeners.js"></script>
+<script src="image-resize.min.js"></script>  

 <script>
    let editor;
--- a/apps/mobile/android/app/src/main/assets/texteditor.html
+++ b/apps/mobile/android/app/src/main/assets/texteditor.html
@@ -60,11 +60,10 @@
    let isTablet = false;
    </script>
 <script src="quill.js"></script>
+<script src="constants.js"></script>
 <script src="module.js"></script>
 <script src="magic-url.js"></script>
-<script src="constants.js"></script>
 <script src="listeners.js"></script>
-
 <script src="image-resize.min.js"></script>

 <script>
@@ -446,7 +445,7 @@
            this.quill.format("script", value, "user");
        },
    };
-
+    attachMessageListener();
    function loadAction(premium, tab) {
        isTablet = tab;
        setFonts();
@@ -515,9 +514,9 @@
        Quill.register(Font, true);

        attachTitleInputListeners();
-        setTheme();
        attachEditorListeners();
        fixDropdownMenuLocations();
+        setTheme();
    }
 </script>

--- a/apps/mobile/html/Web.bundle/site/index.html
+++ b/apps/mobile/html/Web.bundle/site/index.html
@@ -475,7 +475,7 @@
    },
  };

-
+  attachMessageListener();
  function loadAction(premium, tab) {
    isTablet = tab;
    let titleIn = document.getElementById('titlebar');
@@ -550,9 +550,9 @@

    addLinkMatcher();
    attachTitleInputListeners();
-    setTheme();
    attachEditorListeners();
    fixDropdownMenuLocations();
+    setTheme();
  }

 </script>
--- a/apps/mobile/html/Web.bundle/site/listeners.js
+++ b/apps/mobile/html/Web.bundle/site/listeners.js
@@ -85,6 +85,88 @@ function attachEditorListeners() {
  titleInput = isTablet ? 'titleInput' : 'simpleTitleInput';
  infoBar = isTablet ? '.info-bar' : '.info-bar-alt';

+ 
+
+  function isWhitespace(ch) {
+    let whiteSpace = false;
+    if (ch === ' ' || ch === '\t' || ch === '\n') {
+      whiteSpace = true;
+    }
+    return whiteSpace;
+  }
+
+  let deltaTimeout = null;
+  let historyTimeout = null;
+
+  editor.on('text-change', function (delta, oldDelta, source) {
+    var regex = /https?:\/\/[^\s]+$/;
+    if (source === 'api') return;
+    if (
+      delta.ops.length === 2 &&
+      delta.ops[0].retain &&
+      isWhitespace(delta.ops[1].insert)
+    ) {
+      var endRetain = delta.ops[0].retain;
+      var text = editor.getText().substr(0, endRetain);
+      var match = text.toLowerCase().match(regex);
+
+      if (match !== null) {
+        var url = match[0];
+
+        var ops = [];
+        if (endRetain > url.length) {
+          ops.push({retain: endRetain - url.length});
+        }
+
+        ops = ops.concat([
+          {delete: url.length},
+          {insert: url, attributes: {link: url}},
+        ]);
+
+        editor.updateContents({
+          ops: ops,
+        });
+      }
+    }
+    info = document.querySelector(infoBar);
+    let infowords = info.querySelector('#infowords');
+    if (infowords) {
+      infowords.innerText =
+        editor.getText().split(' ').length + ' words';
+    }
+
+    if (deltaTimeout) {
+      clearTimeout(deltaTimeout);
+      deltaTimeout = null;
+    }
+
+    deltaTimeout = setTimeout(() => {
+      let msg = JSON.stringify({
+        data: editor.getContents().ops,
+        type: 'delta',
+      });
+      window.ReactNativeWebView.postMessage(msg);
+    }, 50);
+
+    if (historyTimeout) {
+      clearTimeout(historyTimeout);
+      historyTimeout = null;
+    }
+
+    historyTimeout = setTimeout(() => {
+      let history = JSON.stringify({
+        type: 'history',
+        undo: editor.history.stack.undo.length,
+        redo: editor.history.stack.redo.length,
+      });
+      window.ReactNativeWebView.postMessage(history);
+    }, 1000);
+  });
+}
+
+function attachMessageListener() {
+  titleInput = isTablet ? 'titleInput' : 'simpleTitleInput';
+  infoBar = isTablet ? '.info-bar' : '.info-bar-alt';  
  window.addEventListener('message', (data) => {
    let message = JSON.parse(data.data);
    let type = message.type;
@@ -219,80 +301,4 @@ function attachEditorListeners() {
        break;
    }
  });
-
-  function isWhitespace(ch) {
-    let whiteSpace = false;
-    if (ch === ' ' || ch === '\t' || ch === '\n') {
-      whiteSpace = true;
-    }
-    return whiteSpace;
-  }
-
-  let deltaTimeout = null;
-  let historyTimeout = null;
-
-  editor.on('text-change', function (delta, oldDelta, source) {
-    var regex = /https?:\/\/[^\s]+$/;
-    if (source === 'api') return;
-    if (
-      delta.ops.length === 2 &&
-      delta.ops[0].retain &&
-      isWhitespace(delta.ops[1].insert)
-    ) {
-      var endRetain = delta.ops[0].retain;
-      var text = editor.getText().substr(0, endRetain);
-      var match = text.toLowerCase().match(regex);
-
-      if (match !== null) {
-        var url = match[0];
-
-        var ops = [];
-        if (endRetain > url.length) {
-          ops.push({retain: endRetain - url.length});
-        }
-
-        ops = ops.concat([
-          {delete: url.length},
-          {insert: url, attributes: {link: url}},
-        ]);
-
-        editor.updateContents({
-          ops: ops,
-        });
-      }
-    }
-    info = document.querySelector(infoBar);
-    let infowords = info.querySelector('#infowords');
-    if (infowords) {
-      infowords.innerText =
-        editor.getText().split(' ').length + ' words';
-    }
-
-    if (deltaTimeout) {
-      clearTimeout(deltaTimeout);
-      deltaTimeout = null;
-    }
-
-    deltaTimeout = setTimeout(() => {
-      let msg = JSON.stringify({
-        data: editor.getContents().ops,
-        type: 'delta',
-      });
-      window.ReactNativeWebView.postMessage(msg);
-    }, 50);
-
-    if (historyTimeout) {
-      clearTimeout(historyTimeout);
-      historyTimeout = null;
-    }
-
-    historyTimeout = setTimeout(() => {
-      let history = JSON.stringify({
-        type: 'history',
-        undo: editor.history.stack.undo.length,
-        redo: editor.history.stack.redo.length,
-      });
-      window.ReactNativeWebView.postMessage(history);
-    }, 1000);
-  });
 }
--- a/apps/mobile/html/Web.bundle/site/plaineditor.html
+++ b/apps/mobile/html/Web.bundle/site/plaineditor.html
@@ -22,15 +22,19 @@
    <div id="editor"></div>
    <div id="toolbar"></div>
 </body>
-
-<script src="constants.js"></script>
-<script src="listeners.js"></script>
-<script src="module.js"></script>
-<script src="quill.js"></script>
-<script src="image-resize.min.js"></script>
 <script>
    let editor;
-
+    let isTablet = false;
+    </script>
+<script src="quill.js"></script>
+<script src="constants.js"></script>
+<script src="module.js"></script>
+<script src="magic-url.js"></script>
+<script src="listeners.js"></script>
+<script src="image-resize.min.js"></script>   
+<script>
+    let editor;
+    attachMessageListener();
    function loadAction() {

        setFonts();
@@ -66,8 +70,6 @@
        setTheme();
        attachEditorListeners();
    }
-
-    loadAction()
 </script>