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

package/dist/index.js

@@ -23,6 +23,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#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 react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
 let __react_email_components = require("@react-email/components");
@@ -37,6 +39,18 @@ 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 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);
 
 //#region src/core/email-node.ts
 var EmailNode = class EmailNode extends __tiptap_core.Node {
@@ -68,6 +82,103 @@ var EmailNode = class EmailNode extends __tiptap_core.Node {
 	}
 };
 
+//#endregion
+//#region src/core/event-bus.ts
+const EVENT_PREFIX = "@react-email/editor:";
+var EditorEventBus = class {
+	prefixEventName(eventName) {
+		return `${EVENT_PREFIX}${String(eventName)}`;
+	}
+	dispatch(eventName, payload, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const event = new CustomEvent(prefixedEventName, {
+			detail: payload,
+			bubbles: false,
+			cancelable: false
+		});
+		target.dispatchEvent(event);
+	}
+	on(eventName, handler, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const abortController = new AbortController();
+		const wrappedHandler = (event) => {
+			const customEvent = event;
+			const result = handler(customEvent.detail);
+			if (result instanceof Promise) result.catch((error) => {
+				console.error(`Error in async event handler for ${prefixedEventName}:`, {
+					event: customEvent.detail,
+					error
+				});
+			});
+		};
+		target.addEventListener(prefixedEventName, wrappedHandler, {
+			...options,
+			signal: abortController.signal
+		});
+		return { unsubscribe: () => {
+			abortController.abort();
+		} };
+	}
+};
+const editorEventBus = new EditorEventBus();
+
+//#endregion
+//#region src/extensions/alignment-attribute.tsx
+const AlignmentAttribute = __tiptap_core.Extension.create({
+	name: "alignmentAttribute",
+	addOptions() {
+		return {
+			types: [],
+			alignments: [
+				"left",
+				"center",
+				"right",
+				"justify"
+			]
+		};
+	},
+	addGlobalAttributes() {
+		return [{
+			types: this.options.types,
+			attributes: { alignment: {
+				parseHTML: (element) => {
+					const explicitAlign = element.getAttribute("align") || element.getAttribute("alignment") || element.style.textAlign;
+					if (explicitAlign && this.options.alignments.includes(explicitAlign)) return explicitAlign;
+					return null;
+				},
+				renderHTML: (attributes) => {
+					if (attributes.alignment === "left") return {};
+					return { alignment: attributes.alignment };
+				}
+			} }
+		}];
+	},
+	addCommands() {
+		return { setAlignment: (alignment) => ({ commands }) => {
+			if (!this.options.alignments.includes(alignment)) return false;
+			return this.options.types.every((type) => commands.updateAttributes(type, { alignment }));
+		} };
+	},
+	addKeyboardShortcuts() {
+		return {
+			Enter: () => {
+				const { from } = this.editor.state.selection;
+				const currentAlignment = this.editor.state.doc.nodeAt(from)?.attrs?.alignment;
+				if (currentAlignment) requestAnimationFrame(() => {
+					this.editor.commands.setAlignment(currentAlignment);
+				});
+				return false;
+			},
+			"Mod-Shift-l": () => this.editor.commands.setAlignment("left"),
+			"Mod-Shift-e": () => this.editor.commands.setAlignment("center"),
+			"Mod-Shift-r": () => this.editor.commands.setAlignment("right"),
+			"Mod-Shift-j": () => this.editor.commands.setAlignment("justify")
+		};
+	}
+});
+
 //#endregion
 //#region src/utils/attribute-helpers.ts
 /**
@@ -124,6 +235,14 @@ const LAYOUT_ATTRIBUTES = [
 	"height"
 ];
 /**
+* Table-specific HTML attributes used for table layout and styling.
+*/
+const TABLE_ATTRIBUTES = [
+	"border",
+	"cellpadding",
+	"cellspacing"
+];
+/**
 * Table cell-specific HTML attributes.
 */
 const TABLE_CELL_ATTRIBUTES = [
@@ -140,6 +259,7 @@ const TABLE_HEADER_ATTRIBUTES = [...TABLE_CELL_ATTRIBUTES, "scope"];
 
 //#endregion
 //#region src/utils/styles.ts
+const WHITE_SPACE_REGEX = /\s+/;
 const inlineCssToJs = (inlineStyle, options = {}) => {
 	const styleObject = {};
 	if (!inlineStyle || inlineStyle === "" || typeof inlineStyle === "object") return styleObject;
@@ -154,6 +274,157 @@ const inlineCssToJs = (inlineStyle, options = {}) => {
 	});
 	return styleObject;
 };
+/**
+* Expands CSS shorthand properties (margin, padding) into their longhand equivalents.
+* This prevents shorthand properties from overriding specific longhand properties in email clients.
+*
+* @param styles - Style object that may contain shorthand properties
+* @returns New style object with shorthand properties expanded to longhand
+*
+* @example
+* expandShorthandProperties({ margin: '0', paddingTop: '10px' })
+* // Returns: { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '0', paddingTop: '10px' }
+*/
+function expandShorthandProperties(styles) {
+	if (!styles || typeof styles !== "object") return {};
+	const expanded = {};
+	for (const key in styles) {
+		const value = styles[key];
+		if (value === void 0 || value === null || value === "") continue;
+		switch (key) {
+			case "margin": {
+				const values = parseShorthandValue(value);
+				expanded.marginTop = values.top;
+				expanded.marginRight = values.right;
+				expanded.marginBottom = values.bottom;
+				expanded.marginLeft = values.left;
+				break;
+			}
+			case "padding": {
+				const values = parseShorthandValue(value);
+				expanded.paddingTop = values.top;
+				expanded.paddingRight = values.right;
+				expanded.paddingBottom = values.bottom;
+				expanded.paddingLeft = values.left;
+				break;
+			}
+			case "border": {
+				const values = convertBorderValue(value);
+				expanded.borderStyle = values.style;
+				expanded.borderWidth = values.width;
+				expanded.borderColor = values.color;
+				break;
+			}
+			case "borderTopLeftRadius":
+			case "borderTopRightRadius":
+			case "borderBottomLeftRadius":
+			case "borderBottomRightRadius":
+				expanded[key] = value;
+				if (styles.borderTopLeftRadius && styles.borderTopRightRadius && styles.borderBottomLeftRadius && styles.borderBottomRightRadius) {
+					const values = [
+						styles.borderTopLeftRadius,
+						styles.borderTopRightRadius,
+						styles.borderBottomLeftRadius,
+						styles.borderBottomRightRadius
+					];
+					if (new Set(values).size === 1) expanded.borderRadius = values[0];
+				}
+				break;
+			default: expanded[key] = value;
+		}
+	}
+	return expanded;
+}
+/**
+* Parses CSS shorthand value (1-4 values) into individual side values.
+* Follows CSS specification for shorthand property value parsing.
+*
+* @param value - Shorthand value string (e.g., '0', '10px 20px', '5px 10px 15px 20px')
+* @returns Object with top, right, bottom, left values
+*/
+function parseShorthandValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	const len = parts.length;
+	if (len === 1) return {
+		top: parts[0],
+		right: parts[0],
+		bottom: parts[0],
+		left: parts[0]
+	};
+	if (len === 2) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[0],
+		left: parts[1]
+	};
+	if (len === 3) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[1]
+	};
+	if (len === 4) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[3]
+	};
+	return {
+		top: stringValue,
+		right: stringValue,
+		bottom: stringValue,
+		left: stringValue
+	};
+}
+function convertBorderValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	switch (parts.length) {
+		case 1: return {
+			style: "solid",
+			width: parts[0],
+			color: "black"
+		};
+		case 2: return {
+			style: parts[1],
+			width: parts[0],
+			color: "black"
+		};
+		case 3: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		case 4: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		default: return {
+			style: "solid",
+			width: stringValue,
+			color: "black"
+		};
+	}
+}
+/**
+* Resolves conflicts between reset styles and inline styles by expanding
+* shorthand properties (margin, padding) to longhand before merging.
+* This prevents shorthand properties from overriding specific longhand properties.
+*
+* @param resetStyles - Base reset styles that may contain shorthand properties
+* @param inlineStyles - Inline styles that should override reset styles
+* @returns Merged styles with inline styles taking precedence
+*/
+function resolveConflictingStyles(resetStyles, inlineStyles) {
+	const expandedResetStyles = expandShorthandProperties(resetStyles);
+	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
+	return {
+		...expandedResetStyles,
+		...expandedInlineStyles
+	};
+}
 
 //#endregion
 //#region src/extensions/body.tsx
@@ -187,12 +458,12 @@ const Body = EmailNode.create({
 			0
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -200,6 +471,92 @@ const Body = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/bold.ts
+/**
+* Matches bold text via `**` as input.
+*/
+const starInputRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/;
+/**
+* Matches bold text via `**` while pasting.
+*/
+const starPasteRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g;
+/**
+* Matches bold text via `__` as input.
+*/
+const underscoreInputRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/;
+/**
+* Matches bold text via `__` while pasting.
+*/
+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({
+	name: "bold",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [
+			{ tag: "strong" },
+			{
+				tag: "b",
+				getAttrs: (node) => node.style.fontWeight !== "normal" && null
+			},
+			{
+				style: "font-weight=400",
+				clearMark: (mark) => mark.type.name === this.name
+			}
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"strong",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setBold: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleBold: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetBold: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-b": () => this.editor.commands.toggleBold(),
+			"Mod-B": () => this.editor.commands.toggleBold()
+		};
+	},
+	addInputRules() {
+		return [(0, __tiptap_core.markInputRule)({
+			find: starInputRegex,
+			type: this.type
+		}), (0, __tiptap_core.markInputRule)({
+			find: underscoreInputRegex,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [(0, __tiptap_core.markPasteRule)({
+			find: starPasteRegex,
+			type: this.type
+		}), (0, __tiptap_core.markPasteRule)({
+			find: underscorePasteRegex,
+			type: this.type
+		})];
+	}
+});
+
 //#endregion
 //#region src/extensions/button.tsx
 const Button = EmailNode.create({
@@ -262,7 +619,7 @@ const Button = EmailNode.create({
 			}
 		};
 	},
-	renderToReactEmail({ children, node, styles }) {
+	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, {
 			align: node.attrs?.align || node.attrs?.alignment,
@@ -270,8 +627,7 @@ const Button = EmailNode.create({
 				className: node.attrs?.class || void 0,
 				href: node.attrs?.href,
 				style: {
-					...styles.reset,
-					...styles.button,
+					...style,
 					...inlineStyles
 				},
 				children
@@ -280,6 +636,48 @@ const Button = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/class-attribute.tsx
+const ClassAttribute = __tiptap_core.Extension.create({
+	name: "classAttribute",
+	addOptions() {
+		return {
+			types: [],
+			class: []
+		};
+	},
+	addGlobalAttributes() {
+		return [{
+			types: this.options.types,
+			attributes: { class: {
+				default: "",
+				parseHTML: (element) => element.className || "",
+				renderHTML: (attributes) => {
+					return attributes.class ? { class: attributes.class } : {};
+				}
+			} }
+		}];
+	},
+	addCommands() {
+		return {
+			unsetClass: () => ({ commands }) => {
+				return this.options.types.every((type) => commands.resetAttributes(type, "class"));
+			},
+			setClass: (classList) => ({ commands }) => {
+				return this.options.types.every((type) => commands.updateAttributes(type, { class: classList }));
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return { Enter: ({ editor }) => {
+			requestAnimationFrame(() => {
+				editor.commands.resetAttributes("paragraph", "class");
+			});
+			return false;
+		} };
+	}
+});
+
 //#endregion
 //#region src/utils/prism-utils.ts
 const publicURL = "/styles/prism";
@@ -458,6 +856,25 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 			]
 		];
 	},
+	addKeyboardShortcuts() {
+		return {
+			...this.parent?.(),
+			"Mod-a": ({ editor }) => {
+				const { state } = editor;
+				const { selection } = state;
+				const { $from } = selection;
+				for (let depth = $from.depth; depth >= 1; depth--) if ($from.node(depth).type.name === this.name) {
+					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));
+					editor.view.dispatch(tr);
+					return true;
+				}
+				return false;
+			}
+		};
+	},
 	addProseMirrorPlugins() {
 		return [...this.parent?.() || [], PrismPlugin({
 			name: this.name,
@@ -465,7 +882,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 			defaultTheme: this.options.defaultTheme
 		})];
 	}
-}), ({ node, styles }) => {
+}), ({ node, style }) => {
 	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
 	const userTheme = __react_email_components[node.attrs?.theme];
 	const theme = userTheme ? {
@@ -489,7 +906,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 		theme,
 		style: {
 			width: "auto",
-			...styles.codeBlock
+			...style
 		}
 	});
 });
@@ -526,12 +943,12 @@ const Div = EmailNode.create({
 	addAttributes() {
 		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -539,6 +956,206 @@ const Div = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/max-nesting.ts
+const MaxNesting = __tiptap_core.Extension.create({
+	name: "maxNesting",
+	addOptions() {
+		return {
+			maxDepth: 3,
+			nodeTypes: void 0
+		};
+	},
+	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"),
+			appendTransaction(transactions, _oldState, newState) {
+				if (!transactions.some((tr$1) => tr$1.docChanged)) return null;
+				const rangesToLift = [];
+				newState.doc.descendants((node, pos) => {
+					let depth = 0;
+					let currentPos = pos;
+					let currentNode = node;
+					while (currentNode && depth <= maxDepth) {
+						if (!nodeTypes || nodeTypes.includes(currentNode.type.name)) depth++;
+						const $pos = newState.doc.resolve(currentPos);
+						if ($pos.depth === 0) break;
+						currentPos = $pos.before($pos.depth);
+						currentNode = newState.doc.nodeAt(currentPos);
+					}
+					if (depth > maxDepth) {
+						const $pos = newState.doc.resolve(pos);
+						if ($pos.depth > 0) {
+							const range = $pos.blockRange();
+							if (range && "canReplace" in newState.schema.nodes.doc && typeof newState.schema.nodes.doc.canReplace === "function" && newState.schema.nodes.doc.canReplace(range.start - 1, range.end + 1, newState.doc.slice(range.start, range.end).content)) rangesToLift.push({
+								range,
+								target: range.start - 1
+							});
+						}
+					}
+				});
+				if (rangesToLift.length === 0) return null;
+				const tr = newState.tr;
+				for (let i = rangesToLift.length - 1; i >= 0; i--) {
+					const { range, target } = rangesToLift[i];
+					tr.lift(range, target);
+				}
+				return tr;
+			},
+			filterTransaction(tr) {
+				if (!tr.docChanged) return true;
+				let wouldCreateDeepNesting = false;
+				const newDoc = tr.doc;
+				newDoc.descendants((node, pos) => {
+					if (wouldCreateDeepNesting) return false;
+					let depth = 0;
+					let currentPos = pos;
+					let currentNode = node;
+					while (currentNode && depth <= maxDepth) {
+						if (!nodeTypes || nodeTypes.includes(currentNode.type.name)) depth++;
+						const $pos = newDoc.resolve(currentPos);
+						if ($pos.depth === 0) break;
+						currentPos = $pos.before($pos.depth);
+						currentNode = newDoc.nodeAt(currentPos);
+					}
+					if (depth > maxDepth) {
+						wouldCreateDeepNesting = true;
+						return false;
+					}
+				});
+				return !wouldCreateDeepNesting;
+			}
+		})];
+	}
+});
+
+//#endregion
+//#region src/extensions/placeholder.ts
+const Placeholder = __tiptap_extension_placeholder.default.configure({
+	placeholder: ({ node }) => {
+		if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+		return "Press '/' for commands";
+	},
+	includeChildren: true
+});
+
+//#endregion
+//#region src/extensions/preserved-style.ts
+const PreservedStyle = __tiptap_core.Mark.create({
+	name: "preservedStyle",
+	addAttributes() {
+		return { style: {
+			default: null,
+			parseHTML: (element) => element.getAttribute("style"),
+			renderHTML: (attributes) => {
+				if (!attributes.style) return {};
+				return { style: attributes.style };
+			}
+		} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span[style]",
+			getAttrs: (element) => {
+				if (typeof element === "string") return false;
+				const style = element.getAttribute("style");
+				if (style && hasPreservableStyles(style)) return { style };
+				return false;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			(0, __tiptap_core.mergeAttributes)(HTMLAttributes),
+			0
+		];
+	}
+});
+const LINK_INDICATOR_STYLES = [
+	"color",
+	"text-decoration",
+	"text-decoration-line",
+	"text-decoration-color",
+	"text-decoration-style"
+];
+function parseStyleString(styleString) {
+	const temp = document.createElement("div");
+	temp.style.cssText = styleString;
+	return temp.style;
+}
+function hasBackground(style) {
+	const bgColor = style.backgroundColor;
+	const bg = style.background;
+	if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") return true;
+	if (bg && bg !== "transparent" && bg !== "none" && bg !== "rgba(0, 0, 0, 0)") return true;
+	return false;
+}
+function hasPreservableStyles(styleString) {
+	return processStylesForUnlink(styleString) !== null;
+}
+/**
+* Processes styles when unlinking:
+* - Has background (button-like): preserve all styles
+* - No background: strip link-indicator styles (color, text-decoration), keep the rest
+*/
+function processStylesForUnlink(styleString) {
+	if (!styleString) return null;
+	const style = parseStyleString(styleString);
+	if (hasBackground(style)) return styleString;
+	const filtered = [];
+	for (let i = 0; i < style.length; i++) {
+		const prop = style[i];
+		if (LINK_INDICATOR_STYLES.includes(prop)) continue;
+		const value = style.getPropertyValue(prop);
+		if (value) filtered.push(`${prop}: ${value}`);
+	}
+	return filtered.length > 0 ? filtered.join("; ") : null;
+}
+
+//#endregion
+//#region src/extensions/preview-text.ts
+const PreviewText = __tiptap_core.Node.create({
+	name: "previewText",
+	group: "block",
+	selectable: false,
+	draggable: false,
+	atom: true,
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	addStorage() {
+		return { previewText: null };
+	},
+	renderHTML() {
+		return ["div", { style: "display: none" }];
+	},
+	parseHTML() {
+		return [{
+			tag: "div[data-skip-in-text=\"true\"]",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				let directText = "";
+				for (const child of element.childNodes) if (child.nodeType === 3) directText += child.textContent || "";
+				const cleanText = directText.trim();
+				if (cleanText) this.storage.previewText = cleanText;
+				return false;
+			}
+		}, {
+			tag: "span.preheader",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const preheaderText = node.textContent?.trim();
+				if (preheaderText) this.storage.previewText = preheaderText;
+				return false;
+			}
+		}];
+	}
+});
+
 //#endregion
 //#region src/utils/get-text-alignment.ts
 function getTextAlignment(alignment) {
@@ -582,14 +1199,14 @@ const Section = EmailNode.create({
 			});
 		} };
 	},
-	renderToReactEmail({ children, node, styles }) {
+	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, {
 			className: node.attrs?.class || void 0,
 			align: textAlign,
 			style: {
-				...styles.section,
+				...style,
 				...inlineStyles,
 				...getTextAlignment(textAlign)
 			},
@@ -599,9 +1216,1546 @@ const Section = EmailNode.create({
 });
 
 //#endregion
+//#region src/extensions/style-attribute.tsx
+const StyleAttribute = __tiptap_core.Extension.create({
+	name: "styleAttribute",
+	priority: 101,
+	addOptions() {
+		return {
+			types: [],
+			style: []
+		};
+	},
+	addGlobalAttributes() {
+		return [{
+			types: this.options.types,
+			attributes: { style: {
+				default: "",
+				parseHTML: (element) => element.getAttribute("style") || "",
+				renderHTML: (attributes) => {
+					return { style: attributes.style ?? "" };
+				}
+			} }
+		}];
+	},
+	addCommands() {
+		return {
+			unsetStyle: () => ({ commands }) => {
+				return this.options.types.every((type) => commands.resetAttributes(type, "style"));
+			},
+			setStyle: (style) => ({ commands }) => {
+				return this.options.types.every((type) => commands.updateAttributes(type, { style }));
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return { Enter: ({ editor }) => {
+			const { state } = editor.view;
+			const { selection } = state;
+			const { $from } = selection;
+			const textBefore = $from.nodeBefore?.text || "";
+			if (textBefore.includes("{{") || textBefore.includes("{{{")) return false;
+			requestAnimationFrame(() => {
+				editor.commands.resetAttributes("paragraph", "style");
+			});
+			return false;
+		} };
+	}
+});
+
+//#endregion
+//#region src/extensions/sup.ts
+/**
+* This extension allows you to mark text as superscript.
+* @see https://tiptap.dev/api/marks/superscript
+*/
+const Sup = __tiptap_core.Mark.create({
+	name: "sup",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{ tag: "sup" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"sup",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setSup: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleSup: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetSup: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	}
+});
+
+//#endregion
+//#region src/extensions/table.tsx
+const Table = EmailNode.create({
+	name: "table",
+	group: "block",
+	content: "tableRow+",
+	isolating: true,
+	tableRole: "table",
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "table",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"table",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			[
+				"tbody",
+				{},
+				0
+			]
+		];
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		const alignment = node.attrs?.align || node.attrs?.alignment;
+		const width = node.attrs?.width;
+		const centeringStyles = alignment === "center" ? {
+			marginLeft: "auto",
+			marginRight: "auto"
+		} : {};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Section, {
+			className: node.attrs?.class || void 0,
+			align: alignment,
+			style: resolveConflictingStyles(style, {
+				...inlineStyles,
+				...centeringStyles
+			}),
+			...width !== void 0 ? { width } : {},
+			children
+		});
+	}
+});
+const TableRow = EmailNode.create({
+	name: "tableRow",
+	group: "tableRow",
+	content: "(tableCell | tableHeader)+",
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_CELL_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "tr",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"tr",
+			HTMLAttributes,
+			0
+		];
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+const TableCell = EmailNode.create({
+	name: "tableCell",
+	group: "tableCell",
+	content: "block+",
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_CELL_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "td",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"td",
+			HTMLAttributes,
+			0
+		];
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		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: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+const TableHeader = __tiptap_core.Node.create({
+	name: "tableHeader",
+	group: "tableCell",
+	content: "block+",
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_HEADER_ATTRIBUTES,
+			...TABLE_CELL_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "th",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"th",
+			HTMLAttributes,
+			0
+		];
+	}
+});
+
+//#endregion
+//#region src/extensions/uppercase.ts
+const Uppercase = __tiptap_core.Mark.create({
+	name: "uppercase",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span",
+			getAttrs: (node) => {
+				if (node.style.textTransform === "uppercase") return {};
+				return false;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setUppercase: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleUppercase: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetUppercase: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	}
+});
+
+//#endregion
+//#region src/extensions/columns.tsx
+const COLUMN_PARENT_TYPES = [
+	"twoColumns",
+	"threeColumns",
+	"fourColumns"
+];
+const COLUMN_PARENT_SET = new Set(COLUMN_PARENT_TYPES);
+const MAX_COLUMNS_DEPTH = 3;
+function getColumnsDepth(doc, from) {
+	const $from = doc.resolve(from);
+	let depth = 0;
+	for (let d = $from.depth; d > 0; d--) if (COLUMN_PARENT_SET.has($from.node(d).type.name)) depth++;
+	return depth;
+}
+const VARIANTS = [
+	{
+		name: "twoColumns",
+		columnCount: 2,
+		content: "columnsColumn columnsColumn",
+		dataType: "two-columns"
+	},
+	{
+		name: "threeColumns",
+		columnCount: 3,
+		content: "columnsColumn columnsColumn columnsColumn",
+		dataType: "three-columns"
+	},
+	{
+		name: "fourColumns",
+		columnCount: 4,
+		content: "columnsColumn{4}",
+		dataType: "four-columns"
+	}
+];
+const NODE_TYPE_MAP = {
+	2: "twoColumns",
+	3: "threeColumns",
+	4: "fourColumns"
+};
+function createColumnsNode(config, includeCommands) {
+	return EmailNode.create({
+		name: config.name,
+		group: "block",
+		content: config.content,
+		isolating: true,
+		defining: true,
+		addAttributes() {
+			return createStandardAttributes([...LAYOUT_ATTRIBUTES, ...COMMON_HTML_ATTRIBUTES]);
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${config.dataType}"]` }];
+		},
+		renderHTML({ HTMLAttributes }) {
+			return [
+				"div",
+				(0, __tiptap_core.mergeAttributes)({
+					"data-type": config.dataType,
+					class: "node-columns"
+				}, HTMLAttributes),
+				0
+			];
+		},
+		...includeCommands && { addCommands() {
+			return { insertColumns: (count) => ({ commands, state }) => {
+				if (getColumnsDepth(state.doc, state.selection.from) >= MAX_COLUMNS_DEPTH) return false;
+				const nodeType = NODE_TYPE_MAP[count];
+				const children = Array.from({ length: count }, () => ({
+					type: "columnsColumn",
+					content: [{
+						type: "paragraph",
+						content: []
+					}]
+				}));
+				return commands.insertContent({
+					type: nodeType,
+					content: children
+				});
+			} };
+		} },
+		renderToReactEmail({ children, node, style }) {
+			const inlineStyles = inlineCssToJs(node.attrs?.style);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Row, {
+				className: node.attrs?.class || void 0,
+				style: {
+					...style,
+					...inlineStyles
+				},
+				children
+			});
+		}
+	});
+}
+const TwoColumns = createColumnsNode(VARIANTS[0], true);
+const ThreeColumns = createColumnsNode(VARIANTS[1], false);
+const FourColumns = createColumnsNode(VARIANTS[2], false);
+const ColumnsColumn = EmailNode.create({
+	name: "columnsColumn",
+	group: "columnsColumn",
+	content: "block+",
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([...LAYOUT_ATTRIBUTES, ...COMMON_HTML_ATTRIBUTES]) };
+	},
+	parseHTML() {
+		return [{ tag: "div[data-type=\"column\"]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			(0, __tiptap_core.mergeAttributes)({
+				"data-type": "column",
+				class: "node-column"
+			}, HTMLAttributes),
+			0
+		];
+	},
+	addKeyboardShortcuts() {
+		return {
+			Backspace: ({ editor }) => {
+				const { state } = editor;
+				const { selection } = state;
+				const { empty, $from } = selection;
+				if (!empty) return false;
+				for (let depth = $from.depth; depth >= 1; depth--) {
+					if ($from.pos !== $from.start(depth)) break;
+					const indexInParent = $from.index(depth - 1);
+					if (indexInParent === 0) continue;
+					const prevNode = $from.node(depth - 1).child(indexInParent - 1);
+					if (COLUMN_PARENT_SET.has(prevNode.type.name)) {
+						const deleteFrom = $from.before(depth) - prevNode.nodeSize;
+						const deleteTo = $from.before(depth);
+						editor.view.dispatch(state.tr.delete(deleteFrom, deleteTo));
+						return true;
+					}
+					break;
+				}
+				return false;
+			},
+			"Mod-a": ({ editor }) => {
+				const { state } = editor;
+				const { $from } = state.selection;
+				for (let d = $from.depth; d > 0; d--) {
+					if ($from.node(d).type.name !== "columnsColumn") continue;
+					const columnStart = $from.start(d);
+					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)));
+					return true;
+				}
+				return false;
+			}
+		};
+	},
+	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, {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles,
+				...width ? { width } : {}
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/index.ts
+const coreExtensions = [
+	__tiptap_starter_kit.StarterKit.configure({
+		undoRedo: false,
+		heading: false,
+		link: false,
+		underline: false,
+		trailingNode: false,
+		bold: false,
+		gapcursor: false,
+		listItem: {},
+		bulletList: { HTMLAttributes: { class: "node-bulletList" } },
+		paragraph: { HTMLAttributes: { class: "node-paragraph" } },
+		orderedList: { HTMLAttributes: { class: "node-orderedList" } },
+		blockquote: { HTMLAttributes: { class: "node-blockquote" } },
+		codeBlock: false,
+		code: { HTMLAttributes: {
+			class: "node-inlineCode",
+			spellcheck: "false"
+		} },
+		horizontalRule: false,
+		dropcursor: {
+			color: "#61a8f8",
+			class: "rounded-full animate-[fade-in_300ms_ease-in-out] !z-40",
+			width: 4
+		}
+	}),
+	CodeBlockPrism.configure({
+		defaultLanguage: "javascript",
+		HTMLAttributes: { class: "prism node-codeBlock" }
+	}),
+	Placeholder,
+	PreviewText,
+	Bold,
+	Sup,
+	Uppercase,
+	PreservedStyle,
+	Table,
+	TableRow,
+	TableCell,
+	TableHeader,
+	Body,
+	Div,
+	Button,
+	Section,
+	AlignmentAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"codeBlock",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn"
+	] }),
+	StyleAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"codeBlock",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"horizontalRule",
+		"footer",
+		"section",
+		"div",
+		"body",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn",
+		"link"
+	] }),
+	ClassAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"horizontalRule",
+		"footer",
+		"section",
+		"div",
+		"body",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn",
+		"link"
+	] }),
+	MaxNesting.configure({
+		maxDepth: 50,
+		nodeTypes: [
+			"section",
+			"bulletList",
+			"orderedList"
+		]
+	})
+];
+
+//#endregion
+//#region src/utils/set-text-alignment.ts
+function setTextAlignment(editor, alignment) {
+	const { from, to } = editor.state.selection;
+	const tr = editor.state.tr;
+	editor.state.doc.nodesBetween(from, to, (node, pos) => {
+		if (node.isTextblock) {
+			const prop = "align" in node.attrs ? "align" : "alignment";
+			tr.setNodeMarkup(pos, null, {
+				...node.attrs,
+				[prop]: alignment
+			});
+		}
+	});
+	editor.view.dispatch(tr);
+}
+
+//#endregion
+//#region src/ui/bubble-menu/context.tsx
+const BubbleMenuContext = react.createContext(null);
+function useBubbleMenuContext() {
+	const context = react.useContext(BubbleMenuContext);
+	if (!context) throw new Error("BubbleMenu compound components must be used within <BubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/bubble-menu/item.tsx
+function BubbleMenuItem({ name, isActive, onCommand, className, children,...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": name,
+		"aria-pressed": isActive,
+		className,
+		"data-re-bubble-menu-item": "",
+		"data-item": name,
+		...isActive ? { "data-active": "" } : {},
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: onCommand,
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-center.tsx
+function BubbleMenuAlignCenter({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
+		name: "align-center",
+		isActive: (0, __tiptap_react.useEditorState)({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "center" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "center"),
+		className,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignCenterIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-left.tsx
+function BubbleMenuAlignLeft({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
+		name: "align-left",
+		isActive: (0, __tiptap_react.useEditorState)({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "left" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "left"),
+		className,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignLeftIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-right.tsx
+function BubbleMenuAlignRight({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
+		name: "align-right",
+		isActive: (0, __tiptap_react.useEditorState)({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "right" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "right"),
+		className,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignRightIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/create-mark-bubble-item.tsx
+function createMarkBubbleItem(config) {
+	function MarkBubbleItem({ className, children }) {
+		const { editor } = useBubbleMenuContext();
+		const isActive = (0, __tiptap_react.useEditorState)({
+			editor,
+			selector: ({ editor: editor$1 }) => {
+				if (config.activeParams) return editor$1?.isActive(config.activeName, config.activeParams) ?? false;
+				return editor$1?.isActive(config.activeName) ?? false;
+			}
+		});
+		const handleCommand = () => {
+			const chain = editor.chain().focus();
+			const method = chain[config.command];
+			if (method) method.call(chain).run();
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
+			name: config.name,
+			isActive,
+			onCommand: handleCommand,
+			className,
+			children: children ?? config.icon
+		});
+	}
+	MarkBubbleItem.displayName = `BubbleMenu${config.name.charAt(0).toUpperCase() + config.name.slice(1)}`;
+	return MarkBubbleItem;
+}
+
+//#endregion
+//#region src/ui/bubble-menu/bold.tsx
+const BubbleMenuBold = createMarkBubbleItem({
+	name: "bold",
+	activeName: "bold",
+	command: "toggleBold",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BoldIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/code.tsx
+const BubbleMenuCode = createMarkBubbleItem({
+	name: "code",
+	activeName: "code",
+	command: "toggleCode",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CodeIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/group.tsx
+function BubbleMenuItemGroup({ className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
+		className,
+		"data-re-bubble-menu-group": "",
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/italic.tsx
+const BubbleMenuItalic = createMarkBubbleItem({
+	name: "italic",
+	activeName: "italic",
+	command: "toggleItalic",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ItalicIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/utils.ts
+const SAFE_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"tel:"
+]);
+/**
+* Basic URL validation and auto-prefixing.
+* Rejects dangerous schemes (javascript:, data:, vbscript:, etc.).
+* Returns the valid URL string or null.
+*/
+function getUrlFromString(str) {
+	if (str === "#") return str;
+	try {
+		const url = new URL(str);
+		if (SAFE_PROTOCOLS.has(url.protocol)) return str;
+		return null;
+	} catch {}
+	try {
+		if (str.includes(".") && !str.includes(" ")) return new URL(`https://${str}`).toString();
+	} catch {}
+	return null;
+}
+function setLinkHref(editor, href) {
+	if (href.length === 0) {
+		editor.chain().unsetLink().run();
+		return;
+	}
+	const { from, to } = editor.state.selection;
+	if (from === to) {
+		editor.chain().extendMarkRange("link").setLink({ href }).setTextSelection({
+			from,
+			to
+		}).run();
+		return;
+	}
+	editor.chain().setLink({ href }).run();
+}
+function focusEditor(editor) {
+	setTimeout(() => {
+		editor.commands.focus();
+	}, 0);
+}
+
+//#endregion
+//#region src/ui/bubble-menu/link-selector.tsx
+function BubbleMenuLinkSelector({ className, showToggle = true, validateUrl, onLinkApply, onLinkRemove, children, open: controlledOpen, onOpenChange }) {
+	const { editor } = useBubbleMenuContext();
+	const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const setIsOpen = react.useCallback((value) => {
+		if (!isControlled) setUncontrolledOpen(value);
+		onOpenChange?.(value);
+	}, [isControlled, onOpenChange]);
+	const editorState = (0, __tiptap_react.useEditorState)({
+		editor,
+		selector: ({ editor: editor$1 }) => ({
+			isLinkActive: editor$1?.isActive("link") ?? false,
+			hasLink: Boolean(editor$1?.getAttributes("link").href),
+			currentHref: editor$1?.getAttributes("link").href || ""
+		})
+	});
+	const setIsOpenRef = react.useRef(setIsOpen);
+	setIsOpenRef.current = setIsOpen;
+	react.useEffect(() => {
+		const subscription = editorEventBus.on("bubble-menu:add-link", () => {
+			setIsOpenRef.current(true);
+		});
+		return () => {
+			setIsOpenRef.current(false);
+			subscription.unsubscribe();
+		};
+	}, []);
+	if (!editorState) return null;
+	const handleOpenLink = () => {
+		setIsOpen(!isOpen);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-re-link-selector": "",
+		...isOpen ? { "data-open": "" } : {},
+		...editorState.hasLink ? { "data-has-link": "" } : {},
+		className,
+		children: [showToggle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-expanded": isOpen,
+			"aria-haspopup": "true",
+			"aria-label": "Add link",
+			"aria-pressed": editorState.isLinkActive && editorState.hasLink,
+			"data-re-link-selector-trigger": "",
+			onClick: handleOpenLink,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LinkIcon, {})
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkForm, {
+			editor,
+			currentHref: editorState.currentHref,
+			validateUrl,
+			onLinkApply,
+			onLinkRemove,
+			setIsOpen,
+			children
+		})]
+	});
+}
+function LinkForm({ editor, currentHref, validateUrl, onLinkApply, onLinkRemove, setIsOpen, children }) {
+	const inputRef = react.useRef(null);
+	const formRef = react.useRef(null);
+	const displayHref = currentHref === "#" ? "" : currentHref;
+	const [inputValue, setInputValue] = react.useState(displayHref);
+	react.useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, []);
+	react.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				if (editor.getAttributes("link").href === "#") editor.chain().unsetLink().run();
+				setIsOpen(false);
+			}
+		};
+		const handleClickOutside = (event) => {
+			if (formRef.current && !formRef.current.contains(event.target)) {
+				const form = formRef.current;
+				const submitEvent = new Event("submit", {
+					bubbles: true,
+					cancelable: true
+				});
+				form.dispatchEvent(submitEvent);
+				setIsOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [editor, setIsOpen]);
+	function handleSubmit(e) {
+		e.preventDefault();
+		const value = inputValue.trim();
+		if (value === "") {
+			setLinkHref(editor, "");
+			setIsOpen(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		const finalValue = (validateUrl ?? getUrlFromString)(value);
+		if (!finalValue) {
+			setLinkHref(editor, "");
+			setIsOpen(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		setLinkHref(editor, finalValue);
+		setIsOpen(false);
+		focusEditor(editor);
+		onLinkApply?.(finalValue);
+	}
+	function handleUnlink(e) {
+		e.stopPropagation();
+		setLinkHref(editor, "");
+		setIsOpen(false);
+		focusEditor(editor);
+		onLinkRemove?.();
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		ref: formRef,
+		"data-re-link-selector-form": "",
+		onMouseDown: (e) => e.stopPropagation(),
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => e.stopPropagation(),
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				"data-re-link-selector-input": "",
+				value: inputValue,
+				onFocus: (e) => e.stopPropagation(),
+				onChange: (e) => setInputValue(e.target.value),
+				placeholder: "Paste a link",
+				type: "text"
+			}),
+			children,
+			displayHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Remove link",
+				"data-re-link-selector-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnlinkIcon, {})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-selector-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/node-selector.tsx
+const NodeSelectorContext = react.createContext(null);
+function useNodeSelectorContext() {
+	const context = react.useContext(NodeSelectorContext);
+	if (!context) throw new Error("NodeSelector compound components must be used within <NodeSelector.Root>");
+	return context;
+}
+function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, className, children }) {
+	const { editor } = useBubbleMenuContext();
+	const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const setIsOpen = react.useCallback((value) => {
+		if (!isControlled) setUncontrolledOpen(value);
+		onOpenChange?.(value);
+	}, [isControlled, onOpenChange]);
+	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"),
+			isHeading1Active: editor$1?.isActive("heading", { level: 1 }) ?? false,
+			isHeading2Active: editor$1?.isActive("heading", { level: 2 }) ?? false,
+			isHeading3Active: editor$1?.isActive("heading", { level: 3 }) ?? false,
+			isBulletListActive: editor$1?.isActive("bulletList") ?? false,
+			isOrderedListActive: editor$1?.isActive("orderedList") ?? false,
+			isBlockquoteActive: editor$1?.isActive("blockquote") ?? false,
+			isCodeBlockActive: editor$1?.isActive("codeBlock") ?? false
+		})
+	});
+	const allItems = react.useMemo(() => [
+		{
+			name: "Text",
+			icon: lucide_react.TextIcon,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").run(),
+			isActive: editorState?.isParagraphActive ?? false
+		},
+		{
+			name: "Title",
+			icon: lucide_react.Heading1,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+			isActive: editorState?.isHeading1Active ?? false
+		},
+		{
+			name: "Subtitle",
+			icon: lucide_react.Heading2,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+			isActive: editorState?.isHeading2Active ?? false
+		},
+		{
+			name: "Heading",
+			icon: lucide_react.Heading3,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+			isActive: editorState?.isHeading3Active ?? false
+		},
+		{
+			name: "Bullet List",
+			icon: lucide_react.List,
+			command: () => editor.chain().focus().clearNodes().toggleBulletList().run(),
+			isActive: editorState?.isBulletListActive ?? false
+		},
+		{
+			name: "Numbered List",
+			icon: lucide_react.ListOrdered,
+			command: () => editor.chain().focus().clearNodes().toggleOrderedList().run(),
+			isActive: editorState?.isOrderedListActive ?? false
+		},
+		{
+			name: "Quote",
+			icon: lucide_react.TextQuote,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+			isActive: editorState?.isBlockquoteActive ?? false
+		},
+		{
+			name: "Code",
+			icon: lucide_react.Code,
+			command: () => editor.chain().focus().clearNodes().toggleCodeBlock().run(),
+			isActive: editorState?.isCodeBlockActive ?? false
+		}
+	], [editor, editorState]);
+	const items = react.useMemo(() => allItems.filter((item) => !omit.includes(item.name)), [allItems, omit]);
+	const activeItem = react.useMemo(() => items.find((item) => item.isActive) ?? { name: "Multiple" }, [items]);
+	const contextValue = react.useMemo(() => ({
+		items,
+		activeItem,
+		isOpen,
+		setIsOpen
+	}), [
+		items,
+		activeItem,
+		isOpen,
+		setIsOpen
+	]);
+	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, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-re-node-selector": "",
+				...isOpen ? { "data-open": "" } : {},
+				className,
+				children
+			})
+		})
+	});
+}
+function NodeSelectorTrigger({ className, children }) {
+	const { activeItem, isOpen, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_popover.Trigger, {
+		"data-re-node-selector-trigger": "",
+		className,
+		onClick: () => setIsOpen(!isOpen),
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: activeItem.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {})] })
+	});
+}
+function NodeSelectorContent({ className, align = "start", children }) {
+	const { items, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_popover.Content, {
+		align,
+		"data-re-node-selector-content": "",
+		className,
+		children: children ? children(items, () => setIsOpen(false)) : items.map((item) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"data-re-node-selector-item": "",
+				...item.isActive ? { "data-active": "" } : {},
+				onClick: () => {
+					item.command();
+					setIsOpen(false);
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.name }),
+					item.isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
+				]
+			}, item.name);
+		})
+	});
+}
+function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, onOpenChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NodeSelectorRoot, {
+		omit,
+		open,
+		onOpenChange,
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorTrigger, { children: triggerContent }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorContent, {})]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/root.tsx
+function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
+	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	if (!editor) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react_menus.BubbleMenu, {
+		editor,
+		"data-re-bubble-menu": "",
+		shouldShow: ({ editor: editor$1, view }) => {
+			for (const node of excludeNodes) if (editor$1.isActive(node)) return false;
+			if (view.dom.classList.contains("dragging")) return false;
+			return editor$1.view.state.selection.content().size > 0;
+		},
+		options: {
+			placement,
+			offset,
+			onHide
+		},
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuContext.Provider, {
+			value: { editor },
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/strike.tsx
+const BubbleMenuStrike = createMarkBubbleItem({
+	name: "strike",
+	activeName: "strike",
+	command: "toggleStrike",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.StrikethroughIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/underline.tsx
+const BubbleMenuUnderline = createMarkBubbleItem({
+	name: "underline",
+	activeName: "underline",
+	command: "toggleUnderline",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnderlineIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/uppercase.tsx
+const BubbleMenuUppercase = createMarkBubbleItem({
+	name: "uppercase",
+	activeName: "uppercase",
+	command: "toggleUppercase",
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CaseUpperIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/default.tsx
+function BubbleMenuDefault({ excludeItems = [], excludeNodes, placement, offset, onHide, className }) {
+	const [isNodeSelectorOpen, setIsNodeSelectorOpen] = react.useState(false);
+	const [isLinkSelectorOpen, setIsLinkSelectorOpen] = react.useState(false);
+	const has = (item) => !excludeItems.includes(item);
+	const handleNodeSelectorOpenChange = react.useCallback((open) => {
+		setIsNodeSelectorOpen(open);
+		if (open) setIsLinkSelectorOpen(false);
+	}, []);
+	const handleLinkSelectorOpenChange = react.useCallback((open) => {
+		setIsLinkSelectorOpen(open);
+		if (open) setIsNodeSelectorOpen(false);
+	}, []);
+	const handleHide = react.useCallback(() => {
+		setIsNodeSelectorOpen(false);
+		setIsLinkSelectorOpen(false);
+		onHide?.();
+	}, [onHide]);
+	const hasFormattingItems = has("bold") || has("italic") || has("underline") || has("strike") || has("code") || has("uppercase");
+	const hasAlignmentItems = has("align-left") || has("align-center") || has("align-right");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleMenuRoot, {
+		excludeNodes,
+		placement,
+		offset,
+		onHide: handleHide,
+		className,
+		children: [
+			has("node-selector") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuNodeSelector, {
+				open: isNodeSelectorOpen,
+				onOpenChange: handleNodeSelectorOpenChange
+			}),
+			has("link-selector") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuLinkSelector, {
+				open: isLinkSelectorOpen,
+				onOpenChange: handleLinkSelectorOpenChange
+			}),
+			hasFormattingItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleMenuItemGroup, { children: [
+				has("bold") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuBold, {}),
+				has("italic") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItalic, {}),
+				has("underline") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuUnderline, {}),
+				has("strike") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuStrike, {}),
+				has("code") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuCode, {}),
+				has("uppercase") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuUppercase, {})
+			] }),
+			hasAlignmentItems && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleMenuItemGroup, { children: [
+				has("align-left") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuAlignLeft, {}),
+				has("align-center") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuAlignCenter, {}),
+				has("align-right") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuAlignRight, {})
+			] })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/separator.tsx
+function BubbleMenuSeparator({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
+		className,
+		"data-re-bubble-menu-separator": ""
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/index.ts
+const BubbleMenu = {
+	Root: BubbleMenuRoot,
+	ItemGroup: BubbleMenuItemGroup,
+	Separator: BubbleMenuSeparator,
+	Item: BubbleMenuItem,
+	Bold: BubbleMenuBold,
+	Italic: BubbleMenuItalic,
+	Underline: BubbleMenuUnderline,
+	Strike: BubbleMenuStrike,
+	Code: BubbleMenuCode,
+	Uppercase: BubbleMenuUppercase,
+	AlignLeft: BubbleMenuAlignLeft,
+	AlignCenter: BubbleMenuAlignCenter,
+	AlignRight: BubbleMenuAlignRight,
+	NodeSelector: Object.assign(BubbleMenuNodeSelector, {
+		Root: NodeSelectorRoot,
+		Trigger: NodeSelectorTrigger,
+		Content: NodeSelectorContent
+	}),
+	LinkSelector: BubbleMenuLinkSelector,
+	Default: BubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/link-bubble-menu/context.tsx
+const LinkBubbleMenuContext = react.createContext(null);
+function useLinkBubbleMenuContext() {
+	const context = react.useContext(LinkBubbleMenuContext);
+	if (!context) throw new Error("LinkBubbleMenu compound components must be used within <LinkBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/edit-link.tsx
+function LinkBubbleMenuEditLink({ className, children, onClick,...rest }) {
+	const { setIsEditing } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-link-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/form.tsx
+function LinkBubbleMenuForm({ className, validateUrl, onLinkApply, onLinkRemove, children }) {
+	const { editor, linkHref, isEditing, setIsEditing } = useLinkBubbleMenuContext();
+	const inputRef = react.useRef(null);
+	const formRef = react.useRef(null);
+	const displayHref = linkHref === "#" ? "" : linkHref;
+	const [inputValue, setInputValue] = react.useState(displayHref);
+	react.useEffect(() => {
+		if (!isEditing) return;
+		const timeoutId = setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, [isEditing]);
+	react.useEffect(() => {
+		if (!isEditing) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") setIsEditing(false);
+		};
+		const handleClickOutside = (event) => {
+			if (formRef.current && !formRef.current.contains(event.target)) {
+				const form = formRef.current;
+				const submitEvent = new Event("submit", {
+					bubbles: true,
+					cancelable: true
+				});
+				form.dispatchEvent(submitEvent);
+				setIsEditing(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isEditing, setIsEditing]);
+	if (!isEditing) return null;
+	function handleSubmit(e) {
+		e.preventDefault();
+		const value = inputValue.trim();
+		if (value === "") {
+			setLinkHref(editor, "");
+			setIsEditing(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		const finalValue = (validateUrl ?? getUrlFromString)(value);
+		if (!finalValue) {
+			setLinkHref(editor, "");
+			setIsEditing(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		setLinkHref(editor, finalValue);
+		setIsEditing(false);
+		focusEditor(editor);
+		onLinkApply?.(finalValue);
+	}
+	function handleUnlink(e) {
+		e.stopPropagation();
+		setLinkHref(editor, "");
+		setIsEditing(false);
+		focusEditor(editor);
+		onLinkRemove?.();
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		ref: formRef,
+		"data-re-link-bm-form": "",
+		className,
+		onMouseDown: (e) => e.stopPropagation(),
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => e.stopPropagation(),
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				"data-re-link-bm-input": "",
+				value: inputValue,
+				onFocus: (e) => e.stopPropagation(),
+				onChange: (e) => setInputValue(e.target.value),
+				placeholder: "Paste a link",
+				type: "text"
+			}),
+			children,
+			displayHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Remove link",
+				"data-re-link-bm-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnlinkIcon, {})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-bm-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/open-link.tsx
+function LinkBubbleMenuOpenLink({ className, children,...rest }) {
+	const { linkHref } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...rest,
+		href: linkHref,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"aria-label": "Open link",
+		"data-re-link-bm-item": "",
+		"data-item": "open-link",
+		className,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/root.tsx
+function LinkBubbleMenuRoot({ onHide, placement = "bottom", offset = 8, className, children }) {
+	const { editor } = (0, __tiptap_react.useCurrentEditor)();
+	const [isEditing, setIsEditing] = react.useState(false);
+	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, {
+		editor,
+		"data-re-link-bm": "",
+		shouldShow: ({ editor: e }) => e.isActive("link") && e.view.state.selection.content().size === 0,
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				linkHref: linkHref ?? "",
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/toolbar.tsx
+function LinkBubbleMenuToolbar({ className, children }) {
+	const { isEditing } = useLinkBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-re-link-bm-toolbar": "",
+		className,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/unlink.tsx
+function LinkBubbleMenuUnlink({ className, children, onClick,...rest }) {
+	const { editor } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": "Remove link",
+		"data-re-link-bm-item": "",
+		"data-item": "unlink",
+		className,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: (e) => {
+			onClick?.(e);
+			editor.chain().focus().unsetLink().run();
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UnlinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/index.ts
+const LinkBubbleMenu = {
+	Root: LinkBubbleMenuRoot,
+	Toolbar: LinkBubbleMenuToolbar,
+	Form: LinkBubbleMenuForm,
+	EditLink: LinkBubbleMenuEditLink,
+	Unlink: LinkBubbleMenuUnlink,
+	OpenLink: LinkBubbleMenuOpenLink
+};
+
+//#endregion
+exports.AlignmentAttribute = AlignmentAttribute;
 exports.Body = Body;
+exports.Bold = Bold;
+exports.BubbleMenu = BubbleMenu;
+exports.BubbleMenuAlignCenter = BubbleMenuAlignCenter;
+exports.BubbleMenuAlignLeft = BubbleMenuAlignLeft;
+exports.BubbleMenuAlignRight = BubbleMenuAlignRight;
+exports.BubbleMenuBold = BubbleMenuBold;
+exports.BubbleMenuCode = BubbleMenuCode;
+exports.BubbleMenuDefault = BubbleMenuDefault;
+exports.BubbleMenuItalic = BubbleMenuItalic;
+exports.BubbleMenuItem = BubbleMenuItem;
+exports.BubbleMenuItemGroup = BubbleMenuItemGroup;
+exports.BubbleMenuLinkSelector = BubbleMenuLinkSelector;
+exports.BubbleMenuNodeSelector = BubbleMenuNodeSelector;
+exports.BubbleMenuRoot = BubbleMenuRoot;
+exports.BubbleMenuSeparator = BubbleMenuSeparator;
+exports.BubbleMenuStrike = BubbleMenuStrike;
+exports.BubbleMenuUnderline = BubbleMenuUnderline;
+exports.BubbleMenuUppercase = BubbleMenuUppercase;
 exports.Button = Button;
+exports.COLUMN_PARENT_TYPES = COLUMN_PARENT_TYPES;
+exports.ClassAttribute = ClassAttribute;
 exports.CodeBlockPrism = CodeBlockPrism;
+exports.ColumnsColumn = ColumnsColumn;
 exports.Div = Div;
 exports.EmailNode = EmailNode;
-exports.Section = Section;
+exports.FourColumns = FourColumns;
+exports.LinkBubbleMenu = LinkBubbleMenu;
+exports.LinkBubbleMenuEditLink = LinkBubbleMenuEditLink;
+exports.LinkBubbleMenuForm = LinkBubbleMenuForm;
+exports.LinkBubbleMenuOpenLink = LinkBubbleMenuOpenLink;
+exports.LinkBubbleMenuRoot = LinkBubbleMenuRoot;
+exports.LinkBubbleMenuToolbar = LinkBubbleMenuToolbar;
+exports.LinkBubbleMenuUnlink = LinkBubbleMenuUnlink;
+exports.MAX_COLUMNS_DEPTH = MAX_COLUMNS_DEPTH;
+exports.MaxNesting = MaxNesting;
+exports.NodeSelectorContent = NodeSelectorContent;
+exports.NodeSelectorRoot = NodeSelectorRoot;
+exports.NodeSelectorTrigger = NodeSelectorTrigger;
+exports.Placeholder = Placeholder;
+exports.PreservedStyle = PreservedStyle;
+exports.PreviewText = PreviewText;
+exports.Section = Section;
+exports.StyleAttribute = StyleAttribute;
+exports.Sup = Sup;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.ThreeColumns = ThreeColumns;
+exports.TwoColumns = TwoColumns;
+exports.Uppercase = Uppercase;
+exports.coreExtensions = coreExtensions;
+exports.editorEventBus = editorEventBus;
+exports.getColumnsDepth = getColumnsDepth;
+exports.processStylesForUnlink = processStylesForUnlink;
+exports.setTextAlignment = setTextAlignment;
+exports.useLinkBubbleMenuContext = useLinkBubbleMenuContext;