@react-email/editor 0.0.0-experimental.11 → 0.0.0-experimental.12

package/dist/index.mjs

@@ -2497,12 +2497,12 @@ function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className
 
 //#endregion
 //#region src/ui/button-bubble-menu/toolbar.tsx
-function ButtonBubbleMenuToolbar({ className, children }) {
+function ButtonBubbleMenuToolbar({ children,...rest }) {
 	const { isEditing } = useButtonBubbleMenuContext();
 	if (isEditing) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-re-btn-bm-toolbar": "",
-		className,
+		...rest,
 		children
 	});
 }
@@ -2515,6 +2515,88 @@ const ButtonBubbleMenu = {
 	EditLink: ButtonBubbleMenuEditLink
 };
 
+//#endregion
+//#region src/ui/image-bubble-menu/context.tsx
+const ImageBubbleMenuContext = React.createContext(null);
+function useImageBubbleMenuContext() {
+	const context = React.useContext(ImageBubbleMenuContext);
+	if (!context) throw new Error("ImageBubbleMenu compound components must be used within <ImageBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/edit-link.tsx
+function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
+	const { setIsEditing } = useImageBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-img-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/root.tsx
+function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-img-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("image") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ImageBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/toolbar.tsx
+function ImageBubbleMenuToolbar({ children,...rest }) {
+	const { isEditing } = useImageBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-img-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/index.ts
+const ImageBubbleMenu = {
+	Root: ImageBubbleMenuRoot,
+	Toolbar: ImageBubbleMenuToolbar,
+	EditLink: ImageBubbleMenuEditLink
+};
+
 //#endregion
 //#region src/ui/link-bubble-menu/context.tsx
 const LinkBubbleMenuContext = React.createContext(null);
@@ -2706,12 +2788,12 @@ function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className,
 
 //#endregion
 //#region src/ui/link-bubble-menu/toolbar.tsx
-function LinkBubbleMenuToolbar({ className, children }) {
+function LinkBubbleMenuToolbar({ children,...rest }) {
 	const { isEditing } = useLinkBubbleMenuContext();
 	if (isEditing) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-re-link-bm-toolbar": "",
-		className,
+		...rest,
 		children
 	});
 }
@@ -2751,5 +2833,5 @@ const LinkBubbleMenu = {
 };
 
 //#endregion
-export { AlignmentAttribute, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, Button, ButtonBubbleMenu, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, COLUMN_PARENT_TYPES, ClassAttribute, CodeBlockPrism, ColumnsColumn, Div, EmailNode, FourColumns, LinkBubbleMenu, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, MAX_COLUMNS_DEPTH, MaxNesting, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, coreExtensions, editorEventBus, getColumnsDepth, processStylesForUnlink, setTextAlignment, useButtonBubbleMenuContext, useLinkBubbleMenuContext };
+export { AlignmentAttribute, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, Button, ButtonBubbleMenu, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, COLUMN_PARENT_TYPES, ClassAttribute, CodeBlockPrism, ColumnsColumn, Div, EmailNode, FourColumns, ImageBubbleMenu, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, LinkBubbleMenu, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, MAX_COLUMNS_DEPTH, MaxNesting, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, coreExtensions, editorEventBus, getColumnsDepth, processStylesForUnlink, setTextAlignment, useButtonBubbleMenuContext, useImageBubbleMenuContext, useLinkBubbleMenuContext };
 //# sourceMappingURL=index.mjs.map