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