@blockslides/vue-3 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@blockslides/core"),r=require("vue"),V=require("@blockslides/ai-context"),P=require("@blockslides/extension-kit"),h=require("./FloatingMenu-Un--4r7A.cjs");function w(s){return r.customRef((e,t)=>({get(){return e(),s},set(n){s=n,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t()})})}}))}class S extends c.Editor{constructor(e={}){return super(e),this.contentComponent=null,this.appContext=null,this.reactiveState=w(this.view.state),this.reactiveExtensionStorage=w(this.extensionStorage),this.on("beforeTransaction",({nextState:t})=>{this.reactiveState.value=t,this.reactiveExtensionStorage.value=this.extensionStorage}),r.markRaw(this)}get state(){return this.reactiveState?this.reactiveState.value:this.view.state}get storage(){return this.reactiveExtensionStorage?this.reactiveExtensionStorage.value:super.storage}registerPlugin(e,t){const n=super.registerPlugin(e,t);return this.reactiveState&&(this.reactiveState.value=n),n}unregisterPlugin(e){const t=super.unregisterPlugin(e);return this.reactiveState&&t&&(this.reactiveState.value=t),t}}const C=r.defineComponent({name:"EditorContent",props:{editor:{default:null,type:Object}},setup(s){const e=r.ref(),t=r.getCurrentInstance();return r.watchEffect(()=>{const n=s.editor;n&&n.options.element&&e.value&&r.nextTick(()=>{var i;if(!e.value||!((i=n.view.dom)!=null&&i.parentNode))return;const o=r.unref(e.value);e.value.append(...n.view.dom.parentNode.childNodes),n.contentComponent=t.ctx._,t&&(n.appContext={...t.appContext,provides:t.provides}),n.setOptions({element:o}),n.createNodeViews()})}),r.onBeforeUnmount(()=>{const n=s.editor;n&&(n.contentComponent=null,n.appContext=null)}),{rootEl:e}},render(){return r.h("div",{ref:s=>{this.rootEl=s}})}}),E=r.defineComponent({name:"NodeViewContent",props:{as:{type:String,default:"div"}},render(){return r.h(this.as,{style:{whiteSpace:"pre-wrap"},"data-node-view-content":""})}}),O=r.defineComponent({name:"NodeViewWrapper",props:{as:{type:String,default:"div"}},inject:["onDragStart","decorationClasses"],render(){var s,e;return r.h(this.as,{class:this.decorationClasses,style:{whiteSpace:"normal"},"data-node-view-wrapper":"",onDragstart:this.onDragStart},(e=(s=this.$slots).default)==null?void 0:e.call(s))}}),x=(s={})=>{const e=r.shallowRef();return r.onMounted(()=>{e.value=new S(s)}),r.onBeforeUnmount(()=>{var o,i,d,a;const t=(i=(o=e.value)==null?void 0:o.view.dom)==null?void 0:i.parentNode,n=t==null?void 0:t.cloneNode(!0);(d=t==null?void 0:t.parentNode)==null||d.replaceChild(n,t),(a=e.value)==null||a.destroy()}),e},j=()=>({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. "}]}]}]}]}),q=s=>({showPresets:!0,presets:s,presetBackground:"#0f172a",presetForeground:"#e5e7eb"}),D={renderMode:"dynamic",hoverOutline:{color:"#3b82f6",width:"1.5px",offset:"4px"},hoverOutlineCascade:!1},_=(s={})=>{const{content:e,onChange:t,extensions:n,extensionKitOptions:o,presetTemplates:i,onEditorReady:d,theme:a="light",editorProps:l,onUpdate:p,editorOptions:y={}}=s,b=r.computed(()=>i??V.templatesV1.listPresetTemplates()),k=r.computed(()=>{const u=(o==null?void 0:o.addSlideButton)===!1?!1:{...q(b.value),...(o==null?void 0:o.addSlideButton)??{}},m=(o==null?void 0:o.slide)===!1?!1:{...D,...(o==null?void 0:o.slide)??{}};return{...o,addSlideButton:u,slide:m}}),f=r.computed(()=>{const u=P.ExtensionKit.configure(k.value);return n?[u,...n]:[u]}),M=e??j();console.log("resolvedExtensions",f.value,f),console.log("editorOptions (as single prop):",y);const v=x({content:M,extensions:f.value,theme:a,editorProps:{attributes:{autocomplete:"off",autocorrect:"off",autocapitalize:"off",class:"min-h-full min-w-full",...(l==null?void 0:l.attributes)??{}},...l},...y,onUpdate:u=>{const m=u.editor.getJSON();t==null||t(m,u.editor),p==null||p(u)}});return r.watch(v,u=>{u&&!u.isDestroyed?d==null||d(u):console.log("[useSlideEditor] ❌ Editor not ready or destroyed")},{immediate:!0}),{editor:v,presets:b}},B={class:"bs-viewport"},A=r.defineComponent({__name:"SlideEditor",props:{bubbleMenuPreset:{type:[Boolean,Object],default:!0},className:{},style:{},content:{},onChange:{},extensions:{},extensionKitOptions:{},presetTemplates:{},onEditorReady:{},theme:{},editorProps:{},onUpdate:{},editorOptions:{}},setup(s){const e=s,{bubbleMenuPreset:t,className:n,style:o,...i}=e,{editor:d}=_(i),a=r.computed(()=>e.bubbleMenuPreset===!1?null:e.bubbleMenuPreset===!0?{}:e.bubbleMenuPreset);return(l,p)=>r.unref(d)?(r.openBlock(),r.createElementBlock("div",{key:0,class:r.normalizeClass(r.unref(n)),style:r.normalizeStyle(r.unref(o))},[r.createElementVNode("div",B,[r.createVNode(r.unref(C),{editor:r.unref(d)},null,8,["editor"]),a.value?(r.openBlock(),r.createBlock(h._sfc_main,r.mergeProps({key:0,editor:r.unref(d)},a.value),null,16,["editor"])):r.createCommentVNode("",!0)])],6)):r.createCommentVNode("",!0)}});class g{constructor(e,{props:t={},editor:n}){this.destroyed=!1,this.editor=n,this.component=r.markRaw(e),this.el=document.createElement("div"),this.props=r.reactive(t),this.renderedComponent=this.renderComponent()}get element(){return this.renderedComponent.el}get ref(){var e,t,n,o;return(t=(e=this.renderedComponent.vNode)==null?void 0:e.component)!=null&&t.exposed?this.renderedComponent.vNode.component.exposed:(o=(n=this.renderedComponent.vNode)==null?void 0:n.component)==null?void 0:o.proxy}renderComponent(){if(this.destroyed)return this.renderedComponent;let e=r.h(this.component,this.props);return this.editor.appContext&&(e.appContext=this.editor.appContext),typeof document<"u"&&this.el&&r.render(e,this.el),{vNode:e,destroy:()=>{this.el&&r.render(null,this.el),this.el=null,e=null},el:this.el?this.el.firstElementChild:null}}updateProps(e={}){this.destroyed||(Object.entries(e).forEach(([t,n])=>{this.props[t]=n}),this.renderComponent())}destroy(){this.destroyed||(this.destroyed=!0,this.renderedComponent.destroy())}}const R={editor:{type:Object,required:!0},mark:{type:Object,required:!0},extension:{type:Object,required:!0},inline:{type:Boolean,required:!0},view:{type:Object,required:!0},updateAttributes:{type:Function,required:!0},HTMLAttributes:{type:Object,required:!0}},W=r.defineComponent({name:"MarkViewContent",props:{as:{type:String,default:"span"}},render(){return r.h(this.as,{style:{whiteSpace:"inherit"},"data-mark-view-content":""})}});class N extends c.MarkView{constructor(e,t,n){super(e,t,n);const o={...t,updateAttributes:this.updateAttributes.bind(this)},i=r.defineComponent({extends:{...e},props:Object.keys(o),template:this.component.template,setup:d=>{var a;return(a=e.setup)==null?void 0:a.call(e,d,{expose:()=>{}})},__scopeId:e.__scopeId,__cssModules:e.__cssModules,__name:e.__name,__file:e.__file});this.renderer=new g(i,{editor:this.editor,props:o})}get dom(){return this.renderer.element}get contentDOM(){return this.dom.querySelector("[data-mark-view-content]")}updateAttributes(e){const t=r.toRaw(this.mark);super.updateAttributes(e,t)}destroy(){this.renderer.destroy()}}function F(s,e={}){return t=>t.editor.contentComponent?new N(s,t,e):{}}const I={editor:{type:Object,required:!0},node:{type:Object,required:!0},decorations:{type:Object,required:!0},selected:{type:Boolean,required:!0},extension:{type:Object,required:!0},getPos:{type:Function,required:!0},updateAttributes:{type:Function,required:!0},deleteNode:{type:Function,required:!0},view:{type:Object,required:!0},innerDecorations:{type:Object,required:!0},HTMLAttributes:{type:Object,required:!0}};class T extends c.NodeView{constructor(){super(...arguments),this.cachedExtensionWithSyncedStorage=null}get extensionWithSyncedStorage(){if(!this.cachedExtensionWithSyncedStorage){const e=this.editor,t=this.extension;this.cachedExtensionWithSyncedStorage=new Proxy(t,{get(n,o,i){return o==="storage"?e.storage[t.name]??{}:Reflect.get(n,o,i)}})}return this.cachedExtensionWithSyncedStorage}mount(){const e={editor:this.editor,node:this.node,decorations:this.decorations,innerDecorations:this.innerDecorations,view:this.view,selected:!1,extension:this.extensionWithSyncedStorage,HTMLAttributes:this.HTMLAttributes,getPos:()=>this.getPos(),updateAttributes:(o={})=>this.updateAttributes(o),deleteNode:()=>this.deleteNode()},t=this.onDragStart.bind(this);this.decorationClasses=r.ref(this.getDecorationClasses());const n=r.defineComponent({extends:{...this.component},props:Object.keys(e),template:this.component.template,setup:o=>{var i,d;return r.provide("onDragStart",t),r.provide("decorationClasses",this.decorationClasses),(d=(i=this.component).setup)==null?void 0:d.call(i,o,{expose:()=>{}})},__scopeId:this.component.__scopeId,__cssModules:this.component.__cssModules,__name:this.component.__name,__file:this.component.__file});this.handleSelectionUpdate=this.handleSelectionUpdate.bind(this),this.editor.on("selectionUpdate",this.handleSelectionUpdate),this.renderer=new g(n,{editor:this.editor,props:e})}get dom(){if(!this.renderer.element||!this.renderer.element.hasAttribute("data-node-view-wrapper"))throw Error("Please use the NodeViewWrapper component for your node view.");return this.renderer.element}get contentDOM(){return this.node.isLeaf?null:this.dom.querySelector("[data-node-view-content]")}handleSelectionUpdate(){const{from:e,to:t}=this.editor.state.selection,n=this.getPos();if(typeof n=="number")if(e<=n&&t>=n+this.node.nodeSize){if(this.renderer.props.selected)return;this.selectNode()}else{if(!this.renderer.props.selected)return;this.deselectNode()}}update(e,t,n){const o=i=>{this.decorationClasses.value=this.getDecorationClasses(),this.renderer.updateProps(i)};if(typeof this.options.update=="function"){const i=this.node,d=this.decorations,a=this.innerDecorations;return this.node=e,this.decorations=t,this.innerDecorations=n,this.options.update({oldNode:i,oldDecorations:d,newNode:e,newDecorations:t,oldInnerDecorations:a,innerDecorations:n,updateProps:()=>o({node:e,decorations:t,innerDecorations:n,extension:this.extensionWithSyncedStorage})})}return e.type!==this.node.type?!1:(e===this.node&&this.decorations===t&&this.innerDecorations===n||(this.node=e,this.decorations=t,this.innerDecorations=n,o({node:e,decorations:t,innerDecorations:n,extension:this.extensionWithSyncedStorage})),!0)}selectNode(){this.renderer.updateProps({selected:!0}),this.renderer.element&&this.renderer.element.classList.add("ProseMirror-selectednode")}deselectNode(){this.renderer.updateProps({selected:!1}),this.renderer.element&&this.renderer.element.classList.remove("ProseMirror-selectednode")}getDecorationClasses(){return this.decorations.flatMap(e=>e.type.attrs.class).join(" ")}destroy(){this.renderer.destroy(),this.editor.off("selectionUpdate",this.handleSelectionUpdate)}}function U(s,e){return t=>{if(!t.editor.contentComponent)return{};const n=typeof s=="function"&&"__vccOpts"in s?s.__vccOpts:s;return new T(n,t,e)}}exports.BubbleMenu=h.BubbleMenu;exports.BubbleMenuPreset=h._sfc_main;exports.FloatingMenu=h.FloatingMenu;exports.Editor=S;exports.EditorContent=C;exports.MarkViewContent=W;exports.NodeViewContent=E;exports.NodeViewWrapper=O;exports.SlideEditor=A;exports.VueMarkView=N;exports.VueMarkViewRenderer=F;exports.VueNodeViewRenderer=U;exports.VueRenderer=g;exports.markViewProps=R;exports.nodeViewProps=I;exports.useEditor=x;exports.useSlideEditor=_;Object.keys(c).forEach(s=>{s!=="default"&&!Object.prototype.hasOwnProperty.call(exports,s)&&Object.defineProperty(exports,s,{enumerable:!0,get:()=>c[s]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@blockslides/core"),n=require("vue");function p(o){return n.customRef((e,t)=>({get(){return e(),o},set(r){o=r,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t()})})}}))}class h extends u.Editor{constructor(e={}){return super(e),this.contentComponent=null,this.appContext=null,this.reactiveState=p(this.view.state),this.reactiveExtensionStorage=p(this.extensionStorage),this.on("beforeTransaction",({nextState:t})=>{this.reactiveState.value=t,this.reactiveExtensionStorage.value=this.extensionStorage}),n.markRaw(this)}get state(){return this.reactiveState?this.reactiveState.value:this.view.state}get storage(){return this.reactiveExtensionStorage?this.reactiveExtensionStorage.value:super.storage}registerPlugin(e,t){const r=super.registerPlugin(e,t);return this.reactiveState&&(this.reactiveState.value=r),r}unregisterPlugin(e){const t=super.unregisterPlugin(e);return this.reactiveState&&t&&(this.reactiveState.value=t),t}}const m=n.defineComponent({name:"EditorContent",props:{editor:{default:null,type:Object}},setup(o){const e=n.ref(),t=n.getCurrentInstance();return n.watchEffect(()=>{const r=o.editor;r&&r.options.element&&e.value&&n.nextTick(()=>{var s;if(!e.value||!((s=r.view.dom)!=null&&s.parentNode))return;const i=n.unref(e.value);e.value.append(...r.view.dom.parentNode.childNodes),r.contentComponent=t.ctx._,t&&(r.appContext={...t.appContext,provides:t.provides}),r.setOptions({element:i}),r.createNodeViews()})}),n.onBeforeUnmount(()=>{const r=o.editor;r&&(r.contentComponent=null,r.appContext=null)}),{rootEl:e}},render(){return n.h("div",{ref:o=>{this.rootEl=o}})}}),f=n.defineComponent({name:"NodeViewContent",props:{as:{type:String,default:"div"}},render(){return n.h(this.as,{style:{whiteSpace:"pre-wrap"},"data-node-view-content":""})}}),y=n.defineComponent({name:"NodeViewWrapper",props:{as:{type:String,default:"div"}},inject:["onDragStart","decorationClasses"],render(){var o,e;return n.h(this.as,{class:this.decorationClasses,style:{whiteSpace:"normal"},"data-node-view-wrapper":"",onDragstart:this.onDragStart},(e=(o=this.$slots).default)==null?void 0:e.call(o))}}),w=(o={})=>{const e=n.shallowRef();return n.onMounted(()=>{e.value=new h(o)}),n.onBeforeUnmount(()=>{var i,s,d,a;const t=(s=(i=e.value)==null?void 0:i.view.dom)==null?void 0:s.parentNode,r=t==null?void 0:t.cloneNode(!0);(d=t==null?void 0:t.parentNode)==null||d.replaceChild(r,t),(a=e.value)==null||a.destroy()}),e};class c{constructor(e,{props:t={},editor:r}){this.destroyed=!1,this.editor=r,this.component=n.markRaw(e),this.el=document.createElement("div"),this.props=n.reactive(t),this.renderedComponent=this.renderComponent()}get element(){return this.renderedComponent.el}get ref(){var e,t,r,i;return(t=(e=this.renderedComponent.vNode)==null?void 0:e.component)!=null&&t.exposed?this.renderedComponent.vNode.component.exposed:(i=(r=this.renderedComponent.vNode)==null?void 0:r.component)==null?void 0:i.proxy}renderComponent(){if(this.destroyed)return this.renderedComponent;let e=n.h(this.component,this.props);return this.editor.appContext&&(e.appContext=this.editor.appContext),typeof document<"u"&&this.el&&n.render(e,this.el),{vNode:e,destroy:()=>{this.el&&n.render(null,this.el),this.el=null,e=null},el:this.el?this.el.firstElementChild:null}}updateProps(e={}){this.destroyed||(Object.entries(e).forEach(([t,r])=>{this.props[t]=r}),this.renderComponent())}destroy(){this.destroyed||(this.destroyed=!0,this.renderedComponent.destroy())}}const v={editor:{type:Object,required:!0},mark:{type:Object,required:!0},extension:{type:Object,required:!0},inline:{type:Boolean,required:!0},view:{type:Object,required:!0},updateAttributes:{type:Function,required:!0},HTMLAttributes:{type:Object,required:!0}},g=n.defineComponent({name:"MarkViewContent",props:{as:{type:String,default:"span"}},render(){return n.h(this.as,{style:{whiteSpace:"inherit"},"data-mark-view-content":""})}});class l extends u.MarkView{constructor(e,t,r){super(e,t,r);const i={...t,updateAttributes:this.updateAttributes.bind(this)},s=n.defineComponent({extends:{...e},props:Object.keys(i),template:this.component.template,setup:d=>{var a;return(a=e.setup)==null?void 0:a.call(e,d,{expose:()=>{}})},__scopeId:e.__scopeId,__cssModules:e.__cssModules,__name:e.__name,__file:e.__file});this.renderer=new c(s,{editor:this.editor,props:i})}get dom(){return this.renderer.element}get contentDOM(){return this.dom.querySelector("[data-mark-view-content]")}updateAttributes(e){const t=n.toRaw(this.mark);super.updateAttributes(e,t)}destroy(){this.renderer.destroy()}}function C(o,e={}){return t=>t.editor.contentComponent?new l(o,t,e):{}}const S={editor:{type:Object,required:!0},node:{type:Object,required:!0},decorations:{type:Object,required:!0},selected:{type:Boolean,required:!0},extension:{type:Object,required:!0},getPos:{type:Function,required:!0},updateAttributes:{type:Function,required:!0},deleteNode:{type:Function,required:!0},view:{type:Object,required:!0},innerDecorations:{type:Object,required:!0},HTMLAttributes:{type:Object,required:!0}};class x extends u.NodeView{constructor(){super(...arguments),this.cachedExtensionWithSyncedStorage=null}get extensionWithSyncedStorage(){if(!this.cachedExtensionWithSyncedStorage){const e=this.editor,t=this.extension;this.cachedExtensionWithSyncedStorage=new Proxy(t,{get(r,i,s){return i==="storage"?e.storage[t.name]??{}:Reflect.get(r,i,s)}})}return this.cachedExtensionWithSyncedStorage}mount(){const e={editor:this.editor,node:this.node,decorations:this.decorations,innerDecorations:this.innerDecorations,view:this.view,selected:!1,extension:this.extensionWithSyncedStorage,HTMLAttributes:this.HTMLAttributes,getPos:()=>this.getPos(),updateAttributes:(i={})=>this.updateAttributes(i),deleteNode:()=>this.deleteNode()},t=this.onDragStart.bind(this);this.decorationClasses=n.ref(this.getDecorationClasses());const r=n.defineComponent({extends:{...this.component},props:Object.keys(e),template:this.component.template,setup:i=>{var s,d;return n.provide("onDragStart",t),n.provide("decorationClasses",this.decorationClasses),(d=(s=this.component).setup)==null?void 0:d.call(s,i,{expose:()=>{}})},__scopeId:this.component.__scopeId,__cssModules:this.component.__cssModules,__name:this.component.__name,__file:this.component.__file});this.handleSelectionUpdate=this.handleSelectionUpdate.bind(this),this.editor.on("selectionUpdate",this.handleSelectionUpdate),this.renderer=new c(r,{editor:this.editor,props:e})}get dom(){if(!this.renderer.element||!this.renderer.element.hasAttribute("data-node-view-wrapper"))throw Error("Please use the NodeViewWrapper component for your node view.");return this.renderer.element}get contentDOM(){return this.node.isLeaf?null:this.dom.querySelector("[data-node-view-content]")}handleSelectionUpdate(){const{from:e,to:t}=this.editor.state.selection,r=this.getPos();if(typeof r=="number")if(e<=r&&t>=r+this.node.nodeSize){if(this.renderer.props.selected)return;this.selectNode()}else{if(!this.renderer.props.selected)return;this.deselectNode()}}update(e,t,r){const i=s=>{this.decorationClasses.value=this.getDecorationClasses(),this.renderer.updateProps(s)};if(typeof this.options.update=="function"){const s=this.node,d=this.decorations,a=this.innerDecorations;return this.node=e,this.decorations=t,this.innerDecorations=r,this.options.update({oldNode:s,oldDecorations:d,newNode:e,newDecorations:t,oldInnerDecorations:a,innerDecorations:r,updateProps:()=>i({node:e,decorations:t,innerDecorations:r,extension:this.extensionWithSyncedStorage})})}return e.type!==this.node.type?!1:(e===this.node&&this.decorations===t&&this.innerDecorations===r||(this.node=e,this.decorations=t,this.innerDecorations=r,i({node:e,decorations:t,innerDecorations:r,extension:this.extensionWithSyncedStorage})),!0)}selectNode(){this.renderer.updateProps({selected:!0}),this.renderer.element&&this.renderer.element.classList.add("ProseMirror-selectednode")}deselectNode(){this.renderer.updateProps({selected:!1}),this.renderer.element&&this.renderer.element.classList.remove("ProseMirror-selectednode")}getDecorationClasses(){return this.decorations.flatMap(e=>e.type.attrs.class).join(" ")}destroy(){this.renderer.destroy(),this.editor.off("selectionUpdate",this.handleSelectionUpdate)}}function b(o,e){return t=>{if(!t.editor.contentComponent)return{};const r=typeof o=="function"&&"__vccOpts"in o?o.__vccOpts:o;return new x(r,t,e)}}exports.Editor=h;exports.EditorContent=m;exports.MarkViewContent=g;exports.NodeViewContent=f;exports.NodeViewWrapper=y;exports.VueMarkView=l;exports.VueMarkViewRenderer=C;exports.VueNodeViewRenderer=b;exports.VueRenderer=c;exports.markViewProps=v;exports.nodeViewProps=S;exports.useEditor=w;Object.keys(u).forEach(o=>{o!=="default"&&!Object.prototype.hasOwnProperty.call(exports,o)&&Object.defineProperty(exports,o,{enumerable:!0,get:()=>u[o]})});

package/dist/index.d.ts

@@ -3,10 +3,7 @@ export * from './EditorContent.js';
 export * from './NodeViewContent.js';
 export * from './NodeViewWrapper.js';
 export * from './useEditor.js';
-export * from './useSlideEditor.js';
-export { default as SlideEditor } from './SlideEditor.vue';
 export * from './VueMarkViewRenderer.js';
 export * from './VueNodeViewRenderer.js';
 export * from './VueRenderer.js';
 export * from '../../core/src';
-export * from './menus/index.js';

package/dist/index.js

@@ -1,17 +1,13 @@
-import { Editor as V, MarkView as j, NodeView as q } from "@blockslides/core";
+import { Editor as v, MarkView as g, NodeView as w } from "@blockslides/core";
 export * from "@blockslides/core";
-import { markRaw as N, customRef as D, defineComponent as u, h as p, ref as k, getCurrentInstance as A, watchEffect as B, nextTick as R, unref as l, onBeforeUnmount as P, shallowRef as W, onMounted as I, computed as m, watch as F, openBlock as S, createElementBlock as T, normalizeStyle as U, normalizeClass as L, createElementVNode as z, createVNode as H, createBlock as $, mergeProps as J, createCommentVNode as w, reactive as G, render as x, toRaw as Q, provide as C } from "vue";
-import { templatesV1 as X } from "@blockslides/ai-context";
-import { ExtensionKit as Y } from "@blockslides/extension-kit";
-import { _ as Z } from "./FloatingMenu-AygIYJQV.js";
-import { B as Ne, F as ke } from "./FloatingMenu-AygIYJQV.js";
-function _(o) {
-  return D((e, t) => ({
+import { markRaw as l, customRef as S, defineComponent as a, h as u, ref as m, getCurrentInstance as x, watchEffect as C, nextTick as _, unref as b, onBeforeUnmount as f, shallowRef as N, onMounted as q, reactive as E, render as c, toRaw as O, provide as p } from "vue";
+function h(n) {
+  return S((e, t) => ({
     get() {
-      return e(), o;
+      return e(), n;
     },
     set(r) {
-      o = r, requestAnimationFrame(() => {
+      n = r, requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           t();
         });
@@ -19,11 +15,11 @@ function _(o) {
     }
   }));
 }
-class K extends V {
+class V extends v {
   constructor(e = {}) {
-    return super(e), this.contentComponent = null, this.appContext = null, this.reactiveState = _(this.view.state), this.reactiveExtensionStorage = _(this.extensionStorage), this.on("beforeTransaction", ({ nextState: t }) => {
+    return super(e), this.contentComponent = null, this.appContext = null, this.reactiveState = h(this.view.state), this.reactiveExtensionStorage = h(this.extensionStorage), this.on("beforeTransaction", ({ nextState: t }) => {
       this.reactiveState.value = t, this.reactiveExtensionStorage.value = this.extensionStorage;
-    }), N(this);
+    }), l(this);
   }
   get state() {
     return this.reactiveState ? this.reactiveState.value : this.view.state;
@@ -46,7 +42,7 @@ class K extends V {
     return this.reactiveState && t && (this.reactiveState.value = t), t;
   }
 }
-const ee = u({
+const k = a({
   name: "EditorContent",
   props: {
     editor: {
@@ -54,15 +50,15 @@ const ee = u({
       type: Object
     }
   },
-  setup(o) {
-    const e = k(), t = A();
-    return B(() => {
-      const r = o.editor;
-      r && r.options.element && e.value && R(() => {
-        var s;
-        if (!e.value || !((s = r.view.dom) != null && s.parentNode))
+  setup(n) {
+    const e = m(), t = x();
+    return C(() => {
+      const r = n.editor;
+      r && r.options.element && e.value && _(() => {
+        var i;
+        if (!e.value || !((i = r.view.dom) != null && i.parentNode))
           return;
-        const n = l(e.value);
+        const s = b(e.value);
         e.value.append(...r.view.dom.parentNode.childNodes), r.contentComponent = t.ctx._, t && (r.appContext = {
           ...t.appContext,
           // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
@@ -70,22 +66,22 @@ const ee = u({
           // @ts-expect-error forward instance's 'provides' into appContext
           provides: t.provides
         }), r.setOptions({
-          element: n
+          element: s
         }), r.createNodeViews();
       });
-    }), P(() => {
-      const r = o.editor;
+    }), f(() => {
+      const r = n.editor;
       r && (r.contentComponent = null, r.appContext = null);
     }), { rootEl: e };
   },
   render() {
-    return p("div", {
-      ref: (o) => {
-        this.rootEl = o;
+    return u("div", {
+      ref: (n) => {
+        this.rootEl = n;
       }
     });
   }
-}), me = u({
+}), A = a({
   name: "NodeViewContent",
   props: {
     as: {
@@ -94,14 +90,14 @@ const ee = u({
     }
   },
   render() {
-    return p(this.as, {
+    return u(this.as, {
       style: {
         whiteSpace: "pre-wrap"
       },
       "data-node-view-content": ""
     });
   }
-}), fe = u({
+}), W = a({
   name: "NodeViewWrapper",
   props: {
     as: {
@@ -111,8 +107,8 @@ const ee = u({
   },
   inject: ["onDragStart", "decorationClasses"],
   render() {
-    var o, e;
-    return p(
+    var n, e;
+    return u(
       this.as,
       {
         // @ts-ignore
@@ -124,234 +120,36 @@ const ee = u({
         // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
         onDragstart: this.onDragStart
       },
-      (e = (o = this.$slots).default) == null ? void 0 : e.call(o)
+      (e = (n = this.$slots).default) == null ? void 0 : e.call(n)
     );
   }
-}), te = (o = {}) => {
-  const e = W();
-  return I(() => {
-    e.value = new K(o);
-  }), P(() => {
-    var n, s, i, d;
-    const t = (s = (n = e.value) == null ? void 0 : n.view.dom) == null ? void 0 : s.parentNode, r = t == null ? void 0 : t.cloneNode(!0);
-    (i = t == null ? void 0 : t.parentNode) == null || i.replaceChild(r, t), (d = e.value) == null || d.destroy();
+}), R = (n = {}) => {
+  const e = N();
+  return q(() => {
+    e.value = new V(n);
+  }), f(() => {
+    var s, i, o, d;
+    const t = (i = (s = e.value) == null ? void 0 : s.view.dom) == null ? void 0 : i.parentNode, r = t == null ? void 0 : t.cloneNode(!0);
+    (o = t == null ? void 0 : t.parentNode) == null || o.replaceChild(r, t), (d = e.value) == null || d.destroy();
   }), e;
-}, re = () => ({
-  /**
-   * 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. "
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}), ne = (o) => ({
-  showPresets: !0,
-  presets: o,
-  presetBackground: "#0f172a",
-  presetForeground: "#e5e7eb"
-}), oe = {
-  renderMode: "dynamic",
-  hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
-  hoverOutlineCascade: !1
-}, se = (o = {}) => {
-  const {
-    content: e,
-    onChange: t,
-    extensions: r,
-    extensionKitOptions: n,
-    presetTemplates: s,
-    onEditorReady: i,
-    theme: d = "light",
-    editorProps: c,
-    onUpdate: h,
-    editorOptions: y = {}
-  } = o, b = m(
-    () => s ?? X.listPresetTemplates()
-  ), M = m(() => {
-    const a = (n == null ? void 0 : n.addSlideButton) === !1 ? !1 : {
-      ...ne(b.value),
-      ...(n == null ? void 0 : n.addSlideButton) ?? {}
-    }, g = (n == null ? void 0 : n.slide) === !1 ? !1 : {
-      ...oe,
-      ...(n == null ? void 0 : n.slide) ?? {}
-    };
-    return {
-      ...n,
-      addSlideButton: a,
-      slide: g
-    };
-  }), f = m(() => {
-    const a = Y.configure(M.value);
-    return r ? [a, ...r] : [a];
-  }), O = e ?? re();
-  console.log("resolvedExtensions", f.value, f), console.log("editorOptions (as single prop):", y);
-  const v = te(
-    {
-      content: O,
-      extensions: f.value,
-      theme: d,
-      editorProps: {
-        attributes: {
-          autocomplete: "off",
-          autocorrect: "off",
-          autocapitalize: "off",
-          class: "min-h-full min-w-full",
-          ...(c == null ? void 0 : c.attributes) ?? {}
-        },
-        ...c
-      },
-      ...y,
-      onUpdate: (a) => {
-        const g = a.editor.getJSON();
-        t == null || t(g, a.editor), h == null || h(a);
-      }
-    }
-  );
-  return F(
-    v,
-    (a) => {
-      a && !a.isDestroyed ? i == null || i(a) : console.log("[useSlideEditor] ❌ Editor not ready or destroyed");
-    },
-    { immediate: !0 }
-  ), { editor: v, presets: b };
-}, ie = { class: "bs-viewport" }, ge = /* @__PURE__ */ u({
-  __name: "SlideEditor",
-  props: {
-    bubbleMenuPreset: { type: [Boolean, Object], default: !0 },
-    className: {},
-    style: {},
-    content: {},
-    onChange: {},
-    extensions: {},
-    extensionKitOptions: {},
-    presetTemplates: {},
-    onEditorReady: {},
-    theme: {},
-    editorProps: {},
-    onUpdate: {},
-    editorOptions: {}
-  },
-  setup(o) {
-    const e = o, {
-      bubbleMenuPreset: t,
-      className: r,
-      style: n,
-      ...s
-    } = e, { editor: i } = se(s), d = m(() => e.bubbleMenuPreset === !1 ? null : e.bubbleMenuPreset === !0 ? {} : e.bubbleMenuPreset);
-    return (c, h) => l(i) ? (S(), T("div", {
-      key: 0,
-      class: L(l(r)),
-      style: U(l(n))
-    }, [
-      z("div", ie, [
-        H(l(ee), { editor: l(i) }, null, 8, ["editor"]),
-        d.value ? (S(), $(Z, J({
-          key: 0,
-          editor: l(i)
-        }, d.value), null, 16, ["editor"])) : w("", !0)
-      ])
-    ], 6)) : w("", !0);
-  }
-});
-class E {
+};
+class y {
   constructor(e, { props: t = {}, editor: r }) {
-    this.destroyed = !1, this.editor = r, this.component = N(e), this.el = document.createElement("div"), this.props = G(t), this.renderedComponent = this.renderComponent();
+    this.destroyed = !1, this.editor = r, this.component = l(e), this.el = document.createElement("div"), this.props = E(t), this.renderedComponent = this.renderComponent();
   }
   get element() {
     return this.renderedComponent.el;
   }
   get ref() {
-    var e, t, r, n;
-    return (t = (e = this.renderedComponent.vNode) == null ? void 0 : e.component) != null && t.exposed ? this.renderedComponent.vNode.component.exposed : (n = (r = this.renderedComponent.vNode) == null ? void 0 : r.component) == null ? void 0 : n.proxy;
+    var e, t, r, s;
+    return (t = (e = this.renderedComponent.vNode) == null ? void 0 : e.component) != null && t.exposed ? this.renderedComponent.vNode.component.exposed : (s = (r = this.renderedComponent.vNode) == null ? void 0 : r.component) == null ? void 0 : s.proxy;
   }
   renderComponent() {
     if (this.destroyed)
       return this.renderedComponent;
-    let e = p(this.component, this.props);
-    return this.editor.appContext && (e.appContext = this.editor.appContext), typeof document < "u" && this.el && x(e, this.el), { vNode: e, destroy: () => {
-      this.el && x(null, this.el), this.el = null, e = null;
+    let e = u(this.component, this.props);
+    return this.editor.appContext && (e.appContext = this.editor.appContext), typeof document < "u" && this.el && c(e, this.el), { vNode: e, destroy: () => {
+      this.el && c(null, this.el), this.el = null, e = null;
     }, el: this.el ? this.el.firstElementChild : null };
   }
   updateProps(e = {}) {
@@ -363,7 +161,7 @@ class E {
     this.destroyed || (this.destroyed = !0, this.renderedComponent.destroy());
   }
 }
-const ye = {
+const U = {
   editor: {
     type: Object,
     required: !0
@@ -392,7 +190,7 @@ const ye = {
     type: Object,
     required: !0
   }
-}, be = u({
+}, L = a({
   name: "MarkViewContent",
   props: {
     as: {
@@ -401,7 +199,7 @@ const ye = {
     }
   },
   render() {
-    return p(this.as, {
+    return u(this.as, {
       style: {
         whiteSpace: "inherit"
       },
@@ -409,16 +207,16 @@ const ye = {
     });
   }
 });
-class de extends j {
+class M extends g {
   constructor(e, t, r) {
     super(e, t, r);
-    const n = { ...t, updateAttributes: this.updateAttributes.bind(this) }, s = u({
+    const s = { ...t, updateAttributes: this.updateAttributes.bind(this) }, i = a({
       extends: { ...e },
-      props: Object.keys(n),
+      props: Object.keys(s),
       template: this.component.template,
-      setup: (i) => {
+      setup: (o) => {
         var d;
-        return (d = e.setup) == null ? void 0 : d.call(e, i, {
+        return (d = e.setup) == null ? void 0 : d.call(e, o, {
           expose: () => {
           }
         });
@@ -429,9 +227,9 @@ class de extends j {
       __name: e.__name,
       __file: e.__file
     });
-    this.renderer = new E(s, {
+    this.renderer = new y(i, {
       editor: this.editor,
-      props: n
+      props: s
     });
   }
   get dom() {
@@ -441,17 +239,17 @@ class de extends j {
     return this.dom.querySelector("[data-mark-view-content]");
   }
   updateAttributes(e) {
-    const t = Q(this.mark);
+    const t = O(this.mark);
     super.updateAttributes(e, t);
   }
   destroy() {
     this.renderer.destroy();
   }
 }
-function ve(o, e = {}) {
-  return (t) => t.editor.contentComponent ? new de(o, t, e) : {};
+function F(n, e = {}) {
+  return (t) => t.editor.contentComponent ? new M(n, t, e) : {};
 }
-const Se = {
+const I = {
   editor: {
     type: Object,
     required: !0
@@ -497,7 +295,7 @@ const Se = {
     required: !0
   }
 };
-class ae extends q {
+class P extends w {
   constructor() {
     super(...arguments), this.cachedExtensionWithSyncedStorage = null;
   }
@@ -510,8 +308,8 @@ class ae extends q {
     if (!this.cachedExtensionWithSyncedStorage) {
       const e = this.editor, t = this.extension;
       this.cachedExtensionWithSyncedStorage = new Proxy(t, {
-        get(r, n, s) {
-          return n === "storage" ? e.storage[t.name] ?? {} : Reflect.get(r, n, s);
+        get(r, s, i) {
+          return s === "storage" ? e.storage[t.name] ?? {} : Reflect.get(r, s, i);
         }
       });
     }
@@ -528,17 +326,17 @@ class ae extends q {
       extension: this.extensionWithSyncedStorage,
       HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
-      updateAttributes: (n = {}) => this.updateAttributes(n),
+      updateAttributes: (s = {}) => this.updateAttributes(s),
       deleteNode: () => this.deleteNode()
     }, t = this.onDragStart.bind(this);
-    this.decorationClasses = k(this.getDecorationClasses());
-    const r = u({
+    this.decorationClasses = m(this.getDecorationClasses());
+    const r = a({
       extends: { ...this.component },
       props: Object.keys(e),
       template: this.component.template,
-      setup: (n) => {
-        var s, i;
-        return C("onDragStart", t), C("decorationClasses", this.decorationClasses), (i = (s = this.component).setup) == null ? void 0 : i.call(s, n, {
+      setup: (s) => {
+        var i, o;
+        return p("onDragStart", t), p("decorationClasses", this.decorationClasses), (o = (i = this.component).setup) == null ? void 0 : o.call(i, s, {
           expose: () => {
           }
         });
@@ -559,7 +357,7 @@ class ae extends q {
       // eslint-disable-next-line
       __file: this.component.__file
     });
-    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.renderer = new E(r, {
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.renderer = new y(r, {
       editor: this.editor,
       props: e
     });
@@ -602,22 +400,22 @@ class ae extends q {
    * To prevent unnecessary updates, the `update` option can be used.
    */
   update(e, t, r) {
-    const n = (s) => {
-      this.decorationClasses.value = this.getDecorationClasses(), this.renderer.updateProps(s);
+    const s = (i) => {
+      this.decorationClasses.value = this.getDecorationClasses(), this.renderer.updateProps(i);
     };
     if (typeof this.options.update == "function") {
-      const s = this.node, i = this.decorations, d = this.innerDecorations;
+      const i = this.node, o = this.decorations, d = this.innerDecorations;
       return this.node = e, this.decorations = t, this.innerDecorations = r, this.options.update({
-        oldNode: s,
-        oldDecorations: i,
+        oldNode: i,
+        oldDecorations: o,
         newNode: e,
         newDecorations: t,
         oldInnerDecorations: d,
         innerDecorations: r,
-        updateProps: () => n({ node: e, decorations: t, innerDecorations: r, extension: this.extensionWithSyncedStorage })
+        updateProps: () => s({ node: e, decorations: t, innerDecorations: r, extension: this.extensionWithSyncedStorage })
       });
     }
-    return e.type !== this.node.type ? !1 : (e === this.node && this.decorations === t && this.innerDecorations === r || (this.node = e, this.decorations = t, this.innerDecorations = r, n({ node: e, decorations: t, innerDecorations: r, extension: this.extensionWithSyncedStorage })), !0);
+    return e.type !== this.node.type ? !1 : (e === this.node && this.decorations === t && this.innerDecorations === r || (this.node = e, this.decorations = t, this.innerDecorations = r, s({ node: e, decorations: t, innerDecorations: r, extension: this.extensionWithSyncedStorage })), !0);
   }
   /**
    * Select the node.
@@ -644,30 +442,25 @@ class ae extends q {
     this.renderer.destroy(), this.editor.off("selectionUpdate", this.handleSelectionUpdate);
   }
 }
-function we(o, e) {
+function T(n, e) {
   return (t) => {
     if (!t.editor.contentComponent)
       return {};
-    const r = typeof o == "function" && "__vccOpts" in o ? o.__vccOpts : o;
-    return new ae(r, t, e);
+    const r = typeof n == "function" && "__vccOpts" in n ? n.__vccOpts : n;
+    return new P(r, t, e);
   };
 }
 export {
-  Ne as BubbleMenu,
-  Z as BubbleMenuPreset,
-  K as Editor,
-  ee as EditorContent,
-  ke as FloatingMenu,
-  be as MarkViewContent,
-  me as NodeViewContent,
-  fe as NodeViewWrapper,
-  ge as SlideEditor,
-  de as VueMarkView,
-  ve as VueMarkViewRenderer,
-  we as VueNodeViewRenderer,
-  E as VueRenderer,
-  ye as markViewProps,
-  Se as nodeViewProps,
-  te as useEditor,
-  se as useSlideEditor
+  V as Editor,
+  k as EditorContent,
+  L as MarkViewContent,
+  A as NodeViewContent,
+  W as NodeViewWrapper,
+  M as VueMarkView,
+  F as VueMarkViewRenderer,
+  T as VueNodeViewRenderer,
+  y as VueRenderer,
+  U as markViewProps,
+  I as nodeViewProps,
+  R as useEditor
 };