From df314265664ced63c4f3cb810c2f7f3a0ff87192 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Wed, 13 Jul 2022 22:24:27 +0530
Subject: [PATCH] Add button to insert HTML snippets into WYSIWYG editor.

---
 frontend/src/components/Editor.vue     | 38 ++++++++++++++++++++++++--
 frontend/src/components/HTMLEditor.vue |  4 +++
 i18n/en.json                           |  1 +
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index b981f467..901bcfa7 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -60,6 +60,24 @@
           </footer>
         </div>
       </b-modal>
+
+      <b-modal scroll="keep" :width="750"
+        :aria-modal="true" :active.sync="isInsertHTMLVisible">
+        <div>
+          <section expanded class="modal-card-body preview">
+            <html-editor v-model="insertHTMLSnippet" />
+          </section>
+          <footer class="modal-card-foot has-text-right">
+            <b-button @click="onFormatRichtextHTML">{{ $t('campaigns.formatHTML') }}</b-button>
+            <b-button @click="() => { this.isInsertHTMLVisible = false; }">
+              {{ $t('globals.buttons.close') }}
+            </b-button>
+            <b-button @click="onInsertHTML" class="is-primary">
+              {{ $t('globals.buttons.insert') }}
+            </b-button>
+          </footer>
+        </div>
+      </b-modal>
     </template>
 
     <!-- raw html editor //-->
@@ -173,6 +191,8 @@ export default {
       isReady: false,
       isRichtextReady: false,
       isRichtextSourceVisible: false,
+      isInsertHTMLVisible: false,
+      insertHTMLSnippet: '',
       isTrackLink: false,
       richtextConf: {},
       richTextSourceBody: '',
@@ -214,6 +234,12 @@ export default {
             tooltip: 'Source code',
             onAction: this.onRichtextViewSource,
           });
+
+          editor.ui.registry.addButton('insert-html', {
+            icon: 'code-sample',
+            tooltip: 'Insert HTML',
+            onAction: this.onOpenInsertHTML,
+          });
         },
 
         browser_spellcheck: true,
@@ -229,7 +255,7 @@ export default {
         toolbar: `undo redo | formatselect styleselect fontsizeselect |
                   bold italic underline strikethrough forecolor backcolor subscript superscript |
                   alignleft aligncenter alignright alignjustify |
-                  bullist numlist table image | outdent indent | link hr removeformat |
+                  bullist numlist table image insert-html | outdent indent | link hr removeformat |
                   html fullscreen help`,
         fontsize_formats: '10px 11px 12px 14px 15px 16px 18px 24px 36px',
         skin: false,
@@ -285,12 +311,20 @@ export default {
       return u;
     },
 
-
     onRichtextViewSource() {
       this.richTextSourceBody = this.form.body;
       this.isRichtextSourceVisible = true;
     },
 
+    onOpenInsertHTML() {
+      this.isInsertHTMLVisible = true;
+    },
+
+    onInsertHTML() {
+      this.isInsertHTMLVisible = false;
+      window.tinymce.editors[0].execCommand('mceInsertContent', false, this.insertHTMLSnippet);
+    },
+
     onFormatRichtextHTML() {
       this.richTextSourceBody = this.beautifyHTML(this.richTextSourceBody);
     },
diff --git a/frontend/src/components/HTMLEditor.vue b/frontend/src/components/HTMLEditor.vue
index 7ab5077f..e744f099 100644
--- a/frontend/src/components/HTMLEditor.vue
+++ b/frontend/src/components/HTMLEditor.vue
@@ -55,6 +55,10 @@ export default {
 
       // Set the initial value.
       this.flask.updateCode(body);
+
+      this.$nextTick(() => {
+        document.querySelector('code-flask').shadowRoot.querySelector('textarea').focus();
+      });
     },
   },
 
diff --git a/i18n/en.json b/i18n/en.json
index 689d016f..fdb947c1 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -116,6 +116,7 @@
     "forms.selectHelp": "Select lists to add to the form.",
     "forms.title": "Forms",
     "globals.buttons.add": "Add",
+    "globals.buttons.insert": "Insert",
     "globals.buttons.addNew": "Add new",
     "globals.buttons.back": "Back",
     "globals.buttons.cancel": "Cancel",