new feature: Getting the current language

Author: justcaliturner

browser/js/code_editor.js

@@ -77,7 +77,7 @@ const CopyCode = {
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
     </svg>
   </div>
-    `,
+    `
 };
 
 // Dropdown
@@ -159,14 +159,14 @@ const Dropdown = {
         <slot></slot>
       </div>
     </transition>
-  </div>`,
+  </div>`
 };
 
 // CodeEditor
 const CodeEditor = {
   components: {
-    "copy-code": CopyCode,
-    dropdown: Dropdown,
+    'copy-code': CopyCode,
+    'dropdown': Dropdown
   },
   props: {
     modelValue: {
@@ -266,31 +266,31 @@ const CodeEditor = {
     highlight: {
       //vue2
       bind(el, binding) {
-        el.textContent = binding.value;
-        hljs.highlightElement(el);
+        el.textContent = binding.value
+        hljs.highlightElement(el)
       },
       componentUpdated(el, binding) {
-        el.textContent = binding.value;
-        hljs.highlightElement(el);
+        el.textContent = binding.value
+        hljs.highlightElement(el)
       },
       //vue3
       created(el, binding) {
-        el.textContent = binding.value;
-        hljs.highlightElement(el);
+        el.textContent = binding.value
+        hljs.highlightElement(el)
       },
       updated(el, binding) {
-        el.textContent = binding.value;
-        hljs.highlightElement(el);
-      },
-    },
+        el.textContent = binding.value
+        hljs.highlightElement(el)
+      }
+    }
   },
   data() {
     return {
       containerWidth: 0,
       staticValue: this.value,
       top: 0,
       left: 0,
-      languageClass: "hljs language-" + this.languages[0][0],
+      languageClass: 'hljs language-' + this.languages[0][0],
       mark:
         this.languages[0][1] === undefined
           ? this.languages[0][0]
@@ -302,16 +302,14 @@ const CodeEditor = {
   },
   watch: {
     value(value) {
-      this.staticValue = value;
-    },
+      this.staticValue = value
+    }
   },
   computed: {
     contentValue() {
-      return this.read_only
-        ? this.value
-        : this.modelValue === undefined
-        ? this.staticValue + "\n"
-        : this.modelValue + "\n";
+      return this.read_only ?
+        this.value : this.modelValue === undefined ?
+          this.staticValue + '\n' : this.modelValue + '\n'
     },
     canScroll() {
       return this.height == "auto" ? false : true;
@@ -329,7 +327,8 @@ const CodeEditor = {
   methods: {
     changeLang(lang) {
       this.mark = lang[1] === undefined ? lang[0] : lang[1];
-      this.languageClass = "language-" + lang[0];
+      this.languageClass = 'language-' + lang[0];
+      this.$emit('lang', lang[0]);
     },
     calcContainerWidth(event) {
       //  calculating the textarea's width while typing for syncing the width between textarea and highlight area
@@ -344,27 +343,28 @@ const CodeEditor = {
     },
     resize() {
       // listen to the change of the textarea's width to resize the highlight area
-      const resize = new ResizeObserver((entries) => {
+      const resize = new ResizeObserver(entries => {
         for (let entry of entries) {
           const obj = entry.contentRect;
-          this.containerWidth = obj.width + 40; // 40 is the padding
+          this.containerWidth = obj.width + 40 // 40 is the padding
         }
       });
       // only the textarea is rendered the listener will run
       if (this.$refs.textarea) {
         resize.observe(this.$refs.textarea);
       }
-    },
+    }
   },
   mounted() {
+    this.$emit('lang', lang[0]);
     this.$nextTick(function () {
       this.content =
         this.modelValue === undefined ? this.staticValue : this.modelValue;
     });
-    this.resize();
+    this.resize()
   },
   updated() {
-    this.$emit("input", this.staticValue);
+    this.$emit('input', this.staticValue)
     this.$nextTick(function () {
       this.content =
         this.modelValue === undefined ? this.staticValue : this.modelValue;
@@ -466,5 +466,5 @@ const CodeEditor = {
       </pre>
     </div>
   </div>
-`,
-};
+`
+}

browser/js/dist/code_editor.prod.js

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><link rel="icon" href="/favicon.ico"><title>simple-code-editor-website</title><link href="/css/app.aa120c08.css" rel="preload" as="style"><link href="/js/app.21049e79.js" rel="preload" as="script"><link href="/js/chunk-vendors.0d6d9bd9.js" rel="preload" as="script"><link href="/css/app.aa120c08.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but simple-code-editor-website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.0d6d9bd9.js"></script><script src="/js/app.21049e79.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><link rel="icon" href="/favicon.ico"><title>simple-code-editor-website</title><link href="/css/app.4a63a2ad.css" rel="preload" as="style"><link href="/js/app.829be612.js" rel="preload" as="script"><link href="/js/chunk-vendors.27c4acf8.js" rel="preload" as="script"><link href="/css/app.4a63a2ad.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but simple-code-editor-website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.27c4acf8.js"></script><script src="/js/app.829be612.js"></script></body></html>