Widgets work

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")
   });