From a1a9f3ac6abac3170559fb542b961fd46e63aba1 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sun, 26 Sep 2021 20:13:04 +0530
Subject: [PATCH] Fix incorrect i18n variable in notification e-mail.

---
 frontend/src/components/HTMLEditor.vue | 59 ++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 frontend/src/components/HTMLEditor.vue

diff --git a/frontend/src/components/HTMLEditor.vue b/frontend/src/components/HTMLEditor.vue
new file mode 100644
index 00000000..a521755d
--- /dev/null
+++ b/frontend/src/components/HTMLEditor.vue
@@ -0,0 +1,59 @@
+<template>
+  <div ref="htmlEditor" id="html-editor" class="html-editor"></div>
+</template>
+
+<script>
+import CodeFlask from 'codeflask';
+import { colors } from '../constants';
+
+export default {
+  props: {
+    value: String,
+    disabled: Boolean,
+  },
+
+  data() {
+    return {
+      flask: null,
+    };
+  },
+
+  methods: {
+    initHTMLEditor(body) {
+      // CodeFlask editor is rendered in a shadow DOM tree to keep its styles
+      // sandboxed away from the global styles.
+      const el = document.createElement('code-flask');
+      el.attachShadow({ mode: 'open' });
+      el.shadowRoot.innerHTML = `
+        <style>
+          .codeflask .codeflask__flatten { font-size: 15px; }
+          .codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
+          .codeflask .token.tag { font-weight: bold; }
+          .codeflask .token.attr-name { color: #111; }
+          .codeflask .token.attr-value { color: ${colors.primary} !important; }
+        </style>
+        <div id="area"></area>
+      `;
+      this.$refs.htmlEditor.appendChild(el);
+
+      this.flask = new CodeFlask(el.shadowRoot.getElementById('area'), {
+        language: 'html',
+        lineNumbers: false,
+        styleParent: el.shadowRoot,
+        readonly: this.disabled,
+      });
+
+      this.flask.onUpdate((b) => {
+        this.$emit('input', b);
+      });
+
+      // Set the initial value.
+      this.flask.updateCode(body);
+    },
+  },
+
+  mounted() {
+    this.initHTMLEditor(this.$props.value || '');
+  },
+};
+</script>