Refactor HTML formatting and indentation in richtext -> HTML on UI.

knadh · Sep 23, 2021 · 0dc9e78 · 0dc9e78
1 parent b6f68b8
commit 0dc9e78
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "core-js": "^3.12.1",
     "dayjs": "^1.10.4",
     "humps": "^2.0.1",
+    "indent.js": "^0.3.5",
     "qs": "^6.10.1",
     "textversionjs": "^1.1.3",
     "tinymce": "^5.9.2",

diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
@@ -73,6 +73,7 @@
 <script>
 import CodeFlask from 'codeflask';
 import TurndownService from 'turndown';
+import { indent } from 'indent.js';
 
 import 'tinymce';
 import 'tinymce/icons/default';
@@ -253,9 +254,13 @@ export default {
     },
 
     beautifyHTML(str) {
-      const div = document.createElement('div');
-      div.innerHTML = str.trim();
-      return this.formatHTMLNode(div, 0).innerHTML;
+      // Pad all tags with linebreaks.
+      let s = this.trimLines(str.replace(/(<([^>]+)>)/ig, '\n$1\n'), true);
+
+      // Remove extra linebreaks.
+      s = s.replace(/\n+/g, '\n');
+
+      return indent.html(s, { tabString: '  ' }).trim();
     },
 
     formatHTMLNode(node, level) {
@@ -348,7 +353,7 @@ export default {
         this.form.body = this.form.body.replace(/\n/ig, '<br>\n');
       } else if (from === 'richtext' && to === 'html') {
         // richtext => html
-        this.form.body = this.trimLines(this.beautifyHTML(this.form.body), false);
+        this.form.body = this.beautifyHTML(this.form.body);
       } else if (from === 'markdown' && (to === 'richtext' || to === 'html')) {
         // markdown => richtext, html.
         this.$api.convertCampaignContent({

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -5747,6 +5747,11 @@ indent-string@^3.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
   integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
 
+indent.js@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/indent.js/-/indent.js-0.3.5.tgz#e2fefa04043b7be69c33635dc9e0cfb9cc7c4d7f"
+  integrity sha512-wiTA5fEz0kc8tHzY6CSujl/k62WVNvTxAZzmPe5V7MYxRCeGGibPCIYWYBzPp/bcJh3CXUO/8qrTrO/x9s1i2Q==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"