From 35c32000f8219daa64c50adb83ebf620e114f7e0 Mon Sep 17 00:00:00 2001
From: Ishav Sohal <ishav.sohal@mail.utoronto.ca>
Date: Fri, 22 Nov 2024 14:53:48 -0500
Subject: [PATCH] render style tags as plain text in md editor

---
 src/components/text-editor.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/text-editor.vue b/src/components/text-editor.vue
index 5f6494f4..0cddb988 100644
--- a/src/components/text-editor.vue
+++ b/src/components/text-editor.vue
@@ -8,6 +8,8 @@
             height="400px"
             left-toolbar="undo redo clear | h bold italic strikethrough quote subsuper | ul ol table hr | addLink image code | save"
             :toolbar="toolbar"
+            @change="escapeStyleTags"
+            ref="textEditor"
         ></v-md-editor>
     </div>
 </template>
@@ -117,6 +119,19 @@ export default class TextEditorV extends Vue {
             this.panel.customStyles = (this.panel.customStyles || '').replace('text-align: left !important;', '');
         }
     }
+
+    escapeStyleTags(text: string, html: string): void {
+        const styleRegex = /<\/?\s*style\s*\/?>/gi;
+        if (this.$refs.textEditor?.text){
+            const regexMatch = text.match(styleRegex);
+            if (regexMatch) {
+                const escapedText = text.replaceAll(styleRegex, (match) => {
+                    return match.split(' ').join('').replace('<', '‹').replace('>', '›').toLowerCase();
+                });
+                this.$refs.textEditor.text = escapedText;
+            }
+        }
+    }
 }
 </script>