Widgets work

frontend/app/components/viewer/TopBar.vue

@@ -2,8 +2,9 @@
 import TopSearchBar from './topbar/TopSearchBar.vue';
 import { useCampaignService } from '~/services/Campaign';
 import { CreateWindow } from '~/services/Windows';
+import { SetShowContent } from '~/services/Content';
 
-const { Campaign } = useCampaignService();
+const { Campaign, SetCampaign } = useCampaignService();
 
 const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
@@ -17,6 +18,12 @@ function openCreateNoteWindow() {
     CreateWindow('create_note');
 }
 
+function exitToMainMenu() {
+    SetCampaign(null);
+    SetShowContent(false);
+    CreateWindow('main_menu');
+}
+
 </script>
 
 <template>
@@ -31,6 +38,10 @@ function openCreateNoteWindow() {
             <TopSearchBar></TopSearchBar>
         </div>
         <div class="right">
+            <button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
+                <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
+                <span>Main Menu</span>
+            </button>
             <button class="note-button sound-click" type="button" @click="openCreateNoteWindow" :disabled="!Campaign">
                 <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
                 <span>New Note</span>
@@ -50,11 +61,11 @@ function openCreateNoteWindow() {
 }
 
 .logo {
-    height: 36px;
-    width: 36px;
+    height: 32px;
+    width: 32px;
     position: absolute;
     top: 0px;
-    left: 8px;
+    left: 6px;
 }
 
 .left, .right {
@@ -65,6 +76,7 @@ function openCreateNoteWindow() {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    gap: 8px;
     padding-right: 10px;
 }
 
@@ -75,6 +87,7 @@ function openCreateNoteWindow() {
     font-weight: bold;
 }
 
+.top-bar-button,
 .note-button {
     height: 30px;
     padding: 0 12px;
@@ -92,6 +105,7 @@ function openCreateNoteWindow() {
     cursor: not-allowed;
 }
 
+.top-bar-button-icon,
 .note-button-icon {
     width: 16px;
     height: 16px;

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

@@ -1,8 +1,8 @@
 <script setup>
-import { marked } from 'marked';
 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 Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
 import TestWidget from '../widgets/TestWidget.vue';
@@ -20,33 +20,15 @@ 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);
+    return ParseMarkdown(sourceText.value);
 });
 
 function mountComponents() {
   const nodes = document.querySelectorAll('.vue-component');
 
   nodes.forEach(el => {
-    const app = createApp(TestWidget, { /* props */ });
+    const app = createApp(TestWidget, { content: el.dataset.content });
     app.mount(el);
     console.log("Mounted a component")
   });

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

@@ -0,0 +1,3 @@
+<template>
+
+</template>

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

@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps(['content']);
+
+const name = ref('');
+
+onMounted(() => {
+    name.value = props.content || 'No content';
+});
+</script>
+
 <template>
-<h2>This is a test widget</h2>
+<h2>This is a {{name}} widget</h2>
 </template>