@vizel/vue 0.0.1-alpha.6 → 1.0.0

package/README.md

@@ -5,7 +5,7 @@ Vue 3 components for Vizel block-based Markdown editor.
 ## Installation
 
 ```bash
-npm install @vizel/vue @vizel/core
+npm install @vizel/vue
 ```
 
 ## Requirements

package/dist/index.d.ts

@@ -26,6 +26,7 @@ import { VizelSlashMenuRendererOptions } from '@vizel/core';
 import { VizelTheme } from '@vizel/core';
 import { VizelThemeProviderOptions } from '@vizel/core';
 import { VizelThemeState } from '@vizel/core';
+import { VizelToolbarAction } from '@vizel/core';
 
 declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
 /** The underlying Tiptap editor instance */
@@ -72,9 +73,20 @@ transformDiagramsOnImport: boolean;
 editable: boolean;
 autofocus: boolean | "start" | "end" | "all" | number;
 enableEmbed: boolean;
+showToolbar: boolean;
 showBubbleMenu: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+declare const __VLS_component_10: DefineComponent<VizelToolbarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelToolbarProps> & Readonly<{}>, {
+showDefaultToolbar: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_11: DefineComponent<VizelToolbarButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: () => any;
+}, string, PublicProps, Readonly<VizelToolbarButtonProps> & Readonly<{
+onClick?: () => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
 declare const __VLS_component_2: DefineComponent<VizelBubbleMenuProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelBubbleMenuProps> & Readonly<{}>, {
 pluginKey: string;
 showDefaultMenu: boolean;
@@ -125,6 +137,9 @@ declare type __VLS_PublicProps = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        toolbar?(_: {
+            editor: Editor;
+        }): any;
         'bubble-menu'?(_: {
             editor: Editor;
         }): any;
@@ -136,6 +151,26 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_10(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            editor: Editor;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_11(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
 declare function __VLS_template_2(): {
     attrs: Partial<{}>;
     slots: {
@@ -223,6 +258,10 @@ declare function __VLS_template_9(): {
 
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
+declare type __VLS_TemplateResult_10 = ReturnType<typeof __VLS_template_10>;
+
+declare type __VLS_TemplateResult_11 = ReturnType<typeof __VLS_template_11>;
+
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
@@ -245,6 +284,18 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_10<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_11<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -884,6 +935,8 @@ export declare interface VizelProps {
     features?: VizelFeatureOptions;
     /** Custom class name for the editor container */
     class?: string;
+    /** Whether to show the toolbar (default: false) */
+    showToolbar?: boolean;
     /** Whether to show the bubble menu (default: true) */
     showBubbleMenu?: boolean;
     /** Enable embed option in bubble menu link editor (requires Embed extension) */
@@ -978,4 +1031,50 @@ export declare const VizelThemeProvider: __VLS_WithTemplateSlots_9<typeof __VLS_
 export declare interface VizelThemeProviderProps extends VizelThemeProviderOptions {
 }
 
+export declare const VizelToolbar: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
+
+export declare const VizelToolbarButton: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
+
+export declare interface VizelToolbarButtonProps {
+    /** Whether the button is in active state */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Tooltip title */
+    title?: string;
+    /** Custom class name */
+    class?: string;
+    /** Action identifier for testing */
+    action?: string;
+}
+
+export declare const VizelToolbarDefault: DefineComponent<VizelToolbarDefaultProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelToolbarDefaultProps> & Readonly<{}>, {
+actions: VizelToolbarAction[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare interface VizelToolbarDefaultProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom class name */
+    class?: string;
+    /** Custom toolbar actions (defaults to vizelDefaultToolbarActions) */
+    actions?: VizelToolbarAction[];
+}
+
+export declare const VizelToolbarDivider: DefineComponent<VizelToolbarDividerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VizelToolbarDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+export declare interface VizelToolbarDividerProps {
+    /** Custom class name */
+    class?: string;
+}
+
+export declare interface VizelToolbarProps {
+    /** Editor instance. Falls back to context if not provided. */
+    editor?: Editor | null;
+    /** Custom class name */
+    class?: string;
+    /** Whether to show the default toolbar (default: true). Set to false when using custom slot content. */
+    showDefaultToolbar?: boolean;
+}
+
 export { }

package/dist/index.js

@@ -7,16 +7,16 @@ 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 s } 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 { default as h } from "./index16.js";
+import { useVizelContext as T, useVizelContextSafe as E } from "./index17.js";
+import { default as P } from "./index18.js";
+import { default as k } from "./index19.js";
+import { default as w } 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";
@@ -28,24 +28,28 @@ 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";
+import { default as re } from "./index32.js";
+import { default as le } from "./index33.js";
+import { default as fe } from "./index34.js";
+import { default as ue } from "./index35.js";
+import { createVizelSlashMenuRenderer as pe } from "./index36.js";
+import { useVizelAutoSave as se } from "./index37.js";
+import { useVizelEditor as xe } from "./index38.js";
+import { useVizelEditorState as ne } from "./index39.js";
+import { useVizelMarkdown as Se } from "./index40.js";
+import { useVizelState as ce } from "./index41.js";
+import { useVizelTheme as he, useVizelThemeSafe as Be } from "./index42.js";
 export {
   p as Vizel,
-  d as VizelBubbleMenu,
+  s 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,
+  h as VizelColorPicker,
+  P as VizelEditor,
+  k as VizelEmbedView,
+  w as VizelIcon,
   R as VizelIconProvider,
   j as VizelLinkEditor,
   F as VizelNodeSelector,
@@ -56,16 +60,20 @@ export {
   Y as VizelSlashMenuEmpty,
   _ as VizelSlashMenuItem,
   ee as VizelThemeProvider,
-  re as createVizelSlashMenuRenderer,
+  re as VizelToolbar,
+  le as VizelToolbarButton,
+  fe as VizelToolbarDefault,
+  ue as VizelToolbarDivider,
+  pe as createVizelSlashMenuRenderer,
   A as provideVizelIcons,
-  le as useVizelAutoSave,
-  E as useVizelContext,
-  I as useVizelContextSafe,
-  ie as useVizelEditor,
-  ue as useVizelEditorState,
+  se as useVizelAutoSave,
+  T as useVizelContext,
+  E as useVizelContextSafe,
+  xe as useVizelEditor,
+  ne as useVizelEditorState,
   L as useVizelIconContext,
-  pe as useVizelMarkdown,
-  de as useVizelState,
-  xe as useVizelTheme,
-  ze as useVizelThemeSafe
+  Se as useVizelMarkdown,
+  ce as useVizelState,
+  he as useVizelTheme,
+  Be as useVizelThemeSafe
 };

package/dist/index10.js

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

package/dist/index14.js

@@ -1,108 +1,112 @@
-import { defineComponent as $, computed as l, ref as A, createBlock as B, createElementBlock as _, openBlock as u, normalizeClass as y, createVNode as i, withCtx as r } from "vue";
-import { useVizelState as E } from "./index37.js";
+import { defineComponent as A, computed as l, ref as B, createBlock as _, createElementBlock as y, openBlock as c, normalizeClass as E, createVNode as e, withCtx as r } from "vue";
+import { useVizelState as S } from "./index41.js";
 import a from "./index12.js";
-import c from "./index13.js";
+import v from "./index13.js";
+import u from "./index15.js";
 import d from "./index20.js";
-import S from "./index23.js";
-import z from "./index24.js";
-const D = /* @__PURE__ */ $({
+import z from "./index23.js";
+import I from "./index24.js";
+const M = /* @__PURE__ */ A({
   __name: "VizelBubbleMenuDefault",
   props: {
     editor: {},
     class: {},
     enableEmbed: { type: Boolean }
   },
-  setup(v) {
-    const e = v, o = E(() => e.editor), m = l(() => (o.value, e.editor.isActive("bold"))), f = l(() => (o.value, e.editor.isActive("italic"))), k = l(() => (o.value, e.editor.isActive("strike"))), p = l(() => (o.value, e.editor.isActive("underline"))), C = l(() => (o.value, e.editor.isActive("code"))), b = l(() => (o.value, e.editor.isActive("link"))), s = A(!1);
-    return (g, t) => s.value ? (u(), B(S, {
+  setup(m) {
+    const i = m, o = S(() => i.editor), f = l(() => (o.value, i.editor.isActive("bold"))), k = l(() => (o.value, i.editor.isActive("italic"))), p = l(() => (o.value, i.editor.isActive("strike"))), C = l(() => (o.value, i.editor.isActive("underline"))), b = l(() => (o.value, i.editor.isActive("code"))), g = l(() => (o.value, i.editor.isActive("link"))), s = B(!1);
+    return ($, t) => s.value ? (c(), _(z, {
       key: 0,
-      editor: e.editor,
-      "enable-embed": e.enableEmbed,
+      editor: i.editor,
+      "enable-embed": i.enableEmbed,
       onClose: t[0] || (t[0] = (n) => s.value = !1)
-    }, null, 8, ["editor", "enable-embed"])) : (u(), _("div", {
+    }, null, 8, ["editor", "enable-embed"])) : (c(), y("div", {
       key: 1,
-      class: y(["vizel-bubble-menu-toolbar", g.$props.class])
+      class: E(["vizel-bubble-menu-toolbar", $.$props.class])
     }, [
-      i(z, {
-        editor: e.editor
+      e(I, {
+        editor: i.editor
       }, null, 8, ["editor"]),
-      i(a, {
+      e(u),
+      e(a, {
         action: "bold",
-        "is-active": m.value,
+        "is-active": f.value,
         title: "Bold (Cmd+B)",
-        onClick: t[1] || (t[1] = (n) => e.editor.chain().focus().toggleBold().run())
+        onClick: t[1] || (t[1] = (n) => i.editor.chain().focus().toggleBold().run())
       }, {
         default: r(() => [
-          i(d, { name: "bold" })
+          e(d, { name: "bold" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(a, {
+      e(a, {
         action: "italic",
-        "is-active": f.value,
+        "is-active": k.value,
         title: "Italic (Cmd+I)",
-        onClick: t[2] || (t[2] = (n) => e.editor.chain().focus().toggleItalic().run())
+        onClick: t[2] || (t[2] = (n) => i.editor.chain().focus().toggleItalic().run())
       }, {
         default: r(() => [
-          i(d, { name: "italic" })
+          e(d, { name: "italic" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(a, {
+      e(a, {
         action: "strike",
-        "is-active": k.value,
+        "is-active": p.value,
         title: "Strikethrough",
-        onClick: t[3] || (t[3] = (n) => e.editor.chain().focus().toggleStrike().run())
+        onClick: t[3] || (t[3] = (n) => i.editor.chain().focus().toggleStrike().run())
       }, {
         default: r(() => [
-          i(d, { name: "strikethrough" })
+          e(d, { name: "strikethrough" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(a, {
+      e(a, {
         action: "underline",
-        "is-active": p.value,
+        "is-active": C.value,
         title: "Underline (Cmd+U)",
-        onClick: t[4] || (t[4] = (n) => e.editor.chain().focus().toggleUnderline().run())
+        onClick: t[4] || (t[4] = (n) => i.editor.chain().focus().toggleUnderline().run())
       }, {
         default: r(() => [
-          i(d, { name: "underline" })
+          e(d, { name: "underline" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(a, {
+      e(a, {
         action: "code",
-        "is-active": C.value,
+        "is-active": b.value,
         title: "Code (Cmd+E)",
-        onClick: t[5] || (t[5] = (n) => e.editor.chain().focus().toggleCode().run())
+        onClick: t[5] || (t[5] = (n) => i.editor.chain().focus().toggleCode().run())
       }, {
         default: r(() => [
-          i(d, { name: "code" })
+          e(d, { name: "code" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(a, {
+      e(u),
+      e(a, {
         action: "link",
-        "is-active": b.value,
+        "is-active": g.value,
         title: "Link (Cmd+K)",
         onClick: t[6] || (t[6] = (n) => s.value = !0)
       }, {
         default: r(() => [
-          i(d, { name: "link" })
+          e(d, { name: "link" })
         ]),
         _: 1
       }, 8, ["is-active"]),
-      i(c, {
-        editor: e.editor,
+      e(u),
+      e(v, {
+        editor: i.editor,
         type: "textColor"
       }, null, 8, ["editor"]),
-      i(c, {
-        editor: e.editor,
+      e(v, {
+        editor: i.editor,
         type: "highlight"
       }, null, 8, ["editor"])
     ], 2));
   }
 });
 export {
-  D as default
+  M as default
 };

package/dist/index2.js

@@ -1,5 +1,5 @@
 import { Mark as a, markPasteRule as r, markInputRule as s, mergeAttributes as o } from "@tiptap/core";
-import { createElement as n } from "./index39.js";
+import { createElement as n } from "./index43.js";
 var d = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/, i = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g, l = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/, u = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
 a.create({
   name: "bold",

package/dist/index24.js

@@ -1,6 +1,6 @@
 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 { useVizelState as M } from "./index41.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",

package/dist/index31.js

@@ -1,6 +1,6 @@
 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 "./index60.js";
+import { VIZEL_THEME_CONTEXT_KEY as z } from "./index68.js";
 const b = /* @__PURE__ */ i({
   __name: "VizelThemeProvider",
   props: {

package/dist/index32.js

@@ -1,38 +1,30 @@
-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;
-        }
-      };
-    }
-  };
-}
+import { defineComponent as s, computed as i, createElementBlock as u, createCommentVNode as r, openBlock as l, normalizeClass as c, renderSlot as m, createBlock as d } from "vue";
+import { useVizelContextSafe as p } from "./index17.js";
+import f from "./index34.js";
+const z = /* @__PURE__ */ s({
+  __name: "VizelToolbar",
+  props: {
+    editor: {},
+    class: {},
+    showDefaultToolbar: { type: Boolean, default: !0 }
+  },
+  setup(o) {
+    const a = o, n = p(), e = i(() => a.editor ?? n?.() ?? null);
+    return (t, b) => e.value ? (l(), u("div", {
+      key: 0,
+      class: c(["vizel-toolbar", t.$props.class]),
+      role: "toolbar",
+      "aria-label": "Formatting"
+    }, [
+      m(t.$slots, "default", { editor: e.value }, () => [
+        o.showDefaultToolbar ? (l(), d(f, {
+          key: 0,
+          editor: e.value
+        }, null, 8, ["editor"])) : r("", !0)
+      ])
+    ], 2)) : r("", !0);
+  }
+});
 export {
-  R as createVizelSlashMenuRenderer
+  z as default
 };