CI/CD test

frontend/app/components/viewer/content/Note.vue

@@ -2,7 +2,7 @@
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
 import ToastManager from '~/components/managers/ToastManager.vue';
 import { emitter } from '~/services/Emitter';
-import { ParseMarkdown } from '~/services/Marker';
+import { GetWidget, ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
 import TestWidget from '../widgets/TestWidget.vue';
@@ -15,6 +15,9 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown
 
 const editingMode = ref(false);
+const editableTitle = ref(null);
+const title = ref(props.title);
+const displayTitle = ref('');
 
 function closeNote(){
     emitter.emit('delete-note', props.noteKey);
@@ -28,12 +31,9 @@ function mountComponents() {
   const nodes = document.querySelectorAll('.vue-component');
 
   nodes.forEach(el => {
-    const app = createApp(TestWidget, { content: el.dataset.content });
+    const app = createApp(GetWidget(el.dataset.component), { content: el.dataset.content });
     app.mount(el);
-    console.log("Mounted a component")
   });
-
-  console.log("Huh")
 }
 /// 
 
@@ -51,6 +51,8 @@ watch(sourceText, (newText) => {
 
 onMounted(() => {
     sourceText.value = props.text;
+    title.value = props.title;
+    displayTitle.value = props.title;
     // window.addEventListener('keydown', handleKeydown);
     setTimeout(() => setupCallout(), 0);
     update();
@@ -65,7 +67,10 @@ function handleKeydown(e) {
   if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'e') {
     e.preventDefault(); // prevent browser default behavior
     editingMode.value = !editingMode.value;
-    if(!editingMode.value) update();
+    if(!editingMode.value){
+       update();
+       SaveNote(); // Save when switching to display mode
+    }
     return;
   }
 
@@ -80,13 +85,14 @@ function handleKeydown(e) {
 function SaveNote(){
     Server().post('/note/update', {
         id: props.noteKey,
-        content: sourceText.value
+        content: sourceText.value,
+        title: title.value,
     }).then((response) => {
         if(response.data.status !== 'ok'){
             // Handle error (e.g., show a notification)
             return;
         }
-        DisplayToast('green', "Note saved successfully.", 500);
+        // DisplayToast('green', "Note saved successfully.", 500);
     }).catch((error) => {
         // Handle error (e.g., show a notification)
     });
@@ -138,6 +144,10 @@ function setupCallout() {
 }
 
 
+const editTitle = (e) => {
+  title.value = e.target.innerText;
+}
+
 </script>
 
 <template>
@@ -150,7 +160,11 @@ function setupCallout() {
     </div>
     <div class="note-content-container">
         <textarea v-model="sourceText" class="full-editor" v-if="editingMode"></textarea>
-        <div class="note-content" ref="noteContent" v-html="displayText" v-else></div>
+        <div v-else class="note-content" ref="noteContent">
+          <h1 contenteditable="true" ref="editableTitle" @input="editTitle">{{ displayTitle }}</h1>
+          <div ref="noteContent" v-html="displayText"></div>
+        </div>
+        
     </div>
 </div>
 </template>