Started widgets

frontend/app/components/managers/ContentManager.vue

@@ -135,9 +135,7 @@ watch(Campaign, () => {
                     </button>
 
                     <div v-if="!sidebarCollapsed" class="sidebar-copy">
-                        <span class="sidebar-eyebrow">Campaign Notes</span>
+                        <!-- Aqui posar buttons -->
-                        <strong class="sidebar-title">{{ campaignName }}</strong>
-                        <span class="sidebar-meta">{{ notes.length }} note<span v-if="notes.length !== 1">s</span></span>
                     </div>
                 </div>
 

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

@@ -1,10 +1,11 @@
 <script setup>
 import { marked } from 'marked';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, createApp } from 'vue';
 import ToastManager from '~/components/managers/ToastManager.vue';
 import { emitter } from '~/services/Emitter';
 import Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
+import TestWidget from '../widgets/TestWidget.vue';
 
 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
@@ -19,20 +20,58 @@ function closeNote(){
     emitter.emit('delete-note', props.noteKey);
 }
 
+//  MARKED
+
+const renderer = new marked.Renderer();
+
+renderer.paragraph = (token) => {
+  const text = token.text || '';
+
+  if (text.startsWith(':::my-component')) {
+    return `<div class="vue-component" data-component="TestWidget"></div>`;
+  }
+
+  return `<p>${text}</p>`;
+};
+
+marked.setOptions({
+  renderer: renderer,
+});
+
 const compiledMarkdown = computed(() => {
     return marked.parse(sourceText.value);
 });
 
-watch(sourceText, (newText) => {
+function mountComponents() {
-    displayText.value = compiledMarkdown.value;
+  const nodes = document.querySelectorAll('.vue-component');
 
-    setTimeout(() => setupCallout(), 0);
+  nodes.forEach(el => {
+    const app = createApp(TestWidget, { /* props */ });
+    app.mount(el);
+    console.log("Mounted a component")
+  });
+
+  console.log("Huh")
+}
+/// 
+
+function update(){
+    displayText.value = compiledMarkdown.value;
+    setTimeout(() => {
+      setupCallout()
+      mountComponents();
+    }, 0);
+}
+
+watch(sourceText, (newText) => {
+    // update();
 });
 
 onMounted(() => {
     sourceText.value = props.text;
     // window.addEventListener('keydown', handleKeydown);
     setTimeout(() => setupCallout(), 0);
+    update();
 });
 
 onUnmounted(() => {
@@ -44,6 +83,7 @@ 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();
     return;
   }
 

frontend/app/components/viewer/widgets/TestWidget.vue

@@ -0,0 +1,3 @@
+<template>
+<h2>This is a test widget</h2>
+</template>