@blockslides/vue-3-prebuilts 0.1.0

package/LICENSE.md

@@ -0,0 +1,36 @@
+MIT License
+
+Copyright (c) 2025 BlockSlides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## Acknowledgments
+
+This project includes code and patterns adapted from [Tiptap](https://tiptap.dev),
+an open-source headless editor framework for web artisans.
+
+**Tiptap License:**
+
+- Copyright (c) 2025, Tiptap GmbH
+- Licensed under MIT License
+- Original source: https://github.com/ueberdosis/tiptap
+
+See `_tiptap/LICENSE.md` for the full Tiptap license.

package/dist/BubbleMenuPreset.vue_vue_type_script_setup_true_lang-B5Ihs2fW.js

@@ -0,0 +1,101 @@
+import { defineComponent as T, ref as S, onMounted as E, watch as y, onBeforeUnmount as _, openBlock as A, createElementBlock as D, createCommentVNode as C } from "vue";
+import { BubbleMenuPlugin as N } from "@blockslides/extension-bubble-menu";
+import { NodeSelection as x } from "@blockslides/pm/state";
+import { buildMenuElement as L, DEFAULT_ALIGNMENTS as b, DEFAULT_FONT_SIZES as v, DEFAULT_FONTS as B, DEFAULT_HIGHLIGHT_PALETTE as I, DEFAULT_COLOR_PALETTE as R, DEFAULT_ITEMS as z } from "@blockslides/extension-bubble-menu-preset";
+import { isTextSelection as F } from "@blockslides/core";
+const M = {
+  key: 0,
+  style: { display: "none" }
+}, m = "bubbleMenuPreset", j = /* @__PURE__ */ T({
+  __name: "BubbleMenuPreset",
+  props: {
+    editor: {},
+    updateDelay: {},
+    resizeDelay: {},
+    appendTo: {},
+    shouldShow: {},
+    getReferencedVirtualElement: {},
+    options: {},
+    items: {},
+    className: {},
+    injectStyles: { type: Boolean, default: !0 },
+    textColors: {},
+    highlightColors: {},
+    fonts: {},
+    fontSizes: {},
+    alignments: {},
+    onTextAction: {},
+    onImageReplace: {}
+  },
+  setup(p) {
+    const e = p, n = S(null);
+    let o;
+    const s = () => {
+      const t = e.editor;
+      if (!t || t.isDestroyed)
+        return;
+      o && (o(), o = void 0);
+      const { element: i, cleanup: d } = L(t, {
+        items: e.items ?? z,
+        className: e.className ?? "",
+        injectStyles: e.injectStyles !== !1,
+        textColors: e.textColors ?? R,
+        highlightColors: e.highlightColors ?? I,
+        fonts: e.fonts ?? B,
+        fontSizes: e.fontSizes ?? v,
+        alignments: e.alignments ?? b,
+        onTextAction: e.onTextAction,
+        onImageReplace: e.onImageReplace
+      });
+      n.value = i, o = d;
+      const f = ({ state: h, editor: a }) => {
+        var u, c;
+        const l = h.selection, r = l instanceof x && ["image", "imageBlock"].includes((c = (u = l.node) == null ? void 0 : u.type) == null ? void 0 : c.name) || a.isActive("image") || a.isActive("imageBlock");
+        return !!(r || F(l) && !l.empty && !r);
+      }, g = N({
+        editor: t,
+        element: i,
+        updateDelay: e.updateDelay,
+        resizeDelay: e.resizeDelay,
+        appendTo: e.appendTo,
+        pluginKey: m,
+        shouldShow: e.shouldShow ?? f,
+        getReferencedVirtualElement: e.getReferencedVirtualElement,
+        options: e.options
+      });
+      t.registerPlugin(g);
+    };
+    return E(() => {
+      s();
+    }), y(
+      () => [
+        e.editor,
+        e.updateDelay,
+        e.resizeDelay,
+        e.appendTo,
+        e.shouldShow,
+        e.getReferencedVirtualElement,
+        e.options,
+        e.items,
+        e.className,
+        e.injectStyles,
+        e.textColors,
+        e.highlightColors,
+        e.fonts,
+        e.fontSizes,
+        e.alignments,
+        e.onTextAction,
+        e.onImageReplace
+      ],
+      () => {
+        s();
+      }
+    ), _(() => {
+      var t;
+      e.editor && e.editor.unregisterPlugin(m), o && o(), (t = n.value) != null && t.parentNode && n.value.parentNode.removeChild(n.value);
+    }), (t, i) => n.value ? (A(), D("div", M)) : C("", !0);
+  }
+});
+export {
+  j as _
+};

package/dist/BubbleMenuPreset.vue_vue_type_script_setup_true_lang-Tkjxu33S.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("vue"),E=require("@blockslides/extension-bubble-menu"),y=require("@blockslides/pm/state"),o=require("@blockslides/extension-bubble-menu-preset"),_=require("@blockslides/core"),A={key:0,style:{display:"none"}},p="bubbleMenuPreset",D=n.defineComponent({__name:"BubbleMenuPreset",props:{editor:{},updateDelay:{},resizeDelay:{},appendTo:{},shouldShow:{},getReferencedVirtualElement:{},options:{},items:{},className:{},injectStyles:{type:Boolean,default:!0},textColors:{},highlightColors:{},fonts:{},fontSizes:{},alignments:{},onTextAction:{},onImageReplace:{}},setup(g){const e=g,l=n.ref(null);let s;const r=()=>{const t=e.editor;if(!t||t.isDestroyed)return;s&&(s(),s=void 0);const{element:a,cleanup:f}=o.buildMenuElement(t,{items:e.items??o.DEFAULT_ITEMS,className:e.className??"",injectStyles:e.injectStyles!==!1,textColors:e.textColors??o.DEFAULT_COLOR_PALETTE,highlightColors:e.highlightColors??o.DEFAULT_HIGHLIGHT_PALETTE,fonts:e.fonts??o.DEFAULT_FONTS,fontSizes:e.fontSizes??o.DEFAULT_FONT_SIZES,alignments:e.alignments??o.DEFAULT_ALIGNMENTS,onTextAction:e.onTextAction,onImageReplace:e.onImageReplace});l.value=a,s=f;const h=({state:S,editor:u})=>{var d,m;const i=S.selection,c=i instanceof y.NodeSelection&&["image","imageBlock"].includes((m=(d=i.node)==null?void 0:d.type)==null?void 0:m.name)||u.isActive("image")||u.isActive("imageBlock");return!!(c||_.isTextSelection(i)&&!i.empty&&!c)},T=E.BubbleMenuPlugin({editor:t,element:a,updateDelay:e.updateDelay,resizeDelay:e.resizeDelay,appendTo:e.appendTo,pluginKey:p,shouldShow:e.shouldShow??h,getReferencedVirtualElement:e.getReferencedVirtualElement,options:e.options});t.registerPlugin(T)};return n.onMounted(()=>{r()}),n.watch(()=>[e.editor,e.updateDelay,e.resizeDelay,e.appendTo,e.shouldShow,e.getReferencedVirtualElement,e.options,e.items,e.className,e.injectStyles,e.textColors,e.highlightColors,e.fonts,e.fontSizes,e.alignments,e.onTextAction,e.onImageReplace],()=>{r()}),n.onBeforeUnmount(()=>{var t;e.editor&&e.editor.unregisterPlugin(p),s&&s(),(t=l.value)!=null&&t.parentNode&&l.value.parentNode.removeChild(l.value)}),(t,a)=>l.value?(n.openBlock(),n.createElementBlock("div",A)):n.createCommentVNode("",!0)}});exports._sfc_main=D;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("@blockslides/vue-3"),v=require("./BubbleMenuPreset.vue_vue_type_script_setup_true_lang-Tkjxu33S.cjs"),S=require("@blockslides/ai-context"),O=require("@blockslides/extension-kit"),h=require("@blockslides/core"),C=()=>({type:"doc",content:[{type:"slide",attrs:{size:"16x9",className:"",id:"slide-1",backgroundMode:"none",backgroundColor:null,backgroundImage:null,backgroundOverlayColor:null,backgroundOverlayOpacity:null},content:[{type:"column",attrs:{align:"center",padding:"lg",margin:null,gap:"md",backgroundColor:"#ffffff",backgroundImage:null,borderRadius:null,border:null,fill:!0,width:null,height:null,justify:"center"},content:[{type:"heading",attrs:{align:null,padding:null,margin:null,gap:null,backgroundColor:null,backgroundImage:null,borderRadius:null,border:null,fill:null,width:null,height:null,justify:null,id:"1fc4664c-333d-4203-a3f1-3ad27a54c535","data-toc-id":"1fc4664c-333d-4203-a3f1-3ad27a54c535",level:1},content:[{type:"text",text:"Lorem ipsum dolor sit amet"}]},{type:"paragraph",attrs:{align:null,padding:null,margin:null,gap:null,backgroundColor:null,backgroundImage:null,borderRadius:null,border:null,fill:null,width:null,height:null,justify:null},content:[{type:"text",text:"Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. "}]}]}]}]}),E=t=>({showPresets:!0,presets:t,presetBackground:"#0f172a",presetForeground:"#e5e7eb"}),j={renderMode:"dynamic",hoverOutline:{color:"#3b82f6",width:"1.5px",offset:"4px"},hoverOutlineCascade:!1},_=(t={})=>{const{content:r,onChange:s,extensions:a,extensionKitOptions:l,presetTemplates:p,onEditorReady:o,theme:d="light",editorProps:u,onUpdate:i,editorOptions:m={}}=t,g=e.computed(()=>p??S.templatesV1.listPresetTemplates()),P=e.computed(()=>{const n=(l==null?void 0:l.addSlideButton)===!1?!1:{...E(g.value),...(l==null?void 0:l.addSlideButton)??{}},b=(l==null?void 0:l.slide)===!1?!1:{...j,...(l==null?void 0:l.slide)??{}};return{...l,addSlideButton:n,slide:b}}),f=e.computed(()=>{const n=O.ExtensionKit.configure(P.value);return a?[n,...a]:[n]}),k=r??C();console.log("resolvedExtensions",f.value,f),console.log("editorOptions (as single prop):",m);const y=c.useEditor({content:k,extensions:f.value,theme:d,editorProps:{attributes:{autocomplete:"off",autocorrect:"off",autocapitalize:"off",class:"min-h-full min-w-full",...(u==null?void 0:u.attributes)??{}},...u},...m,onUpdate:n=>{const b=n.editor.getJSON();s==null||s(b,n.editor),i==null||i(n)}});return e.watch(y,n=>{n&&!n.isDestroyed?o==null||o(n):console.log("[useSlideEditor] ❌ Editor not ready or destroyed")},{immediate:!0}),{editor:y,presets:g}},B={class:"bs-viewport"},M=e.defineComponent({__name:"SlideEditor",props:{bubbleMenuPreset:{type:[Boolean,Object],default:!0},className:{},style:{},content:{},onChange:{},extensions:{},extensionKitOptions:{},presetTemplates:{},onEditorReady:{},theme:{},editorProps:{},onUpdate:{},editorOptions:{}},setup(t){const r=t,{bubbleMenuPreset:s,className:a,style:l,...p}=r,{editor:o}=_(p),d=e.computed(()=>r.bubbleMenuPreset===!1?null:r.bubbleMenuPreset===!0?{}:r.bubbleMenuPreset);return(u,i)=>e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(a)),style:e.normalizeStyle(e.unref(l))},[e.createElementVNode("div",B,[e.createVNode(e.unref(c.EditorContent),{editor:e.unref(o)},null,8,["editor"]),d.value?(e.openBlock(),e.createBlock(v._sfc_main,e.mergeProps({key:0,editor:e.unref(o)},d.value),null,16,["editor"])):e.createCommentVNode("",!0)])],6)):e.createCommentVNode("",!0)}});exports.BubbleMenuPreset=v._sfc_main;exports.SlideEditor=M;exports.useSlideEditor=_;Object.keys(c).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>c[t]})});Object.keys(h).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>h[t]})});

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SlideEditor } from './SlideEditor.vue';
+export * from './useSlideEditor.js';
+export { default as BubbleMenuPreset } from './menus/BubbleMenuPreset.vue';
+export * from '../../vue-3/src';
+export * from '../../core/src';

package/dist/index.js

@@ -0,0 +1,211 @@
+import { computed as c, watch as C, defineComponent as P, unref as n, openBlock as h, createElementBlock as E, normalizeStyle as _, normalizeClass as x, createElementVNode as B, createVNode as M, createBlock as N, mergeProps as w, createCommentVNode as k } from "vue";
+import { useEditor as O, EditorContent as j } from "@blockslides/vue-3";
+export * from "@blockslides/vue-3";
+import { _ as z } from "./BubbleMenuPreset.vue_vue_type_script_setup_true_lang-B5Ihs2fW.js";
+import { templatesV1 as I } from "@blockslides/ai-context";
+import { ExtensionKit as V } from "@blockslides/extension-kit";
+export * from "@blockslides/core";
+const R = () => ({
+  /**
+   * Placeholder slide if no content is provided.
+   */
+  type: "doc",
+  content: [
+    {
+      type: "slide",
+      attrs: {
+        size: "16x9",
+        className: "",
+        id: "slide-1",
+        backgroundMode: "none",
+        backgroundColor: null,
+        backgroundImage: null,
+        backgroundOverlayColor: null,
+        backgroundOverlayOpacity: null
+      },
+      content: [
+        {
+          type: "column",
+          attrs: {
+            align: "center",
+            padding: "lg",
+            margin: null,
+            gap: "md",
+            backgroundColor: "#ffffff",
+            backgroundImage: null,
+            borderRadius: null,
+            border: null,
+            fill: !0,
+            width: null,
+            height: null,
+            justify: "center"
+          },
+          content: [
+            {
+              type: "heading",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+                id: "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                "data-toc-id": "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                level: 1
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Lorem ipsum dolor sit amet"
+                }
+              ]
+            },
+            {
+              type: "paragraph",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. "
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}), T = (r) => ({
+  showPresets: !0,
+  presets: r,
+  presetBackground: "#0f172a",
+  presetForeground: "#e5e7eb"
+}), A = {
+  renderMode: "dynamic",
+  hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
+  hoverOutlineCascade: !1
+}, D = (r = {}) => {
+  const {
+    content: o,
+    onChange: u,
+    extensions: a,
+    extensionKitOptions: e,
+    presetTemplates: p,
+    onEditorReady: l,
+    theme: d = "light",
+    editorProps: s,
+    onUpdate: i,
+    editorOptions: g = {}
+  } = r, b = c(
+    () => p ?? I.listPresetTemplates()
+  ), v = c(() => {
+    const t = (e == null ? void 0 : e.addSlideButton) === !1 ? !1 : {
+      ...T(b.value),
+      ...(e == null ? void 0 : e.addSlideButton) ?? {}
+    }, f = (e == null ? void 0 : e.slide) === !1 ? !1 : {
+      ...A,
+      ...(e == null ? void 0 : e.slide) ?? {}
+    };
+    return {
+      ...e,
+      addSlideButton: t,
+      slide: f
+    };
+  }), m = c(() => {
+    const t = V.configure(v.value);
+    return a ? [t, ...a] : [t];
+  }), S = o ?? R();
+  console.log("resolvedExtensions", m.value, m), console.log("editorOptions (as single prop):", g);
+  const y = O(
+    {
+      content: S,
+      extensions: m.value,
+      theme: d,
+      editorProps: {
+        attributes: {
+          autocomplete: "off",
+          autocorrect: "off",
+          autocapitalize: "off",
+          class: "min-h-full min-w-full",
+          ...(s == null ? void 0 : s.attributes) ?? {}
+        },
+        ...s
+      },
+      ...g,
+      onUpdate: (t) => {
+        const f = t.editor.getJSON();
+        u == null || u(f, t.editor), i == null || i(t);
+      }
+    }
+  );
+  return C(
+    y,
+    (t) => {
+      t && !t.isDestroyed ? l == null || l(t) : console.log("[useSlideEditor] ❌ Editor not ready or destroyed");
+    },
+    { immediate: !0 }
+  ), { editor: y, presets: b };
+}, F = { class: "bs-viewport" }, G = /* @__PURE__ */ P({
+  __name: "SlideEditor",
+  props: {
+    bubbleMenuPreset: { type: [Boolean, Object], default: !0 },
+    className: {},
+    style: {},
+    content: {},
+    onChange: {},
+    extensions: {},
+    extensionKitOptions: {},
+    presetTemplates: {},
+    onEditorReady: {},
+    theme: {},
+    editorProps: {},
+    onUpdate: {},
+    editorOptions: {}
+  },
+  setup(r) {
+    const o = r, {
+      bubbleMenuPreset: u,
+      className: a,
+      style: e,
+      ...p
+    } = o, { editor: l } = D(p), d = c(() => o.bubbleMenuPreset === !1 ? null : o.bubbleMenuPreset === !0 ? {} : o.bubbleMenuPreset);
+    return (s, i) => n(l) ? (h(), E("div", {
+      key: 0,
+      class: x(n(a)),
+      style: _(n(e))
+    }, [
+      B("div", F, [
+        M(n(j), { editor: n(l) }, null, 8, ["editor"]),
+        d.value ? (h(), N(z, w({
+          key: 0,
+          editor: n(l)
+        }, d.value), null, 16, ["editor"])) : k("", !0)
+      ])
+    ], 6)) : k("", !0);
+  }
+});
+export {
+  z as BubbleMenuPreset,
+  G as SlideEditor,
+  D as useSlideEditor
+};

package/dist/menus/BubbleMenu.d.ts

@@ -0,0 +1,6 @@
+import { BubbleMenuPluginProps } from '../../../extension-bubble-menu/src';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>;
+export declare const BubbleMenu: any;
+export {};

package/dist/menus/FloatingMenu.d.ts

@@ -0,0 +1,6 @@
+import { FloatingMenuPluginProps } from '../../../extension-floating-menu/src';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'>;
+export declare const FloatingMenu: any;
+export {};

package/dist/menus/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BubbleMenu.js';
+export * from './FloatingMenu.js';
+export { default as BubbleMenuPreset } from './BubbleMenuPreset.vue';

package/dist/menus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@blockslides/extension-bubble-menu"),t=require("vue"),f=require("@blockslides/extension-floating-menu"),g=require("./BubbleMenuPreset.vue_vue_type_script_setup_true_lang-Tkjxu33S.cjs"),v=t.defineComponent({name:"BubbleMenu",inheritAttrs:!1,props:{pluginKey:{type:[String,Object],default:"bubbleMenu"},editor:{type:Object,required:!0},updateDelay:{type:Number,default:void 0},resizeDelay:{type:Number,default:void 0},options:{type:Object,default:()=>({})},appendTo:{type:[Object,Function],default:void 0},shouldShow:{type:Function,default:null},getReferencedVirtualElement:{type:Function,default:void 0}},setup(o,{slots:u,attrs:d}){const l=t.ref(null);return t.onMounted(()=>{const{editor:e,options:n,pluginKey:a,resizeDelay:p,appendTo:s,shouldShow:i,getReferencedVirtualElement:c,updateDelay:b}=o,r=l.value;r&&(r.style.visibility="hidden",r.style.position="absolute",r.remove(),t.nextTick(()=>{e.registerPlugin(y.BubbleMenuPlugin({editor:e,element:r,options:n,pluginKey:a,resizeDelay:p,appendTo:s,shouldShow:i,getReferencedVirtualElement:c,updateDelay:b}))}))}),t.onBeforeUnmount(()=>{const{pluginKey:e,editor:n}=o;n.unregisterPlugin(e)}),()=>{var e;return t.h("div",{ref:l,...d},(e=u.default)==null?void 0:e.call(u))}}}),M=t.defineComponent({name:"FloatingMenu",inheritAttrs:!1,props:{pluginKey:{type:null,default:"floatingMenu"},editor:{type:Object,required:!0},options:{type:Object,default:()=>({})},appendTo:{type:[Object,Function],default:void 0},shouldShow:{type:Function,default:null}},setup(o,{slots:u,attrs:d}){const l=t.ref(null);return t.onMounted(()=>{const{pluginKey:e,editor:n,options:a,appendTo:p,shouldShow:s}=o,i=l.value;i&&(i.style.visibility="hidden",i.style.position="absolute",i.remove(),n.registerPlugin(f.FloatingMenuPlugin({pluginKey:e,editor:n,element:i,options:a,appendTo:p,shouldShow:s})))}),t.onBeforeUnmount(()=>{const{pluginKey:e,editor:n}=o;n.unregisterPlugin(e)}),()=>{var e;return t.h("div",{ref:l,...d},(e=u.default)==null?void 0:e.call(u))}}});exports.BubbleMenuPreset=g._sfc_main;exports.BubbleMenu=v;exports.FloatingMenu=M;

package/dist/menus.d.ts

@@ -0,0 +1 @@
+export * from './menus/index'

package/dist/menus.js

@@ -0,0 +1,132 @@
+import { BubbleMenuPlugin as h } from "@blockslides/extension-bubble-menu";
+import { defineComponent as f, ref as y, onMounted as s, nextTick as v, onBeforeUnmount as c, h as b } from "vue";
+import { FloatingMenuPlugin as M } from "@blockslides/extension-floating-menu";
+import { _ as T } from "./BubbleMenuPreset.vue_vue_type_script_setup_true_lang-B5Ihs2fW.js";
+const P = f({
+  name: "BubbleMenu",
+  inheritAttrs: !1,
+  props: {
+    pluginKey: {
+      type: [String, Object],
+      default: "bubbleMenu"
+    },
+    editor: {
+      type: Object,
+      required: !0
+    },
+    updateDelay: {
+      type: Number,
+      default: void 0
+    },
+    resizeDelay: {
+      type: Number,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    appendTo: {
+      type: [Object, Function],
+      default: void 0
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    },
+    getReferencedVirtualElement: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(i, { slots: n, attrs: r }) {
+    const o = y(null);
+    return s(() => {
+      const {
+        editor: e,
+        options: t,
+        pluginKey: d,
+        resizeDelay: p,
+        appendTo: a,
+        shouldShow: u,
+        getReferencedVirtualElement: g,
+        updateDelay: m
+      } = i, l = o.value;
+      l && (l.style.visibility = "hidden", l.style.position = "absolute", l.remove(), v(() => {
+        e.registerPlugin(
+          h({
+            editor: e,
+            element: l,
+            options: t,
+            pluginKey: d,
+            resizeDelay: p,
+            appendTo: a,
+            shouldShow: u,
+            getReferencedVirtualElement: g,
+            updateDelay: m
+          })
+        );
+      }));
+    }), c(() => {
+      const { pluginKey: e, editor: t } = i;
+      t.unregisterPlugin(e);
+    }), () => {
+      var e;
+      return b("div", { ref: o, ...r }, (e = n.default) == null ? void 0 : e.call(n));
+    };
+  }
+}), K = f({
+  name: "FloatingMenu",
+  inheritAttrs: !1,
+  props: {
+    pluginKey: {
+      // TODO: TypeScript breaks
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: "floatingMenu"
+    },
+    editor: {
+      type: Object,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    appendTo: {
+      type: [Object, Function],
+      default: void 0
+    },
+    shouldShow: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(i, { slots: n, attrs: r }) {
+    const o = y(null);
+    return s(() => {
+      const { pluginKey: e, editor: t, options: d, appendTo: p, shouldShow: a } = i, u = o.value;
+      u && (u.style.visibility = "hidden", u.style.position = "absolute", u.remove(), t.registerPlugin(
+        M({
+          pluginKey: e,
+          editor: t,
+          element: u,
+          options: d,
+          appendTo: p,
+          shouldShow: a
+        })
+      ));
+    }), c(() => {
+      const { pluginKey: e, editor: t } = i;
+      t.unregisterPlugin(e);
+    }), () => {
+      var e;
+      return b("div", { ref: o, ...r }, (e = n.default) == null ? void 0 : e.call(n));
+    };
+  }
+});
+export {
+  P as BubbleMenu,
+  T as BubbleMenuPreset,
+  K as FloatingMenu
+};

package/dist/useSlideEditor.d.ts

@@ -0,0 +1,53 @@
+import { templatesV1 } from '../../ai-context/src';
+import { AnyExtension, Editor, JSONContent, EditorOptions } from '../../core/src';
+import { ExtensionKitOptions } from '../../extension-kit/src';
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>;
+export interface UseSlideEditorProps {
+    /**
+     * Initial content for the editor. If omitted, a single preset slide is used.
+     */
+    content?: EditorOptions['content'];
+    /**
+     * Called on every update with the current JSON document.
+     */
+    onChange?: (doc: JSONContent, editor: Editor) => void;
+    /**
+     * Additional extensions to append after the ExtensionKit bundle.
+     */
+    extensions?: AnyExtension[];
+    /**
+     * Customize or disable pieces of ExtensionKit (e.g., bubbleMenu: false).
+     */
+    extensionKitOptions?: ExtensionKitOptions;
+    /**
+     * Optional preset list to power the add-slide button.
+     */
+    presetTemplates?: PresetTemplates;
+    /**
+     * Called once when an editor instance is ready.
+     */
+    onEditorReady?: (editor: Editor) => void;
+    /**
+     * Editor theme for UI styling
+     */
+    theme?: EditorOptions['theme'];
+    /**
+     * The editor's props
+     */
+    editorProps?: EditorOptions['editorProps'];
+    /**
+     * Called on every update
+     */
+    onUpdate?: EditorOptions['onUpdate'];
+    /**
+     * Additional editor options to pass through to the core editor.
+     * This allows passing any EditorOptions without Vue auto-initializing them.
+     */
+    editorOptions?: Partial<EditorOptions>;
+}
+export declare const useSlideEditor: (props?: UseSlideEditorProps) => {
+    editor: import('vue').ShallowRef<import('../../vue-3/src').Editor | undefined, import('../../vue-3/src').Editor | undefined>;
+    presets: import('vue').ComputedRef<templatesV1.PresetTemplate[]>;
+};
+export {};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@blockslides/vue-3-prebuilts",
+  "description": "Pre-built Vue 3 components for blockslides - includes SlideEditor, useSlideEditor, and menu components",
+  "version": "0.1.0",
+  "homepage": "https://github.com/keivanmojmali/blockslides",
+  "keywords": [
+    "blockslides",
+    "blockslides vue components",
+    "editor",
+    "wysiwyg",
+    "slide editor",
+    "prebuilt components"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@blockslides/vue-3": "^0.4.1",
+    "@blockslides/extension-kit": "^0.7.3",
+    "@blockslides/ai-context": "^0.3.1",
+    "@blockslides/extension-bubble-menu-preset": "^0.3.1",
+    "@blockslides/extension-floating-menu": "^0.1.1",
+    "@blockslides/extension-bubble-menu": "^0.1.1"
+  },
+  "devDependencies": {
+    "@floating-ui/dom": "^1.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.5.13",
+    "@blockslides/core": "^0.3.3",
+    "@blockslides/pm": "^0.1.1"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.0.0",
+    "vue": "^3.0.0",
+    "@blockslides/core": "^0.3.3",
+    "@blockslides/pm": "^0.1.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keivanmojmali/blockslides",
+    "directory": "packages/vue-3-prebuilts"
+  },
+  "sideEffects": false,
+  "author": "keivanmojmali",
+  "scripts": {
+    "build": "vite build",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
+  }
+}

package/src/SlideEditor.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, watch, onMounted } from 'vue'
+import { EditorContent } from '@blockslides/vue-3'
+import BubbleMenuPreset from './menus/BubbleMenuPreset.vue'
+import { useSlideEditor, type UseSlideEditorProps } from './useSlideEditor'
+import type { Editor } from '@blockslides/core'
+
+export interface BubbleMenuPresetProps {
+  editor: Editor
+  [key: string]: any
+}
+
+export interface SlideEditorProps extends UseSlideEditorProps {
+  /**
+   * Toggle or customize the built-in BubbleMenuPreset.
+   * - true (default): render with defaults
+   * - false: disable entirely
+   * - object: pass through to BubbleMenuPreset
+   */
+  bubbleMenuPreset?: boolean | BubbleMenuPresetProps
+  className?: string
+  style?: any
+}
+
+const props = withDefaults(defineProps<SlideEditorProps>(), {
+  bubbleMenuPreset: true,
+})
+
+const {
+  bubbleMenuPreset,
+  className,
+  style,
+  ...hookProps
+} = props
+
+const { editor } = useSlideEditor(hookProps)
+
+const bubbleMenuProps = computed(() => {
+  if (props.bubbleMenuPreset === false) return null
+  if (props.bubbleMenuPreset === true) return {}
+  return props.bubbleMenuPreset
+})
+
+</script>
+
+<template>
+  <div v-if="editor" :class="className" :style="style">
+    <div class="bs-viewport">
+      <EditorContent :editor="editor" />
+      <BubbleMenuPreset v-if="bubbleMenuProps" :editor="editor" v-bind="bubbleMenuProps" />
+    </div>
+  </div>
+</template>
+ 

package/src/index.ts

@@ -0,0 +1,9 @@
+export { default as SlideEditor } from './SlideEditor.vue'
+export * from './useSlideEditor.js'
+export { default as BubbleMenuPreset } from './menus/BubbleMenuPreset.vue'
+
+// Re-export everything from @blockslides/vue-3 core
+export * from '@blockslides/vue-3'
+
+// Re-export everything from @blockslides/core for convenience
+export * from '@blockslides/core'

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,111 @@
+import type { BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu'
+import { BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>
+
+export const BubbleMenu = defineComponent({
+  name: 'BubbleMenu',
+
+  inheritAttrs: false,
+
+  props: {
+    pluginKey: {
+      type: [String, Object] as PropType<BubbleMenuPluginProps['pluginKey']>,
+      default: 'bubbleMenu',
+    },
+
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+      default: undefined,
+    },
+
+    resizeDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,
+      default: undefined,
+    },
+
+    options: {
+      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    appendTo: {
+      type: [Object, Function] as PropType<BubbleMenuPluginProps['appendTo']>,
+      default: undefined,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+
+    getReferencedVirtualElement: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['getReferencedVirtualElement'], null>>,
+      default: undefined,
+    },
+  },
+
+  setup(props, { slots, attrs }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const {
+        editor,
+        options,
+        pluginKey,
+        resizeDelay,
+        appendTo,
+        shouldShow,
+        getReferencedVirtualElement,
+        updateDelay,
+      } = props
+
+      const el = root.value
+
+      if (!el) {
+        return
+      }
+
+      el.style.visibility = 'hidden'
+      el.style.position = 'absolute'
+
+      // Remove element from DOM; plugin will re-parent it when shown
+      el.remove()
+
+      nextTick(() => {
+        editor.registerPlugin(
+          BubbleMenuPlugin({
+            editor,
+            element: el,
+            options,
+            pluginKey,
+            resizeDelay,
+            appendTo,
+            shouldShow,
+            getReferencedVirtualElement,
+            updateDelay,
+          }),
+        )
+      })
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
+    })
+
+    // Vue owns this element; attrs are applied reactively by Vue
+    // Plugin re-parents it when showing the menu
+    return () => h('div', { ref: root, ...attrs }, slots.default?.())
+  },
+}) as any

package/src/menus/BubbleMenuPreset.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { BubbleMenuPlugin, type BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu'
+import { NodeSelection } from '@blockslides/pm/state'
+import {
+  type BubbleMenuPresetOptions,
+  buildMenuElement,
+  DEFAULT_ITEMS,
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_ALIGNMENTS,
+} from '@blockslides/extension-bubble-menu-preset'
+import { isTextSelection, type Editor } from '@blockslides/core'
+
+export interface BubbleMenuPresetProps extends Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> {
+  editor: Editor
+  updateDelay?: number
+  resizeDelay?: number
+  appendTo?: HTMLElement | (() => HTMLElement)
+  shouldShow?: BubbleMenuPluginProps['shouldShow']
+  getReferencedVirtualElement?: () => any
+  options?: any
+}
+
+const props = withDefaults(defineProps<BubbleMenuPresetProps>(), {
+  injectStyles: true,
+})
+
+const pluginKey = 'bubbleMenuPreset'
+const menuEl = ref<HTMLElement | null>(null)
+let cleanup: (() => void) | undefined
+
+const setupBubbleMenu = () => {
+  const attachToEditor = props.editor
+
+  if (!attachToEditor || (attachToEditor as any).isDestroyed) {
+    return
+  }
+
+  // Cleanup previous instance if any
+  if (cleanup) {
+    cleanup()
+    cleanup = undefined
+  }
+
+  const { element, cleanup: elementCleanup } = buildMenuElement(attachToEditor, {
+    items: props.items ?? DEFAULT_ITEMS,
+    className: props.className ?? '',
+    injectStyles: props.injectStyles !== false,
+    textColors: props.textColors ?? DEFAULT_COLOR_PALETTE,
+    highlightColors: props.highlightColors ?? DEFAULT_HIGHLIGHT_PALETTE,
+    fonts: props.fonts ?? DEFAULT_FONTS,
+    fontSizes: props.fontSizes ?? DEFAULT_FONT_SIZES,
+    alignments: props.alignments ?? DEFAULT_ALIGNMENTS,
+    onTextAction: props.onTextAction,
+    onImageReplace: props.onImageReplace,
+  })
+
+  menuEl.value = element
+  cleanup = elementCleanup
+
+  const defaultShouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ state, editor }) => {
+    const sel = state.selection
+    const imageSelection =
+      (sel instanceof NodeSelection && ['image', 'imageBlock'].includes((sel as any).node?.type?.name)) ||
+      editor.isActive('image') ||
+      editor.isActive('imageBlock')
+
+    if (imageSelection) return true
+    if (isTextSelection(sel) && !sel.empty && !imageSelection) return true
+    return false
+  }
+
+  const plugin = BubbleMenuPlugin({
+    editor: attachToEditor,
+    element,
+    updateDelay: props.updateDelay,
+    resizeDelay: props.resizeDelay,
+    appendTo: props.appendTo,
+    pluginKey,
+    shouldShow: props.shouldShow ?? defaultShouldShow,
+    getReferencedVirtualElement: props.getReferencedVirtualElement,
+    options: props.options,
+  })
+
+  attachToEditor.registerPlugin(plugin)
+}
+
+onMounted(() => {
+  setupBubbleMenu()
+})
+
+// Watch for prop changes and rebuild
+watch(
+  () => [
+    props.editor,
+    props.updateDelay,
+    props.resizeDelay,
+    props.appendTo,
+    props.shouldShow,
+    props.getReferencedVirtualElement,
+    props.options,
+    props.items,
+    props.className,
+    props.injectStyles,
+    props.textColors,
+    props.highlightColors,
+    props.fonts,
+    props.fontSizes,
+    props.alignments,
+    props.onTextAction,
+    props.onImageReplace,
+  ],
+  () => {
+    setupBubbleMenu()
+  }
+)
+
+onBeforeUnmount(() => {
+  if (props.editor) {
+    props.editor.unregisterPlugin(pluginKey)
+  }
+  if (cleanup) {
+    cleanup()
+  }
+  if (menuEl.value?.parentNode) {
+    menuEl.value.parentNode.removeChild(menuEl.value)
+  }
+})
+</script>
+
+<template>
+  <!-- Vue doesn't need portal here as buildMenuElement handles DOM placement -->
+  <div v-if="menuEl" style="display: none"></div>
+</template>

package/src/menus/FloatingMenu.ts

@@ -0,0 +1,84 @@
+import type { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu'
+import { FloatingMenuPlugin } from '@blockslides/extension-floating-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'>
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  inheritAttrs: false,
+
+  props: {
+    pluginKey: {
+      // TODO: TypeScript breaks
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: 'floatingMenu',
+    },
+
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    options: {
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    appendTo: {
+      type: [Object, Function] as PropType<FloatingMenuPluginProps['appendTo']>,
+      default: undefined,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<FloatingMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  setup(props, { slots, attrs }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const { pluginKey, editor, options, appendTo, shouldShow } = props
+
+      const el = root.value
+
+      if (!el) {
+        return
+      }
+
+      el.style.visibility = 'hidden'
+      el.style.position = 'absolute'
+
+      // Remove element from DOM; plugin will re-parent it when shown
+      el.remove()
+
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey,
+          editor,
+          element: el,
+          options,
+          appendTo,
+          shouldShow,
+        }),
+      )
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
+    })
+
+    // Vue owns this element; attrs are applied reactively by Vue
+    // Plugin re-parents it when showing the menu
+    return () => h('div', { ref: root, ...attrs }, slots.default?.())
+  },
+}) as any

package/src/menus/index.ts

@@ -0,0 +1,3 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'
+export { default as BubbleMenuPreset } from './BubbleMenuPreset.vue'

package/src/useSlideEditor.ts

@@ -0,0 +1,255 @@
+import { computed, watch, toRefs } from 'vue'
+import { templatesV1 } from '@blockslides/ai-context'
+import type { AnyExtension, Editor, JSONContent } from '@blockslides/core'
+import type { SlideOptions } from '@blockslides/extension-slide'
+import { ExtensionKit, type ExtensionKitOptions } from '@blockslides/extension-kit'
+
+import { useEditor } from '@blockslides/vue-3'
+import type { EditorOptions } from '@blockslides/core'
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>
+
+export interface UseSlideEditorProps {
+  /**
+   * Initial content for the editor. If omitted, a single preset slide is used.
+   */
+  content?: EditorOptions['content']
+  /**
+   * Called on every update with the current JSON document.
+   */
+  onChange?: (doc: JSONContent, editor: Editor) => void
+  /**
+   * Additional extensions to append after the ExtensionKit bundle.
+   */
+  extensions?: AnyExtension[]
+  /**
+   * Customize or disable pieces of ExtensionKit (e.g., bubbleMenu: false).
+   */
+  extensionKitOptions?: ExtensionKitOptions
+  /**
+   * Optional preset list to power the add-slide button.
+   */
+  presetTemplates?: PresetTemplates
+  /**
+   * Called once when an editor instance is ready.
+   */
+  onEditorReady?: (editor: Editor) => void
+  /**
+   * Editor theme for UI styling
+   */
+  theme?: EditorOptions['theme']
+  /**
+   * The editor's props
+   */
+  editorProps?: EditorOptions['editorProps']
+  /**
+   * Called on every update
+   */
+  onUpdate?: EditorOptions['onUpdate']
+  /**
+   * Additional editor options to pass through to the core editor.
+   * This allows passing any EditorOptions without Vue auto-initializing them.
+   */
+  editorOptions?: Partial<EditorOptions>
+}
+
+const defaultSlide = () => ({
+  /**
+   * Placeholder slide if no content is provided.
+   */
+  type: 'doc',
+  content: [
+    {
+      type: 'slide',
+      attrs: {
+        size: '16x9',
+        className: '',
+        id: 'slide-1',
+        backgroundMode: 'none',
+        backgroundColor: null,
+        backgroundImage: null,
+        backgroundOverlayColor: null,
+        backgroundOverlayOpacity: null,
+      },
+      content: [
+        {
+          type: 'column',
+          attrs: {
+            align: 'center',
+            padding: 'lg',
+            margin: null,
+            gap: 'md',
+            backgroundColor: '#ffffff',
+            backgroundImage: null,
+            borderRadius: null,
+            border: null,
+            fill: true,
+            width: null,
+            height: null,
+            justify: 'center',
+          },
+          content: [
+            {
+              type: 'heading',
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+                id: '1fc4664c-333d-4203-a3f1-3ad27a54c535',
+                'data-toc-id': '1fc4664c-333d-4203-a3f1-3ad27a54c535',
+                level: 1,
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Lorem ipsum dolor sit amet',
+                },
+              ],
+            },
+            {
+              type: 'paragraph',
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. ',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})
+
+const defaultAddSlideButton = (presets: PresetTemplates) => ({
+  showPresets: true,
+  presets,
+  presetBackground: '#0f172a',
+  presetForeground: '#e5e7eb',
+})
+
+const defaultSlideOptions: Partial<SlideOptions> = {
+  renderMode: 'dynamic',
+  hoverOutline: { color: '#3b82f6', width: '1.5px', offset: '4px' },
+  hoverOutlineCascade: false,
+}
+
+export const useSlideEditor = (props: UseSlideEditorProps = {}) => {
+  const {
+    content,
+    onChange,
+    extensions,
+    extensionKitOptions,
+    presetTemplates,
+    onEditorReady,
+    theme = 'light',
+    editorProps,
+    onUpdate,
+    editorOptions = {}
+  } = props
+  /**
+   * Presets for add slide button.
+   */
+  const presets = computed<PresetTemplates>(
+    () => presetTemplates ?? templatesV1.listPresetTemplates()
+  )
+
+  const mergedExtensionKitOptions = computed<ExtensionKitOptions>(() => {
+    const addSlideButton =
+      extensionKitOptions?.addSlideButton === false
+        ? false
+        : {
+          ...defaultAddSlideButton(presets.value),
+          ...(extensionKitOptions?.addSlideButton ?? {}),
+        }
+
+    const slide =
+      extensionKitOptions?.slide === false
+        ? false
+        : {
+          ...defaultSlideOptions,
+          ...(extensionKitOptions?.slide ?? {}),
+        }
+
+    return {
+      ...extensionKitOptions,
+      addSlideButton,
+      slide,
+    }
+  })
+
+  const resolvedExtensions = computed<AnyExtension[]>(() => {
+    const kit = ExtensionKit.configure(mergedExtensionKitOptions.value)
+    return extensions ? [kit, ...extensions] : [kit]
+  })
+
+  /**
+   * Initial content for the editor.
+   */
+  const initialContent = content ?? defaultSlide()
+
+  console.log('resolvedExtensions', resolvedExtensions.value, resolvedExtensions);
+  console.log('editorOptions (as single prop):', editorOptions);
+  
+  const editor = useEditor(
+    {
+      content: initialContent,
+      extensions: resolvedExtensions.value,
+      theme,
+      editorProps: {
+        attributes: {
+          autocomplete: 'off',
+          autocorrect: 'off',
+          autocapitalize: 'off',
+          class: 'min-h-full min-w-full',
+          ...(editorProps?.attributes ?? {}),
+        },
+        ...editorProps,
+      },
+      ...editorOptions,
+      onUpdate: (ctx: any) => {
+        const json = ctx.editor.getJSON()
+        onChange?.(json, ctx.editor)
+        onUpdate?.(ctx)
+      },
+    }
+  );
+
+  watch(
+    editor,
+    newEditor => {
+      if (newEditor && !newEditor.isDestroyed) {
+        onEditorReady?.(newEditor)
+      } else {
+        console.log('[useSlideEditor] ❌ Editor not ready or destroyed')
+      }
+    },
+    { immediate: true }
+  )
+
+  return { editor, presets }
+}

package/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}