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

package/dist/{index.js → index.cjs}

@@ -6,12 +6,16 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
 	}
 	return to;
 };
@@ -21,39 +25,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-let __tiptap_core = require("@tiptap/core");
-__tiptap_core = __toESM(__tiptap_core);
-let __tiptap_starter_kit = require("@tiptap/starter-kit");
-__tiptap_starter_kit = __toESM(__tiptap_starter_kit);
+let _tiptap_core = require("@tiptap/core");
+let _tiptap_starter_kit = require("@tiptap/starter-kit");
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
-let __react_email_components = require("@react-email/components");
-__react_email_components = __toESM(__react_email_components);
-let __tiptap_extension_code_block = require("@tiptap/extension-code-block");
-__tiptap_extension_code_block = __toESM(__tiptap_extension_code_block);
-let __tiptap_pm_state = require("@tiptap/pm/state");
-__tiptap_pm_state = __toESM(__tiptap_pm_state);
-let __tiptap_pm_view = require("@tiptap/pm/view");
-__tiptap_pm_view = __toESM(__tiptap_pm_view);
+let _react_email_components = require("@react-email/components");
+_react_email_components = __toESM(_react_email_components);
+let _tiptap_extension_code_block = require("@tiptap/extension-code-block");
+_tiptap_extension_code_block = __toESM(_tiptap_extension_code_block);
+let _tiptap_pm_state = require("@tiptap/pm/state");
+let _tiptap_pm_view = require("@tiptap/pm/view");
 let hast_util_from_html = require("hast-util-from-html");
-hast_util_from_html = __toESM(hast_util_from_html);
 let prismjs = require("prismjs");
 prismjs = __toESM(prismjs);
-let __tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
-__tiptap_extension_placeholder = __toESM(__tiptap_extension_placeholder);
-let __tiptap_react = require("@tiptap/react");
-__tiptap_react = __toESM(__tiptap_react);
+let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
+_tiptap_extension_placeholder = __toESM(_tiptap_extension_placeholder);
+let _tiptap_react = require("@tiptap/react");
 let lucide_react = require("lucide-react");
-lucide_react = __toESM(lucide_react);
 let react = require("react");
 react = __toESM(react);
-let __radix_ui_react_popover = require("@radix-ui/react-popover");
-__radix_ui_react_popover = __toESM(__radix_ui_react_popover);
-let __tiptap_react_menus = require("@tiptap/react/menus");
-__tiptap_react_menus = __toESM(__tiptap_react_menus);
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = __toESM(_radix_ui_react_popover);
+let _tiptap_react_menus = require("@tiptap/react/menus");
 
 //#region src/core/email-node.ts
-var EmailNode = class EmailNode extends __tiptap_core.Node {
+var EmailNode = class EmailNode extends _tiptap_core.Node {
 	constructor(config) {
 		super(config);
 	}
@@ -126,7 +121,7 @@ const editorEventBus = new EditorEventBus();
 
 //#endregion
 //#region src/extensions/alignment-attribute.tsx
-const AlignmentAttribute = __tiptap_core.Extension.create({
+const AlignmentAttribute = _tiptap_core.Extension.create({
 	name: "alignmentAttribute",
 	addOptions() {
 		return {
@@ -454,7 +449,7 @@ const Body = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"div",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
 			0
 		];
 	},
@@ -493,7 +488,7 @@ const underscorePasteRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
 * This extension allows you to mark text as bold.
 * @see https://tiptap.dev/api/marks/bold
 */
-const Bold = __tiptap_core.Mark.create({
+const Bold = _tiptap_core.Mark.create({
 	name: "bold",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -514,7 +509,7 @@ const Bold = __tiptap_core.Mark.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"strong",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
 			0
 		];
 	},
@@ -538,19 +533,19 @@ const Bold = __tiptap_core.Mark.create({
 		};
 	},
 	addInputRules() {
-		return [(0, __tiptap_core.markInputRule)({
+		return [(0, _tiptap_core.markInputRule)({
 			find: starInputRegex,
 			type: this.type
-		}), (0, __tiptap_core.markInputRule)({
+		}), (0, _tiptap_core.markInputRule)({
 			find: underscoreInputRegex,
 			type: this.type
 		})];
 	},
 	addPasteRules() {
-		return [(0, __tiptap_core.markPasteRule)({
+		return [(0, _tiptap_core.markPasteRule)({
 			find: starPasteRegex,
 			type: this.type
-		}), (0, __tiptap_core.markPasteRule)({
+		}), (0, _tiptap_core.markPasteRule)({
 			find: underscorePasteRegex,
 			type: this.type
 		})];
@@ -590,10 +585,10 @@ const Button = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"div",
-			(0, __tiptap_core.mergeAttributes)({ class: `align-${HTMLAttributes?.alignment}` }),
+			(0, _tiptap_core.mergeAttributes)({ class: `align-${HTMLAttributes?.alignment}` }),
 			[
 				"a",
-				(0, __tiptap_core.mergeAttributes)({
+				(0, _tiptap_core.mergeAttributes)({
 					class: `node-button ${HTMLAttributes?.class}`,
 					style: HTMLAttributes?.style,
 					"data-id": "react-email-button",
@@ -621,9 +616,9 @@ const Button = EmailNode.create({
 	},
 	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Row, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Column, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Row, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
 			align: node.attrs?.align || node.attrs?.alignment,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Button, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Button, {
 				className: node.attrs?.class || void 0,
 				href: node.attrs?.href,
 				style: {
@@ -638,7 +633,7 @@ const Button = EmailNode.create({
 
 //#endregion
 //#region src/extensions/class-attribute.tsx
-const ClassAttribute = __tiptap_core.Extension.create({
+const ClassAttribute = _tiptap_core.Extension.create({
 	name: "classAttribute",
 	addOptions() {
 		return {
@@ -720,7 +715,7 @@ function registeredLang(aliasOrLanguage) {
 }
 function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
 	const decorations = [];
-	(0, __tiptap_core.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
+	(0, _tiptap_core.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
 		let from = block.pos + 1;
 		const language = block.node.attrs.language || defaultLanguage;
 		const theme = block.node.attrs.theme || defaultTheme;
@@ -743,13 +738,13 @@ function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLangu
 		parseNodes(getHighlightNodes(html)).forEach((node) => {
 			const to = from + node.text.length;
 			if (node.classes.length) {
-				const decoration = __tiptap_pm_view.Decoration.inline(from, to, { class: node.classes.join(" ") });
+				const decoration = _tiptap_pm_view.Decoration.inline(from, to, { class: node.classes.join(" ") });
 				decorations.push(decoration);
 			}
 			from = to;
 		});
 	});
-	return __tiptap_pm_view.DecorationSet.create(doc, decorations);
+	return _tiptap_pm_view.DecorationSet.create(doc, decorations);
 }
 function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
 	if (!defaultLanguage) throw Error("You must specify the defaultLanguage parameter");
@@ -758,8 +753,8 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
 	const onLanguageLoaded = (language) => {
 		if (pluginView) pluginView.dispatch(pluginView.state.tr.setMeta(PRISM_LANGUAGE_LOADED_META, language));
 	};
-	const prismjsPlugin = new __tiptap_pm_state.Plugin({
-		key: new __tiptap_pm_state.PluginKey("prism"),
+	const prismjsPlugin = new _tiptap_pm_state.Plugin({
+		key: new _tiptap_pm_state.PluginKey("prism"),
 		view(view) {
 			pluginView = view;
 			return { destroy() {
@@ -780,8 +775,8 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
 			apply: (transaction, decorationSet, oldState, newState) => {
 				const oldNodeName = oldState.selection.$head.parent.type.name;
 				const newNodeName = newState.selection.$head.parent.type.name;
-				const oldNodes = (0, __tiptap_core.findChildren)(oldState.doc, (node) => node.type.name === name);
-				const newNodes = (0, __tiptap_core.findChildren)(newState.doc, (node) => node.type.name === name);
+				const oldNodes = (0, _tiptap_core.findChildren)(oldState.doc, (node) => node.type.name === name);
+				const newNodes = (0, _tiptap_core.findChildren)(newState.doc, (node) => node.type.name === name);
 				if (transaction.getMeta(PRISM_LANGUAGE_LOADED_META) || transaction.docChanged && ([oldNodeName, newNodeName].includes(name) || newNodes.length !== oldNodes.length || transaction.steps.some((step) => {
 					const rangeStep = step;
 					return rangeStep.from !== void 0 && rangeStep.to !== void 0 && oldNodes.some((node) => {
@@ -811,7 +806,7 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
 
 //#endregion
 //#region src/extensions/code-block.tsx
-const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.extend({
+const CodeBlockPrism = EmailNode.from(_tiptap_extension_code_block.default.extend({
 	addOptions() {
 		return {
 			languageClassPrefix: "language-",
@@ -848,7 +843,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 	renderHTML({ node, HTMLAttributes }) {
 		return [
 			"pre",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null }, { "data-theme": node.attrs.theme }),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null }, { "data-theme": node.attrs.theme }),
 			[
 				"code",
 				{ class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language} node-codeTag` : "node-codeTag" },
@@ -867,7 +862,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 					const blockStart = $from.start(depth);
 					const blockEnd = $from.end(depth);
 					if (selection.from === blockStart && selection.to === blockEnd) return false;
-					const tr = state.tr.setSelection(__tiptap_pm_state.TextSelection.create(state.doc, blockStart, blockEnd));
+					const tr = state.tr.setSelection(_tiptap_pm_state.TextSelection.create(state.doc, blockStart, blockEnd));
 					editor.view.dispatch(tr);
 					return true;
 				}
@@ -884,7 +879,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 	}
 }), ({ node, style }) => {
 	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
-	const userTheme = __react_email_components[node.attrs?.theme];
+	const userTheme = _react_email_components[node.attrs?.theme];
 	const theme = userTheme ? {
 		...userTheme,
 		base: {
@@ -900,7 +895,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 		padding: "0.75rem 1rem",
 		borderRadius: "0.125rem"
 	} };
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.CodeBlock, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.CodeBlock, {
 		code: node.content?.[0]?.text ?? "",
 		language,
 		theme,
@@ -936,7 +931,7 @@ const Div = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"div",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
 			0
 		];
 	},
@@ -958,7 +953,7 @@ const Div = EmailNode.create({
 
 //#endregion
 //#region src/extensions/max-nesting.ts
-const MaxNesting = __tiptap_core.Extension.create({
+const MaxNesting = _tiptap_core.Extension.create({
 	name: "maxNesting",
 	addOptions() {
 		return {
@@ -969,8 +964,8 @@ const MaxNesting = __tiptap_core.Extension.create({
 	addProseMirrorPlugins() {
 		const { maxDepth, nodeTypes } = this.options;
 		if (typeof maxDepth !== "number" || maxDepth < 1) throw new Error("maxDepth must be a positive number");
-		return [new __tiptap_pm_state.Plugin({
-			key: new __tiptap_pm_state.PluginKey("maxNesting"),
+		return [new _tiptap_pm_state.Plugin({
+			key: new _tiptap_pm_state.PluginKey("maxNesting"),
 			appendTransaction(transactions, _oldState, newState) {
 				if (!transactions.some((tr$1) => tr$1.docChanged)) return null;
 				const rangesToLift = [];
@@ -1033,7 +1028,7 @@ const MaxNesting = __tiptap_core.Extension.create({
 
 //#endregion
 //#region src/extensions/placeholder.ts
-const Placeholder = __tiptap_extension_placeholder.default.configure({
+const Placeholder = _tiptap_extension_placeholder.default.configure({
 	placeholder: ({ node }) => {
 		if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 		return "Press '/' for commands";
@@ -1043,7 +1038,7 @@ const Placeholder = __tiptap_extension_placeholder.default.configure({
 
 //#endregion
 //#region src/extensions/preserved-style.ts
-const PreservedStyle = __tiptap_core.Mark.create({
+const PreservedStyle = _tiptap_core.Mark.create({
 	name: "preservedStyle",
 	addAttributes() {
 		return { style: {
@@ -1069,7 +1064,7 @@ const PreservedStyle = __tiptap_core.Mark.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"span",
-			(0, __tiptap_core.mergeAttributes)(HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(HTMLAttributes),
 			0
 		];
 	}
@@ -1117,7 +1112,7 @@ function processStylesForUnlink(styleString) {
 
 //#endregion
 //#region src/extensions/preview-text.ts
-const PreviewText = __tiptap_core.Node.create({
+const PreviewText = _tiptap_core.Node.create({
 	name: "previewText",
 	group: "block",
 	selectable: false,
@@ -1181,7 +1176,7 @@ const Section = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"section",
-			(0, __tiptap_core.mergeAttributes)({
+			(0, _tiptap_core.mergeAttributes)({
 				"data-type": "section",
 				class: "node-section"
 			}, HTMLAttributes),
@@ -1202,7 +1197,7 @@ const Section = EmailNode.create({
 	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		const textAlign = node.attrs?.align || node.attrs?.alignment;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Section, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
 			className: node.attrs?.class || void 0,
 			align: textAlign,
 			style: {
@@ -1217,7 +1212,7 @@ const Section = EmailNode.create({
 
 //#endregion
 //#region src/extensions/style-attribute.tsx
-const StyleAttribute = __tiptap_core.Extension.create({
+const StyleAttribute = _tiptap_core.Extension.create({
 	name: "styleAttribute",
 	priority: 101,
 	addOptions() {
@@ -1269,7 +1264,7 @@ const StyleAttribute = __tiptap_core.Extension.create({
 * This extension allows you to mark text as superscript.
 * @see https://tiptap.dev/api/marks/superscript
 */
-const Sup = __tiptap_core.Mark.create({
+const Sup = _tiptap_core.Mark.create({
 	name: "sup",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1280,7 +1275,7 @@ const Sup = __tiptap_core.Mark.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"sup",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
 			0
 		];
 	},
@@ -1331,7 +1326,7 @@ const Table = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"table",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
 			[
 				"tbody",
 				{},
@@ -1347,7 +1342,7 @@ const Table = EmailNode.create({
 			marginLeft: "auto",
 			marginRight: "auto"
 		} : {};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Section, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
 			className: node.attrs?.class || void 0,
 			align: alignment,
 			style: resolveConflictingStyles(style, {
@@ -1438,7 +1433,7 @@ const TableCell = EmailNode.create({
 	},
 	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Column, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
 			className: node.attrs?.class || void 0,
 			align: node.attrs?.align || node.attrs?.alignment,
 			style: {
@@ -1449,7 +1444,7 @@ const TableCell = EmailNode.create({
 		});
 	}
 });
-const TableHeader = __tiptap_core.Node.create({
+const TableHeader = _tiptap_core.Node.create({
 	name: "tableHeader",
 	group: "tableCell",
 	content: "block+",
@@ -1487,7 +1482,7 @@ const TableHeader = __tiptap_core.Node.create({
 
 //#endregion
 //#region src/extensions/uppercase.ts
-const Uppercase = __tiptap_core.Mark.create({
+const Uppercase = _tiptap_core.Mark.create({
 	name: "uppercase",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1504,7 +1499,7 @@ const Uppercase = __tiptap_core.Mark.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"span",
-			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
+			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
 			0
 		];
 	},
@@ -1579,7 +1574,7 @@ function createColumnsNode(config, includeCommands) {
 		renderHTML({ HTMLAttributes }) {
 			return [
 				"div",
-				(0, __tiptap_core.mergeAttributes)({
+				(0, _tiptap_core.mergeAttributes)({
 					"data-type": config.dataType,
 					class: "node-columns"
 				}, HTMLAttributes),
@@ -1605,7 +1600,7 @@ function createColumnsNode(config, includeCommands) {
 		} },
 		renderToReactEmail({ children, node, style }) {
 			const inlineStyles = inlineCssToJs(node.attrs?.style);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Row, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Row, {
 				className: node.attrs?.class || void 0,
 				style: {
 					...style,
@@ -1633,7 +1628,7 @@ const ColumnsColumn = EmailNode.create({
 	renderHTML({ HTMLAttributes }) {
 		return [
 			"div",
-			(0, __tiptap_core.mergeAttributes)({
+			(0, _tiptap_core.mergeAttributes)({
 				"data-type": "column",
 				class: "node-column"
 			}, HTMLAttributes),
@@ -1671,7 +1666,7 @@ const ColumnsColumn = EmailNode.create({
 					const columnEnd = $from.end(d);
 					const { from, to } = state.selection;
 					if (from === columnStart && to === columnEnd) return false;
-					editor.view.dispatch(state.tr.setSelection(__tiptap_pm_state.TextSelection.create(state.doc, columnStart, columnEnd)));
+					editor.view.dispatch(state.tr.setSelection(_tiptap_pm_state.TextSelection.create(state.doc, columnStart, columnEnd)));
 					return true;
 				}
 				return false;
@@ -1681,7 +1676,7 @@ const ColumnsColumn = EmailNode.create({
 	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		const width = node.attrs?.width;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Column, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
 			className: node.attrs?.class || void 0,
 			style: {
 				...style,
@@ -1696,7 +1691,7 @@ const ColumnsColumn = EmailNode.create({
 //#endregion
 //#region src/extensions/index.ts
 const coreExtensions = [
-	__tiptap_starter_kit.StarterKit.configure({
+	_tiptap_starter_kit.StarterKit.configure({
 		undoRedo: false,
 		heading: false,
 		link: false,
@@ -1842,7 +1837,7 @@ function useBubbleMenuContext() {
 
 //#endregion
 //#region src/ui/bubble-menu/item.tsx
-function BubbleMenuItem({ name, isActive, onCommand, className, children,...rest }) {
+function BubbleMenuItem({ name, isActive, onCommand, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		"aria-label": name,
@@ -1864,7 +1859,7 @@ function BubbleMenuAlignCenter({ className, children }) {
 	const { editor } = useBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
 		name: "align-center",
-		isActive: (0, __tiptap_react.useEditorState)({
+		isActive: (0, _tiptap_react.useEditorState)({
 			editor,
 			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "center" }) ?? false
 		}),
@@ -1880,7 +1875,7 @@ function BubbleMenuAlignLeft({ className, children }) {
 	const { editor } = useBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
 		name: "align-left",
-		isActive: (0, __tiptap_react.useEditorState)({
+		isActive: (0, _tiptap_react.useEditorState)({
 			editor,
 			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "left" }) ?? false
 		}),
@@ -1896,7 +1891,7 @@ function BubbleMenuAlignRight({ className, children }) {
 	const { editor } = useBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
 		name: "align-right",
-		isActive: (0, __tiptap_react.useEditorState)({
+		isActive: (0, _tiptap_react.useEditorState)({
 			editor,
 			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "right" }) ?? false
 		}),
@@ -1911,7 +1906,7 @@ function BubbleMenuAlignRight({ className, children }) {
 function createMarkBubbleItem(config) {
 	function MarkBubbleItem({ className, children }) {
 		const { editor } = useBubbleMenuContext();
-		const isActive = (0, __tiptap_react.useEditorState)({
+		const isActive = (0, _tiptap_react.useEditorState)({
 			editor,
 			selector: ({ editor: editor$1 }) => {
 				if (config.activeParams) return editor$1?.isActive(config.activeName, config.activeParams) ?? false;
@@ -2029,7 +2024,7 @@ function BubbleMenuLinkSelector({ className, showToggle = true, validateUrl, onL
 		if (!isControlled) setUncontrolledOpen(value);
 		onOpenChange?.(value);
 	}, [isControlled, onOpenChange]);
-	const editorState = (0, __tiptap_react.useEditorState)({
+	const editorState = (0, _tiptap_react.useEditorState)({
 		editor,
 		selector: ({ editor: editor$1 }) => ({
 			isLinkActive: editor$1?.isActive("link") ?? false,
@@ -2195,7 +2190,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
 		if (!isControlled) setUncontrolledOpen(value);
 		onOpenChange?.(value);
 	}, [isControlled, onOpenChange]);
-	const editorState = (0, __tiptap_react.useEditorState)({
+	const editorState = (0, _tiptap_react.useEditorState)({
 		editor,
 		selector: ({ editor: editor$1 }) => ({
 			isParagraphActive: (editor$1?.isActive("paragraph") ?? false) && !editor$1?.isActive("bulletList") && !editor$1?.isActive("orderedList"),
@@ -2274,7 +2269,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
 	if (!editorState || items.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_popover.Root, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
 			open: isOpen,
 			onOpenChange: setIsOpen,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2288,7 +2283,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
 }
 function NodeSelectorTrigger({ className, children }) {
 	const { activeItem, isOpen, setIsOpen } = useNodeSelectorContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_popover.Trigger, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
 		"data-re-node-selector-trigger": "",
 		className,
 		onClick: () => setIsOpen(!isOpen),
@@ -2297,7 +2292,7 @@ function NodeSelectorTrigger({ className, children }) {
 }
 function NodeSelectorContent({ className, align = "start", children }) {
 	const { items, setIsOpen } = useNodeSelectorContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_popover.Content, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
 		align,
 		"data-re-node-selector-content": "",
 		className,
@@ -2333,9 +2328,9 @@ function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, on
 //#endregion
 //#region src/ui/bubble-menu/root.tsx
 function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
-	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	if (!editor) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react_menus.BubbleMenu, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
 		editor,
 		"data-re-bubble-menu": "",
 		shouldShow: ({ editor: editor$1, view }) => {
@@ -2481,7 +2476,7 @@ function useButtonBubbleMenuContext() {
 
 //#endregion
 //#region src/ui/button-bubble-menu/edit-link.tsx
-function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
+function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
 	const { setIsEditing } = useButtonBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		...rest,
@@ -2505,10 +2500,10 @@ function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown,..
 //#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 { 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, {
+	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"),
@@ -2534,12 +2529,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__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-re-btn-bm-toolbar": "",
-		className,
+		...rest,
 		children
 	});
 }
@@ -2552,6 +2547,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__ */ (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);
@@ -2563,7 +2640,7 @@ function useLinkBubbleMenuContext() {
 
 //#endregion
 //#region src/ui/link-bubble-menu/edit-link.tsx
-function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown,...rest }) {
+function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
 	const { setIsEditing } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -2691,7 +2768,7 @@ function LinkBubbleMenuForm({ className, validateUrl, onLinkApply, onLinkRemove,
 
 //#endregion
 //#region src/ui/link-bubble-menu/open-link.tsx
-function LinkBubbleMenuOpenLink({ className, children,...rest }) {
+function LinkBubbleMenuOpenLink({ className, children, ...rest }) {
 	const { linkHref } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		...rest,
@@ -2709,14 +2786,14 @@ function LinkBubbleMenuOpenLink({ className, children,...rest }) {
 //#endregion
 //#region src/ui/link-bubble-menu/root.tsx
 function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
-	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	const [isEditing, setIsEditing] = react.useState(false);
-	const linkHref = (0, __tiptap_react.useEditorState)({
+	const linkHref = (0, _tiptap_react.useEditorState)({
 		editor,
 		selector: ({ editor: e }) => e?.getAttributes("link").href ?? ""
 	});
 	if (!editor) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react_menus.BubbleMenu, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
 		editor,
 		"data-re-link-bm": "",
 		shouldShow: ({ editor: e }) => e.isActive("link") && e.view.state.selection.content().size === 0,
@@ -2743,19 +2820,19 @@ 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__ */ (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, onMouseDown,...rest }) {
+function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown, ...rest }) {
 	const { editor } = useLinkBubbleMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -2820,6 +2897,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;
@@ -2851,4 +2932,5 @@ exports.getColumnsDepth = getColumnsDepth;
 exports.processStylesForUnlink = processStylesForUnlink;
 exports.setTextAlignment = setTextAlignment;
 exports.useButtonBubbleMenuContext = useButtonBubbleMenuContext;
+exports.useImageBubbleMenuContext = useImageBubbleMenuContext;
 exports.useLinkBubbleMenuContext = useLinkBubbleMenuContext;