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

package/dist/index28.js

@@ -1,46 +1,120 @@
-import { getVizelMarkdown as k, createVizelMarkdownSyncHandlers as p } from "@vizel/core";
-import { ref as d, watch as w, onBeforeUnmount as M, computed as g } from "vue";
-function y(o, f = {}) {
-  const { initialValue: s, ...m } = f, t = d(s ?? ""), a = d(!1);
-  let l = null;
-  const i = () => (l || (l = p(m)), l);
-  let r = !1;
-  w(
-    o,
-    (e) => {
-      if (!e || r) return;
-      const n = i();
-      s !== void 0 ? (n.setMarkdown(e, s), t.value = s) : t.value = k(e), r = !0;
-      const u = () => {
-        n.handleUpdate(e), a.value = n.isPending();
-        const c = () => {
-          n.isPending() ? requestAnimationFrame(c) : (t.value = n.getMarkdown(), a.value = !1);
-        };
-        requestAnimationFrame(c);
-      };
-      e.on("update", u);
-    },
-    { immediate: !0 }
-  ), M(() => {
-    l?.destroy();
-  });
-  const h = (e) => {
-    const n = o();
-    if (!n) return;
-    i().setMarkdown(n, e), t.value = e, a.value = !1;
-  }, v = () => {
-    const e = o();
-    if (!e) return;
-    const n = i();
-    n.flush(e), t.value = n.getMarkdown(), a.value = !1;
-  };
-  return {
-    markdown: t,
-    setMarkdown: h,
-    isPending: g(() => a.value),
-    flush: v
-  };
-}
+import { defineComponent as A, useSlots as K, ref as C, computed as z, watch as $, nextTick as M, createElementBlock as u, openBlock as r, normalizeClass as O, Fragment as k, renderSlot as d, createBlock as _, unref as g, renderList as w, createElementVNode as T, toDisplayString as F } from "vue";
+import { groupVizelSlashCommands as H } from "@vizel/core";
+import L from "./index29.js";
+import S from "./index30.js";
+const N = {
+  key: 0,
+  class: "vizel-slash-menu-group",
+  "data-vizel-slash-menu-group": ""
+}, R = { class: "vizel-slash-menu-group-header" }, P = /* @__PURE__ */ A({
+  __name: "VizelSlashMenu",
+  props: {
+    items: {},
+    class: {},
+    showGroups: { type: Boolean, default: !0 },
+    groupOrder: {}
+  },
+  emits: ["command"],
+  setup(b, { expose: D, emit: G }) {
+    const m = b, B = G, p = K(), n = C(0), y = C([]), c = z(() => !m.showGroups || m.items.length <= 5 ? [{ name: "", items: m.items }] : H(m.items, m.groupOrder)), f = z(() => c.value.flatMap((e) => e.items));
+    $(
+      () => m.items,
+      () => {
+        n.value = 0, y.value = [];
+      }
+    ), $(n, async (e) => {
+      await M();
+      const a = y.value[e];
+      a && a.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    });
+    function v(e) {
+      const a = f.value[e];
+      a && B("command", a);
+    }
+    function E() {
+      if (c.value.length <= 1) return;
+      let e = 0, a = 0;
+      for (let t = 0; t < c.value.length; t++) {
+        const s = c.value[t];
+        if (s) {
+          if (n.value < a + s.items.length) {
+            e = t;
+            break;
+          }
+          a += s.items.length;
+        }
+      }
+      const i = (e + 1) % c.value.length;
+      let l = 0;
+      for (let t = 0; t < i; t++) {
+        const s = c.value[t];
+        s && (l += s.items.length);
+      }
+      n.value = l;
+    }
+    function V(e) {
+      return e.key === "ArrowUp" ? (n.value = (n.value + f.value.length - 1) % f.value.length, !0) : e.key === "ArrowDown" ? (n.value = (n.value + 1) % f.value.length, !0) : e.key === "Enter" ? (v(n.value), !0) : e.key === "Tab" ? (e.preventDefault(), E(), !0) : !1;
+    }
+    D({
+      onKeyDown: V
+    });
+    function o(e, a) {
+      let i = 0;
+      for (let l = 0; l < e; l++) {
+        const t = c.value[l];
+        t && (i += t.items.length);
+      }
+      return i + a;
+    }
+    return (e, a) => (r(), u("div", {
+      class: O(["vizel-slash-menu", e.$props.class]),
+      "data-vizel-slash-menu": ""
+    }, [
+      f.value.length === 0 ? (r(), u(k, { key: 0 }, [
+        g(p).empty ? d(e.$slots, "empty", { key: 0 }) : (r(), _(L, { key: 1 }))
+      ], 64)) : (r(!0), u(k, { key: 1 }, w(c.value, (i, l) => (r(), u(k, {
+        key: i.name || l
+      }, [
+        i.name ? (r(), u("div", N, [
+          T("div", R, F(i.name), 1),
+          (r(!0), u(k, null, w(i.items, (t, s) => (r(), u("div", {
+            key: t.title,
+            ref_for: !0,
+            ref: (h) => y.value[o(l, s)] = h
+          }, [
+            g(p).item ? d(e.$slots, "item", {
+              key: 0,
+              item: t,
+              isSelected: o(l, s) === n.value,
+              onClick: () => v(o(l, s))
+            }) : (r(), _(S, {
+              key: 1,
+              item: t,
+              "is-selected": o(l, s) === n.value,
+              onClick: (h) => v(o(l, s))
+            }, null, 8, ["item", "is-selected", "onClick"]))
+          ]))), 128))
+        ])) : (r(!0), u(k, { key: 1 }, w(i.items, (t, s) => (r(), u("div", {
+          key: t.title,
+          ref_for: !0,
+          ref: (h) => y.value[o(l, s)] = h
+        }, [
+          g(p).item ? d(e.$slots, "item", {
+            key: 0,
+            item: t,
+            isSelected: o(l, s) === n.value,
+            onClick: () => v(o(l, s))
+          }) : (r(), _(S, {
+            key: 1,
+            item: t,
+            "is-selected": o(l, s) === n.value,
+            onClick: (h) => v(o(l, s))
+          }, null, 8, ["item", "is-selected", "onClick"]))
+        ]))), 128))
+      ], 64))), 128))
+    ], 2));
+  }
+});
 export {
-  y as useVizelMarkdown
+  P as default
 };

package/dist/index29.js

@@ -1,23 +1,21 @@
-import { ref as a, watch as u, onBeforeUnmount as f } from "vue";
-function l(i) {
-  const e = a(0);
-  let n = null;
-  function o() {
-    e.value++;
+import { defineComponent as a, useSlots as o, createElementBlock as s, openBlock as t, normalizeClass as n, renderSlot as r, unref as p, Fragment as m, createTextVNode as u } from "vue";
+const f = /* @__PURE__ */ a({
+  __name: "VizelSlashMenuEmpty",
+  props: {
+    class: {}
+  },
+  setup(c) {
+    const l = o();
+    return (e, d) => (t(), s("div", {
+      class: n(["vizel-slash-menu-empty", e.$props.class]),
+      "data-vizel-slash-menu-empty": ""
+    }, [
+      p(l).default ? r(e.$slots, "default", { key: 0 }) : (t(), s(m, { key: 1 }, [
+        u("No results")
+      ], 64))
+    ], 2));
   }
-  function r(t) {
-    n && n !== t && n.off("transaction", o), n = t ?? null, n && n.on("transaction", o);
-  }
-  return u(
-    i,
-    (t) => {
-      r(t);
-    },
-    { immediate: !0 }
-  ), f(() => {
-    n && n.off("transaction", o);
-  }), e;
-}
+});
 export {
-  l as useVizelState
+  f as default
 };

package/dist/index3.js

@@ -1,61 +1,54 @@
-import { defineComponent as b, useSlots as v, ref as g, computed as h, watch as w, onBeforeUnmount as k, createElementBlock as B, createCommentVNode as a, openBlock as s, normalizeClass as E, renderSlot as S, createBlock as D, unref as z } from "vue";
-import { BubbleMenuPlugin as K } from "@vizel/core";
-import C from "./index6.js";
-import { useVizelContextSafe as M } from "./index23.js";
-const $ = /* @__PURE__ */ b({
-  __name: "VizelBubbleMenu",
-  props: {
-    editor: {},
-    class: {},
-    showDefaultMenu: { type: Boolean, default: !0 },
-    pluginKey: { default: "vizelBubbleMenu" },
-    updateDelay: { default: 100 },
-    shouldShow: {},
-    enableEmbed: { type: Boolean }
+import { Mark as r, markPasteRule as n, markInputRule as a, mergeAttributes as d } from "@tiptap/core";
+var o = /(^|[^`])`([^`]+)`(?!`)$/, u = /(^|[^`])`([^`]+)`(?!`)/g;
+r.create({
+  name: "code",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
   },
-  setup(u) {
-    const n = u, r = v(), i = g(null), d = M(), t = h(() => n.editor ?? d?.());
-    function o(e) {
-      e.key === "Escape" && t.value && !t.value.view.state.selection.empty && (e.preventDefault(), t.value.commands.setTextSelection(t.value.view.state.selection.to));
-    }
-    return w(
-      [t, i],
-      ([e, l], [, m]) => {
-        if (!(e && l)) return;
-        m && (e.unregisterPlugin(n.pluginKey), document.removeEventListener("keydown", o));
-        const c = K({
-          pluginKey: n.pluginKey,
-          editor: e,
-          element: l,
-          updateDelay: n.updateDelay,
-          ...n.shouldShow && {
-            shouldShow: ({ editor: f, from: p, to: y }) => n.shouldShow?.({ editor: f, from: p, to: y }) ?? !1
-          },
-          options: {
-            placement: "top"
-          }
-        });
-        e.registerPlugin(c), document.addEventListener("keydown", o);
-      },
-      { immediate: !0 }
-    ), k(() => {
-      t.value && t.value.unregisterPlugin(n.pluginKey), document.removeEventListener("keydown", o);
-    }), (e, l) => t.value ? (s(), B("div", {
-      key: 0,
-      ref_key: "menuRef",
-      ref: i,
-      class: E(["vizel-bubble-menu", e.$props.class]),
-      "data-vizel-bubble-menu": "",
-      style: { visibility: "hidden" }
-    }, [
-      z(r).default ? S(e.$slots, "default", { key: 0 }) : u.showDefaultMenu ? (s(), D(C, {
-        key: 1,
-        editor: t.value,
-        "enable-embed": n.enableEmbed
-      }, null, 8, ["editor", "enable-embed"])) : a("", !0)
-    ], 2)) : a("", !0);
+  excludes: "_",
+  code: !0,
+  exitable: !0,
+  parseHTML() {
+    return [{ tag: "code" }];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["code", d(this.options.HTMLAttributes, e), 0];
+  },
+  markdownTokenName: "codespan",
+  parseMarkdown: (e, t) => t.applyMark("code", [{ type: "text", text: e.text || "" }]),
+  renderMarkdown: (e, t) => e.content ? `\`${t.renderChildren(e.content)}\`` : "",
+  addCommands() {
+    return {
+      setCode: () => ({ commands: e }) => e.setMark(this.name),
+      toggleCode: () => ({ commands: e }) => e.toggleMark(this.name),
+      unsetCode: () => ({ commands: e }) => e.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-e": () => this.editor.commands.toggleCode()
+    };
+  },
+  addInputRules() {
+    return [
+      a({
+        find: o,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      n({
+        find: u,
+        type: this.type
+      })
+    ];
   }
 });
 export {
-  $ as default
+  o as inputRegex,
+  u as pasteRegex
 };

package/dist/index30.js

@@ -1,15 +1,52 @@
-import { inject as r } from "vue";
-import { VIZEL_THEME_CONTEXT_KEY as t } from "./index31.js";
-function o() {
-  const e = r(t);
-  if (!e)
-    throw new Error("useVizelTheme must be used within a VizelThemeProvider");
-  return e;
-}
-function u() {
-  return r(t, null);
-}
+import { defineComponent as r, createElementBlock as t, openBlock as s, normalizeClass as u, createElementVNode as l, createCommentVNode as k, createVNode as v, Fragment as c, renderList as z, unref as f, toDisplayString as n, createTextVNode as y } from "vue";
+import { splitVizelTextByMatches as g } from "@vizel/core";
+import x from "./index20.js";
+const V = ["data-selected"], p = { class: "vizel-slash-menu-icon" }, S = { class: "vizel-slash-menu-text" }, _ = { class: "vizel-slash-menu-title" }, B = {
+  key: 0,
+  class: "vizel-slash-menu-highlight"
+}, C = { class: "vizel-slash-menu-description" }, M = {
+  key: 0,
+  class: "vizel-slash-menu-shortcut"
+}, E = /* @__PURE__ */ r({
+  __name: "VizelSlashMenuItem",
+  props: {
+    item: {},
+    isSelected: { type: Boolean },
+    class: {},
+    titleMatches: {}
+  },
+  emits: ["click"],
+  setup(e, { emit: o }) {
+    const m = o;
+    return (d, a) => (s(), t("button", {
+      type: "button",
+      class: u([
+        "vizel-slash-menu-item",
+        { "is-selected": e.isSelected },
+        d.$props.class
+      ]),
+      "data-selected": e.isSelected || void 0,
+      onClick: a[0] || (a[0] = (i) => m("click"))
+    }, [
+      l("span", p, [
+        v(x, {
+          name: e.item.icon
+        }, null, 8, ["name"])
+      ]),
+      l("div", S, [
+        l("span", _, [
+          (s(!0), t(c, null, z(f(g)(e.item.title, e.titleMatches), (i, h) => (s(), t(c, { key: h }, [
+            i.highlight ? (s(), t("mark", B, n(i.text), 1)) : (s(), t(c, { key: 1 }, [
+              y(n(i.text), 1)
+            ], 64))
+          ], 64))), 128))
+        ]),
+        l("span", C, n(e.item.description), 1)
+      ]),
+      e.item.shortcut ? (s(), t("span", M, n(e.item.shortcut), 1)) : k("", !0)
+    ], 10, V));
+  }
+});
 export {
-  o as useVizelTheme,
-  u as useVizelThemeSafe
+  E as default
 };

package/dist/index31.js

@@ -1,4 +1,43 @@
-const e = /* @__PURE__ */ Symbol("VizelThemeContext");
+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 "./index40.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");
+  }
+});
 export {
-  e as VIZEL_THEME_CONTEXT_KEY
+  b as default
 };

package/dist/index32.js

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

package/dist/index33.js

@@ -1,4 +1,48 @@
-import f from "./index3.js";
+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();
+  }
+  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 {
-  f as default
+  A as useVizelAutoSave
 };

package/dist/index34.js

@@ -1,4 +1,24 @@
-import f from "./index4.js";
+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 "./index32.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;
+}
 export {
-  f as default
+  E as useVizelEditor
 };

package/dist/index35.js

@@ -1,4 +1,10 @@
-import f from "./index5.js";
+import { getVizelEditorState as o } from "@vizel/core";
+import { computed as r } from "vue";
+import { useVizelState as i } from "./index37.js";
+function p(t) {
+  const e = i(t);
+  return r(() => (e.value, o(t())));
+}
 export {
-  f as default
+  p as useVizelEditorState
 };

package/dist/index36.js

@@ -1,4 +1,46 @@
-import f from "./index6.js";
+import { getVizelMarkdown as k, createVizelMarkdownSyncHandlers as p } from "@vizel/core";
+import { ref as d, watch as w, onBeforeUnmount as M, computed as g } from "vue";
+function y(o, f = {}) {
+  const { initialValue: s, ...m } = f, t = d(s ?? ""), a = d(!1);
+  let l = null;
+  const i = () => (l || (l = p(m)), l);
+  let r = !1;
+  w(
+    o,
+    (e) => {
+      if (!e || r) return;
+      const n = i();
+      s !== void 0 ? (n.setMarkdown(e, s), t.value = s) : t.value = k(e), r = !0;
+      const u = () => {
+        n.handleUpdate(e), a.value = n.isPending();
+        const c = () => {
+          n.isPending() ? requestAnimationFrame(c) : (t.value = n.getMarkdown(), a.value = !1);
+        };
+        requestAnimationFrame(c);
+      };
+      e.on("update", u);
+    },
+    { immediate: !0 }
+  ), M(() => {
+    l?.destroy();
+  });
+  const h = (e) => {
+    const n = o();
+    if (!n) return;
+    i().setMarkdown(n, e), t.value = e, a.value = !1;
+  }, v = () => {
+    const e = o();
+    if (!e) return;
+    const n = i();
+    n.flush(e), t.value = n.getMarkdown(), a.value = !1;
+  };
+  return {
+    markdown: t,
+    setMarkdown: h,
+    isPending: g(() => a.value),
+    flush: v
+  };
+}
 export {
-  f as default
+  y as useVizelMarkdown
 };

package/dist/index37.js

@@ -1,4 +1,23 @@
-import f from "./index7.js";
+import { ref as a, watch as u, onBeforeUnmount as f } from "vue";
+function l(i) {
+  const e = a(0);
+  let n = null;
+  function o() {
+    e.value++;
+  }
+  function r(t) {
+    n && n !== t && n.off("transaction", o), n = t ?? null, n && n.on("transaction", o);
+  }
+  return u(
+    i,
+    (t) => {
+      r(t);
+    },
+    { immediate: !0 }
+  ), f(() => {
+    n && n.off("transaction", o);
+  }), e;
+}
 export {
-  f as default
+  l as useVizelState
 };

package/dist/index38.js

@@ -1,4 +1,15 @@
-import f from "./index8.js";
+import { inject as r } from "vue";
+import { VIZEL_THEME_CONTEXT_KEY as t } from "./index40.js";
+function o() {
+  const e = r(t);
+  if (!e)
+    throw new Error("useVizelTheme must be used within a VizelThemeProvider");
+  return e;
+}
+function u() {
+  return r(t, null);
+}
 export {
-  f as default
+  o as useVizelTheme,
+  u as useVizelThemeSafe
 };