adding extensions property to CodeEditor

Author: cquirosj

src/Frontend/src/components/CodeEditor.vue

@@ -19,38 +19,38 @@ const props = withDefaults(
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
-    css?: string;
+    extensions?: Extension[];
   }>(),
-  { readOnly: true, showGutter: true, showCopyToClipboard: true }
+  { readOnly: true, showGutter: true, showCopyToClipboard: true, extensions: () => [] }
 );
 
 const extensions = computed(() => {
-  const extensions: Extension[] = [];
+  const allExtensions: Extension[] = [...(props.extensions || [])];
 
   switch (props.language) {
     case "json":
-      extensions.push(json());
+      allExtensions.push(json());
       break;
     case "xml":
-      extensions.push(xml());
+      allExtensions.push(xml());
       break;
     case "shell":
-      extensions.push(StreamLanguage.define(shell));
+      allExtensions.push(StreamLanguage.define(shell));
       break;
     case "powershell":
-      extensions.push(StreamLanguage.define(powerShell));
+      allExtensions.push(StreamLanguage.define(powerShell));
       break;
     case "csharp":
-      extensions.push(StreamLanguage.define(csharp));
+      allExtensions.push(StreamLanguage.define(csharp));
       break;
   }
 
-  return extensions;
+  return allExtensions;
 });
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel" :class="css">
+  <div class="wrapper" :aria-label="ariaLabel">
     <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
       <div><slot name="toolbarLeft"></slot></div>
       <div>

src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue

@@ -7,6 +7,7 @@ import DiffViewer from "@/components/messages2/DiffViewer.vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { ref, watch, computed } from "vue";
+import { EditorView } from "@codemirror/view";
 
 // Import the images directly
 import CommandIcon from "@/assets/command.svg";
@@ -16,6 +17,23 @@ import TimeoutIcon from "@/assets/timeout.svg";
 import EventIcon from "@/assets/event.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 
+// Define the monospace theme for CodeEditor
+const monospaceTheme = EditorView.baseTheme({
+  "&": {
+    fontFamily: "monospace",
+    fontSize: "0.75rem",
+    backgroundColor: "#f2f2f2",
+  },
+  ".cm-editor": {
+    fontFamily: "monospace",
+    fontSize: "0.75rem",
+    backgroundColor: "#f2f2f2",
+  },
+  ".cm-scroller": {
+    backgroundColor: "#f2f2f2",
+  },
+});
+
 // Define types for JSON values and properties
 type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
 interface JsonObject {
@@ -181,7 +199,7 @@ const hasStateChanges = computed(() => {
 
             <!-- Initial state display -->
             <div v-else-if="update.IsFirstNode" class="json-container">
-              <CodeEditor css="monospace-code" :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" />
+              <CodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" :extensions="[monospaceTheme]" />
             </div>
 
             <!-- No changes message -->
@@ -408,6 +426,14 @@ const hasStateChanges = computed(() => {
   background-color: transparent;
 }
 
+/* Override CodeEditor wrapper styles */
+.json-container :deep(.wrapper) {
+  border-radius: 0;
+  border: none;
+  background-color: #f2f2f2;
+  margin-top: 0;
+}
+
 .no-changes-message {
   padding: 1rem;
   text-align: center;
@@ -422,23 +448,6 @@ const hasStateChanges = computed(() => {
   color: #a94442;
 }
 
-/* Monospace font styling that matches DiffViewer */
-:deep(.monospace-code) {
-  border-radius: 0;
-  border: none;
-  background-color: #f2f2f2;
-}
-
-:deep(.monospace-code) .cm-editor {
-  font-family: monospace;
-  font-size: 0.75rem;
-  background-color: #f2f2f2;
-}
-
-:deep(.monospace-code) .cm-scroller {
-  background-color: #f2f2f2;
-}
-
 @-webkit-keyframes blink-border {
   0%,
   100% {