Add ace editor

client/src/components/Markdown/Editor/CellCode.vue

@@ -0,0 +1,76 @@
+<template>
+    <div ref="editor" class="editor" />
+</template>
+
+<script setup>
+import ace from "ace-builds";
+import { onMounted, ref } from "vue";
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true,
+    },
+    theme: {
+        type: String,
+        default: "github_light_default",
+    },
+    mode: {
+        type: String,
+        default: "javascript",
+    },
+});
+
+// Emit for v-model
+//const emit = defineEmits(['update:modelValue']);
+
+const editor = ref(null); // Reference to the editor DOM element
+
+async function buildEditor() {
+    const modePath = `ace/mode/${props.mode}`;
+    const themePath = `ace/theme/${props.theme}`;
+    const modeUrl = await import(`ace-builds/src-noconflict/mode-${props.mode}?url`);
+    const themeUrl = await import(`ace-builds/src-noconflict/theme-${props.theme}?url`);
+    ace.config.setModuleUrl(modePath, modeUrl);
+    ace.config.setModuleUrl(themePath, themeUrl);
+    ace.edit(editor.value, {
+        value: props.modelValue,
+        theme: themePath,
+        mode: modePath,
+        showPrintMargin: false,
+        useWorker: false,
+    });
+
+    /*/ Update modelValue when editor content changes
+    // Set the mode (language) if needed
+    editor.session.setMode("ace/mode/javascript");
+    aceEditor.session.on('change', () => {
+      const newValue = aceEditor.getValue();
+      emit('update:modelValue', newValue);
+    });*/
+}
+
+// Initialize the Ace editor
+onMounted(() => {
+    buildEditor();
+});
+
+/*/ Watch for external modelValue changes and update the editor
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      if (newValue !== aceEditor.getValue()) {
+        aceEditor.setValue(newValue, -1); // -1 prevents cursor jump
+      }
+    }
+  );*/
+</script>
+
+<style>
+.editor {
+    width: 100%;
+    height: 300px;
+    border: 1px solid #ddd;
+}
+</style>

client/src/components/Markdown/Editor/CellEditor.vue

@@ -2,12 +2,12 @@
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
-            <hr class="solid m-0">
+            <hr class="solid m-0" />
             <div class="cell-card d-flex rounded my-1 mx-3">
                 <span class="small text-primary">{{ cell.name }}</span>
-                <div class="ml-2">{{ cell.content }}</div>
+                <CellCode :model-value="cell.content" class="ml-2" />
             </div>
-            <hr class="solid m-0">
+            <hr class="solid m-0" />
         </div>
         <CellButtonAdd :cell-index="cells.length" @click="onClick" />
     </div>
@@ -19,6 +19,7 @@ import { ref } from "vue";
 import { parseMarkdown } from "@/components/Markdown/parse";
 
 import CellButtonAdd from "./CellButtonAdd.vue";
+import CellCode from "./CellCode.vue";
 
 const props = defineProps<{
     markdownText: string;

package.json

@@ -18,6 +18,7 @@
   "homepage": "https://github.com/galaxyproject/galaxy#readme",
   "dependencies": {
     "@galaxyproject/galaxy-client": "^24.0.0",
+    "ace-builds": "^1.37.5",
     "cpy-cli": "^5.0.0"
   }
 }