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

package/dist/index9.js

@@ -1,275 +1,456 @@
-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()}-${++$}`;
-}
-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"
-      };
+import { Node as w, mergeAttributes as f } from "@tiptap/core";
+import { PluginKey as b, Plugin as v } from "./index42.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
   }
-};
-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);
+];
+function c(t, e = u) {
+  for (const n of e)
+    for (const r of n.patterns)
+      if (r.test(t))
+        return n;
+  return null;
 }
-async function V(e) {
-  if (!e.trim())
-    return { svg: "", error: null };
+function h(t) {
   try {
-    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"
-    };
+    return new URL(t), !0;
+  } catch {
+    return !1;
   }
 }
-async function K(e, a = "dot") {
-  if (!e.trim())
-    return { svg: "", error: null };
+async function g(t, e) {
+  if (!(e.oEmbedEndpoint && e.supportsCors))
+    return 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"
-    };
+    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 _ = `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";
+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 }
+    };
+    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);
 }
-const N = G.create({
-  name: "diagram",
-  group: "block",
+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 x = w.create({
+  name: "embed",
+  group() {
+    return this.options.inline ? "inline" : "block";
+  },
+  inline() {
+    return this.options.inline ?? !1;
+  },
   atom: !0,
-  selectable: !0,
   draggable: !0,
-  // Higher priority than codeBlock to ensure diagram code blocks are parsed first
-  priority: 200,
   addOptions() {
     return {
-      mermaidConfig: {},
-      graphvizEngine: "dot",
-      defaultType: "mermaid",
-      defaultCode: _,
-      defaultGraphvizCode: F
+      fetchEmbedData: y(),
+      providers: u,
+      HTMLAttributes: {
+        class: "vizel-embed"
+      },
+      pasteHandler: !0,
+      inline: !1
     };
   },
   addAttributes() {
     return {
-      code: {
-        default: "",
-        parseHTML: (e) => e.getAttribute("data-code") || "",
-        renderHTML: (e) => ({
-          "data-code": e.code
-        })
+      url: {
+        default: null
       },
       type: {
-        default: "mermaid",
-        parseHTML: (e) => e.getAttribute("data-diagram-type") || "mermaid",
-        renderHTML: (e) => ({
-          "data-diagram-type": e.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
       }
     };
   },
   parseHTML() {
     return [
       {
-        tag: 'div[data-type="diagram"]'
+        tag: 'div[data-vizel-embed="true"]'
       }
     ];
   },
-  renderHTML({ HTMLAttributes: e }) {
-    return [
+  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" ? [
       "div",
-      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;
-        },
-        selectNode() {
-          r.classList.add("vizel-diagram-selected");
+      e,
+      [
+        "a",
+        {
+          href: t.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "vizel-embed-card"
         },
-        deselectNode() {
-          r.classList.remove("vizel-diagram-selected");
+        t.title || t.url
+      ]
+    ] : [
+      "div",
+      e,
+      [
+        "a",
+        {
+          href: t.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          class: "vizel-embed-link"
         },
-        destroy() {
-          p && clearTimeout(p), r.removeEventListener("click", M), l.removeEventListener("click", D), n.removeEventListener("blur", w), n.removeEventListener("keydown", b), n.removeEventListener("input", k);
-        }
-      };
-    };
+        t.title || t.url
+      ]
+    ];
   },
   addCommands() {
     return {
-      insertDiagram: ({ code: e, type: a = "mermaid" }) => ({ commands: i }) => {
-        const r = a === "graphviz" ? this.options.defaultGraphvizCode : this.options.defaultCode;
-        return i.insertContent({
+      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({
           type: this.name,
-          attrs: {
-            code: e || r,
-            type: a
-          }
+          attrs: s
         });
+        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);
       }
     };
   },
-  addKeyboardShortcuts() {
-    return {
-      Backspace: () => {
-        const { selection: e } = this.editor.state, { $anchor: a } = e;
-        return a.node().type.name === "diagram" ? this.editor.commands.deleteSelection() : !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"
-      }
+  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);
+        }
+      };
     };
   },
-  renderMarkdown(e) {
-    const a = e.attrs?.code || "", i = e.attrs?.type || "mermaid";
-    return i === "mermaid" ? `\`\`\`mermaid
-${a}
-\`\`\`` : i === "graphviz" ? `\`\`\`dot
-${a}
-\`\`\`` : `\`\`\`${i}
-${a}
-\`\`\``;
+  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;
+          }
+        }
+      })
+    ];
   }
 });
-function j(e = {}) {
-  return N.configure(e);
+function O(t = {}) {
+  return x.configure(t);
 }
 export {
-  N as VizelDiagram,
-  j as createVizelDiagramExtension,
-  Q as mermaid
+  x as VizelEmbed,
+  y as createVizelDefaultFetchEmbedData,
+  O as createVizelEmbedExtension,
+  c as detectVizelEmbedProvider,
+  u as vizelDefaultEmbedProviders,
+  C as vizelEmbedPastePluginKey
 };