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

package/dist/index.js

@@ -2470,6 +2470,170 @@ const BubbleMenu = {
 	Default: BubbleMenuDefault
 };
 
+//#endregion
+//#region src/ui/button-bubble-menu/context.tsx
+const ButtonBubbleMenuContext = react.createContext(null);
+function useButtonBubbleMenuContext() {
+	const context = react.useContext(ButtonBubbleMenuContext);
+	if (!context) throw new Error("ButtonBubbleMenu compound components must be used within <ButtonBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/edit-link.tsx
+function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
+	const { setIsEditing } = useButtonBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-btn-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/root.tsx
+function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	const [isEditing, setIsEditing] = react.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react_menus.BubbleMenu, {
+		editor,
+		"data-re-btn-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/toolbar.tsx
+function ButtonBubbleMenuToolbar({ children,...rest }) {
+	const { isEditing } = useButtonBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-re-btn-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/index.ts
+const ButtonBubbleMenu = {
+	Root: ButtonBubbleMenuRoot,
+	Toolbar: ButtonBubbleMenuToolbar,
+	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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/root.tsx
+function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	const [isEditing, setIsEditing] = react.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react_menus.BubbleMenu, {
+		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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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);
@@ -2481,7 +2645,7 @@ function useLinkBubbleMenuContext() {
 
 //#endregion
 //#region src/ui/link-bubble-menu/edit-link.tsx
-function LinkBubbleMenuEditLink({ className, children, onClick,...rest }) {
+function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
 	const { setIsEditing } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -2489,7 +2653,10 @@ function LinkBubbleMenuEditLink({ className, children, onClick,...rest }) {
 		"data-re-link-bm-item": "",
 		"data-item": "edit-link",
 		className,
-		onMouseDown: (e) => e.preventDefault(),
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
 		onClick: (e) => {
 			onClick?.(e);
 			setIsEditing(true);
@@ -2623,7 +2790,7 @@ function LinkBubbleMenuOpenLink({ className, children,...rest }) {
 
 //#endregion
 //#region src/ui/link-bubble-menu/root.tsx
-function LinkBubbleMenuRoot({ onHide, placement = "bottom", offset = 8, className, children }) {
+function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
 	const { editor } = (0, __tiptap_react.useCurrentEditor)();
 	const [isEditing, setIsEditing] = react.useState(false);
 	const linkHref = (0, __tiptap_react.useEditorState)({
@@ -2658,19 +2825,19 @@ function LinkBubbleMenuRoot({ onHide, placement = "bottom", offset = 8, classNam
 
 //#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__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-re-link-bm-toolbar": "",
-		className,
+		...rest,
 		children
 	});
 }
 
 //#endregion
 //#region src/ui/link-bubble-menu/unlink.tsx
-function LinkBubbleMenuUnlink({ className, children, onClick,...rest }) {
+function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown,...rest }) {
 	const { editor } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -2678,7 +2845,10 @@ function LinkBubbleMenuUnlink({ className, children, onClick,...rest }) {
 		"data-re-link-bm-item": "",
 		"data-item": "unlink",
 		className,
-		onMouseDown: (e) => e.preventDefault(),
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
 		onClick: (e) => {
 			onClick?.(e);
 			editor.chain().focus().unsetLink().run();
@@ -2721,6 +2891,10 @@ exports.BubbleMenuStrike = BubbleMenuStrike;
 exports.BubbleMenuUnderline = BubbleMenuUnderline;
 exports.BubbleMenuUppercase = BubbleMenuUppercase;
 exports.Button = Button;
+exports.ButtonBubbleMenu = ButtonBubbleMenu;
+exports.ButtonBubbleMenuEditLink = ButtonBubbleMenuEditLink;
+exports.ButtonBubbleMenuRoot = ButtonBubbleMenuRoot;
+exports.ButtonBubbleMenuToolbar = ButtonBubbleMenuToolbar;
 exports.COLUMN_PARENT_TYPES = COLUMN_PARENT_TYPES;
 exports.ClassAttribute = ClassAttribute;
 exports.CodeBlockPrism = CodeBlockPrism;
@@ -2728,6 +2902,10 @@ exports.ColumnsColumn = ColumnsColumn;
 exports.Div = Div;
 exports.EmailNode = EmailNode;
 exports.FourColumns = FourColumns;
+exports.ImageBubbleMenu = ImageBubbleMenu;
+exports.ImageBubbleMenuEditLink = ImageBubbleMenuEditLink;
+exports.ImageBubbleMenuRoot = ImageBubbleMenuRoot;
+exports.ImageBubbleMenuToolbar = ImageBubbleMenuToolbar;
 exports.LinkBubbleMenu = LinkBubbleMenu;
 exports.LinkBubbleMenuEditLink = LinkBubbleMenuEditLink;
 exports.LinkBubbleMenuForm = LinkBubbleMenuForm;
@@ -2758,4 +2936,6 @@ exports.editorEventBus = editorEventBus;
 exports.getColumnsDepth = getColumnsDepth;
 exports.processStylesForUnlink = processStylesForUnlink;
 exports.setTextAlignment = setTextAlignment;
+exports.useButtonBubbleMenuContext = useButtonBubbleMenuContext;
+exports.useImageBubbleMenuContext = useImageBubbleMenuContext;
 exports.useLinkBubbleMenuContext = useLinkBubbleMenuContext;

package/dist/index.mjs

@@ -2433,6 +2433,170 @@ const BubbleMenu = {
 	Default: BubbleMenuDefault
 };
 
+//#endregion
+//#region src/ui/button-bubble-menu/context.tsx
+const ButtonBubbleMenuContext = React.createContext(null);
+function useButtonBubbleMenuContext() {
+	const context = React.useContext(ButtonBubbleMenuContext);
+	if (!context) throw new Error("ButtonBubbleMenu compound components must be used within <ButtonBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/edit-link.tsx
+function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
+	const { setIsEditing } = useButtonBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-btn-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/button-bubble-menu/root.tsx
+function ButtonBubbleMenuRoot({ 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-btn-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ButtonBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/toolbar.tsx
+function ButtonBubbleMenuToolbar({ children,...rest }) {
+	const { isEditing } = useButtonBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-btn-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/index.ts
+const ButtonBubbleMenu = {
+	Root: ButtonBubbleMenuRoot,
+	Toolbar: ButtonBubbleMenuToolbar,
+	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);
@@ -2444,7 +2608,7 @@ function useLinkBubbleMenuContext() {
 
 //#endregion
 //#region src/ui/link-bubble-menu/edit-link.tsx
-function LinkBubbleMenuEditLink({ className, children, onClick,...rest }) {
+function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
 	const { setIsEditing } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -2452,7 +2616,10 @@ function LinkBubbleMenuEditLink({ className, children, onClick,...rest }) {
 		"data-re-link-bm-item": "",
 		"data-item": "edit-link",
 		className,
-		onMouseDown: (e) => e.preventDefault(),
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
 		onClick: (e) => {
 			onClick?.(e);
 			setIsEditing(true);
@@ -2586,7 +2753,7 @@ function LinkBubbleMenuOpenLink({ className, children,...rest }) {
 
 //#endregion
 //#region src/ui/link-bubble-menu/root.tsx
-function LinkBubbleMenuRoot({ onHide, placement = "bottom", offset = 8, className, children }) {
+function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
 	const { editor } = useCurrentEditor();
 	const [isEditing, setIsEditing] = React.useState(false);
 	const linkHref = useEditorState({
@@ -2621,19 +2788,19 @@ function LinkBubbleMenuRoot({ onHide, placement = "bottom", offset = 8, classNam
 
 //#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
 	});
 }
 
 //#endregion
 //#region src/ui/link-bubble-menu/unlink.tsx
-function LinkBubbleMenuUnlink({ className, children, onClick,...rest }) {
+function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown,...rest }) {
 	const { editor } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -2641,7 +2808,10 @@ function LinkBubbleMenuUnlink({ className, children, onClick,...rest }) {
 		"data-re-link-bm-item": "",
 		"data-item": "unlink",
 		className,
-		onMouseDown: (e) => e.preventDefault(),
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
 		onClick: (e) => {
 			onClick?.(e);
 			editor.chain().focus().unsetLink().run();
@@ -2663,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, 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, 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