js editor

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">
@@ -110,13 +109,4 @@ watch(useRoute(), async route => {
       </div>
     </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>
+</template>

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';