@blockslides/react-prebuilts 0.1.0

package/dist/menus/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menus/index.ts","../../src/menus/BubbleMenu.tsx","../../src/menus/FloatingMenu.tsx","../../src/menus/BubbleMenuPreset.tsx"],"sourcesContent":["export * from './BubbleMenu.js'\nexport * from './FloatingMenu.js'\nexport * from './BubbleMenuPreset.js'\n","import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'\nimport { useCurrentEditor } from '@blockslides/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(\n  (\n    {\n      pluginKey = 'bubbleMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      getReferencedVirtualElement,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const bubbleMenuElement = menuEl.current\n      bubbleMenuElement.style.visibility = 'hidden'\n      bubbleMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')\n        return\n      }\n\n      const plugin = BubbleMenuPlugin({\n        updateDelay,\n        resizeDelay,\n        editor: attachToEditor,\n        element: bubbleMenuElement,\n        appendTo,\n        pluginKey,\n        shouldShow,\n        getReferencedVirtualElement,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (bubbleMenuElement.parentNode) {\n            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)\n          }\n        })\n      }\n    }, [\n      editor,\n      currentEditor,\n      pluginKey,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n    ])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import type { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu'\nimport { FloatingMenuPlugin } from '@blockslides/extension-floating-menu'\nimport { useCurrentEditor } from '@blockslides/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {\n  editor: FloatingMenuPluginProps['editor'] | null\n  options?: FloatingMenuPluginProps['options']\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(\n  ({ pluginKey = 'floatingMenu', editor, appendTo, shouldShow = null, options, children, ...restProps }, ref) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const floatingMenuElement = menuEl.current\n\n      floatingMenuElement.style.visibility = 'hidden'\n      floatingMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn(\n          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',\n        )\n        return\n      }\n\n      const plugin = FloatingMenuPlugin({\n        editor: attachToEditor,\n        element: floatingMenuElement,\n        pluginKey,\n        appendTo,\n        shouldShow,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (floatingMenuElement.parentNode) {\n            floatingMenuElement.parentNode.removeChild(floatingMenuElement)\n          }\n        })\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCurrentEditor } from '@blockslides/react'\nimport {\n  BubbleMenuPlugin,\n  type BubbleMenuPluginProps,\n} from '@blockslides/extension-bubble-menu'\nimport { NodeSelection } from '@blockslides/pm/state'\nimport {\n  type BubbleMenuPresetOptions,\n  buildMenuElement,\n  DEFAULT_ITEMS,\n  DEFAULT_COLOR_PALETTE,\n  DEFAULT_HIGHLIGHT_PALETTE,\n  DEFAULT_FONTS,\n  DEFAULT_FONT_SIZES,\n  DEFAULT_ALIGNMENTS,\n} from '@blockslides/extension-bubble-menu-preset'\nimport { isNodeSelection, isTextSelection, type Editor } from '@blockslides/core'\n\nexport type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> &\n  React.HTMLAttributes<HTMLElement> & {\n    editor?: Editor | null\n  }\n\nexport const BubbleMenuPreset = React.forwardRef<HTMLElement, BubbleMenuPresetProps>(\n  (\n    {\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n      items,\n      className,\n      injectStyles,\n      textColors,\n      highlightColors,\n      fonts,\n      fontSizes,\n      alignments,\n      onTextAction,\n      onImageReplace,\n      ...rest\n    },\n    ref,\n  ) => {\n    const pluginKey = 'bubbleMenuPreset'\n    const { editor: currentEditor } = useCurrentEditor()\n    const menuEl = useRef<HTMLElement | null>(null)\n\n    useEffect(() => {\n      const attachToEditor = (editor || currentEditor) as Editor | null\n      if (!attachToEditor || (attachToEditor as any).isDestroyed) {\n        return\n      }\n\n      const { element, cleanup } = buildMenuElement(attachToEditor, {\n        items: items ?? DEFAULT_ITEMS,\n        className: className ?? '',\n        injectStyles: injectStyles !== false,\n        textColors: textColors ?? DEFAULT_COLOR_PALETTE,\n        highlightColors: highlightColors ?? DEFAULT_HIGHLIGHT_PALETTE,\n        fonts: fonts ?? DEFAULT_FONTS,\n        fontSizes: fontSizes ?? DEFAULT_FONT_SIZES,\n        alignments: alignments ?? DEFAULT_ALIGNMENTS,\n        onTextAction,\n        onImageReplace,\n      })\n\n      menuEl.current = element\n\n      if (typeof ref === 'function') {\n        ref(element)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLElement | null>).current = element\n      }\n\n      const defaultShouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({\n        state,\n        editor,\n      }) => {\n        const sel = state.selection\n        const imageSelection =\n          (sel instanceof NodeSelection &&\n            ['image', 'imageBlock'].includes((sel as any).node?.type?.name)) ||\n          editor.isActive('image') ||\n          editor.isActive('imageBlock')\n\n        if (imageSelection) return true\n        if (isTextSelection(sel) && !sel.empty && !imageSelection) return true\n        return false\n      }\n\n      const plugin = BubbleMenuPlugin({\n        editor: attachToEditor,\n        element,\n        updateDelay,\n        resizeDelay,\n        appendTo,\n        pluginKey,\n        shouldShow: shouldShow ?? defaultShouldShow,\n        getReferencedVirtualElement,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        cleanup?.()\n        if (element.parentNode) {\n          element.parentNode.removeChild(element)\n        }\n      }\n    }, [\n      editor,\n      currentEditor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n      items,\n      className,\n      injectStyles,\n      textColors,\n      highlightColors,\n      fonts,\n      fontSizes,\n      alignments,\n      onTextAction,\n      onImageReplace,\n      ref,\n    ])\n\n    return menuEl.current ? createPortal(<div {...rest} />, menuEl.current) : null\n  },\n)\n\nBubbleMenuPreset.displayName = 'BubbleMenuPreset'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAA6D;AAC7D,mBAAiC;AACjC,IAAAA,gBAAyC;AACzC,uBAA6B;AAmFL;AA5EjB,IAAM,aAAa,cAAAC,QAAM;AAAA,EAC9B,CACE;AAAA,IACE,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,aAAS,sBAAO,SAAS,cAAc,KAAK,CAAC;AAEnD,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,OAAO,OAAO;AAAA,IACpB,WAAW,KAAK;AACd,UAAI,UAAU,OAAO;AAAA,IACvB;AAEA,UAAM,EAAE,QAAQ,cAAc,QAAI,+BAAiB;AAEnD,iCAAU,MAAM;AACd,YAAM,oBAAoB,OAAO;AACjC,wBAAkB,MAAM,aAAa;AACrC,wBAAkB,MAAM,WAAW;AAEnC,WAAI,iCAAQ,iBAAgB,+CAAuB,cAAa;AAC9D;AAAA,MACF;AAEA,YAAM,iBAAiB,UAAU;AAEjC,UAAI,CAAC,gBAAgB;AACnB,gBAAQ,KAAK,kGAAkG;AAC/G;AAAA,MACF;AAEA,YAAM,aAAS,+CAAiB;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,qBAAe,eAAe,MAAM;AAEpC,aAAO,MAAM;AACX,uBAAe,iBAAiB,SAAS;AACzC,eAAO,sBAAsB,MAAM;AACjC,cAAI,kBAAkB,YAAY;AAChC,8BAAkB,WAAW,YAAY,iBAAiB;AAAA,UAC5D;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,eAAO,+BAAa,4CAAC,SAAK,GAAG,WAAY,UAAS,GAAQ,OAAO,OAAO;AAAA,EAC1E;AACF;;;ACvFA,qCAAmC;AACnC,IAAAC,gBAAiC;AACjC,IAAAA,gBAAyC;AACzC,IAAAC,oBAA6B;AA8DL,IAAAC,sBAAA;AArDjB,IAAM,eAAe,cAAAC,QAAM;AAAA,EAChC,CAAC,EAAE,YAAY,gBAAgB,QAAQ,UAAU,aAAa,MAAM,SAAS,UAAU,GAAG,UAAU,GAAG,QAAQ;AAC7G,UAAM,aAAS,sBAAO,SAAS,cAAc,KAAK,CAAC;AAEnD,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,OAAO,OAAO;AAAA,IACpB,WAAW,KAAK;AACd,UAAI,UAAU,OAAO;AAAA,IACvB;AAEA,UAAM,EAAE,QAAQ,cAAc,QAAI,gCAAiB;AAEnD,iCAAU,MAAM;AACd,YAAM,sBAAsB,OAAO;AAEnC,0BAAoB,MAAM,aAAa;AACvC,0BAAoB,MAAM,WAAW;AAErC,WAAI,iCAAQ,iBAAgB,+CAAuB,cAAa;AAC9D;AAAA,MACF;AAEA,YAAM,iBAAiB,UAAU;AAEjC,UAAI,CAAC,gBAAgB;AACnB,gBAAQ;AAAA,UACN;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,aAAS,mDAAmB;AAAA,QAChC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,qBAAe,eAAe,MAAM;AAEpC,aAAO,MAAM;AACX,uBAAe,iBAAiB,SAAS;AACzC,eAAO,sBAAsB,MAAM;AACjC,cAAI,oBAAoB,YAAY;AAClC,gCAAoB,WAAW,YAAY,mBAAmB;AAAA,UAChE;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IAEF,GAAG,CAAC,QAAQ,eAAe,UAAU,WAAW,YAAY,OAAO,CAAC;AAEpE,eAAO,gCAAa,6CAAC,SAAK,GAAG,WAAY,UAAS,GAAQ,OAAO,OAAO;AAAA,EAC1E;AACF;;;ACpEA,IAAAC,gBAAyC;AACzC,IAAAC,oBAA6B;AAC7B,IAAAD,gBAAiC;AACjC,IAAAE,gCAGO;AACP,mBAA8B;AAC9B,0CASO;AACP,kBAA8D;AAyHrB,IAAAC,sBAAA;AAlHlC,IAAM,mBAAmB,cAAAC,QAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,YAAY;AAClB,UAAM,EAAE,QAAQ,cAAc,QAAI,gCAAiB;AACnD,UAAM,aAAS,sBAA2B,IAAI;AAE9C,iCAAU,MAAM;AACd,YAAM,iBAAkB,UAAU;AAClC,UAAI,CAAC,kBAAmB,eAAuB,aAAa;AAC1D;AAAA,MACF;AAEA,YAAM,EAAE,SAAS,QAAQ,QAAI,sDAAiB,gBAAgB;AAAA,QAC5D,OAAO,wBAAS;AAAA,QAChB,WAAW,gCAAa;AAAA,QACxB,cAAc,iBAAiB;AAAA,QAC/B,YAAY,kCAAc;AAAA,QAC1B,iBAAiB,4CAAmB;AAAA,QACpC,OAAO,wBAAS;AAAA,QAChB,WAAW,gCAAa;AAAA,QACxB,YAAY,kCAAc;AAAA,QAC1B;AAAA,QACA;AAAA,MACF,CAAC;AAED,aAAO,UAAU;AAEjB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,OAAO;AAAA,MACb,WAAW,KAAK;AACd;AAAC,QAAC,IAAmD,UAAU;AAAA,MACjE;AAEA,YAAM,oBAAwE,CAAC;AAAA,QAC7E;AAAA,QACA,QAAAC;AAAA,MACF,MAAM;AAnFZ;AAoFQ,cAAM,MAAM,MAAM;AAClB,cAAM,iBACH,eAAe,8BACd,CAAC,SAAS,YAAY,EAAE,UAAU,eAAY,SAAZ,mBAAkB,SAAlB,mBAAwB,IAAI,KAChEA,QAAO,SAAS,OAAO,KACvBA,QAAO,SAAS,YAAY;AAE9B,YAAI,eAAgB,QAAO;AAC3B,gBAAI,6BAAgB,GAAG,KAAK,CAAC,IAAI,SAAS,CAAC,eAAgB,QAAO;AAClE,eAAO;AAAA,MACT;AAEA,YAAM,aAAS,gDAAiB;AAAA,QAC9B,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,kCAAc;AAAA,QAC1B;AAAA,QACA;AAAA,MACF,CAAC;AAED,qBAAe,eAAe,MAAM;AAEpC,aAAO,MAAM;AACX,uBAAe,iBAAiB,SAAS;AACzC;AACA,YAAI,QAAQ,YAAY;AACtB,kBAAQ,WAAW,YAAY,OAAO;AAAA,QACxC;AAAA,MACF;AAAA,IACF,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,OAAO,cAAU,gCAAa,6CAAC,SAAK,GAAG,MAAM,GAAI,OAAO,OAAO,IAAI;AAAA,EAC5E;AACF;AAEA,iBAAiB,cAAc;","names":["import_react","React","import_react","import_react_dom","import_jsx_runtime","React","import_react","import_react_dom","import_extension_bubble_menu","import_jsx_runtime","React","editor"]}

package/dist/menus/index.d.cts

@@ -0,0 +1,28 @@
+import { BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu';
+import React from 'react';
+import { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu';
+import { BubbleMenuPresetOptions } from '@blockslides/extension-bubble-menu-preset';
+import { Editor } from '@blockslides/core';
+
+type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type BubbleMenuProps = Optional$1<Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React.HTMLAttributes<HTMLDivElement>;
+declare const BubbleMenu: React.ForwardRefExoticComponent<Pick<Partial<Omit<Optional$1<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Optional$1<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+    editor: FloatingMenuPluginProps['editor'] | null;
+    options?: FloatingMenuPluginProps['options'];
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const FloatingMenu: React.ForwardRefExoticComponent<Omit<Optional<FloatingMenuPluginProps, "pluginKey">, "element" | "editor"> & {
+    editor: FloatingMenuPluginProps["editor"] | null;
+    options?: FloatingMenuPluginProps["options"];
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> & React.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+};
+declare const BubbleMenuPreset: React.ForwardRefExoticComponent<Omit<BubbleMenuPresetOptions, "element" | "pluginKey"> & React.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+} & React.RefAttributes<HTMLElement>>;
+
+export { BubbleMenu, BubbleMenuPreset, type BubbleMenuPresetProps, type BubbleMenuProps, FloatingMenu, type FloatingMenuProps };

package/dist/menus/index.d.ts

@@ -0,0 +1,28 @@
+import { BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu';
+import React from 'react';
+import { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu';
+import { BubbleMenuPresetOptions } from '@blockslides/extension-bubble-menu-preset';
+import { Editor } from '@blockslides/core';
+
+type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type BubbleMenuProps = Optional$1<Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React.HTMLAttributes<HTMLDivElement>;
+declare const BubbleMenu: React.ForwardRefExoticComponent<Pick<Partial<Omit<Optional$1<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Optional$1<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+    editor: FloatingMenuPluginProps['editor'] | null;
+    options?: FloatingMenuPluginProps['options'];
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const FloatingMenu: React.ForwardRefExoticComponent<Omit<Optional<FloatingMenuPluginProps, "pluginKey">, "element" | "editor"> & {
+    editor: FloatingMenuPluginProps["editor"] | null;
+    options?: FloatingMenuPluginProps["options"];
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> & React.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+};
+declare const BubbleMenuPreset: React.ForwardRefExoticComponent<Omit<BubbleMenuPresetOptions, "element" | "pluginKey"> & React.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+} & React.RefAttributes<HTMLElement>>;
+
+export { BubbleMenu, BubbleMenuPreset, type BubbleMenuPresetProps, type BubbleMenuProps, FloatingMenu, type FloatingMenuProps };

package/dist/menus/index.js

@@ -0,0 +1,252 @@
+// src/menus/BubbleMenu.tsx
+import { BubbleMenuPlugin } from "@blockslides/extension-bubble-menu";
+import { useCurrentEditor } from "@blockslides/react";
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var BubbleMenu = React.forwardRef(
+  ({
+    pluginKey = "bubbleMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    getReferencedVirtualElement,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = useRef(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor();
+    useEffect(() => {
+      const bubbleMenuElement = menuEl.current;
+      bubbleMenuElement.style.visibility = "hidden";
+      bubbleMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+        return;
+      }
+      const attachToEditor = editor || currentEditor;
+      if (!attachToEditor) {
+        console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
+        return;
+      }
+      const plugin = BubbleMenuPlugin({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        appendTo,
+        pluginKey,
+        shouldShow,
+        getReferencedVirtualElement,
+        options
+      });
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+          }
+        });
+      };
+    }, [
+      editor,
+      currentEditor,
+      pluginKey,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options
+    ]);
+    return createPortal(/* @__PURE__ */ jsx("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/menus/FloatingMenu.tsx
+import { FloatingMenuPlugin } from "@blockslides/extension-floating-menu";
+import { useCurrentEditor as useCurrentEditor2 } from "@blockslides/react";
+import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FloatingMenu = React2.forwardRef(
+  ({ pluginKey = "floatingMenu", editor, appendTo, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = useRef2(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor2();
+    useEffect2(() => {
+      const floatingMenuElement = menuEl.current;
+      floatingMenuElement.style.visibility = "hidden";
+      floatingMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+        return;
+      }
+      const attachToEditor = editor || currentEditor;
+      if (!attachToEditor) {
+        console.warn(
+          "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
+        );
+        return;
+      }
+      const plugin = FloatingMenuPlugin({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        appendTo,
+        shouldShow,
+        options
+      });
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
+          }
+        });
+      };
+    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options]);
+    return createPortal2(/* @__PURE__ */ jsx2("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/menus/BubbleMenuPreset.tsx
+import React3, { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { useCurrentEditor as useCurrentEditor3 } from "@blockslides/react";
+import {
+  BubbleMenuPlugin as BubbleMenuPlugin2
+} from "@blockslides/extension-bubble-menu";
+import { NodeSelection } from "@blockslides/pm/state";
+import {
+  buildMenuElement,
+  DEFAULT_ITEMS,
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_ALIGNMENTS
+} from "@blockslides/extension-bubble-menu-preset";
+import { isTextSelection } from "@blockslides/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BubbleMenuPreset = React3.forwardRef(
+  ({
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow,
+    getReferencedVirtualElement,
+    options,
+    items,
+    className,
+    injectStyles,
+    textColors,
+    highlightColors,
+    fonts,
+    fontSizes,
+    alignments,
+    onTextAction,
+    onImageReplace,
+    ...rest
+  }, ref) => {
+    const pluginKey = "bubbleMenuPreset";
+    const { editor: currentEditor } = useCurrentEditor3();
+    const menuEl = useRef3(null);
+    useEffect3(() => {
+      const attachToEditor = editor || currentEditor;
+      if (!attachToEditor || attachToEditor.isDestroyed) {
+        return;
+      }
+      const { element, cleanup } = buildMenuElement(attachToEditor, {
+        items: items != null ? items : DEFAULT_ITEMS,
+        className: className != null ? className : "",
+        injectStyles: injectStyles !== false,
+        textColors: textColors != null ? textColors : DEFAULT_COLOR_PALETTE,
+        highlightColors: highlightColors != null ? highlightColors : DEFAULT_HIGHLIGHT_PALETTE,
+        fonts: fonts != null ? fonts : DEFAULT_FONTS,
+        fontSizes: fontSizes != null ? fontSizes : DEFAULT_FONT_SIZES,
+        alignments: alignments != null ? alignments : DEFAULT_ALIGNMENTS,
+        onTextAction,
+        onImageReplace
+      });
+      menuEl.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ;
+        ref.current = element;
+      }
+      const defaultShouldShow = ({
+        state,
+        editor: editor2
+      }) => {
+        var _a, _b;
+        const sel = state.selection;
+        const imageSelection = sel instanceof NodeSelection && ["image", "imageBlock"].includes((_b = (_a = sel.node) == null ? void 0 : _a.type) == null ? void 0 : _b.name) || editor2.isActive("image") || editor2.isActive("imageBlock");
+        if (imageSelection) return true;
+        if (isTextSelection(sel) && !sel.empty && !imageSelection) return true;
+        return false;
+      };
+      const plugin = BubbleMenuPlugin2({
+        editor: attachToEditor,
+        element,
+        updateDelay,
+        resizeDelay,
+        appendTo,
+        pluginKey,
+        shouldShow: shouldShow != null ? shouldShow : defaultShouldShow,
+        getReferencedVirtualElement,
+        options
+      });
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        cleanup == null ? void 0 : cleanup();
+        if (element.parentNode) {
+          element.parentNode.removeChild(element);
+        }
+      };
+    }, [
+      editor,
+      currentEditor,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options,
+      items,
+      className,
+      injectStyles,
+      textColors,
+      highlightColors,
+      fonts,
+      fontSizes,
+      alignments,
+      onTextAction,
+      onImageReplace,
+      ref
+    ]);
+    return menuEl.current ? createPortal3(/* @__PURE__ */ jsx3("div", { ...rest }), menuEl.current) : null;
+  }
+);
+BubbleMenuPreset.displayName = "BubbleMenuPreset";
+export {
+  BubbleMenu,
+  BubbleMenuPreset,
+  FloatingMenu
+};
+//# sourceMappingURL=index.js.map

package/dist/menus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/menus/BubbleMenu.tsx","../../src/menus/FloatingMenu.tsx","../../src/menus/BubbleMenuPreset.tsx"],"sourcesContent":["import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'\nimport { useCurrentEditor } from '@blockslides/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(\n  (\n    {\n      pluginKey = 'bubbleMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      getReferencedVirtualElement,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const bubbleMenuElement = menuEl.current\n      bubbleMenuElement.style.visibility = 'hidden'\n      bubbleMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')\n        return\n      }\n\n      const plugin = BubbleMenuPlugin({\n        updateDelay,\n        resizeDelay,\n        editor: attachToEditor,\n        element: bubbleMenuElement,\n        appendTo,\n        pluginKey,\n        shouldShow,\n        getReferencedVirtualElement,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (bubbleMenuElement.parentNode) {\n            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)\n          }\n        })\n      }\n    }, [\n      editor,\n      currentEditor,\n      pluginKey,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n    ])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import type { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu'\nimport { FloatingMenuPlugin } from '@blockslides/extension-floating-menu'\nimport { useCurrentEditor } from '@blockslides/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {\n  editor: FloatingMenuPluginProps['editor'] | null\n  options?: FloatingMenuPluginProps['options']\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(\n  ({ pluginKey = 'floatingMenu', editor, appendTo, shouldShow = null, options, children, ...restProps }, ref) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const floatingMenuElement = menuEl.current\n\n      floatingMenuElement.style.visibility = 'hidden'\n      floatingMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn(\n          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',\n        )\n        return\n      }\n\n      const plugin = FloatingMenuPlugin({\n        editor: attachToEditor,\n        element: floatingMenuElement,\n        pluginKey,\n        appendTo,\n        shouldShow,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (floatingMenuElement.parentNode) {\n            floatingMenuElement.parentNode.removeChild(floatingMenuElement)\n          }\n        })\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCurrentEditor } from '@blockslides/react'\nimport {\n  BubbleMenuPlugin,\n  type BubbleMenuPluginProps,\n} from '@blockslides/extension-bubble-menu'\nimport { NodeSelection } from '@blockslides/pm/state'\nimport {\n  type BubbleMenuPresetOptions,\n  buildMenuElement,\n  DEFAULT_ITEMS,\n  DEFAULT_COLOR_PALETTE,\n  DEFAULT_HIGHLIGHT_PALETTE,\n  DEFAULT_FONTS,\n  DEFAULT_FONT_SIZES,\n  DEFAULT_ALIGNMENTS,\n} from '@blockslides/extension-bubble-menu-preset'\nimport { isNodeSelection, isTextSelection, type Editor } from '@blockslides/core'\n\nexport type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> &\n  React.HTMLAttributes<HTMLElement> & {\n    editor?: Editor | null\n  }\n\nexport const BubbleMenuPreset = React.forwardRef<HTMLElement, BubbleMenuPresetProps>(\n  (\n    {\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n      items,\n      className,\n      injectStyles,\n      textColors,\n      highlightColors,\n      fonts,\n      fontSizes,\n      alignments,\n      onTextAction,\n      onImageReplace,\n      ...rest\n    },\n    ref,\n  ) => {\n    const pluginKey = 'bubbleMenuPreset'\n    const { editor: currentEditor } = useCurrentEditor()\n    const menuEl = useRef<HTMLElement | null>(null)\n\n    useEffect(() => {\n      const attachToEditor = (editor || currentEditor) as Editor | null\n      if (!attachToEditor || (attachToEditor as any).isDestroyed) {\n        return\n      }\n\n      const { element, cleanup } = buildMenuElement(attachToEditor, {\n        items: items ?? DEFAULT_ITEMS,\n        className: className ?? '',\n        injectStyles: injectStyles !== false,\n        textColors: textColors ?? DEFAULT_COLOR_PALETTE,\n        highlightColors: highlightColors ?? DEFAULT_HIGHLIGHT_PALETTE,\n        fonts: fonts ?? DEFAULT_FONTS,\n        fontSizes: fontSizes ?? DEFAULT_FONT_SIZES,\n        alignments: alignments ?? DEFAULT_ALIGNMENTS,\n        onTextAction,\n        onImageReplace,\n      })\n\n      menuEl.current = element\n\n      if (typeof ref === 'function') {\n        ref(element)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLElement | null>).current = element\n      }\n\n      const defaultShouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({\n        state,\n        editor,\n      }) => {\n        const sel = state.selection\n        const imageSelection =\n          (sel instanceof NodeSelection &&\n            ['image', 'imageBlock'].includes((sel as any).node?.type?.name)) ||\n          editor.isActive('image') ||\n          editor.isActive('imageBlock')\n\n        if (imageSelection) return true\n        if (isTextSelection(sel) && !sel.empty && !imageSelection) return true\n        return false\n      }\n\n      const plugin = BubbleMenuPlugin({\n        editor: attachToEditor,\n        element,\n        updateDelay,\n        resizeDelay,\n        appendTo,\n        pluginKey,\n        shouldShow: shouldShow ?? defaultShouldShow,\n        getReferencedVirtualElement,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        cleanup?.()\n        if (element.parentNode) {\n          element.parentNode.removeChild(element)\n        }\n      }\n    }, [\n      editor,\n      currentEditor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n      items,\n      className,\n      injectStyles,\n      textColors,\n      highlightColors,\n      fonts,\n      fontSizes,\n      alignments,\n      onTextAction,\n      onImageReplace,\n      ref,\n    ])\n\n    return menuEl.current ? createPortal(<div {...rest} />, menuEl.current) : null\n  },\n)\n\nBubbleMenuPreset.displayName = 'BubbleMenuPreset'\n"],"mappings":"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","names":["useCurrentEditor","React","useEffect","useRef","createPortal","jsx","React","useEffect","useRef","createPortal","useCurrentEditor","BubbleMenuPlugin","jsx","editor"]}

package/package.json

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

package/src/SlideEditor.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef, useMemo } from "react";
+import type { CSSProperties } from "react";
+
+import { EditorContent, type EditorContentProps } from "@blockslides/react";
+import {
+  BubbleMenuPreset,
+  type BubbleMenuPresetProps,
+} from "./menus/BubbleMenuPreset.js";
+import {
+  useSlideEditor,
+  type UseSlideEditorProps,
+} from "./useSlideEditor.js";
+
+export type SlideEditorProps = UseSlideEditorProps & {
+  /**
+   * Toggle or customize the built-in BubbleMenuPreset.
+   * - true (default): render with defaults
+   * - false: disable entirely
+   * - object: pass through to BubbleMenuPreset
+   */
+  bubbleMenuPreset?: boolean | BubbleMenuPresetProps;
+  /**
+   * Additional props forwarded to EditorContent.
+   */
+  editorContentProps?: Omit<EditorContentProps, "editor">;
+  /**
+   * Viewport scale factor applied to the slide viewport.
+   * @default 1
+   */
+  viewportScale?: number;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export const SlideEditor = forwardRef<HTMLDivElement, SlideEditorProps>(
+  (
+    {
+      bubbleMenuPreset = true,
+      editorContentProps,
+      viewportScale = 1,
+      className,
+      style,
+      ...hookProps
+    },
+    ref
+  ) => {
+    const { editor } = useSlideEditor(hookProps);
+
+    const bubbleMenuProps = useMemo(() => {
+      if (bubbleMenuPreset === false) return null;
+      if (bubbleMenuPreset === true) return {};
+      return bubbleMenuPreset;
+    }, [bubbleMenuPreset]);
+
+    if (!editor) return null;
+
+    return (
+      <div ref={ref} className={className} style={style}>
+        <div
+          className="bs-viewport"
+          style={{ ["--zoom" as any]: viewportScale }}
+        >
+          <EditorContent editor={editor} {...editorContentProps} />
+          {bubbleMenuProps && (
+            <BubbleMenuPreset editor={editor} {...bubbleMenuProps} />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+SlideEditor.displayName = "SlideEditor";

package/src/index.ts

@@ -0,0 +1,8 @@
+export { SlideEditor as ReactSlideEditor } from "./SlideEditor.js";
+export * from "./useSlideEditor.js";
+export * from "./menus/BubbleMenuPreset.js";
+
+// Re-export everything from @blockslides/react core
+export * from "@blockslides/react";
+
+// Note: @blockslides/core is already re-exported by @blockslides/react

package/src/menus/BubbleMenu.tsx

@@ -0,0 +1,89 @@
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'
+import { useCurrentEditor } from '@blockslides/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
+  React.HTMLAttributes<HTMLDivElement>
+
+export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
+  (
+    {
+      pluginKey = 'bubbleMenu',
+      editor,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow = null,
+      getReferencedVirtualElement,
+      options,
+      children,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const menuEl = useRef(document.createElement('div'))
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    useEffect(() => {
+      const bubbleMenuElement = menuEl.current
+      bubbleMenuElement.style.visibility = 'hidden'
+      bubbleMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      const attachToEditor = editor || currentEditor
+
+      if (!attachToEditor) {
+        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
+        return
+      }
+
+      const plugin = BubbleMenuPlugin({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        appendTo,
+        pluginKey,
+        shouldShow,
+        getReferencedVirtualElement,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)
+          }
+        })
+      }
+    }, [
+      editor,
+      currentEditor,
+      pluginKey,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options,
+    ])
+
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)