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

package/dist/index23.js

@@ -1,87 +1,69 @@
-import x from "@tiptap/extension-image";
-const T = x.extend({
-  name: "image",
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      minWidth: 100,
-      minHeight: 100,
-      inline: !1,
-      allowBase64: !0,
-      HTMLAttributes: {
-        class: "vizel-image"
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: null,
-        parseHTML: (n) => {
-          const s = n.getAttribute("width") || n.style.width;
-          return s ? Number.parseInt(s, 10) : null;
-        },
-        renderHTML: (n) => n.width ? { width: n.width } : {}
-      },
-      height: {
-        default: null,
-        parseHTML: (n) => {
-          const s = n.getAttribute("height") || n.style.height;
-          return s ? Number.parseInt(s, 10) : null;
-        },
-        renderHTML: (n) => n.height ? { height: n.height } : {}
-      }
-    };
-  },
-  addNodeView() {
-    return ({ node: n, editor: s, getPos: m }) => {
-      const { minWidth: b = 100, maxWidth: E } = this.options, r = document.createElement("div");
-      r.setAttribute("data-resize-wrapper", "true");
-      const t = document.createElement("img");
-      t.src = n.attrs.src, t.alt = n.attrs.alt || "", t.title = n.attrs.title || "", t.className = "vizel-image", t.draggable = !1, n.attrs.width && (t.style.width = `${n.attrs.width}px`, t.style.height = "auto"), r.appendChild(t);
-      const i = document.createElement("div");
-      i.setAttribute("data-resize-handle", "left"), i.contentEditable = "false", i.style.position = "absolute", i.style.left = "4px", i.style.top = "50%", i.style.transform = "translateY(-50%)";
-      const o = document.createElement("div");
-      o.setAttribute("data-resize-handle", "right"), o.contentEditable = "false", o.style.position = "absolute", o.style.right = "4px", o.style.top = "50%", o.style.transform = "translateY(-50%)";
-      const l = document.createElement("div");
-      l.setAttribute("data-resize-tooltip", "true"), l.style.position = "absolute", l.style.display = "none", r.appendChild(i), r.appendChild(o), r.appendChild(l);
-      let u = 0, p = 0, d = !1, f = "right";
-      const g = (e, a) => {
-        l.textContent = `${Math.round(e)} × ${Math.round(a)}`;
-      }, M = () => {
-        l.style.display = "block", g(t.offsetWidth, t.offsetHeight);
-      }, L = () => {
-        l.style.display = "none";
-      }, y = (e, a) => {
-        e.preventDefault(), e.stopPropagation(), s.isEditable && (d = !0, f = a, u = e.clientX, p = t.offsetWidth, M(), document.addEventListener("mousemove", h), document.addEventListener("mouseup", c), document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none");
-      }, h = (e) => {
-        if (!d) return;
-        const a = f === "right" ? e.clientX - u : u - e.clientX, W = r.parentElement?.clientWidth ?? Number.POSITIVE_INFINITY, z = Math.min(E ?? W, Math.max(b, p + a));
-        t.style.width = `${z}px`, t.style.height = "auto", g(t.offsetWidth, t.offsetHeight);
-      }, c = () => {
-        if (!d) return;
-        if (d = !1, L(), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", c), document.body.style.cursor = "", document.body.style.userSelect = "", (typeof m == "function" ? m() : null) != null && s.isEditable) {
-          const a = Math.round(t.offsetWidth);
-          s.commands.updateAttributes("image", {
-            width: a,
-            height: null
-            // Clear height to use auto
-          });
-        }
-      }, w = (e) => y(e, "left"), v = (e) => y(e, "right");
-      return i.addEventListener("mousedown", w), o.addEventListener("mousedown", v), {
-        dom: r,
-        contentDOM: null,
-        update: (e) => e.type.name !== "image" ? !1 : (t.src = e.attrs.src, t.alt = e.attrs.alt || "", t.title = e.attrs.title || "", e.attrs.width ? (t.style.width = `${e.attrs.width}px`, t.style.height = "auto") : (t.style.width = "", t.style.height = ""), !0),
-        destroy: () => {
-          i.removeEventListener("mousedown", w), o.removeEventListener("mousedown", v), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", c);
-        }
-      };
-    };
+const a = "system", d = "vizel-theme", i = "data-vizel-theme";
+function c() {
+  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function m(t, e) {
+  return t === "system" ? e : t;
+}
+function s(t) {
+  if (typeof window > "u")
+    return null;
+  try {
+    const e = localStorage.getItem(t);
+    if (e === "light" || e === "dark" || e === "system")
+      return e;
+  } catch {
   }
-});
+  return null;
+}
+function u(t, e) {
+  if (!(typeof window > "u"))
+    try {
+      localStorage.setItem(t, e);
+    } catch {
+    }
+}
+function l(t, e, n) {
+  if (typeof document > "u")
+    return;
+  const r = e ? document.querySelector(e) : document.documentElement;
+  if (r) {
+    if (n) {
+      const o = document.createElement("style");
+      o.appendChild(
+        document.createTextNode(
+          "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"
+        )
+      ), document.head.appendChild(o), window.getComputedStyle(document.body), setTimeout(() => {
+        document.head.removeChild(o);
+      }, 1);
+    }
+    r.setAttribute(i, t);
+  }
+}
+function h(t) {
+  if (typeof window > "u")
+    return () => {
+    };
+  const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (r) => {
+    t(r.matches ? "dark" : "light");
+  };
+  return e.addEventListener("change", n), () => {
+    e.removeEventListener("change", n);
+  };
+}
+function f(t = d) {
+  return `(function(){try{var s=localStorage.getItem('${t}');var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var t=s==='dark'?'dark':s==='light'?'light':d?'dark':'light';document.documentElement.setAttribute('${i}',t)}catch(e){}})()`;
+}
 export {
-  T as VizelImageResize,
-  T as VizelResizableImage
+  a as VIZEL_DEFAULT_THEME,
+  d as VIZEL_DEFAULT_THEME_STORAGE_KEY,
+  i as VIZEL_THEME_DATA_ATTRIBUTE,
+  l as applyVizelTheme,
+  h as createVizelSystemThemeListener,
+  s as getStoredVizelTheme,
+  c as getVizelSystemTheme,
+  f as getVizelThemeInitScript,
+  m as resolveVizelTheme,
+  u as storeVizelTheme
 };

package/dist/index24.js

@@ -1,39 +1,15 @@
-import { Extension as a } from "@tiptap/core";
-import e from "@tiptap/suggestion";
-import { filterSlashCommands as i, defaultSlashCommands as m } from "./index20.js";
-import { flattenSlashCommandGroups as p, groupSlashCommands as g, searchSlashCommands as C, defaultGroupOrder as S } from "./index20.js";
-const n = (s) => typeof s == "object" && s !== null && "title" in s && "command" in s, h = a.create({
-  name: "slashCommand",
-  addOptions() {
-    return {
-      items: m,
-      suggestion: {
-        char: "/",
-        startOfLine: !1
-      }
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      e({
-        editor: this.editor,
-        char: this.options.suggestion?.char ?? "/",
-        startOfLine: this.options.suggestion?.startOfLine ?? !1,
-        items: ({ query: s }) => i(this.options.items ?? [], s),
-        command: ({ editor: s, range: t, props: o }) => {
-          n(o) && o.command({ editor: s, range: t });
-        },
-        ...this.options.suggestion
-      })
-    ];
+function s(t) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(t);
+}
+function a(t) {
+  const e = t.trim(), r = e.startsWith("#") ? e : `#${e}`;
+  if (r.length === 4) {
+    const [, o, i, n] = r;
+    return `#${o}${o}${i}${i}${n}${n}`.toUpperCase();
   }
-});
+  return r.toUpperCase();
+}
 export {
-  h as VizelSlashCommand,
-  i as filterVizelSlashCommands,
-  p as flattenVizelSlashCommandGroups,
-  g as groupVizelSlashCommands,
-  C as searchVizelSlashCommands,
-  S as vizelDefaultGroupOrder,
-  m as vizelDefaultSlashCommands
+  s as isVizelValidHexColor,
+  a as normalizeVizelHexColor
 };

package/dist/index25.js

@@ -1,95 +1,56 @@
-import { Table as w, TableCell as A, TableHeader as T } from "@tiptap/extension-table";
-function g(t, e) {
-  return t.tokens ? e.parseInline(t.tokens) : t.text ? [e.createTextNode(t.text)] : [];
+import { Editor as E } from "@tiptap/core";
+import { createVizelExtensions as w } from "./index3.js";
+import { resolveVizelFeatures as D, vizelDefaultEditorProps as V } from "./index26.js";
+import { initializeVizelMarkdownContent as F } from "./index27.js";
+function y(f) {
+  const {
+    initialContent: o,
+    initialMarkdown: t,
+    transformDiagramsOnImport: p = !0,
+    placeholder: r,
+    editable: v = !0,
+    autofocus: z = !1,
+    features: e,
+    extensions: g = [],
+    createSlashMenuRenderer: x,
+    onUpdate: n,
+    onCreate: i,
+    onDestroy: a,
+    onSelectionUpdate: s,
+    onFocus: d,
+    onBlur: l
+  } = f, c = D({
+    ...e !== void 0 && { features: e },
+    createSlashMenuRenderer: x
+  }), C = typeof e?.image == "object" ? e.image : {}, m = t ? (u) => {
+    F(u.editor, t, {
+      transformDiagrams: p
+    }), i?.(u);
+  } : i;
+  return {
+    editor: new E({
+      extensions: [
+        ...w({
+          ...r !== void 0 && { placeholder: r },
+          ...c !== void 0 && { features: c }
+        }),
+        ...g
+      ],
+      // Only set initialContent if initialMarkdown is not provided
+      ...!t && o !== void 0 && { content: o },
+      editable: v,
+      autofocus: z,
+      editorProps: V,
+      ...n && { onUpdate: n },
+      ...m && { onCreate: m },
+      ...a && { onDestroy: a },
+      ...s && { onSelectionUpdate: s },
+      ...d && { onFocus: d },
+      ...l && { onBlur: l }
+    }),
+    imageOptions: C
+  };
 }
-function f(t, e) {
-  return t.length > 0 ? [e.createNode("paragraph", void 0, t)] : [e.createNode("paragraph")];
-}
-function x(t, e) {
-  const { header: l, align: r, rows: s } = t, a = l.map((n, i) => {
-    const o = g(n, e), c = r[i] ? { textAlign: r[i] } : void 0;
-    return e.createNode("tableHeader", c, f(o, e));
-  }), d = e.createNode("tableRow", void 0, a), u = s.map((n) => {
-    const i = n.map((o, c) => {
-      const m = g(o, e), p = r[c] ? { textAlign: r[c] } : void 0;
-      return e.createNode("tableCell", p, f(m, e));
-    });
-    return e.createNode("tableRow", void 0, i);
-  });
-  return e.createNode("table", void 0, [d, ...u]);
-}
-function b(t, e) {
-  if (!t.content || t.content.length === 0)
-    return "";
-  const l = t.content, r = l[0];
-  if (!r?.content)
-    return "";
-  const s = r.content.map(
-    (n) => n.attrs?.textAlign || null
-  ), a = l.map((n) => n.content ? `| ${n.content.map((o) => (o.content ? e.renderChildren(o.content, "") : "").replace(/\n/g, " ").trim()).join(" | ")} |` : "|"), u = `| ${s.map((n) => {
-    switch (n) {
-      case "left":
-        return ":---";
-      case "center":
-        return ":---:";
-      case "right":
-        return "---:";
-      default:
-        return "---";
-    }
-  }).join(" | ")} |`;
-  return a.length > 0 ? [a[0], u, ...a.slice(1)].join(`
-`) : a.join(`
-`);
-}
-const C = w.extend({
-  // Register markdown name for token matching
-  name: "table",
-  addStorage() {
-    return {
-      ...this.parent?.(),
-      // Mark this extension as markdown-aware
-      markdown: {
-        parse: x,
-        serialize: b
-      }
-    };
-  },
-  // Add markdown parsing support
-  // @ts-expect-error - parseMarkdown is a @tiptap/markdown extension point
-  parseMarkdown(t, e) {
-    return t.type !== "table" ? null : x(t, e);
-  },
-  // Add markdown rendering support
-  // @ts-expect-error - renderMarkdown is a @tiptap/markdown extension point
-  renderMarkdown(t, e, l) {
-    return b(t, e);
-  }
-}), M = A.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      textAlign: {
-        default: null,
-        parseHTML: (t) => t.style.textAlign || null,
-        renderHTML: (t) => t.textAlign ? { style: `text-align: ${t.textAlign}` } : {}
-      }
-    };
-  }
-}), N = T.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      textAlign: {
-        default: null,
-        parseHTML: (t) => t.style.textAlign || null,
-        renderHTML: (t) => t.textAlign ? { style: `text-align: ${t.textAlign}` } : {}
-      }
-    };
-  }
-});
 export {
-  C as VizelTable,
-  M as VizelTableCell,
-  N as VizelTableHeader
+  y as createVizelEditorInstance
 };

package/dist/index26.js

@@ -1,104 +1,140 @@
-import { getIconData as g } from "./index34.js";
-import { iconToSVG as h } from "./index35.js";
-import s from "./index36.js";
-const u = {
-  // Text/Headings
-  heading1: "lucide:heading-1",
-  heading2: "lucide:heading-2",
-  heading3: "lucide:heading-3",
-  // Lists
-  bulletList: "lucide:list",
-  orderedList: "lucide:list-ordered",
-  taskList: "lucide:list-checks",
-  // Blocks
-  paragraph: "lucide:pilcrow",
-  blockquote: "lucide:quote",
-  horizontalRule: "lucide:minus",
-  details: "lucide:chevron-right",
-  codeBlock: "lucide:code",
-  table: "lucide:table",
-  // Media
-  image: "lucide:image",
-  imageUpload: "lucide:image-up",
-  embed: "lucide:link",
-  // Advanced
-  mathBlock: "lucide:sigma",
-  mathInline: "lucide:superscript",
-  mermaid: "lucide:git-graph",
-  graphviz: "lucide:workflow",
-  // Table controls
-  arrowUp: "lucide:arrow-up",
-  arrowDown: "lucide:arrow-down",
-  arrowLeft: "lucide:arrow-left",
-  arrowRight: "lucide:arrow-right",
-  alignLeft: "lucide:align-left",
-  alignCenter: "lucide:align-center",
-  alignRight: "lucide:align-right",
-  plus: "lucide:plus",
-  gripVertical: "lucide:grip-vertical",
-  gripHorizontal: "lucide:grip-horizontal",
-  // UI
-  check: "lucide:check",
-  loader: "lucide:loader-2",
-  circle: "lucide:circle",
-  warning: "lucide:alert-triangle",
-  chevronDown: "lucide:chevron-down",
-  x: "lucide:x",
-  // BubbleMenu toolbar
-  bold: "lucide:bold",
-  italic: "lucide:italic",
-  strikethrough: "lucide:strikethrough",
-  underline: "lucide:underline",
-  code: "lucide:code",
-  link: "lucide:link",
-  textColor: "lucide:baseline",
-  highlighter: "lucide:highlighter",
-  // Internal (NodeView rendering)
-  grip: "lucide:grip-vertical",
-  plusSmall: "lucide:plus",
-  listOrdered: "lucide:list-ordered"
-};
-function k(e, i) {
-  return i?.[e] ?? u[e];
+import "@tiptap/core";
+import "./index37.js";
+import "@tiptap/extension-image";
+import { createVizelImageUploader as p } from "./index31.js";
+import "./index12.js";
+function V(e) {
+  const { features: t, createSlashMenuRenderer: a } = e;
+  if (!t)
+    return {
+      slashCommand: {
+        suggestion: a()
+      }
+    };
+  if (t.slashCommand === !1)
+    return t;
+  const o = typeof t.slashCommand == "object" ? t.slashCommand : {};
+  return o.suggestion ? t : {
+    ...t,
+    slashCommand: {
+      ...o,
+      suggestion: a()
+    }
+  };
+}
+const f = (e) => e instanceof CustomEvent && typeof e.detail == "object" && e.detail !== null && "file" in e.detail && "editor" in e.detail;
+function g(e) {
+  return (t) => {
+    const a = e.getEditor();
+    if (!a || !f(t)) return;
+    const { file: o } = t.detail, n = a.state.selection.from, r = e.getImageOptions();
+    p({
+      onUpload: r.onUpload ?? ((i) => new Promise((l) => {
+        const s = new FileReader();
+        s.onload = () => {
+          typeof s.result == "string" && l(s.result);
+        }, s.readAsDataURL(i);
+      })),
+      ...r.maxFileSize !== void 0 && { maxFileSize: r.maxFileSize },
+      ...r.allowedTypes !== void 0 && { allowedTypes: r.allowedTypes },
+      ...r.onValidationError !== void 0 && {
+        onValidationError: r.onValidationError
+      },
+      ...r.onUploadError !== void 0 && {
+        onUploadError: r.onUploadError
+      }
+    })(o, a.view, n);
+  };
 }
-let t = null;
+const u = "vizel:upload-image";
 function w(e) {
-  t = e;
+  const t = g(e);
+  return document.addEventListener(u, t), () => {
+    document.removeEventListener(u, t);
+  };
 }
-function z(e, i) {
-  return t ? t(e, i) : (process.env.NODE_ENV === "development" && console.warn(
-    "[Vizel] Icon renderer not set. Call setVizelIconRenderer() from your framework package (@vizel/react, @vizel/vue, or @vizel/svelte)."
-  ), "");
+const F = {
+  attributes: {
+    class: "vizel-editor"
+  }
+};
+function h(e) {
+  return "characterCount" in e && typeof e.characterCount == "object" && e.characterCount !== null && "characters" in e.characterCount && "words" in e.characterCount;
 }
-function p(e, i) {
-  const c = u[e];
-  if (!c) return "";
-  const [, d] = c.split(":");
-  if (!d) return "";
-  const l = g(s, d);
-  if (!l) return "";
-  const r = h(l, {
-    height: i?.height ?? 24,
-    width: i?.width ?? 24
-  }), n = [
-    'xmlns="http://www.w3.org/2000/svg"',
-    `width="${i?.width ?? 24}"`,
-    `height="${i?.height ?? 24}"`,
-    `viewBox="0 0 ${l.width ?? 24} ${l.height ?? 24}"`
-  ];
-  if (r.attributes)
-    for (const [o, a] of Object.entries(r.attributes))
-      ["width", "height", "viewBox"].includes(o) || n.push(`${o}="${a}"`);
-  return `<svg ${n.join(" ")}>${r.body}</svg>`;
+function A(e) {
+  if (!e)
+    return {
+      isFocused: !1,
+      isEmpty: !0,
+      canUndo: !1,
+      canRedo: !1,
+      characterCount: 0,
+      wordCount: 0
+    };
+  const t = e.storage;
+  let a = 0, o = 0;
+  return h(t) && (a = t.characterCount.characters(), o = t.characterCount.words()), {
+    isFocused: e.isFocused,
+    isEmpty: e.isEmpty,
+    canUndo: e.can().undo(),
+    canRedo: e.can().redo(),
+    characterCount: a,
+    wordCount: o
+  };
+}
+const d = {
+  mermaid: "mermaid",
+  dot: "graphviz",
+  graphviz: "graphviz"
+};
+function E(e) {
+  if (!e) return e;
+  const t = e.attrs?.language;
+  return e.type === "codeBlock" && t && t in d ? {
+    type: "diagram",
+    attrs: {
+      code: e.content?.map((o) => o.text || "").join("").trim() || "",
+      type: d[t]
+    }
+  } : e.content && Array.isArray(e.content) ? {
+    ...e,
+    content: e.content.map(E)
+  } : e;
 }
-function I() {
-  w(p);
+function S(e) {
+  const t = e.schema.nodes.diagram;
+  if (!t) return;
+  const a = [];
+  if (e.state.doc.descendants((n, r) => {
+    if (n.type.name === "codeBlock") {
+      const c = n.attrs.language, i = c ? d[c] : void 0;
+      i && a.push({
+        from: r,
+        to: r + n.nodeSize,
+        code: n.textContent.trim(),
+        type: i
+      });
+    }
+  }), a.length === 0) return;
+  let { tr: o } = e.state;
+  for (let n = a.length - 1; n >= 0; n--) {
+    const r = a[n];
+    if (!r) continue;
+    const { from: c, to: i, code: l, type: s } = r, m = t.create({
+      code: l,
+      type: s
+    });
+    o = o.replaceWith(c, i, m);
+  }
+  e.view.dispatch(o);
 }
 export {
-  k as getVizelIconId,
-  I as initVizelIconRenderer,
-  z as renderVizelIcon,
-  p as renderVizelIconSvg,
-  w as setVizelIconRenderer,
-  u as vizelDefaultIconIds
+  u as VIZEL_UPLOAD_IMAGE_EVENT,
+  S as convertVizelCodeBlocksToDiagrams,
+  g as createVizelUploadEventHandler,
+  A as getVizelEditorState,
+  w as registerVizelUploadEventHandler,
+  V as resolveVizelFeatures,
+  E as transformVizelDiagramCodeBlocks,
+  F as vizelDefaultEditorProps
 };