@vizel/vue 0.0.1-alpha.1

package/dist/index.js

@@ -0,0 +1,63 @@
+import { default as r } from "./index2.js";
+import { default as l } from "./index3.js";
+import { default as f } from "./index4.js";
+import { default as u } from "./index5.js";
+import { default as s } from "./index6.js";
+import { default as V } from "./index7.js";
+import { default as z } from "./index8.js";
+import { default as n } from "./index9.js";
+import { default as S } from "./index10.js";
+import { default as c } from "./index11.js";
+import { default as v } from "./index12.js";
+import { default as E } from "./index13.js";
+import { default as P } from "./index14.js";
+import { default as k } from "./index15.js";
+import { default as w } from "./index16.js";
+import { default as y } from "./index17.js";
+import { default as L } from "./index18.js";
+import { default as R } from "./index19.js";
+import { default as j } from "./index20.js";
+import { default as F } from "./index21.js";
+import { provideVizelIcons as H, useVizelIconContext as J } from "./index22.js";
+import { useVizelContext as O, useVizelContextSafe as Q } from "./index23.js";
+import { createVizelSlashMenuRenderer as W } from "./index24.js";
+import { useVizelAutoSave as Y } from "./index25.js";
+import { useVizelEditor as _ } from "./index26.js";
+import { useVizelEditorState as ee } from "./index27.js";
+import { useVizelMarkdown as re } from "./index28.js";
+import { useVizelState as le } from "./index29.js";
+import { useVizelTheme as fe, useVizelThemeSafe as ie } from "./index30.js";
+export {
+  r as Vizel,
+  l as VizelBubbleMenu,
+  f as VizelBubbleMenuButton,
+  u as VizelBubbleMenuColorPicker,
+  s as VizelBubbleMenuDefault,
+  V as VizelBubbleMenuDivider,
+  z as VizelColorPicker,
+  n as VizelEditor,
+  S as VizelEmbedView,
+  c as VizelIcon,
+  v as VizelIconProvider,
+  E as VizelLinkEditor,
+  P as VizelNodeSelector,
+  k as VizelPortal,
+  w as VizelProvider,
+  y as VizelSaveIndicator,
+  L as VizelSlashMenu,
+  R as VizelSlashMenuEmpty,
+  j as VizelSlashMenuItem,
+  F as VizelThemeProvider,
+  W as createVizelSlashMenuRenderer,
+  H as provideVizelIcons,
+  Y as useVizelAutoSave,
+  O as useVizelContext,
+  Q as useVizelContextSafe,
+  _ as useVizelEditor,
+  ee as useVizelEditorState,
+  J as useVizelIconContext,
+  re as useVizelMarkdown,
+  le as useVizelState,
+  fe as useVizelTheme,
+  ie as useVizelThemeSafe
+};

package/dist/index10.js

@@ -0,0 +1,135 @@
+import { defineComponent as g, ref as w, computed as m, onMounted as p, watch as C, createElementBlock as d, openBlock as i, normalizeClass as s, createElementVNode as a, createCommentVNode as o, toDisplayString as r, createVNode as f } from "vue";
+import k from "./index11.js";
+const N = ["data-embed-provider"], x = ["data-embed-provider"], V = ["innerHTML"], B = ["data-embed-provider"], E = ["href"], L = ["src"], M = { class: "vizel-embed-card-content" }, S = {
+  key: 0,
+  class: "vizel-embed-card-site"
+}, R = ["src"], H = { key: 1 }, T = {
+  key: 1,
+  class: "vizel-embed-card-title"
+}, j = {
+  key: 2,
+  class: "vizel-embed-card-description"
+}, q = { class: "vizel-embed-card-url" }, A = ["data-embed-provider"], D = ["href"], I = { class: "vizel-embed-link-icon" }, P = { class: "vizel-embed-link-text" }, U = ["data-embed-provider"], $ = ["href"], F = { class: "vizel-embed-link-icon" }, G = { class: "vizel-embed-link-text" }, O = /* @__PURE__ */ g({
+  __name: "VizelEmbedView",
+  props: {
+    data: {},
+    class: {},
+    selected: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, v = w(null), c = m(() => {
+      const n = ["vizel-embed"];
+      return t.data.loading && n.push("is-loading"), t.selected && n.push("ProseMirror-selectednode"), t.class && n.push(t.class), n.join(" ");
+    }), y = m(() => ["youtube", "vimeo", "loom", "tiktok"].includes(t.data.provider ?? "")), b = m(() => !!t.data.image), z = m(() => {
+      try {
+        return new URL(t.data.url).hostname;
+      } catch {
+        return t.data.url;
+      }
+    });
+    function h() {
+      if (t.data.type === "oembed" && t.data.html && v.value) {
+        const n = v.value.querySelectorAll("script");
+        for (const l of n) {
+          const u = document.createElement("script");
+          l.src ? u.src = l.src : u.textContent = l.textContent, l.parentNode?.replaceChild(u, l);
+        }
+        t.data.provider === "twitter" && "twttr" in window && window.twttr?.widgets?.load?.();
+      }
+    }
+    return p(h), C(() => [t.data.type, t.data.html], h), (n, l) => e.data.loading ? (i(), d("div", {
+      key: 0,
+      class: s(c.value),
+      "data-embed-type": "loading",
+      "data-embed-provider": e.data.provider
+    }, [...l[0] || (l[0] = [
+      a("div", { class: "vizel-embed-loading" }, [
+        a("div", { class: "vizel-embed-loading-spinner" }),
+        a("span", null, "Loading embed...")
+      ], -1)
+    ])], 10, N)) : e.data.type === "oembed" && e.data.html ? (i(), d("div", {
+      key: 1,
+      ref_key: "containerRef",
+      ref: v,
+      class: s(c.value),
+      "data-embed-type": "oembed",
+      "data-embed-provider": e.data.provider
+    }, [
+      a("div", {
+        class: s(y.value ? "vizel-embed-video" : "vizel-embed-oembed"),
+        innerHTML: e.data.html
+      }, null, 10, V)
+    ], 10, x)) : e.data.type === "ogp" ? (i(), d("div", {
+      key: 2,
+      class: s(c.value),
+      "data-embed-type": "ogp",
+      "data-embed-provider": e.data.provider
+    }, [
+      a("a", {
+        href: e.data.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: s(["vizel-embed-card", b.value ? "vizel-embed-card-horizontal" : ""])
+      }, [
+        b.value ? (i(), d("img", {
+          key: 0,
+          src: e.data.image,
+          alt: "",
+          class: "vizel-embed-card-image",
+          loading: "lazy"
+        }, null, 8, L)) : o("", !0),
+        a("div", M, [
+          e.data.siteName || e.data.favicon ? (i(), d("div", S, [
+            e.data.favicon ? (i(), d("img", {
+              key: 0,
+              src: e.data.favicon,
+              alt: "",
+              class: "vizel-embed-card-favicon"
+            }, null, 8, R)) : o("", !0),
+            e.data.siteName ? (i(), d("span", H, r(e.data.siteName), 1)) : o("", !0)
+          ])) : o("", !0),
+          e.data.title ? (i(), d("div", T, r(e.data.title), 1)) : o("", !0),
+          e.data.description ? (i(), d("div", j, r(e.data.description), 1)) : o("", !0),
+          a("div", q, r(z.value), 1)
+        ])
+      ], 10, E)
+    ], 10, B)) : e.data.type === "title" && e.data.title ? (i(), d("div", {
+      key: 3,
+      class: s(c.value),
+      "data-embed-type": "title",
+      "data-embed-provider": e.data.provider
+    }, [
+      a("a", {
+        href: e.data.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: "vizel-embed-link"
+      }, [
+        a("span", I, [
+          f(k, { name: "link" })
+        ]),
+        a("span", P, r(e.data.title), 1)
+      ], 8, D)
+    ], 10, A)) : (i(), d("div", {
+      key: 4,
+      class: s(c.value),
+      "data-embed-type": "link",
+      "data-embed-provider": e.data.provider
+    }, [
+      a("a", {
+        href: e.data.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: "vizel-embed-link"
+      }, [
+        a("span", F, [
+          f(k, { name: "link" })
+        ]),
+        a("span", G, r(e.data.url), 1)
+      ], 8, $)
+    ], 10, U));
+  }
+});
+export {
+  O as default
+};

package/dist/index11.js

@@ -0,0 +1,30 @@
+import { defineComponent as c, computed as i, createBlock as r, openBlock as s, unref as m, mergeProps as l } from "vue";
+import { Icon as p } from "@iconify/vue";
+import { vizelDefaultIconIds as h } from "@vizel/core";
+import { useVizelIconContext as u } from "./index22.js";
+const g = /* @__PURE__ */ c({
+  __name: "VizelIcon",
+  props: {
+    name: {},
+    customIcons: {},
+    width: {},
+    height: {},
+    color: {}
+  },
+  setup(e) {
+    const o = e, { customIcons: t } = u(), n = i(
+      () => o.customIcons?.[o.name] ?? t?.[o.name] ?? h[o.name]
+    );
+    return (a, d) => (s(), r(m(p), l({
+      icon: n.value,
+      style: { pointerEvents: "none" }
+    }, {
+      ...o.width !== void 0 && { width: o.width },
+      ...o.height !== void 0 && { height: o.height },
+      ...o.color !== void 0 && { color: o.color }
+    }), null, 16, ["icon"]));
+  }
+});
+export {
+  g as default
+};

package/dist/index12.js

@@ -0,0 +1,14 @@
+import { defineComponent as r, renderSlot as n } from "vue";
+import { provideVizelIcons as s } from "./index22.js";
+const m = /* @__PURE__ */ r({
+  __name: "VizelIconProvider",
+  props: {
+    icons: {}
+  },
+  setup(o) {
+    return s(o.icons), (e, p) => n(e.$slots, "default");
+  }
+});
+export {
+  m as default
+};

package/dist/index13.js

@@ -0,0 +1,91 @@
+import { defineComponent as R, ref as r, computed as d, onMounted as V, onUnmounted as C, createElementBlock as m, openBlock as c, normalizeClass as M, createElementVNode as i, createCommentVNode as E, withDirectives as h, vModelText as U, createVNode as y, vModelCheckbox as D } from "vue";
+import { detectVizelEmbedProvider as B } from "@vizel/core";
+import g from "./index11.js";
+const N = { class: "vizel-link-editor-row" }, P = {
+  type: "submit",
+  class: "vizel-link-button",
+  title: "Apply"
+}, A = {
+  key: 0,
+  class: "vizel-link-editor-embed-toggle"
+}, H = /* @__PURE__ */ R({
+  __name: "VizelLinkEditor",
+  props: {
+    editor: {},
+    class: {},
+    enableEmbed: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(z, { emit: L }) {
+    const n = z, o = L, s = r(null), f = r(null), v = d(() => n.editor.getAttributes("link").href || ""), l = r(v.value), u = r(!1), p = d(() => n.enableEmbed ? n.editor.extensionManager.extensions.some((e) => e.name === "embed") : !1), x = d(() => l.value.trim() ? B(l.value.trim()) !== null : !1);
+    function k(t) {
+      s.value && !s.value.contains(t.target) && o("close");
+    }
+    function b(t) {
+      t.key === "Escape" && (t.preventDefault(), t.stopImmediatePropagation(), o("close"));
+    }
+    V(() => {
+      f.value?.focus(), setTimeout(() => {
+        document.addEventListener("mousedown", k);
+      }, 0), document.addEventListener("keydown", b, !0);
+    }), C(() => {
+      document.removeEventListener("mousedown", k), document.removeEventListener("keydown", b, !0);
+    });
+    function _(t) {
+      t.preventDefault();
+      const e = l.value.trim();
+      if (!e) {
+        n.editor.chain().focus().unsetLink().run(), o("close");
+        return;
+      }
+      u.value && p.value ? n.editor.chain().focus().unsetLink().setEmbed({ url: e }).run() : n.editor.chain().focus().setLink({ href: e }).run(), o("close");
+    }
+    function w() {
+      n.editor.chain().focus().unsetLink().run(), o("close");
+    }
+    return (t, e) => (c(), m("form", {
+      ref_key: "formRef",
+      ref: s,
+      class: M(["vizel-link-editor", t.$props.class]),
+      onSubmit: _
+    }, [
+      i("div", N, [
+        h(i("input", {
+          ref_key: "inputRef",
+          ref: f,
+          "onUpdate:modelValue": e[0] || (e[0] = (a) => l.value = a),
+          type: "url",
+          placeholder: "Enter URL...",
+          class: "vizel-link-input"
+        }, null, 512), [
+          [U, l.value]
+        ]),
+        i("button", P, [
+          y(g, { name: "check" })
+        ]),
+        v.value ? (c(), m("button", {
+          key: 0,
+          type: "button",
+          class: "vizel-link-button vizel-link-remove",
+          title: "Remove link",
+          onClick: w
+        }, [
+          y(g, { name: "x" })
+        ])) : E("", !0)
+      ]),
+      p.value && x.value ? (c(), m("div", A, [
+        h(i("input", {
+          id: "vizel-embed-toggle",
+          "onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
+          type: "checkbox"
+        }, null, 512), [
+          [D, u.value]
+        ]),
+        e[2] || (e[2] = i("label", { for: "vizel-embed-toggle" }, "Embed as rich content", -1))
+      ])) : E("", !0)
+    ], 34));
+  }
+});
+export {
+  H as default
+};

package/dist/index14.js

@@ -0,0 +1,134 @@
+import { defineComponent as E, ref as i, computed as m, onMounted as V, onUnmounted as A, watch as $, nextTick as S, createElementBlock as r, openBlock as c, normalizeClass as D, createElementVNode as l, createCommentVNode as g, createVNode as d, toDisplayString as N, Fragment as L, renderList as R } from "vue";
+import { vizelDefaultNodeTypes as B, getVizelActiveNodeType as K } from "@vizel/core";
+import { useVizelState as M } from "./index29.js";
+import u from "./index11.js";
+const I = ["aria-expanded", "aria-label"], O = { class: "vizel-node-selector-icon" }, U = { class: "vizel-node-selector-label" }, F = {
+  class: "vizel-node-selector-chevron",
+  "aria-hidden": "true"
+}, H = ["aria-selected", "tabindex", "onClick", "onMouseenter"], j = { class: "vizel-node-selector-option-icon" }, q = { class: "vizel-node-selector-option-label" }, G = {
+  key: 0,
+  class: "vizel-node-selector-check",
+  "aria-hidden": "true"
+}, X = /* @__PURE__ */ E({
+  __name: "VizelNodeSelector",
+  props: {
+    editor: {},
+    nodeTypes: { default: () => B },
+    class: {}
+  },
+  setup(T) {
+    const o = T, k = M(() => o.editor), n = i(!1), t = i(0), p = i(null), y = i(null), h = m(() => (k.value, K(o.editor, o.nodeTypes))), b = m(() => h.value?.label ?? "Text"), C = m(() => h.value?.icon ?? "paragraph");
+    function _(e) {
+      p.value && !p.value.contains(e.target) && (n.value = !1);
+    }
+    V(() => {
+      document.addEventListener("mousedown", _);
+    }), A(() => {
+      document.removeEventListener("mousedown", _);
+    }), $(n, (e) => {
+      e && S(() => {
+        y.value?.focus();
+      });
+    });
+    function w(e) {
+      if (!n.value) {
+        (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), n.value = !0, t.value = 0);
+        return;
+      }
+      switch (e.key) {
+        case "Escape":
+          e.preventDefault(), n.value = !1;
+          break;
+        case "ArrowDown":
+          e.preventDefault(), t.value = (t.value + 1) % o.nodeTypes.length;
+          break;
+        case "ArrowUp":
+          e.preventDefault(), t.value = (t.value - 1 + o.nodeTypes.length) % o.nodeTypes.length;
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const s = o.nodeTypes[t.value];
+          s && z(s);
+          break;
+        }
+        case "Home":
+          e.preventDefault(), t.value = 0;
+          break;
+        case "End":
+          e.preventDefault(), t.value = o.nodeTypes.length - 1;
+          break;
+      }
+    }
+    function z(e) {
+      e.command(o.editor), n.value = !1;
+    }
+    function v(e) {
+      return k.value, e.isActive(o.editor);
+    }
+    return (e, s) => (c(), r("div", {
+      ref_key: "containerRef",
+      ref: p,
+      class: D(["vizel-node-selector", e.$props.class]),
+      "data-vizel-node-selector": ""
+    }, [
+      l("button", {
+        type: "button",
+        class: "vizel-node-selector-trigger",
+        "aria-haspopup": !0,
+        "aria-expanded": n.value,
+        "aria-label": `Current block type: ${b.value}`,
+        title: "Change block type",
+        onClick: s[0] || (s[0] = (a) => n.value = !n.value),
+        onKeydown: w
+      }, [
+        l("span", O, [
+          d(u, { name: C.value }, null, 8, ["name"])
+        ]),
+        l("span", U, N(b.value), 1),
+        l("span", F, [
+          d(u, { name: "chevronDown" })
+        ])
+      ], 40, I),
+      n.value ? (c(), r("div", {
+        key: 0,
+        ref_key: "dropdownRef",
+        ref: y,
+        class: "vizel-node-selector-dropdown",
+        role: "listbox",
+        "aria-label": "Block types",
+        "data-vizel-node-selector-dropdown": "",
+        tabindex: "-1",
+        onKeydown: w
+      }, [
+        (c(!0), r(L, null, R(o.nodeTypes, (a, f) => (c(), r("button", {
+          key: a.name,
+          type: "button",
+          role: "option",
+          "aria-selected": v(a),
+          class: D([
+            "vizel-node-selector-option",
+            { "is-active": v(a) },
+            { "is-focused": f === t.value }
+          ]),
+          tabindex: f === t.value ? 0 : -1,
+          onClick: (x) => z(a),
+          onMouseenter: (x) => t.value = f
+        }, [
+          l("span", j, [
+            d(u, {
+              name: a.icon
+            }, null, 8, ["name"])
+          ]),
+          l("span", q, N(a.label), 1),
+          v(a) ? (c(), r("span", G, [
+            d(u, { name: "check" })
+          ])) : g("", !0)
+        ], 42, H))), 128))
+      ], 544)) : g("", !0)
+    ], 2));
+  }
+});
+export {
+  X as default
+};

package/dist/index15.js

@@ -0,0 +1,37 @@
+import { defineComponent as d, ref as p, onMounted as i, computed as o, createBlock as u, renderSlot as a, openBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as y, normalizeClass as v } from "vue";
+import { getVizelPortalContainer as z, VIZEL_PORTAL_ID as _, VIZEL_PORTAL_Z_INDEX as I } from "@vizel/core";
+const V = ["data-vizel-portal-layer"], P = /* @__PURE__ */ d({
+  __name: "VizelPortal",
+  props: {
+    layer: { default: "dropdown" },
+    class: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const r = e, l = p(!1);
+    i(() => {
+      z(), l.value = !0;
+    });
+    const s = o(() => `#${_}`), n = o(() => ({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      zIndex: I[r.layer]
+    }));
+    return (t, k) => l.value && !e.disabled ? (c(), u(f, {
+      key: 0,
+      to: s.value
+    }, [
+      m("div", {
+        "data-vizel-portal-layer": e.layer,
+        class: v(t.$props.class),
+        style: y(n.value)
+      }, [
+        a(t.$slots, "default")
+      ], 14, V)
+    ], 8, ["to"])) : a(t.$slots, "default", { key: 1 });
+  }
+});
+export {
+  P as default
+};

package/dist/index16.js

@@ -0,0 +1,21 @@
+import { defineComponent as s, provide as t, createElementBlock as a, openBlock as l, normalizeClass as n, renderSlot as p } from "vue";
+import { VIZEL_CONTEXT_KEY as i } from "./index23.js";
+const f = /* @__PURE__ */ s({
+  __name: "VizelProvider",
+  props: {
+    editor: {},
+    class: {}
+  },
+  setup(o) {
+    const r = o;
+    return t(i, () => r.editor), (e, c) => (l(), a("div", {
+      class: n(e.$props.class),
+      "data-vizel-root": ""
+    }, [
+      p(e.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  f as default
+};

package/dist/index17.js

@@ -0,0 +1,79 @@
+import { defineComponent as _, ref as h, onMounted as z, watch as S, onBeforeUnmount as k, computed as l, createElementBlock as i, openBlock as a, normalizeClass as y, createElementVNode as c, createCommentVNode as v, createBlock as o, createVNode as T, toDisplayString as d } from "vue";
+import { formatVizelRelativeTime as g } from "@vizel/core";
+import s from "./index11.js";
+const w = {
+  class: "vizel-save-indicator-icon",
+  "aria-hidden": "true"
+}, B = {
+  key: 1,
+  class: "vizel-save-indicator-spinner",
+  "aria-hidden": "true"
+}, V = { class: "vizel-save-indicator-text" }, I = {
+  key: 0,
+  class: "vizel-save-indicator-timestamp"
+}, $ = /* @__PURE__ */ _({
+  __name: "VizelSaveIndicator",
+  props: {
+    status: {},
+    lastSaved: {},
+    showTimestamp: { type: Boolean, default: !0 },
+    class: {}
+  },
+  setup(u) {
+    const e = u, t = h("");
+    let n = null;
+    function r() {
+      e.lastSaved ? t.value = g(e.lastSaved) : t.value = "";
+    }
+    z(() => {
+      r(), n = setInterval(r, 1e4);
+    }), S(
+      () => e.lastSaved,
+      () => {
+        r();
+      }
+    ), k(() => {
+      n && clearInterval(n);
+    });
+    const m = l(() => {
+      switch (e.status) {
+        case "saved":
+          return "Saved";
+        case "saving":
+          return "Saving...";
+        case "unsaved":
+          return "Unsaved";
+        case "error":
+          return "Error saving";
+        default:
+          return "";
+      }
+    }), p = l(() => e.showTimestamp && e.lastSaved && t.value && e.status === "saved");
+    return (f, x) => (a(), i("div", {
+      class: y(["vizel-save-indicator", `vizel-save-indicator--${e.status}`, f.$props.class]),
+      role: "status",
+      "aria-live": "polite",
+      "data-vizel-save-indicator": ""
+    }, [
+      c("span", w, [
+        e.status === "saved" ? (a(), o(s, {
+          key: 0,
+          name: "check"
+        })) : e.status === "saving" ? (a(), i("span", B, [
+          T(s, { name: "loader" })
+        ])) : e.status === "unsaved" ? (a(), o(s, {
+          key: 2,
+          name: "circle"
+        })) : e.status === "error" ? (a(), o(s, {
+          key: 3,
+          name: "warning"
+        })) : v("", !0)
+      ]),
+      c("span", V, d(m.value), 1),
+      p.value ? (a(), i("span", I, d(t.value), 1)) : v("", !0)
+    ], 2));
+  }
+});
+export {
+  $ as default
+};