Align editor layout

Author: guerler

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

@@ -44,24 +44,26 @@ async function buildEditor() {
         theme: themePath,
         useWorker: false,
         value: props.modelValue,
+        wrap: true,
     });
 
-    /*/ 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);
-    });*/
-
     aceEditor.on("focus", () => {
         aceEditor.setOption("highlightActiveLine", true);
         aceEditor.setOption("highlightGutterLine", true);
+        editor.value.classList.add("cell-code-focus");
     });
     aceEditor.on("blur", () => {
         aceEditor.setOption("highlightActiveLine", false);
         aceEditor.setOption("highlightGutterLine", false);
+        editor.value.classList.remove("cell-code-focus");
     });
+
+    /*/ Update modelValue when editor content changes
+    // Set the mode (language) if needed
+    aceEditor.session.on('change', () => {
+      const newValue = aceEditor.getValue();
+      emit('update:modelValue', newValue);
+    });*/
 }
 
 // Initialize the Ace editor
@@ -79,3 +81,10 @@ onMounted(() => {
     }
   );*/
 </script>
+
+<style lang="scss">
+@import "theme/blue.scss";
+.cell-code-focus {
+    background-color: $gray-100;
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
-    <div class="h-100 w-100">
+    <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
             <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="d-flex my-1 mx-3">
+                <span class="cell-name small text-primary">{{ cell.name }}</span>
                 <CellCode :model-value="cell.content" class="ml-2" />
             </div>
             <hr class="solid m-0" />
@@ -37,14 +37,8 @@ function onClick(cellIndex: number, cellType: string) {
 }
 </script>
 
-<style lang="scss">
-@import "theme/blue.scss";
-
-.cell-card {
-    //background: $gray-100;
-    .cell-card-header {
-        background: lighten($brand-info, 20%);
-        color: $white;
-    }
+<style scoped>
+.cell-name {
+    width: 3rem;
 }
 </style>