From 23bf81efbb1048e31719d8e7881c9904e4501366 Mon Sep 17 00:00:00 2001 From: wh1te909 Date: Thu, 22 Feb 2024 20:50:03 +0000 Subject: [PATCH] fix js/typescript monaco support in editor --- src/components/scripts/ScriptFormModal.vue | 62 ++++++++++++++----- .../scripts/ScriptSnippetFormModal.vue | 52 +++++++++++++--- 2 files changed, 92 insertions(+), 22 deletions(-) diff --git a/src/components/scripts/ScriptFormModal.vue b/src/components/scripts/ScriptFormModal.vue index c808614e..cdcf569a 100644 --- a/src/components/scripts/ScriptFormModal.vue +++ b/src/components/scripts/ScriptFormModal.vue @@ -222,6 +222,35 @@ import TestScriptModal from "@/components/scripts/TestScriptModal.vue"; import TacticalDropdown from "@/components/ui/TacticalDropdown.vue"; import * as monaco from "monaco-editor"; +import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; +import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"; +import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"; +import jsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"; +import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; + +// https://github.com/microsoft/monaco-editor/issues/4045#issuecomment-1723787448 +self.MonacoEnvironment = { + getWorker: function (workerId, label) { + switch (label) { + case "json": + return new jsonWorker(); + case "css": + case "scss": + case "less": + return new cssWorker(); + case "html": + case "handlebars": + case "razor": + return new htmlWorker(); + case "typescript": + case "javascript": + return new jsWorker(); + default: + return new editorWorker(); + } + }, +}; + // types import type { Script } from "@/types/scripts"; @@ -287,8 +316,8 @@ const title = computed(() => { return props.readonly ? `Viewing ${script.name}` : props.clone - ? `Copying ${script.name}` - : `Editing ${script.name}`; + ? `Copying ${script.name}` + : `Editing ${script.name}`; } else { return "Adding new script"; } @@ -296,13 +325,21 @@ const title = computed(() => { // convert highlighter language to match what ace expects const lang = computed(() => { - if (script.shell === "cmd") return "bat"; - else if (script.shell === "powershell") return "powershell"; - else if (script.shell === "python") return "python"; - else if (script.shell === "shell") return "shell"; - else if (script.shell === "nushell") return "nushell"; - else if (script.shell === "deno") return "typescript"; - else return ""; + switch (script.shell) { + case "cmd": + return "bat"; + case "powershell": + return "powershell"; + case "python": + return "python"; + case "shell": + case "nushell": + return "shell"; + case "deno": + return "typescript"; + default: + return ""; + } }); async function submit() { @@ -341,12 +378,7 @@ const scriptEditor = ref(null); let editor: monaco.editor.IStandaloneCodeEditor; function loadEditor() { - var modelUri = monaco.Uri.parse("model://new"); // a made up unique URI for our model - var model = monaco.editor.createModel( - script.script_body, - lang.value, - modelUri, - ); + var model = monaco.editor.createModel(script.script_body, lang.value); const theme = $q.dark.isActive ? "vs-dark" : "vs-light"; diff --git a/src/components/scripts/ScriptSnippetFormModal.vue b/src/components/scripts/ScriptSnippetFormModal.vue index 40ea5503..91d59a29 100644 --- a/src/components/scripts/ScriptSnippetFormModal.vue +++ b/src/components/scripts/ScriptSnippetFormModal.vue @@ -86,6 +86,35 @@ import { notifySuccess } from "@/utils/notify"; // ui imports import * as monaco from "monaco-editor"; +import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; +import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"; +import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"; +import jsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"; +import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; + +// https://github.com/microsoft/monaco-editor/issues/4045#issuecomment-1723787448 +self.MonacoEnvironment = { + getWorker: function (workerId, label) { + switch (label) { + case "json": + return new jsonWorker(); + case "css": + case "scss": + case "less": + return new cssWorker(); + case "html": + case "handlebars": + case "razor": + return new htmlWorker(); + case "typescript": + case "javascript": + return new jsWorker(); + default: + return new editorWorker(); + } + }, +}; + // types import type { ScriptSnippet } from "@/types/scripts"; @@ -124,11 +153,21 @@ const title = computed(() => { // convert highlighter language to match what ace expects const lang = computed(() => { - if (snippet.shell === "cmd") return "bat"; - else if (snippet.shell === "powershell") return "powershell"; - else if (snippet.shell === "python") return "python"; - else if (snippet.shell === "shell") return "shell"; - else return ""; + switch (snippet.shell) { + case "cmd": + return "bat"; + case "powershell": + return "powershell"; + case "python": + return "python"; + case "shell": + case "nushell": + return "shell"; + case "deno": + return "typescript"; + default: + return ""; + } }); async function submit() { @@ -150,8 +189,7 @@ const snippetEditor = ref(null); let editor: monaco.editor.IStandaloneCodeEditor; function loadEditor() { - var modelUri = monaco.Uri.parse("model://snippet"); // a made up unique URI for our model - var model = monaco.editor.createModel(snippet.code, lang.value, modelUri); + var model = monaco.editor.createModel(snippet.code, lang.value); const theme = $q.dark.isActive ? "vs-dark" : "vs-light";