@vizel/core 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/index7.js

@@ -1,456 +1,275 @@
-import { Node as w, mergeAttributes as f } from "@tiptap/core";
-import { PluginKey as b, Plugin as v } from "./index41.js";
-const u = [
-  // Video - these providers support CORS on their oEmbed endpoints
-  {
-    name: "youtube",
-    patterns: [
-      /^https?:\/\/(www\.)?youtube\.com\/watch\?v=[\w-]+/,
-      /^https?:\/\/youtu\.be\/[\w-]+/,
-      /^https?:\/\/(www\.)?youtube\.com\/embed\/[\w-]+/,
-      /^https?:\/\/(www\.)?youtube\.com\/shorts\/[\w-]+/
-    ],
-    oEmbedEndpoint: "https://www.youtube.com/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "vimeo",
-    patterns: [/^https?:\/\/(www\.)?vimeo\.com\/\d+/],
-    oEmbedEndpoint: "https://vimeo.com/api/oembed.json",
-    supportsCors: !0
-  },
-  {
-    name: "loom",
-    patterns: [/^https?:\/\/(www\.)?loom\.com\/share\/[\w-]+/],
-    oEmbedEndpoint: "https://www.loom.com/v1/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "tiktok",
-    patterns: [/^https?:\/\/(www\.)?tiktok\.com\/@[\w.-]+\/video\/\d+/],
-    oEmbedEndpoint: "https://www.tiktok.com/oembed",
-    supportsCors: !0
-  },
-  // Social - these do NOT support CORS, require server-side proxy
-  {
-    name: "twitter",
-    patterns: [
-      /^https?:\/\/(twitter\.com|x\.com)\/\w+\/status\/\d+/,
-      /^https?:\/\/(twitter\.com|x\.com)\/\w+\/moments\/\d+/
-    ],
-    oEmbedEndpoint: "https://publish.twitter.com/oembed",
-    supportsCors: !1
-  },
-  {
-    name: "instagram",
-    patterns: [
-      /^https?:\/\/(www\.)?instagram\.com\/(p|reel)\/[\w-]+/,
-      /^https?:\/\/instagr\.am\/(p|reel)\/[\w-]+/
-    ],
-    oEmbedEndpoint: "https://graph.facebook.com/v10.0/instagram_oembed",
-    supportsCors: !1
-  },
-  // Dev - CodePen and CodeSandbox support CORS
-  {
-    name: "codepen",
-    patterns: [/^https?:\/\/(www\.)?codepen\.io\/[\w-]+\/pen\/[\w-]+/],
-    oEmbedEndpoint: "https://codepen.io/api/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "codesandbox",
-    patterns: [/^https?:\/\/(www\.)?codesandbox\.io\/s\/[\w-]+/],
-    oEmbedEndpoint: "https://codesandbox.io/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "github-gist",
-    patterns: [/^https?:\/\/gist\.github\.com\/[\w-]+\/[\w]+/],
-    supportsCors: !1
-  },
-  // Design
-  {
-    name: "figma",
-    patterns: [
-      /^https?:\/\/(www\.)?figma\.com\/(file|design)\/[\w-]+/,
-      /^https?:\/\/(www\.)?figma\.com\/proto\/[\w-]+/
-    ],
-    oEmbedEndpoint: "https://www.figma.com/api/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "dribbble",
-    patterns: [/^https?:\/\/(www\.)?dribbble\.com\/shots\/[\w-]+/],
-    supportsCors: !1
-  },
-  // Music - Spotify and SoundCloud support CORS
-  {
-    name: "spotify",
-    patterns: [/^https?:\/\/open\.spotify\.com\/(track|album|playlist|episode|show)\/[\w]+/],
-    oEmbedEndpoint: "https://open.spotify.com/oembed",
-    supportsCors: !0
-  },
-  {
-    name: "soundcloud",
-    patterns: [/^https?:\/\/(www\.)?soundcloud\.com\/[\w-]+\/[\w-]+/],
-    oEmbedEndpoint: "https://soundcloud.com/oembed",
-    supportsCors: !0
-  },
-  // Other
-  {
-    name: "slideshare",
-    patterns: [/^https?:\/\/(www\.)?slideshare\.net\/[\w-]+\/[\w-]+/],
-    oEmbedEndpoint: "https://www.slideshare.net/api/oembed/2",
-    supportsCors: !1
-  }
-];
-function c(t, e = u) {
-  for (const n of e)
-    for (const r of n.patterns)
-      if (r.test(t))
-        return n;
-  return null;
+import { Graphviz as H } from "@hpcc-js/wasm-graphviz";
+import { Node as G, mergeAttributes as S } from "@tiptap/core";
+import I from "mermaid";
+import { default as Q } from "mermaid";
+let $ = 0;
+function B() {
+  return `vizel-diagram-${Date.now()}-${++$}`;
 }
-function h(t) {
-  try {
-    return new URL(t), !0;
-  } catch {
-    return !1;
+const O = {
+  name: "diagram",
+  start: "```",
+  tokenize(e) {
+    const a = e.match(/^```mermaid\n([\s\S]*?)```/);
+    if (a?.[1] !== void 0)
+      return {
+        type: "diagram",
+        raw: a[0],
+        code: a[1].trim(),
+        diagramType: "mermaid"
+      };
+    const i = e.match(/^```dot\n([\s\S]*?)```/);
+    if (i?.[1] !== void 0)
+      return {
+        type: "diagram",
+        raw: i[0],
+        code: i[1].trim(),
+        diagramType: "graphviz"
+      };
+    const r = e.match(/^```graphviz\n([\s\S]*?)```/);
+    if (r?.[1] !== void 0)
+      return {
+        type: "diagram",
+        raw: r[0],
+        code: r[1].trim(),
+        diagramType: "graphviz"
+      };
   }
+};
+let A = !1;
+function P(e) {
+  A || (I.initialize({
+    startOnLoad: !1,
+    securityLevel: "loose",
+    theme: "default",
+    fontFamily: "var(--vizel-font-sans)",
+    ...e
+  }), A = !0);
+}
+let L = null, C = !1, h = null;
+function R() {
+  return L ? Promise.resolve(L) : (C && h || (C = !0, h = H.load().then((e) => (L = e, C = !1, e))), h);
 }
-async function g(t, e) {
-  if (!(e.oEmbedEndpoint && e.supportsCors))
-    return null;
+async function V(e) {
+  if (!e.trim())
+    return { svg: "", error: null };
   try {
-    const n = new URL(e.oEmbedEndpoint);
-    n.searchParams.set("url", t), n.searchParams.set("format", "json");
-    const r = await fetch(n.toString(), {
-      headers: {
-        Accept: "application/json"
-      }
-    });
-    return r.ok ? await r.json() : null;
-  } catch {
-    return null;
+    const a = B(), { svg: i } = await I.render(a, e);
+    return { svg: i, error: null };
+  } catch (a) {
+    return {
+      svg: "",
+      error: a instanceof Error ? a.message : "Invalid Mermaid syntax"
+    };
   }
 }
-function E(t, e) {
-  return t.html ? {
-    ...e,
-    type: "oembed",
-    html: t.html,
-    ...t.width !== void 0 && { width: t.width },
-    ...t.height !== void 0 && { height: t.height },
-    ...t.title !== void 0 && { title: t.title },
-    ...t.description !== void 0 && { description: t.description },
-    ...t.thumbnail_url !== void 0 && { image: t.thumbnail_url },
-    ...t.provider_name !== void 0 && { siteName: t.provider_name }
-  } : t.title || t.thumbnail_url ? {
-    ...e,
-    type: "ogp",
-    ...t.title !== void 0 && { title: t.title },
-    ...t.description !== void 0 && { description: t.description },
-    ...t.thumbnail_url !== void 0 && { image: t.thumbnail_url },
-    ...t.provider_name !== void 0 && { siteName: t.provider_name }
-  } : null;
-}
-function y(t = u) {
-  return async (e) => {
-    const n = c(e, t), r = {
-      url: e,
-      type: "link",
-      ...n?.name !== void 0 && { provider: n.name }
+async function K(e, a = "dot") {
+  if (!e.trim())
+    return { svg: "", error: null };
+  try {
+    return { svg: (await R()).layout(e, "svg", a), error: null };
+  } catch (i) {
+    return {
+      svg: "",
+      error: i instanceof Error ? i.message : "Invalid DOT syntax"
     };
-    if (!(n?.oEmbedEndpoint && n.supportsCors))
-      return r;
-    const s = await g(e, n);
-    return s ? E(s, r) ?? r : r;
-  };
-}
-const C = new b("vizelEmbedPaste");
-function k(t) {
-  const e = document.createElement("div");
-  e.className = "vizel-embed-loading", e.textContent = "Loading...", t.appendChild(e);
-}
-function z(t, e) {
-  t.innerHTML = e;
-}
-function N(t, e) {
-  const n = document.createElement("a");
-  if (n.href = e.url, n.target = "_blank", n.rel = "noopener noreferrer", n.className = "vizel-embed-card", e.image) {
-    const a = document.createElement("img");
-    a.src = e.image, a.alt = e.title ?? "", a.className = "vizel-embed-card-image", n.appendChild(a);
-  }
-  const r = document.createElement("div");
-  if (r.className = "vizel-embed-card-content", e.title) {
-    const a = document.createElement("div");
-    a.className = "vizel-embed-card-title", a.textContent = e.title, r.appendChild(a);
-  }
-  if (e.description) {
-    const a = document.createElement("div");
-    a.className = "vizel-embed-card-description", a.textContent = e.description, r.appendChild(a);
-  }
-  const s = document.createElement("div");
-  if (s.className = "vizel-embed-card-meta", e.favicon) {
-    const a = document.createElement("img");
-    a.src = e.favicon, a.alt = "", a.className = "vizel-embed-card-favicon", s.appendChild(a);
-  }
-  if (e.siteName) {
-    const a = document.createElement("span");
-    a.textContent = e.siteName, s.appendChild(a);
   }
-  s.hasChildNodes() && r.appendChild(s), n.appendChild(r), t.appendChild(n);
 }
-function D(t, e, n) {
-  const r = document.createElement("a");
-  r.href = e, r.target = "_blank", r.rel = "noopener noreferrer", r.className = "vizel-embed-link", r.textContent = n ?? e, t.appendChild(r);
+const _ = `flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Action 1]
+    B -->|No| D[Action 2]
+    C --> E[End]
+    D --> E`, F = `digraph G {
+    rankdir=LR
+    node [shape=box, style=rounded]
+    
+    A [label="Start"]
+    B [label="Process"]
+    C [label="End"]
+    
+    A -> B -> C
+}`;
+function x(e) {
+  switch (e) {
+    case "mermaid":
+      return "Mermaid";
+    case "graphviz":
+      return "GraphViz";
+    default:
+      return "Diagram";
+  }
 }
-const x = w.create({
-  name: "embed",
-  group() {
-    return this.options.inline ? "inline" : "block";
-  },
-  inline() {
-    return this.options.inline ?? !1;
-  },
+const N = G.create({
+  name: "diagram",
+  group: "block",
   atom: !0,
+  selectable: !0,
   draggable: !0,
+  // Higher priority than codeBlock to ensure diagram code blocks are parsed first
+  priority: 200,
   addOptions() {
     return {
-      fetchEmbedData: y(),
-      providers: u,
-      HTMLAttributes: {
-        class: "vizel-embed"
-      },
-      pasteHandler: !0,
-      inline: !1
+      mermaidConfig: {},
+      graphvizEngine: "dot",
+      defaultType: "mermaid",
+      defaultCode: _,
+      defaultGraphvizCode: F
     };
   },
   addAttributes() {
     return {
-      url: {
-        default: null
+      code: {
+        default: "",
+        parseHTML: (e) => e.getAttribute("data-code") || "",
+        renderHTML: (e) => ({
+          "data-code": e.code
+        })
       },
       type: {
-        default: "link"
-      },
-      provider: {
-        default: null
-      },
-      html: {
-        default: null
-      },
-      width: {
-        default: null
-      },
-      height: {
-        default: null
-      },
-      title: {
-        default: null
-      },
-      description: {
-        default: null
-      },
-      image: {
-        default: null
-      },
-      siteName: {
-        default: null
-      },
-      favicon: {
-        default: null
-      },
-      loading: {
-        default: !1
+        default: "mermaid",
+        parseHTML: (e) => e.getAttribute("data-diagram-type") || "mermaid",
+        renderHTML: (e) => ({
+          "data-diagram-type": e.type
+        })
       }
     };
   },
   parseHTML() {
     return [
       {
-        tag: 'div[data-vizel-embed="true"]'
+        tag: 'div[data-type="diagram"]'
       }
     ];
   },
-  renderHTML({ HTMLAttributes: t }) {
-    const e = f(this.options.HTMLAttributes ?? {}, t, {
-      "data-vizel-embed": "true",
-      "data-embed-type": t.type,
-      "data-embed-provider": t.provider
-    });
-    return t.type === "oembed" && t.html ? ["div", e, ["div", { class: "vizel-embed-content" }]] : t.type === "ogp" ? [
+  renderHTML({ HTMLAttributes: e }) {
+    return [
       "div",
-      e,
-      [
-        "a",
-        {
-          href: t.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          class: "vizel-embed-card"
+      S(e, {
+        "data-type": "diagram",
+        "data-vizel-diagram": "",
+        class: "vizel-diagram"
+      })
+    ];
+  },
+  addNodeView() {
+    return ({ node: e, getPos: a, editor: i }) => {
+      P(this.options.mermaidConfig);
+      const r = document.createElement("div");
+      r.classList.add("vizel-diagram"), r.setAttribute("data-type", "diagram"), r.setAttribute("data-vizel-diagram", ""), r.setAttribute("contenteditable", "false");
+      const m = document.createElement("div");
+      m.classList.add("vizel-diagram-type"), m.textContent = x(e.attrs.type), r.appendChild(m);
+      const l = document.createElement("div");
+      l.classList.add("vizel-diagram-render"), r.appendChild(l);
+      const o = document.createElement("div");
+      o.classList.add("vizel-diagram-edit-container"), o.style.display = "none";
+      const n = document.createElement("textarea");
+      n.classList.add("vizel-diagram-textarea"), n.value = e.attrs.code, n.placeholder = "Enter diagram code...", n.spellcheck = !1, o.appendChild(n);
+      const f = document.createElement("div");
+      f.classList.add("vizel-diagram-preview"), o.appendChild(f);
+      const z = document.createElement("div");
+      z.classList.add("vizel-diagram-error"), z.style.display = "none", o.appendChild(z), r.appendChild(o);
+      let u = !1, s = e.attrs.code, c = e.attrs.type;
+      const y = async (t, d, g) => {
+        if (!t.trim()) {
+          g.innerHTML = '<div class="vizel-diagram-placeholder">Click to add diagram code</div>';
+          return;
+        }
+        let v;
+        d === "graphviz" ? v = await K(t, this.options.graphvizEngine) : v = await V(t), v.error ? g.innerHTML = `<div class="vizel-diagram-error-display">${v.error}</div>` : g.innerHTML = v.svg;
+      }, T = () => {
+        i.isEditable && (u = !0, r.classList.add("vizel-diagram-editing"), l.style.display = "none", m.style.display = "none", o.style.display = "", n.value = s, y(s, c, f), n.focus());
+      }, E = () => {
+        if (!u) return;
+        u = !1, r.classList.remove("vizel-diagram-editing"), l.style.display = "", m.style.display = "", o.style.display = "none";
+        const t = n.value.trim(), d = typeof a == "function" ? a() : null;
+        d != null && (t === "" && s !== "" ? i.chain().focus().deleteRange({ from: d, to: d + e.nodeSize }).run() : t !== s && (s = t, i.chain().focus().updateAttributes("diagram", { code: t }).run()));
+      }, M = (t) => {
+        !u && t.target === r && (t.preventDefault(), t.stopPropagation(), T());
+      }, D = (t) => {
+        t.preventDefault(), t.stopPropagation(), T();
+      }, w = (t) => {
+        const d = t.relatedTarget;
+        d instanceof HTMLElement && o.contains(d) || E();
+      }, b = (t) => {
+        t.key === "Escape" && (t.preventDefault(), n.value = s, E()), t.key === "Enter" && (t.ctrlKey || t.metaKey) && (t.preventDefault(), E());
+      };
+      let p = null;
+      const k = () => {
+        p && clearTimeout(p), p = setTimeout(() => {
+          y(n.value, c, f);
+        }, 300);
+      };
+      return r.addEventListener("click", M), l.addEventListener("click", D), n.addEventListener("blur", w), n.addEventListener("keydown", b), n.addEventListener("input", k), y(s, c, l), {
+        dom: r,
+        update(t) {
+          if (t.type.name !== "diagram")
+            return !1;
+          const d = t.attrs.type !== c, g = t.attrs.code !== s;
+          return d && (c = t.attrs.type, m.textContent = x(c)), !u && (g || d) && (s = t.attrs.code, y(s, c, l)), !0;
         },
-        t.title || t.url
-      ]
-    ] : [
-      "div",
-      e,
-      [
-        "a",
-        {
-          href: t.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          class: "vizel-embed-link"
+        selectNode() {
+          r.classList.add("vizel-diagram-selected");
         },
-        t.title || t.url
-      ]
-    ];
+        deselectNode() {
+          r.classList.remove("vizel-diagram-selected");
+        },
+        destroy() {
+          p && clearTimeout(p), r.removeEventListener("click", M), l.removeEventListener("click", D), n.removeEventListener("blur", w), n.removeEventListener("keydown", b), n.removeEventListener("input", k);
+        }
+      };
+    };
   },
   addCommands() {
     return {
-      setEmbed: ({ url: t }) => ({ commands: e, editor: n }) => {
-        if (!h(t))
-          return !1;
-        const r = c(t, this.options.providers), s = {
-          url: t,
-          type: "link",
-          loading: !0
-        };
-        r && (s.provider = r.name);
-        const a = e.insertContent({
+      insertDiagram: ({ code: e, type: a = "mermaid" }) => ({ commands: i }) => {
+        const r = a === "graphviz" ? this.options.defaultGraphvizCode : this.options.defaultCode;
+        return i.insertContent({
           type: this.name,
-          attrs: s
+          attrs: {
+            code: e || r,
+            type: a
+          }
         });
-        return this.options.fetchEmbedData && this.options.fetchEmbedData(t).then((o) => {
-          n.state.doc.descendants((i, p) => i.type.name === this.name && i.attrs.url === t && i.attrs.loading ? (n.chain().focus().command(({ tr: l }) => (l.setNodeMarkup(p, void 0, {
-            ...i.attrs,
-            ...o,
-            loading: !1
-          }), !0)).run(), !1) : !0);
-        }).catch((o) => {
-          console.error("Failed to fetch embed data:", o), n.state.doc.descendants((i, p) => i.type.name === this.name && i.attrs.url === t && i.attrs.loading ? (n.chain().focus().command(({ tr: l }) => (l.setNodeMarkup(p, void 0, {
-            ...i.attrs,
-            type: "link",
-            loading: !1
-          }), !0)).run(), !1) : !0);
-        }), a;
-      },
-      updateEmbed: (t) => ({ state: e, tr: n }) => {
-        const { selection: r } = e, s = e.doc.nodeAt(r.from);
-        return s?.type.name !== this.name ? !1 : (n.setNodeMarkup(r.from, void 0, {
-          ...s.attrs,
-          ...t
-        }), !0);
       }
     };
   },
-  addNodeView() {
-    return ({ node: t, HTMLAttributes: e }) => {
-      const n = document.createElement("div"), r = document.createElement("div");
-      r.className = "vizel-embed-content";
-      const s = f(this.options.HTMLAttributes ?? {}, e, {
-        "data-vizel-embed": "true",
-        "data-embed-type": t.attrs.type,
-        "data-embed-provider": t.attrs.provider,
-        contenteditable: "false",
-        draggable: "true"
-      });
-      for (const [o, i] of Object.entries(s))
-        i != null && n.setAttribute(o, String(i));
-      n.appendChild(r);
-      const a = () => {
-        if (r.innerHTML = "", t.attrs.loading) {
-          k(r);
-          return;
-        }
-        if (t.attrs.type === "oembed" && t.attrs.html) {
-          z(r, t.attrs.html);
-          return;
-        }
-        if (t.attrs.type === "ogp") {
-          N(r, {
-            url: t.attrs.url,
-            image: t.attrs.image,
-            title: t.attrs.title,
-            description: t.attrs.description,
-            favicon: t.attrs.favicon,
-            siteName: t.attrs.siteName
-          });
-          return;
-        }
-        D(r, t.attrs.url, t.attrs.title);
-      };
-      return a(), {
-        dom: n,
-        contentDOM: null,
-        // atom node, no editable content
-        update(o) {
-          return o.type.name !== t.type.name ? !1 : (t = o, n.setAttribute("data-embed-type", t.attrs.type), n.setAttribute("data-embed-provider", t.attrs.provider ?? ""), a(), !0);
-        }
-      };
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const { selection: e } = this.editor.state, { $anchor: a } = e;
+        return a.node().type.name === "diagram" ? this.editor.commands.deleteSelection() : !1;
+      }
     };
   },
-  addProseMirrorPlugins() {
-    if (!this.options.pasteHandler)
-      return [];
-    const t = this;
-    return [
-      new v({
-        key: C,
-        props: {
-          handlePaste(e, n) {
-            const r = n.clipboardData?.getData("text/plain");
-            if (!r) return !1;
-            const s = r.trim();
-            if (!h(s)) return !1;
-            const a = c(s, t.options.providers);
-            if (!a) return !1;
-            n.preventDefault();
-            const { state: o } = e, { selection: i } = o;
-            if (!i.empty)
-              return !1;
-            const p = o.schema.nodes[t.name];
-            return p ? (e.dispatch(
-              o.tr.replaceSelectionWith(
-                p.create({
-                  url: s,
-                  type: "link",
-                  provider: a.name,
-                  loading: !0
-                })
-              )
-            ), t.options.fetchEmbedData && t.options.fetchEmbedData(s).then((l) => {
-              e.state.doc.descendants((d, m) => d.type.name === t.name && d.attrs.url === s && d.attrs.loading ? (e.dispatch(
-                e.state.tr.setNodeMarkup(m, void 0, {
-                  ...d.attrs,
-                  ...l,
-                  loading: !1
-                })
-              ), !1) : !0);
-            }).catch((l) => {
-              console.error("Failed to fetch embed data:", l), e.state.doc.descendants((d, m) => d.type.name === t.name && d.attrs.url === s && d.attrs.loading ? (e.dispatch(
-                e.state.tr.setNodeMarkup(m, void 0, {
-                  ...d.attrs,
-                  type: "link",
-                  loading: !1
-                })
-              ), !1) : !0);
-            }), !0) : !1;
-          }
-        }
-      })
-    ];
+  // Markdown support (GitHub compatible)
+  // Single tokenizer handles mermaid, dot, and graphviz code blocks
+  markdownTokenizer: O,
+  parseMarkdown(e) {
+    return {
+      type: "diagram",
+      attrs: {
+        code: e.code || "",
+        type: e.diagramType || "mermaid"
+      }
+    };
+  },
+  renderMarkdown(e) {
+    const a = e.attrs?.code || "", i = e.attrs?.type || "mermaid";
+    return i === "mermaid" ? `\`\`\`mermaid
+${a}
+\`\`\`` : i === "graphviz" ? `\`\`\`dot
+${a}
+\`\`\`` : `\`\`\`${i}
+${a}
+\`\`\``;
   }
 });
-function O(t = {}) {
-  return x.configure(t);
+function j(e = {}) {
+  return N.configure(e);
 }
 export {
-  x as VizelEmbed,
-  y as createVizelDefaultFetchEmbedData,
-  O as createVizelEmbedExtension,
-  c as detectVizelEmbedProvider,
-  u as vizelDefaultEmbedProviders,
-  C as vizelEmbedPastePluginKey
+  N as VizelDiagram,
+  j as createVizelDiagramExtension,
+  Q as mermaid
 };