@blockslides/vue-3 0.3.0 → 0.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blockslides/vue-3",
   "description": "Vue 3 components for blockslides",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "homepage": "https://github.com/keivanmojmali/blockslides",
   "keywords": [
     "blockslides",
@@ -18,14 +18,6 @@
       },
       "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",
@@ -38,7 +30,7 @@
   ],
   "dependencies": {
     "@blockslides/ai-context": "^0.3.1",
-    "@blockslides/extension-kit": "^0.7.2"
+    "@blockslides/extension-kit": "^0.7.3"
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.0.0",
@@ -49,10 +41,6 @@
     "@blockslides/core": "^0.3.3",
     "@blockslides/pm": "^0.1.1"
   },
-  "optionalDependencies": {
-    "@blockslides/extension-bubble-menu": "^0.1.1",
-    "@blockslides/extension-floating-menu": "^0.1.1"
-  },
   "peerDependencies": {
     "@floating-ui/dom": "^1.0.0",
     "vue": "^3.0.0",

package/src/index.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 '@blockslides/core'
-export * from './menus/index.js'
+export * from '@blockslides/core'

package/dist/FloatingMenu-AygIYJQV.js

@@ -1,226 +0,0 @@
-import { defineComponent as m, ref as f, onMounted as g, watch as D, onBeforeUnmount as y, openBlock as _, createElementBlock as A, createCommentVNode as F, 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: {},
-    shouldShow: {},
-    getReferencedVirtualElement: {},
-    options: {},
-    items: {},
-    className: {},
-    injectStyles: { type: Boolean, default: !0 },
-    textColors: {},
-    highlightColors: {},
-    fonts: {},
-    fontSizes: {},
-    alignments: {},
-    onTextAction: {},
-    onImageReplace: {}
-  },
-  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 d = ({ state: c, editor: p }) => {
-        var b, T;
-        const i = c.selection, h = i instanceof N && ["image", "imageBlock"].includes((T = (b = i.node) == null ? void 0 : b.type) == null ? void 0 : T.name) || p.isActive("image") || p.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 ?? d,
-        getReferencedVirtualElement: e.getReferencedVirtualElement,
-        options: e.options
-      });
-      t.registerPlugin(u);
-    };
-    return g(() => {
-      n();
-    }), D(
-      () => [
-        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 ? (_(), A("div", z)) : F("", !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: d,
-        shouldShow: u,
-        getReferencedVirtualElement: c,
-        updateDelay: p
-      } = 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: d,
-            shouldShow: u,
-            getReferencedVirtualElement: c,
-            updateDelay: 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));
-    };
-  }
-}), 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: d } = 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: d
-        })
-      ));
-    }), 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-Un--4r7A.cjs

@@ -1 +0,0 @@
-"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"),M={key:0,style:{display:"none"}},b="bubbleMenuPreset",D=t.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(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:g,editor:f})=>{var y,h;const l=g.selection,m=l instanceof S.NodeSelection&&["image","imageBlock"].includes((h=(y=l.node)==null?void 0:y.type)==null?void 0:h.name)||f.isActive("image")||f.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",M)):t.createCommentVNode("",!0)}}),_=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:g,updateDelay:f}=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:g,updateDelay:f}))}))}),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))}}}),F=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=_;exports.FloatingMenu=F;exports._sfc_main=D;

package/dist/menus/BubbleMenu.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

package/dist/menus.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FloatingMenu-Un--4r7A.cjs");exports.BubbleMenu=e.BubbleMenu;exports.BubbleMenuPreset=e._sfc_main;exports.FloatingMenu=e.FloatingMenu;

package/dist/menus.d.ts

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

package/dist/menus.js

@@ -1,6 +0,0 @@
-import { B as a, _ as b, F as n } from "./FloatingMenu-AygIYJQV.js";
-export {
-  a as BubbleMenu,
-  b as BubbleMenuPreset,
-  n as FloatingMenu
-};

package/dist/useSlideEditor.d.ts

@@ -1,53 +0,0 @@
-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('./Editor.js').Editor | undefined, import('./Editor.js').Editor | undefined>;
-    presets: import('vue').ComputedRef<templatesV1.PresetTemplate[]>;
-};
-export {};

package/src/SlideEditor.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { computed, watch, onMounted } from 'vue'
-import { EditorContent } from './EditorContent'
-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/menus/BubbleMenu.ts

@@ -1,111 +0,0 @@
-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

@@ -1,137 +0,0 @@
-<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>