synchronize html editor and md editor with the compose_body textarea …

…and adjust their appearance to match bs styling used
Yannick243 · May 13, 2024 · 6d0e50a · 6d0e50a
1 parent 5b15846
commit 6d0e50a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/modules/smtp/assets/markdown/editor.js b/modules/smtp/assets/markdown/editor.js
@@ -7224,7 +7224,7 @@ Editor.prototype.render = function(el) {
     tabSize: '2',
     indentWithTabs: true,
     lineNumbers: false,
-    autofocus: true,
+    autofocus: false,
     extraKeys: keyMaps
   });
 

diff --git a/modules/smtp/modules.php b/modules/smtp/modules.php
@@ -1085,7 +1085,7 @@ protected function output() {
         if ($html == 1) {
             $res .= '<script type="text/javascript" src="'.WEB_ROOT.'modules/smtp/assets/kindeditor/kindeditor-all-min.js"></script>'.
                 '<link href="'.WEB_ROOT.'modules/smtp/assets/kindeditor/themes/default/default.css" rel="stylesheet" />'.
-                '<script type="text/javascript">KindEditor.ready(function(K) { K.create("#compose_body", {items:'.
+                '<script type="text/javascript">KindEditor.ready(function(K) { window.kindEditor = K.create("#compose_body", {items:'.
                 "['formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',".
                 "'italic', 'underline', 'strikethrough', 'lineheight', 'table', 'hr', 'pagebreak', 'link', 'unlink',".
                 "'justifyleft', 'justifycenter', 'justifyright',".
@@ -1131,14 +1131,14 @@ protected function output() {
                 '</div>'.
                 '<div class="form-floating mb-3">'.
                     '<textarea id="compose_body" name="compose_body" class="compose_body form-control" placeholder="'.$this->trans('Message').'">'.$this->html_safe($body).'</textarea>'.
-                    '<label for="compose_body">'.$this->trans('Message').'</label>'.
+                    (!$html ? '<label for="compose_body">'.$this->trans('Message').'</label>': '').
                 '</div>'.
                 '<div class="form-check mb-3"><input value="1" name="compose_delivery_receipt" id="compose_delivery_receipt" type="checkbox" class="form-check-input" /><label for="compose_delivery_receipt" class="form-check-label">'.$this->trans('Request a delivery receipt').'</label></div>';
         if ($html == 2) {
             $res .= '<link href="'.WEB_ROOT.'modules/smtp/assets/markdown/editor.css" rel="stylesheet" />'.
                 '<script type="text/javascript" src="'.WEB_ROOT.'modules/smtp/assets/markdown/editor.js"></script>'.
                 '<script type="text/javascript" src="'.WEB_ROOT.'modules/smtp/assets/markdown/marked.js"></script>'.
-                '<script type="text/javascript">var editor = new Editor(); editor.render();</script>';
+                '<script type="text/javascript">window.mdEditor = new Editor(); mdEditor.render();</script>';
         }
         $res .= '<table class="uploaded_files">';
 

diff --git a/modules/smtp/site.css b/modules/smtp/site.css
@@ -15,7 +15,7 @@
 .smtp_server_setup .content_title { cursor: pointer; }
 /* .compose_server, .compose_server option { width: 100%; padding: 5px; margin: 5px; } */
 /* .compose_attach_button, .smtp_save, .smtp_reset { cursor: pointer; margin-left: 10px; float: right; margin-top: 10px; } */
-.ke-container { margin-left: 5px !important; border-radius: 3px 3px 3px; margin-top: 5px !important; margin-bottom: 5px !important; padding-right: 0px !important; width: 100% !important; }
+.ke-container { border-radius: var(--bs-border-radius); margin-top: 5px !important; margin-bottom: 5px !important; padding-right: 0px !important; width: 100% !important; }
 .recipient_fields { display: none; }
 .compose_attach_file { width: 0px; opacity: 0; }
 .uploaded_files { width: 1%;  margin-left: 5px; margin-top: 5px; margin-bottom: 5px; }
@@ -25,9 +25,9 @@
 .draft_title { top: 10px; right: 10px; }
 .draft_list a { font-size: 115%; padding-right: 10px; }
 .draft_list img { float: right; opacity: .4; vertical-align: -3px; cursor: pointer; }
-.CodeMirror { border: solid 1px #ddd; border-top: none; margin-left: 5px; border-radius: 0px 0px 3px 3px; width: 100%; }
+.CodeMirror { border: solid 1px #ddd; border-top: none; border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); width: 100%; }
 .editor-toolbar * { border: none !important; }
-.editor-toolbar { z-index: 0; margin-left: 5px; margin-top: 10px; border: solid 1px #ccc; width: 100%; border-radius: 3px 3px 0px 0px; }
+.editor-toolbar { z-index: 0; margin-top: 10px; border: solid 1px #ccc; width: 100%; border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); }
 .editor-statusbar { border-top: none !important; }
 .editor-toolbar:before, .editor-toolbar:after { background: none !important; }
 .meter { height: 5px; position: relative; background: #ede8e6; overflow: hidden;}

diff --git a/modules/smtp/site.js b/modules/smtp/site.js
@@ -454,6 +454,14 @@ $(function () {
         });
 
         $('.smtp_send_placeholder').on("click", function (e) {
+            if (window.kindEditor) {
+                kindEditor.sync();
+            }
+
+            if (window.mdEditor) {
+                mdEditor.codemirror.save();
+            }
+
             const body = $('.compose_body').val().trim();
             const subject = $('.compose_subject').val().trim();