js editor

package-lock.json

@@ -18,6 +18,7 @@
         "gemory": "file:",
         "loglevel": "^1.8.1",
         "loglevel-plugin-prefix": "^0.8.4",
+        "monaco-editor": "^0.55.1",
         "pinia": "^3.0.4",
         "sortablejs": "^1.15.7",
         "vue": "^3.3.4",
@@ -866,6 +867,13 @@
         "undici-types": ">=7.24.0 <7.24.7"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@@ -1585,6 +1593,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2265,6 +2282,18 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2330,6 +2359,16 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "gemory": "file:",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
+    "monaco-editor": "^0.55.1",
     "pinia": "^3.0.4",
     "sortablejs": "^1.15.7",
     "vue": "^3.3.4",

src/mammon/mammonService.ts

@@ -23,6 +23,12 @@ const mammonAxiosInstance = axios.create({
 })
 logResource(mammonAxiosInstance)
 
+export const fetchScriptDefinitions = (): Promise<string> =>
+    mammonAxiosInstance.get<string>('rule-books/script-definitions', {
+        responseType: 'text',
+        headers: {Accept: 'text/plain'},
+    }).then(response => response.data);
+
 export const ledgerApi = new LedgerApi(undefined, mammonUrl, mammonAxiosInstance);
 export const transactionApi = new TransactionApi(undefined, mammonUrl, mammonAxiosInstance);
 export const characterApi = new CharacterApi(undefined, mammonUrl, mammonAxiosInstance);

src/pages/rules/EditRuleBook.vue

@@ -3,7 +3,7 @@ import {useRoute, useRouter} from "vue-router";
 import {ref, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
 import log from "loglevel";
-import {useRuleBooksStore} from "@/rules";
+import {ScriptEditor, useRuleBooksStore} from "@/rules";
 import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {routeNames} from "@/routes";
 import {SliderCheckbox} from "@/components";
@@ -100,8 +100,7 @@ watch(useRoute(), async route => {
       </div>
       <div class="flex flex-col grow border-b-1">
         Script:
-        <textarea class="script-editor mt-2 mb-2" spellcheck="false" v-model="script" rows="20"
-                  placeholder="// activity, transaction, ledgers are available — branch on activity.type"></textarea>
+        <ScriptEditor class="mt-2 mb-2" v-model="script" />
       </div>
     </div>
     <div class="mt-2 justify-end flex">
@@ -111,12 +110,3 @@ watch(useRoute(), async route => {
     </div>
   </div>
 </template>
-
-<style scoped>
-@reference "@/style.css";
-
-.script-editor {
-  @apply bg-slate-900 text-slate-100 font-mono text-sm p-2 rounded w-full resize-y;
-  tab-size: 2;
-}
-</style>

src/rules/ScriptEditor.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import {fetchScriptDefinitions} from '@/mammon';
+
+(self as unknown as { MonacoEnvironment: { getWorker(workerId: string, label: string): Worker } }).MonacoEnvironment = {
+  getWorker(_workerId: string, label: string) {
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  }
+};
+
+let extraLibLoaded = false;
+
+const loadScriptDefinitions = async () => {
+  if (extraLibLoaded) {
+    return;
+  }
+  try {
+    const definitions = await fetchScriptDefinitions();
+    monaco.typescript.javascriptDefaults.addExtraLib(definitions, 'ts:rule-runner.d.ts');
+    extraLibLoaded = true;
+  } catch {
+    // type definitions are optional — the editor still works without autocomplete
+  }
+};
+
+const model = defineModel<string>({default: ''});
+const container = ref<HTMLElement>();
+let editor: monaco.editor.IStandaloneCodeEditor | undefined;
+
+onMounted(async () => {
+  await loadScriptDefinitions();
+
+  if (!container.value) {
+    return;
+  }
+
+  editor = monaco.editor.create(container.value, {
+    value: model.value,
+    language: 'javascript',
+    theme: 'vs-dark',
+    automaticLayout: true,
+    minimap: {enabled: false},
+    scrollBeyondLastLine: false,
+    fontSize: 13,
+    tabSize: 2,
+  });
+
+  editor.onDidChangeModelContent(() => {
+    const value = editor!.getValue();
+
+    if (value !== model.value) {
+      model.value = value;
+    }
+  });
+});
+
+watch(model, value => {
+  if (editor && value !== editor.getValue()) {
+    editor.setValue(value ?? '');
+  }
+});
+
+onBeforeUnmount(() => editor?.dispose());
+</script>
+
+<template>
+  <div ref="container" class="script-editor"></div>
+</template>
+
+<style scoped>
+.script-editor {
+  width: 100%;
+  height: 24rem;
+}
+</style>

src/rules/index.ts

@@ -1 +1,3 @@
 export * from "./rules";
+
+export {default as ScriptEditor} from './ScriptEditor.vue';