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

package/dist/index.d.ts

@@ -32,11 +32,10 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
 editor: Editor | null;
 getEditor: () => Editor | null;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-destroy: () => any;
-blur: (args_0: {
+focus: (args_0: {
 editor: Editor;
 }) => any;
-focus: (args_0: {
+blur: (args_0: {
 editor: Editor;
 }) => any;
 create: (args_0: {
@@ -48,13 +47,13 @@ editor: Editor;
 selectionUpdate: (args_0: {
 editor: Editor;
 }) => any;
+destroy: () => any;
 "update:markdown": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-onDestroy?: () => any;
-onBlur?: (args_0: {
+onFocus?: (args_0: {
 editor: Editor;
 }) => any;
-onFocus?: (args_0: {
+onBlur?: (args_0: {
 editor: Editor;
 }) => any;
 onCreate?: (args_0: {
@@ -66,6 +65,7 @@ editor: Editor;
 onSelectionUpdate?: (args_0: {
 editor: Editor;
 }) => any;
+onDestroy?: () => any;
 "onUpdate:markdown"?: (value: string) => any;
 }>, {
 transformDiagramsOnImport: boolean;
@@ -92,8 +92,8 @@ onClick?: () => any;
 declare const __VLS_component_4: DefineComponent<VizelIconProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelIconProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_5: DefineComponent<VizelPortalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelPortalProps> & Readonly<{}>, {
-disabled: boolean;
 layer: VizelPortalLayer;
+disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_6: DefineComponent<VizelProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/index.js

@@ -1,63 +1,71 @@
-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";
+import "./index2.js";
+import "./index3.js";
+import "./index4.js";
+import "./index5.js";
+import "./index6.js";
+import "./index7.js";
+import "./index8.js";
+import "./index9.js";
+import { default as p } from "./index10.js";
+import { default as d } from "./index11.js";
+import { default as x } from "./index12.js";
+import { default as n } from "./index13.js";
+import { default as S } from "./index14.js";
+import { default as c } from "./index15.js";
+import { default as v } from "./index16.js";
+import { useVizelContext as E, useVizelContextSafe as I } from "./index17.js";
+import { default as C } from "./index18.js";
+import { default as T } from "./index19.js";
+import { default as D } from "./index20.js";
+import { provideVizelIcons as A, useVizelIconContext as L } from "./index21.js";
+import { default as R } from "./index22.js";
+import { default as j } from "./index23.js";
+import { default as F } from "./index24.js";
+import { default as H } from "./index25.js";
+import { default as K } from "./index26.js";
+import { default as Q } from "./index27.js";
+import { default as W } from "./index28.js";
+import { default as Y } from "./index29.js";
+import { default as _ } from "./index30.js";
+import { default as ee } from "./index31.js";
+import { createVizelSlashMenuRenderer as re } from "./index32.js";
+import { useVizelAutoSave as le } from "./index33.js";
+import { useVizelEditor as ie } from "./index34.js";
+import { useVizelEditorState as ue } from "./index35.js";
+import { useVizelMarkdown as pe } from "./index36.js";
+import { useVizelState as de } from "./index37.js";
+import { useVizelTheme as xe, useVizelThemeSafe as ze } from "./index38.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
+  p as Vizel,
+  d as VizelBubbleMenu,
+  x as VizelBubbleMenuButton,
+  n as VizelBubbleMenuColorPicker,
+  S as VizelBubbleMenuDefault,
+  c as VizelBubbleMenuDivider,
+  v as VizelColorPicker,
+  C as VizelEditor,
+  T as VizelEmbedView,
+  D as VizelIcon,
+  R as VizelIconProvider,
+  j as VizelLinkEditor,
+  F as VizelNodeSelector,
+  H as VizelPortal,
+  K as VizelProvider,
+  Q as VizelSaveIndicator,
+  W as VizelSlashMenu,
+  Y as VizelSlashMenuEmpty,
+  _ as VizelSlashMenuItem,
+  ee as VizelThemeProvider,
+  re as createVizelSlashMenuRenderer,
+  A as provideVizelIcons,
+  le as useVizelAutoSave,
+  E as useVizelContext,
+  I as useVizelContextSafe,
+  ie as useVizelEditor,
+  ue as useVizelEditorState,
+  L as useVizelIconContext,
+  pe as useVizelMarkdown,
+  de as useVizelState,
+  xe as useVizelTheme,
+  ze as useVizelThemeSafe
 };

package/dist/index10.js

@@ -1,135 +1,88 @@
-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: {},
+import { defineComponent as B, mergeModels as m, useModel as M, useSlots as g, watch as y, createElementBlock as h, openBlock as n, normalizeClass as C, createBlock as s, createCommentVNode as f, renderSlot as c, unref as a, withCtx as z } from "vue";
+import { getVizelMarkdown as b, setVizelMarkdown as D } from "@vizel/core";
+import { useVizelEditor as E } from "./index34.js";
+import p from "./index11.js";
+import U from "./index18.js";
+const F = /* @__PURE__ */ B({
+  __name: "Vizel",
+  props: /* @__PURE__ */ m({
+    initialContent: {},
+    initialMarkdown: {},
+    transformDiagramsOnImport: { type: Boolean, default: !0 },
+    placeholder: {},
+    editable: { type: Boolean, default: !0 },
+    autofocus: { type: [Boolean, String, Number], default: !1 },
+    features: {},
     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;
-      }
+    showBubbleMenu: { type: Boolean, default: !0 },
+    enableEmbed: { type: Boolean, default: !1 }
+  }, {
+    markdown: {},
+    markdownModifiers: {}
+  }),
+  emits: /* @__PURE__ */ m(["update", "create", "destroy", "selectionUpdate", "focus", "blur"], ["update:markdown"]),
+  setup(r, { expose: k, emit: v }) {
+    const o = r, l = v, i = M(r, "markdown"), w = g();
+    let d = !1;
+    const t = E({
+      ...o.initialContent !== void 0 && { initialContent: o.initialContent },
+      ...o.initialMarkdown !== void 0 && { initialMarkdown: o.initialMarkdown },
+      transformDiagramsOnImport: o.transformDiagramsOnImport,
+      ...o.placeholder !== void 0 && { placeholder: o.placeholder },
+      editable: o.editable,
+      autofocus: o.autofocus,
+      ...o.features !== void 0 && { features: o.features },
+      onUpdate: (e) => {
+        l("update", e), !d && i.value !== void 0 && (i.value = b(e.editor));
+      },
+      onCreate: (e) => l("create", e),
+      onDestroy: () => l("destroy"),
+      onSelectionUpdate: (e) => l("selectionUpdate", e),
+      onFocus: (e) => l("focus", e),
+      onBlur: (e) => l("blur", e)
     });
-    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
+    return y(i, (e) => {
+      if (e === void 0 || !t.value) return;
+      const u = b(t.value);
+      e !== u && (d = !0, D(t.value, e, {
+        transformDiagrams: o.transformDiagramsOnImport
+      }), d = !1);
+    }), k({
+      /** The underlying Tiptap editor instance */
+      get editor() {
+        return t.value;
+      },
+      /**
+       * Get the underlying Tiptap editor instance
+       * @deprecated Use the `editor` property instead
+       */
+      getEditor: () => t.value
+    }), (e, u) => (n(), h("div", {
+      class: C(["vizel-root", e.$props.class]),
+      "data-vizel-root": ""
     }, [
-      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(t) ? (n(), s(U, {
+        key: 0,
+        editor: a(t)
+      }, null, 8, ["editor"])) : f("", !0),
+      r.showBubbleMenu && a(t) && a(w)["bubble-menu"] ? (n(), s(p, {
+        key: 1,
+        editor: a(t),
+        "enable-embed": r.enableEmbed ?? !1
+      }, {
+        default: z(() => [
+          c(e.$slots, "bubble-menu", { editor: a(t) })
         ]),
-        a("span", G, r(e.data.url), 1)
-      ], 8, $)
-    ], 10, U));
+        _: 3
+      }, 8, ["editor", "enable-embed"])) : r.showBubbleMenu && a(t) ? (n(), s(p, {
+        key: 2,
+        editor: a(t),
+        "enable-embed": r.enableEmbed ?? !1
+      }, null, 8, ["editor", "enable-embed"])) : f("", !0),
+      c(e.$slots, "default", { editor: a(t) })
+    ], 2));
   }
 });
 export {
-  O as default
+  F as default
 };

package/dist/index11.js

@@ -1,30 +1,61 @@
-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",
+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 "./index14.js";
+import { useVizelContextSafe as M } from "./index17.js";
+const $ = /* @__PURE__ */ b({
+  __name: "VizelBubbleMenu",
   props: {
-    name: {},
-    customIcons: {},
-    width: {},
-    height: {},
-    color: {}
+    editor: {},
+    class: {},
+    showDefaultMenu: { type: Boolean, default: !0 },
+    pluginKey: { default: "vizelBubbleMenu" },
+    updateDelay: { default: 100 },
+    shouldShow: {},
+    enableEmbed: { type: Boolean }
   },
-  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"]));
+  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);
   }
 });
 export {
-  g as default
+  $ as default
 };

package/dist/index12.js

@@ -1,14 +1,34 @@
-import { defineComponent as r, renderSlot as n } from "vue";
-import { provideVizelIcons as s } from "./index22.js";
-const m = /* @__PURE__ */ r({
-  __name: "VizelIconProvider",
+import { defineComponent as n, createElementBlock as o, openBlock as c, normalizeClass as d, renderSlot as r } from "vue";
+const u = ["disabled", "aria-pressed", "title", "data-active", "data-action"], v = /* @__PURE__ */ n({
+  __name: "VizelBubbleMenuButton",
   props: {
-    icons: {}
+    isActive: { type: Boolean },
+    disabled: { type: Boolean },
+    title: {},
+    class: {},
+    action: {}
   },
-  setup(o) {
-    return s(o.icons), (e, p) => n(e.$slots, "default");
+  emits: ["click"],
+  setup(t, { emit: a }) {
+    const s = t, l = a;
+    return (e, i) => (c(), o("button", {
+      type: "button",
+      disabled: t.disabled,
+      "aria-pressed": t.isActive,
+      class: d([
+        "vizel-bubble-menu-button",
+        { "is-active": t.isActive },
+        e.$props.class
+      ]),
+      title: t.title,
+      "data-active": t.isActive || void 0,
+      "data-action": s.action,
+      onClick: i[0] || (i[0] = (b) => l("click"))
+    }, [
+      r(e.$slots, "default")
+    ], 10, u));
   }
 });
 export {
-  m as default
+  v as default
 };