@blockslides/vue-3 0.2.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/Editor.d.ts

@@ -0,0 +1,24 @@
+import { EditorOptions, Storage, Editor as CoreEditor } from '../../core/src';
+import { EditorState, Plugin, PluginKey } from '../../pm/state/src';
+import { AppContext, ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+
+export type ContentComponent = ComponentInternalInstance & {
+    ctx: ComponentPublicInstance;
+};
+export declare class Editor extends CoreEditor {
+    private reactiveState;
+    private reactiveExtensionStorage;
+    contentComponent: ContentComponent | null;
+    appContext: AppContext | null;
+    constructor(options?: Partial<EditorOptions>);
+    get state(): EditorState;
+    get storage(): Storage;
+    /**
+     * Register a ProseMirror plugin.
+     */
+    registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): EditorState;
+    /**
+     * Unregister a ProseMirror plugin.
+     */
+    unregisterPlugin(nameOrPluginKey: string | PluginKey): EditorState | undefined;
+}

package/dist/EditorContent.d.ts

@@ -0,0 +1,18 @@
+import { PropType, Ref } from 'vue';
+import { Editor } from './Editor.js';
+
+export declare const EditorContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    editor: {
+        default: null;
+        type: PropType<Editor>;
+    };
+}>, {
+    rootEl: Ref<Element | undefined, Element | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    editor: {
+        default: null;
+        type: PropType<Editor>;
+    };
+}>> & Readonly<{}>, {
+    editor: Editor;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/FloatingMenu-BKkixozS.js

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

package/dist/FloatingMenu-By8Qi7tW.cjs

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

package/dist/NodeViewContent.d.ts

@@ -0,0 +1,13 @@
+export declare const NodeViewContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/NodeViewWrapper.d.ts

@@ -0,0 +1,13 @@
+export declare const NodeViewWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VueMarkViewRenderer.d.ts

@@ -0,0 +1,63 @@
+import { MarkViewProps, MarkViewRenderer, MarkViewRendererOptions, MarkView } from '../../core/src';
+import { Component, PropType } from 'vue';
+import { VueRenderer } from './VueRenderer.js';
+
+export interface VueMarkViewRendererOptions extends MarkViewRendererOptions {
+    as?: string;
+    className?: string;
+    attrs?: {
+        [key: string]: string;
+    };
+}
+export declare const markViewProps: {
+    editor: {
+        type: PropType<MarkViewProps["editor"]>;
+        required: true;
+    };
+    mark: {
+        type: PropType<MarkViewProps["mark"]>;
+        required: true;
+    };
+    extension: {
+        type: PropType<MarkViewProps["extension"]>;
+        required: true;
+    };
+    inline: {
+        type: PropType<MarkViewProps["inline"]>;
+        required: true;
+    };
+    view: {
+        type: PropType<MarkViewProps["view"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<MarkViewProps["updateAttributes"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: PropType<MarkViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+};
+export declare const MarkViewContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare class VueMarkView extends MarkView<Component, VueMarkViewRendererOptions> {
+    renderer: VueRenderer;
+    constructor(component: Component, props: MarkViewProps, options?: Partial<VueMarkViewRendererOptions>);
+    get dom(): HTMLElement;
+    get contentDOM(): HTMLElement | null;
+    updateAttributes(attrs: Record<string, any>): void;
+    destroy(): void;
+}
+export declare function VueMarkViewRenderer(component: Component, options?: Partial<VueMarkViewRendererOptions>): MarkViewRenderer;

package/dist/VueNodeViewRenderer.d.ts

@@ -0,0 +1,63 @@
+import { NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '../../core/src';
+import { Node as ProseMirrorNode } from '../../pm/model/src';
+import { Decoration, DecorationSource } from '../../pm/view/src';
+import { Component, PropType } from 'vue';
+
+export declare const nodeViewProps: {
+    editor: {
+        type: PropType<NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: PropType<NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: PropType<NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: PropType<NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: PropType<NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: PropType<NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: PropType<NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: PropType<NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: PropType<NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: PropType<NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: PropType<NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+};
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
+    update: ((props: {
+        oldNode: ProseMirrorNode;
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
+        newNode: ProseMirrorNode;
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
+        updateProps: () => void;
+    }) => boolean) | null;
+}
+export declare function VueNodeViewRenderer(component: Component<NodeViewProps>, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer;

package/dist/VueRenderer.d.ts

@@ -0,0 +1,35 @@
+import { Editor } from '../../core/src';
+import { Component, h } from 'vue';
+import { Editor as ExtendedEditor } from './Editor.js';
+
+export interface VueRendererOptions {
+    editor: Editor;
+    props?: Record<string, any>;
+}
+type ExtendedVNode = ReturnType<typeof h> | null;
+interface RenderedComponent {
+    vNode: ExtendedVNode;
+    destroy: () => void;
+    el: Element | null;
+}
+/**
+ * This class is used to render Vue components inside the editor.
+ */
+export declare class VueRenderer {
+    renderedComponent: RenderedComponent;
+    editor: ExtendedEditor;
+    component: Component;
+    el: Element | null;
+    props: Record<string, any>;
+    /**
+     * Flag to track if the renderer has been destroyed, preventing queued or asynchronous renders from executing after teardown.
+     */
+    destroyed: boolean;
+    constructor(component: Component, { props, editor }: VueRendererOptions);
+    get element(): Element | null;
+    get ref(): any;
+    renderComponent(): RenderedComponent;
+    updateProps(props?: Record<string, any>): void;
+    destroy(): void;
+}
+export {};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("@blockslides/core"),o=require("vue"),j=require("@blockslides/ai-context"),O=require("@blockslides/extension-kit"),f=require("./FloatingMenu-By8Qi7tW.cjs");function x(r){return o.customRef((e,t)=>({get(){return e(),r},set(n){r=n,requestAnimationFrame(()=>{requestAnimationFrame(()=>{t()})})}}))}class _ extends g.Editor{constructor(e={}){return super(e),this.contentComponent=null,this.appContext=null,this.reactiveState=x(this.view.state),this.reactiveExtensionStorage=x(this.extensionStorage),this.on("beforeTransaction",({nextState:t})=>{this.reactiveState.value=t,this.reactiveExtensionStorage.value=this.extensionStorage}),o.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 P=o.defineComponent({name:"EditorContent",props:{editor:{default:null,type:Object}},setup(r){const e=o.ref(),t=o.getCurrentInstance();return o.watchEffect(()=>{const n=r.editor;n&&n.options.element&&e.value&&o.nextTick(()=>{var s;if(!e.value||!((s=n.view.dom)!=null&&s.parentNode))return;const i=o.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:i}),n.createNodeViews()})}),o.onBeforeUnmount(()=>{const n=r.editor;n&&(n.contentComponent=null,n.appContext=null)}),{rootEl:e}},render(){return o.h("div",{ref:r=>{this.rootEl=r}})}}),V=o.defineComponent({name:"NodeViewContent",props:{as:{type:String,default:"div"}},render(){return o.h(this.as,{style:{whiteSpace:"pre-wrap"},"data-node-view-content":""})}}),B=o.defineComponent({name:"NodeViewWrapper",props:{as:{type:String,default:"div"}},inject:["onDragStart","decorationClasses"],render(){var r,e;return o.h(this.as,{class:this.decorationClasses,style:{whiteSpace:"normal"},"data-node-view-wrapper":"",onDragstart:this.onDragStart},(e=(r=this.$slots).default)==null?void 0:e.call(r))}}),M=(r={})=>{console.log("[useEditor] THE OPTIONS ARE:",r),console.log("[useEditor] Creating editor with options:",r),console.log("[useEditor] options.enableCoreExtensions:",r.enableCoreExtensions),console.log("[useEditor] options.injectCSS:",r.injectCSS);const e=o.shallowRef();return o.onMounted(()=>{var t;console.log("[useEditor] onMounted - Creating Editor instance"),console.log("[useEditor] onMounted - options:",r),console.log("[useEditor] onMounted - options.enableCoreExtensions:",r.enableCoreExtensions),e.value=new _(r),console.log("[useEditor] Editor instance created:",e.value),console.log("[useEditor] Editor view:",(t=e.value)==null?void 0:t.view)}),o.onBeforeUnmount(()=>{var i,s,d,a;console.log("[useEditor] onBeforeUnmount - Cleaning up editor");const t=(s=(i=e.value)==null?void 0:i.view.dom)==null?void 0:s.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},q=()=>({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. "}]}]}]}]}),D=r=>({showPresets:!0,presets:r,presetBackground:"#0f172a",presetForeground:"#e5e7eb"}),R={renderMode:"dynamic",hoverOutline:{color:"#3b82f6",width:"1.5px",offset:"4px"},hoverOutlineCascade:!1},k=(r={})=>{console.log("[useSlideEditor] Called with props:",r);const{content:e,onChange:t,extensions:n,extensionKitOptions:i,presetTemplates:s,onEditorReady:d,theme:a="light",editorProps:u,onUpdate:c,...h}=r;console.log("[useSlideEditor] editorOptions:",h),console.log("[useSlideEditor] editorOptions.enableCoreExtensions:",h.enableCoreExtensions),console.log("[useSlideEditor] editorOptions.injectCSS:",h.injectCSS),console.log("[useSlideEditor] Content:",e),console.log("[useSlideEditor] ExtensionKitOptions:",i);const S=o.computed(()=>s??j.templatesV1.listPresetTemplates()),y=o.computed(()=>{const l=(i==null?void 0:i.addSlideButton)===!1?!1:{...D(S.value),...(i==null?void 0:i.addSlideButton)??{}},p=(i==null?void 0:i.slide)===!1?!1:{...R,...(i==null?void 0:i.slide)??{}},b={...i,addSlideButton:l,slide:p};return console.log("[useSlideEditor] mergedExtensionKitOptions:",b),console.log("[useSlideEditor] addSlideButton config:",b.addSlideButton),console.log("[useSlideEditor] presets:",S.value),b}),v=o.computed(()=>{console.log("[useSlideEditor] Configuring ExtensionKit with options:",y.value);const l=O.ExtensionKit.configure(y.value);console.log("[useSlideEditor] ExtensionKit configured:",l),console.log("[useSlideEditor] ExtensionKit name:",l.name);const p=n?[l,...n]:[l];return console.log("[useSlideEditor] Final extensions array:",p),p}),w=e??q();console.log("[useSlideEditor] Initial content resolved:",w),console.log("[useSlideEditor] Resolved extensions:",v.value);const m={content:w,extensions:v.value,theme:a,editorProps:{attributes:{autocomplete:"off",autocorrect:"off",autocapitalize:"off",class:"min-h-full min-w-full",...(u==null?void 0:u.attributes)??{}},...u},...h,onUpdate:l=>{console.log("[useSlideEditor] onUpdate called");const p=l.editor.getJSON();t==null||t(p,l.editor),c==null||c(l)}};console.log("[useSlideEditor] Final editor config:",m),console.log("[useSlideEditor] Final editor config enableCoreExtensions:",m.enableCoreExtensions),console.log("[useSlideEditor] Final editor config injectCSS:",m.injectCSS);const E=M(m);return console.log("[useSlideEditor] Editor ref created:",E),o.watch(E,l=>{console.log("[useSlideEditor] Editor watch triggered, newEditor:",l),l&&!l.isDestroyed?(console.log("[useSlideEditor] ✅ Calling onEditorReady"),d==null||d(l)):console.log("[useSlideEditor] ❌ Editor not ready or destroyed")},{immediate:!0}),{editor:E,presets:S}},A={class:"bs-viewport"},F=o.defineComponent({__name:"SlideEditor",props:{bubbleMenuPreset:{type:[Boolean,Object],default:!0},className:{},style:{},content:{},onChange:{},extensions:{},extensionKitOptions:{},presetTemplates:{},onEditorReady:{},element:{},theme:{},injectCSS:{type:Boolean},injectNonce:{},autofocus:{type:[String,Number,Boolean,null]},editable:{type:Boolean},editorProps:{},parseOptions:{},coreExtensionOptions:{},enableInputRules:{type:[Array,Boolean]},enablePasteRules:{type:[Array,Boolean]},enableCoreExtensions:{type:[Boolean,Object]},enableContentCheck:{type:Boolean},emitContentError:{type:Boolean},onBeforeCreate:{},onCreate:{},onMount:{},onUnmount:{},onContentError:{},onUpdate:{},onSelectionUpdate:{},onTransaction:{},onFocus:{},onBlur:{},onDestroy:{},onPaste:{},onDrop:{},onDelete:{}},setup(r){console.log("[SlideEditor.vue] Component loading");const e=r;console.log("[SlideEditor.vue] Props:",e),console.log("[SlideEditor.vue] Props.enableCoreExtensions:",e.enableCoreExtensions),console.log("[SlideEditor.vue] Props.injectCSS:",e.injectCSS);const{bubbleMenuPreset:t,className:n,style:i,...s}=e;console.log("[SlideEditor.vue] Hook props:",s),console.log("[SlideEditor.vue] hookProps.enableCoreExtensions:",s.enableCoreExtensions),console.log("[SlideEditor.vue] hookProps.injectCSS:",s.injectCSS);const{editor:d,presets:a}=k(s);console.log("[SlideEditor.vue] Editor from useSlideEditor:",d);const u=o.computed(()=>e.bubbleMenuPreset===!1?null:e.bubbleMenuPreset===!0?{}:e.bubbleMenuPreset);return o.watch(d,c=>{console.log("[SlideEditor.vue] Editor watch - newEditor:",c),console.log("[SlideEditor.vue] Editor exists:",!!c)},{immediate:!0}),o.onMounted(()=>{console.log("[SlideEditor.vue] Component mounted"),console.log("[SlideEditor.vue] Editor value:",d.value)}),(c,h)=>o.unref(d)?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(o.unref(n)),style:o.normalizeStyle(o.unref(i))},[o.createElementVNode("div",A,[o.createVNode(o.unref(P),{editor:o.unref(d)},null,8,["editor"]),u.value?(o.openBlock(),o.createBlock(f._sfc_main,o.mergeProps({key:0,editor:o.unref(d)},u.value),null,16,["editor"])):o.createCommentVNode("",!0)])],6)):o.createCommentVNode("",!0)}});class C{constructor(e,{props:t={},editor:n}){this.destroyed=!1,this.editor=n,this.component=o.markRaw(e),this.el=document.createElement("div"),this.props=o.reactive(t),this.renderedComponent=this.renderComponent()}get element(){return this.renderedComponent.el}get ref(){var e,t,n,i;return(t=(e=this.renderedComponent.vNode)==null?void 0:e.component)!=null&&t.exposed?this.renderedComponent.vNode.component.exposed:(i=(n=this.renderedComponent.vNode)==null?void 0:n.component)==null?void 0:i.proxy}renderComponent(){if(this.destroyed)return this.renderedComponent;let e=o.h(this.component,this.props);return this.editor.appContext&&(e.appContext=this.editor.appContext),typeof document<"u"&&this.el&&o.render(e,this.el),{vNode:e,destroy:()=>{this.el&&o.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 U={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}},I=o.defineComponent({name:"MarkViewContent",props:{as:{type:String,default:"span"}},render(){return o.h(this.as,{style:{whiteSpace:"inherit"},"data-mark-view-content":""})}});class N extends g.MarkView{constructor(e,t,n){super(e,t,n);const i={...t,updateAttributes:this.updateAttributes.bind(this)},s=o.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=o.toRaw(this.mark);super.updateAttributes(e,t)}destroy(){this.renderer.destroy()}}function T(r,e={}){return t=>t.editor.contentComponent?new N(r,t,e):{}}const W={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 L extends g.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,i,s){return i==="storage"?e.storage[t.name]??{}:Reflect.get(n,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=o.ref(this.getDecorationClasses());const n=o.defineComponent({extends:{...this.component},props:Object.keys(e),template:this.component.template,setup:i=>{var s,d;return o.provide("onDragStart",t),o.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(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 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=n,this.options.update({oldNode:s,oldDecorations:d,newNode:e,newDecorations:t,oldInnerDecorations:a,innerDecorations:n,updateProps:()=>i({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,i({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 z(r,e){return t=>{if(!t.editor.contentComponent)return{};const n=typeof r=="function"&&"__vccOpts"in r?r.__vccOpts:r;return new L(n,t,e)}}exports.BubbleMenu=f.BubbleMenu;exports.BubbleMenuPreset=f._sfc_main;exports.FloatingMenu=f.FloatingMenu;exports.Editor=_;exports.EditorContent=P;exports.MarkViewContent=I;exports.NodeViewContent=V;exports.NodeViewWrapper=B;exports.SlideEditor=F;exports.VueMarkView=N;exports.VueMarkViewRenderer=T;exports.VueNodeViewRenderer=z;exports.VueRenderer=C;exports.markViewProps=U;exports.nodeViewProps=W;exports.useEditor=M;exports.useSlideEditor=k;Object.keys(g).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>g[r]})});

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { Editor } from './Editor.js';
+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';