Widgets work

frontend/app/services/Marker.js

@@ -0,0 +1,44 @@
+import { Marked } from "marked";
+
+const marker = new Marked();
+
+// optional: use a shared marked instance inside renderer
+const renderMarkdown = (text) => marker.parse(text);
+
+const WidgetMap = {
+    test: () => import("~/components/viewer/widgets/TestWidget.vue"),
+    table: () => import("~/components/viewer/widgets/TableWidget.vue"),
+};
+
+const extension = {
+  name: "something",
+  level: "block",
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\n([\s\S]+?)\n@end/;
+    const match = rule.exec(src);
+
+    if (!match) return;
+
+    return {
+      type: "something",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<div class="vue-component" data-component="${token.name}" data-content="${token.text}"></div>`;
+  },
+};
+
+marker.use({
+  extensions: [extension],
+});
+
+function ParseMarkdown(source) {
+  return marker.parse(source || "");
+}
+
+export { ParseMarkdown, WidgetMap };