Saga update properties (#2371)

Author: cquirosj

src/Frontend/package-lock.json

@@ -28,6 +28,7 @@
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "diff": "^7.0.0",
     "hex-to-css-filter": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
@@ -52,6 +53,7 @@
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
+    "@types/diff": "^7.0.2",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.3",
     "@vitejs/plugin-vue": "^5.2.3",

src/Frontend/package.json

@@ -19,6 +19,7 @@ const props = withDefaults(
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
+    css?: string;
   }>(),
   { readOnly: true, showGutter: true, showCopyToClipboard: true }
 );
@@ -49,7 +50,7 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel">
+  <div class="wrapper" :aria-label="ariaLabel" :class="css">
     <div v-if="props.showCopyToClipboard" class="toolbar">
       <CopyToClipboard :value="code" />
     </div>