From 19c80562687f3e57ea7359e12bc7a87594947ae9 Mon Sep 17 00:00:00 2001
From: Zachary King <zchrykng@fastmail.com>
Date: Mon, 20 Jan 2025 10:12:14 -0500
Subject: [PATCH 1/2] [WIP] Swap in codemirror for prism

---
 frontend/src/pages/Compose.vue |  85 ++++--------
 frontend/src/styles/main.scss  |  13 --
 package.json                   |   5 +
 pnpm-lock.yaml                 | 242 +++++++++++++++++++++++++++++++++
 4 files changed, 277 insertions(+), 68 deletions(-)

diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 5c632c94..8b37c824 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -167,7 +167,15 @@
 
                     <!-- YAML editor -->
                     <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
-                        <prism-editor
+                        <CodeMirror
+                            ref="editor"
+                            v-model="stack.composeYAML"
+                            :dark="false"
+                            :extensions="[oneDarkTheme, yaml()]"
+                            
+                            basic
+                        ></CodeMirror>
+                        <!-- <prism-editor
                             ref="editor"
                             v-model="stack.composeYAML"
                             class="yaml-editor"
@@ -176,7 +184,7 @@
                             @input="yamlCodeChange"
                             @focus="editorFocus = true"
                             @blur="editorFocus = false"
-                        ></prism-editor>
+                        ></prism-editor> -->
                     </div>
                     <div v-if="isEditMode" class="mb-3">
                         {{ yamlError }}
@@ -186,7 +194,14 @@
                     <div v-if="isEditMode">
                         <h4 class="mb-3">.env</h4>
                         <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
-                            <prism-editor
+                            <CodeMirror
+                                ref="editor"
+                                v-model="stack.composeENV"
+                                :dark="false"
+                                :extensions="[oneDarkTheme]"
+                                basic
+                            ></CodeMirror>
+                            <!-- <prism-editor
                                 ref="editor"
                                 v-model="stack.composeENV"
                                 class="env-editor"
@@ -194,7 +209,7 @@
                                 line-numbers :readonly="!isEditMode"
                                 @focus="editorFocus = true"
                                 @blur="editorFocus = false"
-                            ></prism-editor>
+                            ></prism-editor> -->
                         </div>
                     </div>
 
@@ -237,13 +252,12 @@
 </template>
 
 <script>
-import { highlight, languages } from "prismjs/components/prism-core";
-import { PrismEditor } from "vue-prism-editor";
-import "prismjs/components/prism-yaml";
+import CodeMirror from 'vue-codemirror6';
+import { yaml as yamlLang } from '@codemirror/lang-yaml';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { vsCodeDarkPlus } from '@upleveled/theme-vs-code-dark-plus';
 import { parseDocument, Document } from "yaml";
 
-import "prismjs/themes/prism-tomorrow.css";
-import "vue-prism-editor/dist/prismeditor.min.css";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     COMBINED_TERMINAL_COLS,
@@ -271,17 +285,12 @@ const envDefault = "# VARIABLE=value #comment";
 let yamlErrorTimeout = null;
 
 let serviceStatusTimeout = null;
-let prismjsSymbolDefinition = {
-    "symbol": {
-        pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
-    }
-};
 
 export default {
     components: {
         NetworkInput,
         FontAwesomeIcon,
-        PrismEditor,
+        CodeMirror,
         BModal,
     },
     beforeRouteUpdate(to, from, next) {
@@ -290,6 +299,12 @@ export default {
     beforeRouteLeave(to, from, next) {
         this.exitConfirm(next);
     },
+    setup() {
+        const yaml = yamlLang;
+        const oneDarkTheme = oneDark;
+        const vsCodeDark = vsCodeDarkPlus;
+        return { yaml, oneDarkTheme, vsCodeDark };
+    },
     yamlDoc: null,  // For keeping the yaml comments
     data() {
         return {
@@ -659,46 +674,6 @@ export default {
             this.isEditMode = false;
         },
 
-        highlighterYAML(code) {
-            if (!languages.yaml_with_symbols) {
-                languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", {
-                    "symbol": prismjsSymbolDefinition["symbol"]
-                });
-            }
-            return highlight(code, languages.yaml_with_symbols);
-        },
-
-        highlighterENV(code) {
-            if (!languages.docker_env) {
-                languages.docker_env = {
-                    "comment": {
-                        pattern: /(^#| #).*$/m,
-                        greedy: true
-                    },
-                    "keyword": {
-                        pattern: /^\w*(?=[:=])/m,
-                        greedy: true
-                    },
-                    "value": {
-                        pattern: /(?<=[:=]).*?((?= #)|$)/m,
-                        greedy: true,
-                        inside: {
-                            "string": [
-                                {
-                                    pattern: /^ *'.*?(?<!\\)'/m,
-                                },
-                                {
-                                    pattern: /^ *".*?(?<!\\)"|^.*$/m,
-                                    inside: prismjsSymbolDefinition
-                                },
-                            ],
-                        },
-                    },
-                };
-            }
-            return highlight(code, languages.docker_env);
-        },
-
         yamlToJSON(yaml) {
             let doc = parseDocument(yaml);
             if (doc.errors.length > 0) {
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
index f9ed11b1..71f477d6 100644
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@@ -676,18 +676,5 @@ code {
     color: $dark-font-color3;
 }
 
-// Vue Prism Editor bug - workaround
-// https://github.com/koca/vue-prism-editor/issues/87
-/*
-.prism-editor__textarea {
-    width: 999999px !important;
-}
-.prism-editor__editor {
-    white-space: pre !important;
-}
-.prism-editor__container {
-    overflow-x: scroll !important;
-}*/
-
 // Localization
 @import "localization.scss";
diff --git a/package.json b/package.json
index 9df11833..a69ac156 100644
--- a/package.json
+++ b/package.json
@@ -27,11 +27,15 @@
         "reset-password": "tsx ./extra/reset-password.ts"
     },
     "dependencies": {
+        "@codemirror/lang-yaml": "^6.1.2",
+        "@codemirror/theme-one-dark": "^6.1.2",
         "@homebridge/node-pty-prebuilt-multiarch": "0.11.14",
         "@inventage/envsubst": "^0.16.0",
         "@louislam/sqlite3": "~15.1.6",
+        "@upleveled/theme-vs-code-dark-plus": "github:upleveled/theme-vs-code-dark-plus",
         "bcryptjs": "~2.4.3",
         "check-password-strength": "~2.0.10",
+        "codemirror": "^6.0.1",
         "command-exists": "~1.2.9",
         "compare-versions": "~6.1.1",
         "composerize": "~1.4.1",
@@ -55,6 +59,7 @@
         "ts-command-line-args": "~2.5.1",
         "tsx": "~4.19.2",
         "type-fest": "~4.3.3",
+        "vue-codemirror6": "^1.3.10",
         "yaml": "~2.3.4"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95ff084b..4da12dd9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/lang-yaml':
+        specifier: ^6.1.2
+        version: 6.1.2
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
       '@homebridge/node-pty-prebuilt-multiarch':
         specifier: 0.11.14
         version: 0.11.14
@@ -17,12 +23,18 @@ importers:
       '@louislam/sqlite3':
         specifier: ~15.1.6
         version: 15.1.6(encoding@0.1.13)
+      '@upleveled/theme-vs-code-dark-plus':
+        specifier: github:upleveled/theme-vs-code-dark-plus
+        version: https://codeload.github.com/upleveled/theme-vs-code-dark-plus/tar.gz/9e16ebf6b4dae917ee0bbb2ff1e3db8c35370ae2
       bcryptjs:
         specifier: ~2.4.3
         version: 2.4.3
       check-password-strength:
         specifier: ~2.0.10
         version: 2.0.10
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1
       command-exists:
         specifier: ~1.2.9
         version: 1.2.9
@@ -92,6 +104,9 @@ importers:
       type-fest:
         specifier: ~4.3.3
         version: 4.3.3
+      vue-codemirror6:
+        specifier: ^1.3.10
+        version: 1.3.10(vue@3.5.13(typescript@5.2.2))
       yaml:
         specifier: ~2.3.4
         version: 2.3.4
@@ -246,6 +261,42 @@ packages:
     resolution: {integrity: sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==}
     engines: {node: '>=6.9.0'}
 
+  '@codemirror/autocomplete@6.18.4':
+    resolution: {integrity: sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==}
+
+  '@codemirror/commands@6.8.0':
+    resolution: {integrity: sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==}
+
+  '@codemirror/lang-yaml@6.1.2':
+    resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
+
+  '@codemirror/language@0.20.2':
+    resolution: {integrity: sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==}
+
+  '@codemirror/language@6.10.8':
+    resolution: {integrity: sha512-wcP8XPPhDH2vTqf181U8MbZnW+tDyPYy0UzVOa+oHORjyT+mhhom9vBd7dApJwoDz9Nb/a8kHjJIsuA/t8vNFw==}
+
+  '@codemirror/lint@6.8.4':
+    resolution: {integrity: sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==}
+
+  '@codemirror/search@6.5.8':
+    resolution: {integrity: sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==}
+
+  '@codemirror/state@0.20.1':
+    resolution: {integrity: sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==}
+
+  '@codemirror/state@6.5.1':
+    resolution: {integrity: sha512-3rA9lcwciEB47ZevqvD8qgbzhM9qMb8vCcQCNmDfVRPQG4JT9mSb0Jg8H7YjKGGQcFnLN323fj9jdnG59Kx6bg==}
+
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
+  '@codemirror/view@0.20.7':
+    resolution: {integrity: sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==}
+
+  '@codemirror/view@6.36.2':
+    resolution: {integrity: sha512-DZ6ONbs8qdJK0fdN7AB82CgI6tYXf4HWk1wSVa0+9bhVznCuuvhQtX8bFBoy3dv8rZSQqUd8GvhVAcielcidrA==}
+
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
@@ -644,6 +695,27 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@lezer/common@0.16.1':
+    resolution: {integrity: sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA==}
+
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/highlight@0.16.0':
+    resolution: {integrity: sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/lr@0.16.3':
+    resolution: {integrity: sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
   '@louislam/sqlite3@15.1.6':
     resolution: {integrity: sha512-cVf7hcMrfywYnycatLvorngTFpL3BSWvEy7/NrEfcTyQX8xxj9fdeD553oCTv5fIAk85fluo6mzPq89V3YzrVA==}
 
@@ -651,6 +723,9 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -970,6 +1045,10 @@ packages:
     resolution: {integrity: sha512-oqAnbA7c+pgOhW2OhGvxm0t1BULX5peQI/rLsNDpGM78EebV3C9IGbX5HNZabuZ6UQrYveCLjKo8Iy/lLlBkkg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@upleveled/theme-vs-code-dark-plus@https://codeload.github.com/upleveled/theme-vs-code-dark-plus/tar.gz/9e16ebf6b4dae917ee0bbb2ff1e3db8c35370ae2':
+    resolution: {tarball: https://codeload.github.com/upleveled/theme-vs-code-dark-plus/tar.gz/9e16ebf6b4dae917ee0bbb2ff1e3db8c35370ae2}
+    version: 1.0.0
+
   '@vitejs/plugin-vue@4.5.2':
     resolution: {integrity: sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1270,6 +1349,9 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -1362,6 +1444,9 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   croner@8.1.2:
     resolution: {integrity: sha512-ypfPFcAXHuAZRCzo3vJL6ltENzniTjwe/qsLleH1V2/7SRDjgvRQyrLmumFTLmjFax4IuSxfGXEn79fozXcJog==}
     engines: {node: '>=18.0'}
@@ -1904,6 +1989,7 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+
   http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
 
@@ -2963,6 +3049,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -3188,6 +3277,12 @@ packages:
       terser:
         optional: true
 
+  vue-codemirror6@1.3.10:
+    resolution: {integrity: sha512-0pWOJArQZ+59JYD7mJL5i1/kVIKwaBqBdJa6bODmVh9rMes+ZZ7GifOZNKydrBU0jTkFX0IYMfqBOgyDt7T/aw==}
+    engines: {pnpm: '>=9.15.0'}
+    peerDependencies:
+      vue: ^2.7.14 || ^3.4
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -3247,6 +3342,9 @@ packages:
       typescript:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   wait-on@7.2.0:
     resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
     engines: {node: '>=12.0.0'}
@@ -3415,6 +3513,85 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@codemirror/autocomplete@6.18.4':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.0':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-yaml@6.1.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.4
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.1
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      '@lezer/yaml': 1.0.3
+
+  '@codemirror/language@0.20.2':
+    dependencies:
+      '@codemirror/state': 0.20.1
+      '@codemirror/view': 0.20.7
+      '@lezer/common': 0.16.1
+      '@lezer/highlight': 0.16.0
+      '@lezer/lr': 0.16.3
+      style-mod: 4.1.2
+
+  '@codemirror/language@6.10.8':
+    dependencies:
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.4':
+    dependencies:
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.8':
+    dependencies:
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      crelt: 1.0.6
+
+  '@codemirror/state@0.20.1': {}
+
+  '@codemirror/state@6.5.1':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      '@lezer/highlight': 1.2.1
+
+  '@codemirror/view@0.20.7':
+    dependencies:
+      '@codemirror/state': 0.20.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
+  '@codemirror/view@6.36.2':
+    dependencies:
+      '@codemirror/state': 6.5.1
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@colors/colors@1.5.0':
     optional: true
 
@@ -3688,6 +3865,32 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@lezer/common@0.16.1': {}
+
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/highlight@0.16.0':
+    dependencies:
+      '@lezer/common': 0.16.1
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/lr@0.16.3':
+    dependencies:
+      '@lezer/common': 0.16.1
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/yaml@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
   '@louislam/sqlite3@15.1.6(encoding@0.1.13)':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)
@@ -3715,6 +3918,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4039,6 +4244,13 @@ snapshots:
       '@typescript-eslint/types': 6.8.0
       eslint-visitor-keys: 3.4.3
 
+  '@upleveled/theme-vs-code-dark-plus@https://codeload.github.com/upleveled/theme-vs-code-dark-plus/tar.gz/9e16ebf6b4dae917ee0bbb2ff1e3db8c35370ae2':
+    dependencies:
+      '@codemirror/language': 0.20.2
+      '@codemirror/state': 0.20.1
+      '@codemirror/view': 0.20.7
+      '@lezer/highlight': 0.16.0
+
   '@vitejs/plugin-vue@4.5.2(vite@5.4.11(@types/node@22.10.5)(sass@1.68.0))(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       vite: 5.4.11(@types/node@22.10.5)(sass@1.68.0)
@@ -4411,6 +4623,16 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  codemirror@6.0.1:
+    dependencies:
+      '@codemirror/autocomplete': 6.18.4
+      '@codemirror/commands': 6.8.0
+      '@codemirror/language': 6.10.8
+      '@codemirror/lint': 6.8.4
+      '@codemirror/search': 6.5.8
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -4498,6 +4720,8 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  crelt@1.0.6: {}
+
   croner@8.1.2: {}
 
   cross-env@7.0.3:
@@ -6395,6 +6619,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-mod@4.1.2: {}
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -6618,6 +6844,20 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.68.0
 
+  vue-codemirror6@1.3.10(vue@3.5.13(typescript@5.2.2)):
+    dependencies:
+      '@codemirror/commands': 6.8.0
+      '@codemirror/language': 6.10.8
+      '@codemirror/lint': 6.8.4
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+      codemirror: 6.0.1
+      style-mod: 4.1.2
+      vue: 3.5.13(typescript@5.2.2)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.2.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.2.2)):
     dependencies:
       vue: 3.5.13(typescript@5.2.2)
@@ -6684,6 +6924,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.2.2
 
+  w3c-keyname@2.2.8: {}
+
   wait-on@7.2.0:
     dependencies:
       axios: 1.7.9

From 53876a260536ac47790293c05e26ab6efb4c0874 Mon Sep 17 00:00:00 2001
From: Zachary King <zchrykng@fastmail.com>
Date: Mon, 20 Jan 2025 11:04:13 -0500
Subject: [PATCH 2/2] Clean up code style errors I missed previously

---
 frontend/src/pages/Compose.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 8b37c824..b9747a73 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -172,7 +172,6 @@
                             v-model="stack.composeYAML"
                             :dark="false"
                             :extensions="[oneDarkTheme, yaml()]"
-                            
                             basic
                         ></CodeMirror>
                         <!-- <prism-editor
@@ -252,10 +251,10 @@
 </template>
 
 <script>
-import CodeMirror from 'vue-codemirror6';
-import { yaml as yamlLang } from '@codemirror/lang-yaml';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { vsCodeDarkPlus } from '@upleveled/theme-vs-code-dark-plus';
+import CodeMirror from "vue-codemirror6";
+import { yaml as yamlLang } from "@codemirror/lang-yaml";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { vsCodeDarkPlus } from "@upleveled/theme-vs-code-dark-plus";
 import { parseDocument, Document } from "yaml";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -303,7 +302,11 @@ export default {
         const yaml = yamlLang;
         const oneDarkTheme = oneDark;
         const vsCodeDark = vsCodeDarkPlus;
-        return { yaml, oneDarkTheme, vsCodeDark };
+        return {
+            yaml,
+            oneDarkTheme,
+            vsCodeDark
+        };
     },
     yamlDoc: null,  // For keeping the yaml comments
     data() {