@vizel/vue 0.0.1-alpha.1 → 0.0.1-alpha.4

package/dist/index21.js

@@ -1,43 +1,12 @@
-import { defineComponent as i, ref as n, computed as T, provide as h, onMounted as d, watch as c, onBeforeUnmount as f, renderSlot as p } from "vue";
-import { VIZEL_DEFAULT_THEME_STORAGE_KEY as E, VIZEL_DEFAULT_THEME as g, getStoredVizelTheme as _, getVizelSystemTheme as v, resolveVizelTheme as S, applyVizelTheme as s, createVizelSystemThemeListener as V, storeVizelTheme as y } from "@vizel/core";
-import { VIZEL_THEME_CONTEXT_KEY as z } from "./index31.js";
-const b = /* @__PURE__ */ i({
-  __name: "VizelThemeProvider",
-  props: {
-    defaultTheme: { default: g },
-    storageKey: { default: E },
-    targetSelector: {},
-    disableTransitionOnChange: { type: Boolean, default: !1 }
-  },
-  setup(m) {
-    const t = m, r = n(_(t.storageKey) ?? t.defaultTheme), o = n(v()), a = T(() => S(r.value, o.value));
-    function u(e) {
-      r.value = e, y(t.storageKey, e);
-    }
-    h(z, {
-      get theme() {
-        return r.value;
-      },
-      get resolvedTheme() {
-        return a.value;
-      },
-      get systemTheme() {
-        return o.value;
-      },
-      setTheme: u
-    });
-    let l = null;
-    return d(() => {
-      s(a.value, t.targetSelector, t.disableTransitionOnChange), l = V((e) => {
-        o.value = e;
-      });
-    }), c(a, (e) => {
-      s(e, t.targetSelector, t.disableTransitionOnChange);
-    }), f(() => {
-      l && l();
-    }), (e, C) => p(e.$slots, "default");
-  }
-});
+import { provide as e, inject as t } from "vue";
+const o = /* @__PURE__ */ Symbol("vizel-icon-context");
+function c(n) {
+  e(o, { customIcons: n });
+}
+function r() {
+  return t(o, {});
+}
 export {
-  b as default
+  c as provideVizelIcons,
+  r as useVizelIconContext
 };

package/dist/index22.js

@@ -1,12 +1,14 @@
-import { provide as e, inject as t } from "vue";
-const o = /* @__PURE__ */ Symbol("vizel-icon-context");
-function c(n) {
-  e(o, { customIcons: n });
-}
-function r() {
-  return t(o, {});
-}
+import { defineComponent as r, renderSlot as n } from "vue";
+import { provideVizelIcons as s } from "./index21.js";
+const m = /* @__PURE__ */ r({
+  __name: "VizelIconProvider",
+  props: {
+    icons: {}
+  },
+  setup(o) {
+    return s(o.icons), (e, p) => n(e.$slots, "default");
+  }
+});
 export {
-  c as provideVizelIcons,
-  r as useVizelIconContext
+  m as default
 };

package/dist/index23.js

@@ -1,16 +1,91 @@
-import { inject as t, computed as i } from "vue";
-const o = /* @__PURE__ */ Symbol("vizel-editor");
-function r() {
-  const e = t(o);
-  if (!e)
-    throw new Error("useVizelContext must be used within a VizelProvider");
-  return i(() => e());
-}
-function u() {
-  return t(o, null);
-}
+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 "./index20.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 {
-  o as VIZEL_CONTEXT_KEY,
-  r as useVizelContext,
-  u as useVizelContextSafe
+  H as default
 };

package/dist/index24.js

@@ -1,37 +1,134 @@
-import { handleVizelSuggestionEscape as m, createVizelSuggestionContainer as c } from "@vizel/core";
-import { ref as o, createApp as s, h as d } from "vue";
-import f from "./index18.js";
-function R(u = {}) {
-  return {
-    render: () => {
-      let t = null, n = null;
-      const r = o(null), a = o([]), l = o(null);
-      return {
-        onStart: (e) => {
-          a.value = e.items, l.value = e.command, n = c(), t = s({
-            setup() {
-              return () => d(f, {
-                items: a.value,
-                ...u.className !== void 0 && { class: u.className },
-                ref: r,
-                onCommand: (i) => {
-                  l.value?.(i);
-                }
-              });
-            }
-          }), t.mount(n.menuContainer), n.updatePosition(e.clientRect);
-        },
-        onUpdate: (e) => {
-          a.value = e.items, l.value = e.command, n?.updatePosition(e.clientRect);
-        },
-        onKeyDown: (e) => m(e.event) ? !0 : r.value?.onKeyDown(e.event) ?? !1,
-        onExit: () => {
-          t?.unmount(), n?.destroy(), t = null, n = null;
+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 "./index37.js";
+import u from "./index20.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 {
-  R as createVizelSlashMenuRenderer
+  X as default
 };

package/dist/index25.js

@@ -1,48 +1,37 @@
-import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as h, createVizelAutoSaveHandlers as f } from "@vizel/core";
-import { reactive as i, onMounted as U, watch as S, onBeforeUnmount as C, computed as t } from "vue";
-function A(o, u = {}) {
-  const r = { ...h, ...u }, a = i({
-    status: "saved",
-    hasUnsavedChanges: !1,
-    lastSaved: null,
-    error: null
-  });
-  let n = null, e = null;
-  const l = (s) => {
-    s.status !== void 0 && (a.status = s.status), s.hasUnsavedChanges !== void 0 && (a.hasUnsavedChanges = s.hasUnsavedChanges), s.lastSaved !== void 0 && (a.lastSaved = s.lastSaved), s.error !== void 0 && (a.error = s.error);
-  }, d = () => {
-    const s = o();
-    if (n && e && (n.off("update", e.handleUpdate), e.cancel()), n = s ?? null, !(n && r.enabled)) {
-      e = null;
-      return;
-    }
-    e = f(() => n, r, l), n.on("update", e.handleUpdate);
-  };
-  U(() => {
-    d();
-  }), S(
-    () => o(),
-    () => {
-      d();
-    }
-  ), C(() => {
-    n && e && (n.off("update", e.handleUpdate), e.cancel());
-  });
-  async function v() {
-    await e?.saveNow();
+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 });
   }
-  async function c() {
-    return await e?.restore() ?? null;
-  }
-  return {
-    status: t(() => a.status),
-    hasUnsavedChanges: t(() => a.hasUnsavedChanges),
-    lastSaved: t(() => a.lastSaved),
-    error: t(() => a.error),
-    save: v,
-    restore: c
-  };
-}
+});
 export {
-  A as useVizelAutoSave
+  P as default
 };

package/dist/index26.js

@@ -1,24 +1,21 @@
-import { createVizelEditorInstance as l, registerVizelUploadEventHandler as d } from "@vizel/core";
-import { shallowRef as u, onMounted as c, onBeforeUnmount as m } from "vue";
-import { createVizelSlashMenuRenderer as p } from "./index24.js";
-function E(o = {}) {
-  const { features: e, extensions: r = [], ...i } = o, a = typeof e?.image == "object" ? e.image : {}, t = u(null);
-  let n = null;
-  return c(() => {
-    const { editor: s } = l({
-      ...i,
-      ...e !== void 0 && { features: e },
-      extensions: r,
-      createSlashMenuRenderer: p
-    });
-    t.value = s, n = d({
-      getEditor: () => t.value,
-      getImageOptions: () => a
-    });
-  }), m(() => {
-    n?.(), t.value?.destroy();
-  }), t;
-}
+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 "./index17.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 {
-  E as useVizelEditor
+  f as default
 };

package/dist/index27.js

@@ -1,10 +1,79 @@
-import { getVizelEditorState as o } from "@vizel/core";
-import { computed as r } from "vue";
-import { useVizelState as i } from "./index29.js";
-function p(t) {
-  const e = i(t);
-  return r(() => (e.value, o(t())));
-}
+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 "./index20.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 {
-  p as useVizelEditorState
+  $ as default
 };