#5938 -- Fix Codemirror rendering errors on Branding page.

frontend/vue/components/Common/CodemirrorTextarea.vue

@@ -1,61 +1,83 @@
 <template>
-    <textarea ref="textarea" spellcheck="false" :value="value" @input="this.$emit('input', $event.target.value)"/>
+    <textarea ref="textarea" spellcheck="false" v-model="textValue"/>
 </template>
 
-<script>
+<script setup>
 import Codemirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/css/css.js';
 import 'codemirror/mode/javascript/javascript.js';
+import {get, set, templateRef, useVModel} from "@vueuse/core";
+import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
 
-export default {
-    name: 'CodemirrorTextarea',
-    props: {
-        value: String,
-        mode: String
-    },
-    data() {
-        return {
-            content: null,
-            codemirror: null
-        };
-    },
-    watch: {
-        value(newVal) {
-            newVal = newVal || '';
-            const cm_value = this.codemirror.getValue();
-            if (newVal !== cm_value) {
-                this.content = newVal;
-                this.codemirror.setValue(this.content);
-            }
+const props = defineProps({
+    modelValue: String,
+    mode: String
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const textValue = useVModel(props, 'modelValue', emit);
+
+const $textarea = templateRef('textarea');
+const content = ref(null);
+let codemirror = null;
+
+watch(textValue, (newVal) => {
+    newVal = newVal || '';
+
+    const cm_value = (codemirror !== null)
+        ? codemirror.getValue()
+        : null;
+
+    if (newVal !== cm_value) {
+        set(content, newVal);
+
+        if (codemirror !== null) {
+            codemirror.setValue(newVal);
         }
-    },
-    mounted() {
-        this.codemirror = Codemirror.fromTextArea(this.$refs.textarea, {
+    }
+});
+
+const refresh = () => {
+    nextTick(() => {
+        if (codemirror !== null) {
+            codemirror.refresh();
+        }
+    });
+};
+
+onMounted(() => {
+    codemirror = Codemirror.fromTextArea(
+        get($textarea),
+        {
             lineNumbers: true,
             theme: 'default',
-            mode: this.mode
-        });
+            mode: props.mode
+        }
+    );
 
-        this.content = this.value || '';
-        this.codemirror.setValue(this.content);
+    set(content, props.value || '');
 
-        this.codemirror.on('change', cm => {
-            this.$emit('input', cm.getValue());
-        });
+    codemirror.setValue(get(content));
+    codemirror.on('change', cm => {
+        emit('update:modelValue', cm.getValue());
+    });
 
-        this.refresh();
-    },
-    beforeDestroy() {
-        const element = this.codemirror.doc.cm.getWrapperElement()
-        element && element.remove && element.remove()
-    },
-    methods: {
-        refresh() {
-            this.$nextTick(() => {
-                this.codemirror.refresh()
-            })
-        },
-    }
-}
+    refresh();
+});
+
+onUnmounted(() => {
+    const element = codemirror.doc.cm.getWrapperElement();
+    element && element.remove && element.remove();
+});
+</script>
+
+<script>
+export default {
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+};
 </script>