Fix

client/package.json

@@ -87,6 +87,7 @@
     "pinia": "^2.1.7",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.1.1",
+    "prismjs": "^1.29.0",
     "pyre-to-regexp": "^0.0.6",
     "querystring-es3": "^0.2.1",
     "regenerator-runtime": "^0.14.0",

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+//@ts-ignore
+import Prism from "prismjs";
+import "prismjs/components/prism-json"; // Load the language
+import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
+import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
+
+// Props to pass initial content
+const props = defineProps({
+    content: {
+        type: String,
+        required: true,
+    },
+});
+
+// References
+const editor = ref<HTMLElement | null>(null);
+const highlightedContent = ref(props.content);
+
+function render() {
+    highlightedContent.value = Prism.highlight(props.content, Prism.languages.json, "json");
+}
+
+// Setup Prism.js
+onMounted(() => {
+    render();
+});
+
+// Re-highlight when content changes
+watch(() => props.content, () => {
+    render();
+});
+</script>
+
+<template>
+    <div contenteditable="true" ref="editor" class="prism-editor">
+        <pre class="language-json line-numbers" style="background: transparent"><code v-html="highlightedContent"></code></pre>
+    </div>
+</template>
+
+<style>
+.prism-editor {
+    font-family: monospace;
+    white-space: pre-wrap;
+    overflow-x: auto;
+}
+
+
+/* Line Numbers Styling */
+pre.line-numbers {
+    position: relative;
+    padding-left: 3.8em !important; /* Adjust depending on line number width */
+    counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+    position: relative;
+    display: block;
+    padding-left: 0;
+}
+
+.line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 3em;
+    border-right: 1px solid #ddd;
+    color: #999;
+    font-size: 0.875em;
+    line-height: 1.5;
+    text-align: right;
+}
+
+/* Indent Guides Styling */
+.prism-editor code {
+    background: transparent;
+    position: relative;
+}
+
+.prism-editor code span.indent-guide {
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+    color: #ccc;
+    pointer-events: none;
+    font-size: 0.9em;
+}
+</style>
+

client/src/components/Markdown/MarkdownEditor.vue

@@ -24,12 +24,7 @@
                     </div>
                 </div>
                 <div class="unified-panel-body d-flex">
-                    <textarea
-                        id="workflow-report-editor"
-                        ref="text-area"
-                        v-model="content"
-                        class="markdown-textarea"
-                        @input="onUpdate" />
+                    <code-editor :content="content" />
                 </div>
             </div>
         </div>
@@ -46,6 +41,7 @@ import FlexPanel from "components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
+import CodeEditor from "./Editor/CodeEditor";
 import MarkdownHelpModal from "./MarkdownHelpModal";
 import MarkdownToolBox from "./MarkdownToolBox";
 
@@ -57,6 +53,7 @@ const FENCE = "```";
 
 export default {
     components: {
+        CodeEditor,
         FlexPanel,
         FontAwesomeIcon,
         MarkdownHelpModal,

client/yarn.lock

@@ -9911,7 +9911,7 @@ pretty@^2.0.0:
     extend-shallow "^2.0.1"
     js-beautify "^1.6.12"
 
-[email protected], prismjs@^1.6.0:
+[email protected], prismjs@^1.29.0, prismjs@^1.6.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==