move to ace text editor. Fixes script line wrap issue and more features. Fixes #712

2026-01-19 19:40:50 +00:00 · 2021-11-16 20:19:46 -05:00
parent 156a4eaa3c
commit 877e08cca1
5 changed files with 72 additions and 132 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,9 @@
        "apexcharts": "^3.27.1",
        "axios": "^0.24.0",
        "dotenv": "^8.6.0",
-        "prismjs": "^1.23.0",
        "qrcode.vue": "^3.2.2",
        "quasar": "^2.3.2",
-        "vue-prism-editor": "^2.0.0-alpha.2",
+        "vue3-ace-editor": "^2.2.1",
        "vue3-apexcharts": "^1.4.0",
        "vuex": "^4.0.2"
      },
@@ -2655,6 +2654,11 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/ace-builds": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz",
+      "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ=="
+    },
    "node_modules/acorn": {
      "version": "8.5.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
@@ -9754,11 +9758,6 @@
        "node": ">=0.8"
      }
    },
-    "node_modules/prismjs": {
-      "version": "1.25.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
-      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
-    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -10190,6 +10189,11 @@
      "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ==",
      "dev": true
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "node_modules/resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -11949,17 +11953,6 @@
        "node": ">=8.9.0"
      }
    },
-    "node_modules/vue-prism-editor": {
-      "version": "2.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz",
-      "integrity": "sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
    "node_modules/vue-router": {
      "version": "4.0.12",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
@@ -11988,6 +11981,16 @@
      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
      "dev": true
    },
+    "node_modules/vue3-ace-editor": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue3-ace-editor/-/vue3-ace-editor-2.2.1.tgz",
+      "integrity": "sha512-rtTjXZ0jn4AnpRbMnX3+VF0pS4Fo1w0LqexG+F4KAM5Z8QMckkOIEXUbu0pbLgyg0upwu9F+aF6wE3mH6SL1+A==",
+      "dependencies": {
+        "ace-builds": "^1.4.12",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue3-apexcharts": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.1.tgz",
@@ -14613,6 +14616,11 @@
        "negotiator": "0.6.2"
      }
    },
+    "ace-builds": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz",
+      "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ=="
+    },
    "acorn": {
      "version": "8.5.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
@@ -20004,11 +20012,6 @@
      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
      "dev": true
    },
-    "prismjs": {
-      "version": "1.25.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
-      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
-    },
    "process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -20348,6 +20351,11 @@
      "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ==",
      "dev": true
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -21694,12 +21702,6 @@
        }
      }
    },
-    "vue-prism-editor": {
-      "version": "2.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz",
-      "integrity": "sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==",
-      "requires": {}
-    },
    "vue-router": {
      "version": "4.0.12",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
@@ -21727,6 +21729,16 @@
        }
      }
    },
+    "vue3-ace-editor": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue3-ace-editor/-/vue3-ace-editor-2.2.1.tgz",
+      "integrity": "sha512-rtTjXZ0jn4AnpRbMnX3+VF0pS4Fo1w0LqexG+F4KAM5Z8QMckkOIEXUbu0pbLgyg0upwu9F+aF6wE3mH6SL1+A==",
+      "requires": {
+        "ace-builds": "^1.4.12",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^3.0.0"
+      }
+    },
    "vue3-apexcharts": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -14,10 +14,9 @@
    "apexcharts": "^3.27.1",
    "axios": "^0.24.0",
    "dotenv": "^8.6.0",
-    "prismjs": "^1.23.0",
    "qrcode.vue": "^3.2.2",
    "quasar": "^2.3.2",
-    "vue-prism-editor": "^2.0.0-alpha.2",
+    "vue3-ace-editor": "^2.2.1",
    "vue3-apexcharts": "^1.4.0",
    "vuex": "^4.0.2"
  },
@@ -31,4 +30,4 @@
    "last 2 Edge versions",
    "last 1 Safari versions"
  ]
-}
+}
--- a/src/components/scripts/ScriptFormModal.vue
+++ b/src/components/scripts/ScriptFormModal.vue
@@ -81,12 +81,12 @@
            :readonly="readonly"
          />
        </div>
-
-        <CodeEditor
-          v-model="code"
-          :style="maximized ? '--prism-height: 72vh' : '--prism-height: 65vh'"
-          :readonly="readonly"
-          :shell="formScript.shell"
+        <v-ace-editor
+          v-model:value="code"
+          :lang="formScript.shell === 'cmd' ? 'batchfile' : formScript.shell"
+          theme="tomorrow_night"
+          :style="{ height: `${maximized ? '72vh' : '64vh'}` }"
+          wrap
        />
        <q-card-actions>
          <tactical-dropdown
@@ -129,10 +129,17 @@ import { useAgentDropdown } from "@/composables/agents";
 import { notifySuccess } from "@/utils/notify";

 // ui imports
-import CodeEditor from "@/components/ui/CodeEditor";
 import TestScriptModal from "@/components/scripts/TestScriptModal";
 import TacticalDropdown from "@/components/ui/TacticalDropdown";

+// ace editor imports
+import { VAceEditor } from "vue3-ace-editor";
+
+import "ace-builds/src-noconflict/mode-powershell";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-batchfile";
+import "ace-builds/src-noconflict/theme-tomorrow_night";
+
 // static data
 import { shellOptions } from "@/composables/scripts";

@@ -140,8 +147,8 @@ export default {
  name: "ScriptFormModal",
  emits: [...useDialogPluginComponent.emits],
  components: {
-    CodeEditor,
    TacticalDropdown,
+    VAceEditor,
  },
  props: {
    script: Object,
--- a/src/components/scripts/ScriptSnippetFormModal.vue
+++ b/src/components/scripts/ScriptSnippetFormModal.vue
@@ -38,10 +38,12 @@
          <q-input class="q-pa-sm col-6" filled dense v-model="formSnippet.desc" label="Description" />
        </div>

-        <CodeEditor
-          v-model="formSnippet.code"
-          :style="maximized ? '--prism-height: 80vh' : '--prism-height: 70vh'"
-          :shell="formSnippet.shell"
+        <v-ace-editor
+          v-model:value="formSnippet.code"
+          :lang="formSnippet.shell === 'cmd' ? 'batchfile' : formSnippet.shell"
+          theme="tomorrow_night"
+          :style="{ height: `${maximized ? '80vh' : '70vh'}` }"
+          wrap
        />
        <q-card-actions align="right">
          <q-btn dense flat label="Cancel" v-close-popup />
@@ -59,8 +61,13 @@ import { useDialogPluginComponent } from "quasar";
 import { saveScriptSnippet, editScriptSnippet } from "@/api/scripts";
 import { notifySuccess } from "@/utils/notify";

-// ui imports
-import CodeEditor from "@/components/ui/CodeEditor";
+// ace editor imports
+import { VAceEditor } from "vue3-ace-editor";
+
+import "ace-builds/src-noconflict/mode-powershell";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-batchfile";
+import "ace-builds/src-noconflict/theme-tomorrow_night";

 // static data
 import { shellOptions } from "@/composables/scripts";
@@ -69,7 +76,7 @@ export default {
  name: "ScriptFormModal",
  emits: [...useDialogPluginComponent.emits],
  components: {
-    CodeEditor,
+    VAceEditor,
  },
  props: {
    snippet: Object,
--- a/src/components/ui/CodeEditor.vue
+++ b/src/components/ui/CodeEditor.vue
@@ -1,85 +0,0 @@
-<template>
-  <prism-editor class="editor" v-model="code" :highlight="highlighter" line-numbers @click="focusTextArea" />
-</template>
-
-<script>
-// prism package imports
-import { PrismEditor } from "vue-prism-editor";
-import "vue-prism-editor/dist/prismeditor.min.css";
-
-import { highlight, languages } from "prismjs/components/prism-core";
-import "prismjs/components/prism-batch";
-import "prismjs/components/prism-python";
-import "prismjs/components/prism-powershell";
-import "prismjs/themes/prism-tomorrow.css";
-
-export default {
-  name: "CodeEditor",
-  components: {
-    PrismEditor,
-  },
-  props: {
-    code: !String,
-    shell: !String,
-  },
-  setup(props) {
-    function highlighter(code) {
-      if (!props.shell) {
-        return code;
-      }
-      let lang = props.shell === "cmd" ? "batch" : props.shell;
-      return highlight(code, languages[lang]);
-    }
-
-    function focusTextArea() {
-      document.getElementsByClassName("prism-editor__textarea")[0].focus();
-    }
-
-    return {
-      //methods
-      highlighter,
-      focusTextArea,
-    };
-  },
-};
-</script>
-
-<style>
-/* required class */
-.editor {
-  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
-  background: #2d2d2d;
-  color: #ccc;
-
-  /* you must provide font-family font-size line-height. Example: */
-  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 5px;
-  height: var(--prism-height);
-}
-
-/* optional class for removing the outline */
-.prism-editor__textarea:focus {
-  outline: none;
-}
-
-.prism-editor__textarea,
-.prism-editor__container {
-  width: 500em !important;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.prism-editor__container::-webkit-scrollbar,
-.prism-editor__textarea::-webkit-scrollbar {
-  display: none;
-}
-
-.prism-editor__editor {
-  white-space: pre !important;
-}
-.prism-editor__container {
-  overflow-x: auto !important;
-}
-</style>