@react-email/editor 0.0.0-experimental.2 → 0.0.0-experimental.20

package/dist/index.mjs

@@ -1,176 +1,97 @@
-import { Extension, Mark, Node, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { jsx } from "react/jsx-runtime";
 import * as ReactEmailComponents from "@react-email/components";
-import { Button as Button$1, CodeBlock, Column, Row, Section as Section$1 } from "@react-email/components";
+import { Body as Body$1, Button as Button$1, CodeBlock, Column, Head, Heading as Heading$1, Hr, Html, Link as Link$1, Preview, Row, Section as Section$1, pretty, render, toPlainText } from "@react-email/components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Extension, InputRule, Mark, Node as Node$1, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+import { UndoRedo } from "@tiptap/extensions";
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, ReactRenderer, useCurrentEditor, useEditor as useEditor$1, useEditorState } from "@tiptap/react";
+import * as React from "react";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import TipTapStarterKit from "@tiptap/starter-kit";
+import BlockquoteBase from "@tiptap/extension-blockquote";
+import BulletListBase from "@tiptap/extension-bullet-list";
+import CodeBase from "@tiptap/extension-code";
 import CodeBlock$1 from "@tiptap/extension-code-block";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { fromHtml } from "hast-util-from-html";
 import Prism from "prismjs";
-import Placeholder from "@tiptap/extension-placeholder";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import HardBreakBase from "@tiptap/extension-hard-break";
+import { Heading as Heading$2 } from "@tiptap/extension-heading";
+import ItalicBase from "@tiptap/extension-italic";
+import TiptapLink from "@tiptap/extension-link";
+import ListItemBase from "@tiptap/extension-list-item";
+import OrderedListBase from "@tiptap/extension-ordered-list";
+import ParagraphBase from "@tiptap/extension-paragraph";
+import TipTapPlaceholder from "@tiptap/extension-placeholder";
+import StrikeBase from "@tiptap/extension-strike";
+import { generateJSON } from "@tiptap/html";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CaseUpperIcon, Check, ChevronDown, Code as Code$1, CodeIcon, Columns2, Columns3, Columns4, ExternalLinkIcon, Heading1, Heading2, Heading3, ItalicIcon, LinkIcon, List, ListOrdered, MousePointer, PencilIcon, Rows2, SplitSquareVertical, SquareCode, StrikethroughIcon, Text, TextIcon, TextQuote, UnderlineIcon, UnlinkIcon } from "lucide-react";
+import * as Popover from "@radix-ui/react-popover";
+import { BubbleMenu as BubbleMenu$1 } from "@tiptap/react/menus";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
 
-//#region src/core/email-node.ts
-var EmailNode = class EmailNode extends Node {
-	constructor(config) {
-		super(config);
+//#region src/core/event-bus.ts
+const EVENT_PREFIX = "@react-email/editor:";
+var EditorEventBus = class {
+	prefixEventName(eventName) {
+		return `${EVENT_PREFIX}${String(eventName)}`;
 	}
-	/**
-	* Create a new Node instance
-	* @param config - Node configuration object or a function that returns a configuration object
-	*/
-	static create(config) {
-		return new EmailNode(typeof config === "function" ? config() : config);
+	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);
 	}
-	static from(node, renderToReactEmail) {
-		const customNode = EmailNode.create({});
-		Object.assign(customNode, { ...node });
-		customNode.config = {
-			...node.config,
-			renderToReactEmail
+	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
+				});
+			});
 		};
-		return customNode;
-	}
-	configure(options) {
-		return super.configure(options);
-	}
-	extend(extendedConfig) {
-		const resolvedConfig = typeof extendedConfig === "function" ? extendedConfig() : extendedConfig;
-		return super.extend(resolvedConfig);
+		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 = 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")
+//#region src/core/is-document-visually-empty.ts
+function isDocumentVisuallyEmpty(doc) {
+	let nonGlobalNodeCount = 0;
+	let firstNonGlobalNode = null;
+	for (let index = 0; index < doc.childCount; index += 1) {
+		const node = doc.child(index);
+		if (node.type.name === "globalContent") continue;
+		nonGlobalNodeCount += 1;
+		if (firstNonGlobalNode === null) firstNonGlobalNode = {
+			type: node.type,
+			textContent: node.textContent,
+			childCount: node.content.childCount
 		};
 	}
-});
-
-//#endregion
-//#region src/utils/attribute-helpers.ts
-/**
-* Creates TipTap attribute definitions for a list of HTML attributes.
-* Each attribute will have the same pattern:
-* - default: null
-* - parseHTML: extracts the attribute from the element
-* - renderHTML: conditionally renders the attribute if it has a value
-*
-* @param attributeNames - Array of HTML attribute names to create definitions for
-* @returns Object with TipTap attribute definitions
-*
-* @example
-* const attrs = createStandardAttributes(['class', 'id', 'title']);
-* // Returns:
-* // {
-* //   class: {
-* //     default: null,
-* //     parseHTML: (element) => element.getAttribute('class'),
-* //     renderHTML: (attributes) => attributes.class ? { class: attributes.class } : {}
-* //   },
-* //   ...
-* // }
-*/
-function createStandardAttributes(attributeNames) {
-	return Object.fromEntries(attributeNames.map((attr) => [attr, {
-		default: null,
-		parseHTML: (element) => element.getAttribute(attr),
-		renderHTML: (attributes) => {
-			if (!attributes[attr]) return {};
-			return { [attr]: attributes[attr] };
-		}
-	}]));
+	if (nonGlobalNodeCount === 0) return true;
+	if (nonGlobalNodeCount !== 1) return false;
+	return firstNonGlobalNode?.type.name === "paragraph" && firstNonGlobalNode.textContent.trim().length === 0 && firstNonGlobalNode.childCount === 0;
 }
-/**
-* Common HTML attributes used across multiple extensions.
-* These preserve attributes during HTML import and editing for better
-* fidelity when importing existing email templates.
-*/
-const COMMON_HTML_ATTRIBUTES = [
-	"id",
-	"class",
-	"title",
-	"lang",
-	"dir",
-	"data-id"
-];
-/**
-* Layout-specific HTML attributes used for positioning and sizing.
-*/
-const LAYOUT_ATTRIBUTES = [
-	"align",
-	"width",
-	"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 = [
-	"valign",
-	"bgcolor",
-	"colspan",
-	"rowspan"
-];
-/**
-* Table header cell-specific HTML attributes.
-* These are additional attributes that only apply to <th> elements.
-*/
-const TABLE_HEADER_ATTRIBUTES = [...TABLE_CELL_ATTRIBUTES, "scope"];
 
 //#endregion
 //#region src/utils/styles.ts
@@ -342,483 +263,355 @@ function resolveConflictingStyles(resetStyles, inlineStyles) {
 }
 
 //#endregion
-//#region src/extensions/body.tsx
-const Body = EmailNode.create({
-	name: "body",
-	group: "block",
-	content: "block+",
-	defining: true,
-	isolating: true,
-	addAttributes() {
-		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
-	},
-	parseHTML() {
-		return [{
-			tag: "body",
-			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 [
-			"div",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx("div", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
+//#region src/core/serializer/default-base-template.tsx
+function DefaultBaseTemplate({ children, previewText }) {
+	return /* @__PURE__ */ jsxs(Html, { children: [
+		/* @__PURE__ */ jsxs(Head, { children: [
+			/* @__PURE__ */ jsx("meta", {
+				content: "width=device-width",
+				name: "viewport"
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				content: "IE=edge",
+				httpEquiv: "X-UA-Compatible"
+			}),
+			/* @__PURE__ */ jsx("meta", { name: "x-apple-disable-message-reformatting" }),
+			/* @__PURE__ */ jsx("meta", {
+				content: "telephone=no,address=no,email=no,date=no,url=no",
+				name: "format-detection"
+			})
+		] }),
+		previewText && previewText !== "" && /* @__PURE__ */ jsx(Preview, { children: previewText }),
+		/* @__PURE__ */ jsx(Body$1, { children: /* @__PURE__ */ jsx(Section$1, {
+			width: "100%",
+			align: "center",
+			children: /* @__PURE__ */ jsx(Section$1, {
+				style: { width: "100%" },
+				children
+			})
+		}) })
+	] });
+}
+
+//#endregion
+//#region src/core/serializer/email-mark.ts
+var EmailMark = class EmailMark extends Mark {
+	constructor(config) {
+		super(config);
 	}
-});
+	/**
+	* Create a new Mark instance
+	* @param config - Mark configuration object or a function that returns a configuration object
+	*/
+	static create(config) {
+		return new EmailMark(typeof config === "function" ? config() : config);
+	}
+	static from(mark, renderToReactEmail) {
+		const customMark = EmailMark.create({});
+		Object.assign(customMark, { ...mark });
+		customMark.config = {
+			...mark.config,
+			renderToReactEmail
+		};
+		return customMark;
+	}
+	configure(options) {
+		return super.configure(options);
+	}
+	extend(extendedConfig) {
+		const resolvedConfig = typeof extendedConfig === "function" ? extendedConfig() : extendedConfig;
+		return super.extend(resolvedConfig);
+	}
+};
 
 //#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 = 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",
-			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()
+//#region src/core/serializer/email-node.ts
+var EmailNode = class EmailNode extends Node$1 {
+	constructor(config) {
+		super(config);
+	}
+	/**
+	* Create a new Node instance
+	* @param config - Node configuration object or a function that returns a configuration object
+	*/
+	static create(config) {
+		return new EmailNode(typeof config === "function" ? config() : config);
+	}
+	static from(node, renderToReactEmail) {
+		const customNode = EmailNode.create({});
+		Object.assign(customNode, { ...node });
+		customNode.config = {
+			...node.config,
+			renderToReactEmail
 		};
-	},
-	addInputRules() {
-		return [markInputRule({
-			find: starInputRegex,
-			type: this.type
-		}), markInputRule({
-			find: underscoreInputRegex,
-			type: this.type
-		})];
-	},
-	addPasteRules() {
-		return [markPasteRule({
-			find: starPasteRegex,
-			type: this.type
-		}), markPasteRule({
-			find: underscorePasteRegex,
-			type: this.type
-		})];
+		return customNode;
 	}
-});
+	configure(options) {
+		return super.configure(options);
+	}
+	extend(extendedConfig) {
+		const resolvedConfig = typeof extendedConfig === "function" ? extendedConfig() : extendedConfig;
+		return super.extend(resolvedConfig);
+	}
+};
 
 //#endregion
-//#region src/extensions/button.tsx
-const Button = EmailNode.create({
-	name: "button",
-	group: "block",
-	content: "inline*",
-	defining: true,
-	draggable: true,
-	marks: "bold",
-	addAttributes() {
-		return {
-			class: { default: "button" },
-			href: { default: "#" },
-			alignment: { default: "left" }
-		};
-	},
-	parseHTML() {
-		return [{
-			tag: "a[data-id=\"react-email-button\"]",
-			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;
+//#region src/core/serializer/compose-react-email.tsx
+const MARK_ORDER = {
+	preservedStyle: 0,
+	italic: 1,
+	strike: 2,
+	underline: 3,
+	link: 4,
+	bold: 5,
+	code: 6
+};
+const NODES_WITH_INCREMENTED_CHILD_DEPTH = new Set(["bulletList", "orderedList"]);
+function getOrderedMarks(marks) {
+	if (!marks) return [];
+	return [...marks].sort((a, b) => (MARK_ORDER[a.type] ?? Number.MAX_SAFE_INTEGER) - (MARK_ORDER[b.type] ?? Number.MAX_SAFE_INTEGER));
+}
+const composeReactEmail = async ({ editor, preview }) => {
+	const data = editor.getJSON();
+	const extensions = editor.extensionManager.extensions;
+	const serializerPlugin = extensions.map((ext) => ext.options?.serializerPlugin).filter((p) => Boolean(p)).at(-1);
+	const emailNodeComponentRegistry = Object.fromEntries(extensions.filter((ext) => ext instanceof EmailNode).map((extension) => [extension.name, extension.config.renderToReactEmail]));
+	const emailMarkComponentRegistry = Object.fromEntries(extensions.filter((ext) => ext instanceof EmailMark).map((extension) => [extension.name, extension.config.renderToReactEmail]));
+	function renderMark(mark, node, children, depth) {
+		const markStyle = serializerPlugin?.getNodeStyles({
+			type: mark.type,
+			attrs: mark.attrs ?? {}
+		}, depth, editor) ?? {};
+		const markRenderer = emailMarkComponentRegistry[mark.type];
+		if (markRenderer) return markRenderer({
+			mark,
+			node,
+			style: markStyle,
+			children
+		});
+		return children;
+	}
+	function parseContent(content, depth = 0) {
+		if (!content) return;
+		return content.map((node, index) => {
+			const style = serializerPlugin?.getNodeStyles(node, depth, editor) ?? {};
+			const inlineStyles = inlineCssToJs(node.attrs?.style);
+			if (node.type && emailNodeComponentRegistry[node.type]) {
+				const Component = emailNodeComponentRegistry[node.type];
+				const childDepth = NODES_WITH_INCREMENTED_CHILD_DEPTH.has(node.type) ? depth + 1 : depth;
+				return /* @__PURE__ */ jsx(Component, {
+					node: node.type === "table" && inlineStyles.width && !node.attrs?.width ? {
+						...node,
+						attrs: {
+							...node.attrs,
+							width: inlineStyles.width
+						}
+					} : node,
+					style,
+					children: parseContent(node.content, childDepth)
+				}, index);
 			}
-		}];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"div",
-			mergeAttributes({ class: `align-${HTMLAttributes?.alignment}` }),
-			[
-				"a",
-				mergeAttributes({
-					class: `node-button ${HTMLAttributes?.class}`,
-					style: HTMLAttributes?.style,
-					"data-id": "react-email-button",
-					"data-href": HTMLAttributes?.href
-				}),
-				0
-			]
-		];
-	},
-	addCommands() {
-		return {
-			updateButton: (attributes) => ({ commands }) => {
-				return commands.updateAttributes("button", attributes);
-			},
-			setButton: () => ({ commands }) => {
-				return commands.insertContent({
-					type: "button",
-					content: [{
-						type: "text",
-						text: "Button"
-					}]
-				});
+			switch (node.type) {
+				case "text": {
+					let wrappedText = node.text;
+					getOrderedMarks(node.marks).forEach((mark) => {
+						wrappedText = renderMark(mark, node, wrappedText, depth);
+					});
+					const textAttributes = node.marks?.find((mark) => mark.type === "textStyle")?.attrs;
+					return /* @__PURE__ */ jsx("span", {
+						style: {
+							...textAttributes,
+							...style
+						},
+						children: wrappedText
+					}, index);
+				}
+				default: return null;
 			}
-		};
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Column, {
-			align: node.attrs?.align || node.attrs?.alignment,
-			children: /* @__PURE__ */ jsx(Button$1, {
-				className: node.attrs?.class || void 0,
-				href: node.attrs?.href,
-				style: {
-					...styles.reset,
-					...styles.button,
-					...inlineStyles
-				},
-				children
-			})
-		}) });
+		});
 	}
-});
+	const unformattedHtml = await render(/* @__PURE__ */ jsx(serializerPlugin?.BaseTemplate ?? DefaultBaseTemplate, {
+		previewText: preview,
+		editor,
+		children: parseContent(data.content)
+	}));
+	const [prettyHtml, text] = await Promise.all([pretty(unformattedHtml), toPlainText(unformattedHtml)]);
+	return {
+		html: prettyHtml,
+		text
+	};
+};
 
 //#endregion
-//#region src/extensions/class-attribute.tsx
-const ClassAttribute = Extension.create({
-	name: "classAttribute",
+//#region src/extensions/alignment-attribute.tsx
+const AlignmentAttribute = Extension.create({
+	name: "alignmentAttribute",
 	addOptions() {
 		return {
 			types: [],
-			class: []
+			alignments: [
+				"left",
+				"center",
+				"right",
+				"justify"
+			]
 		};
 	},
 	addGlobalAttributes() {
 		return [{
 			types: this.options.types,
-			attributes: { class: {
-				default: "",
-				parseHTML: (element) => element.className || "",
+			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) => {
-					return attributes.class ? { class: attributes.class } : {};
+					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 {
-			unsetClass: () => ({ commands }) => {
-				return this.options.types.every((type) => commands.resetAttributes(type, "class"));
+			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;
 			},
-			setClass: (classList) => ({ commands }) => {
-				return this.options.types.every((type) => commands.updateAttributes(type, { class: classList }));
-			}
+			"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")
 		};
-	},
-	addKeyboardShortcuts() {
-		return { Enter: ({ editor }) => {
-			requestAnimationFrame(() => {
-				editor.commands.resetAttributes("paragraph", "class");
-			});
-			return false;
-		} };
 	}
 });
 
 //#endregion
-//#region src/utils/prism-utils.ts
-const publicURL = "/styles/prism";
-function loadPrismTheme(theme) {
-	const link = document.createElement("link");
-	link.rel = "stylesheet";
-	link.href = `${publicURL}/prism-${theme}.css`;
-	link.setAttribute("data-prism-theme", "");
-	document.head.appendChild(link);
-}
-function removePrismTheme() {
-	const existingTheme = document.querySelectorAll("link[rel=\"stylesheet\"][data-prism-theme]");
-	if (existingTheme.length > 0) existingTheme.forEach((cssLinkTag) => {
-		cssLinkTag.remove();
-	});
-}
-function hasPrismThemeLoaded(theme) {
-	return !!document.querySelector(`link[rel="stylesheet"][data-prism-theme][href="${publicURL}/prism-${theme}.css"]`);
+//#region src/utils/get-text-alignment.ts
+function getTextAlignment(alignment) {
+	switch (alignment) {
+		case "left": return { textAlign: "left" };
+		case "center": return { textAlign: "center" };
+		case "right": return { textAlign: "right" };
+		default: return {};
+	}
 }
 
 //#endregion
-//#region src/extensions/prism-plugin.ts
-const PRISM_LANGUAGE_LOADED_META = "prismLanguageLoaded";
-function parseNodes(nodes, className = []) {
-	return nodes.flatMap((node) => {
-		const classes = [...className, ...node.properties ? node.properties.className : []];
-		if (node.children) return parseNodes(node.children, classes);
-		return {
-			text: node.value ?? "",
-			classes
-		};
-	});
-}
-function getHighlightNodes(html) {
-	return fromHtml(html, { fragment: true }).children;
-}
-function registeredLang(aliasOrLanguage) {
-	const allSupportLang = Object.keys(Prism.languages).filter((id) => typeof Prism.languages[id] === "object");
-	return Boolean(allSupportLang.find((x) => x === aliasOrLanguage));
-}
-function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
-	const decorations = [];
-	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;
-		let html = "";
-		try {
-			if (!registeredLang(language) && !loadingLanguages.has(language)) {
-				loadingLanguages.add(language);
-				import(`prismjs/components/prism-${language}`).then(() => {
-					loadingLanguages.delete(language);
-					onLanguageLoaded(language);
-				}).catch(() => {
-					loadingLanguages.delete(language);
-				});
-			}
-			if (!hasPrismThemeLoaded(theme)) loadPrismTheme(theme);
-			html = Prism.highlight(block.node.textContent, Prism.languages[language], language);
-		} catch {
-			html = Prism.highlight(block.node.textContent, Prism.languages.javascript, "js");
-		}
-		parseNodes(getHighlightNodes(html)).forEach((node) => {
-			const to = from + node.text.length;
-			if (node.classes.length) {
-				const decoration = Decoration.inline(from, to, { class: node.classes.join(" ") });
-				decorations.push(decoration);
-			}
-			from = to;
-		});
-	});
-	return DecorationSet.create(doc, decorations);
-}
-function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
-	if (!defaultLanguage) throw Error("You must specify the defaultLanguage parameter");
-	const loadingLanguages = /* @__PURE__ */ new Set();
-	let pluginView = null;
-	const onLanguageLoaded = (language) => {
-		if (pluginView) pluginView.dispatch(pluginView.state.tr.setMeta(PRISM_LANGUAGE_LOADED_META, language));
-	};
-	const prismjsPlugin = new Plugin({
-		key: new PluginKey("prism"),
-		view(view) {
-			pluginView = view;
-			return { destroy() {
-				pluginView = null;
-			} };
-		},
-		state: {
-			init: (_, { doc }) => {
-				return getDecorations({
-					doc,
-					name,
-					defaultLanguage,
-					defaultTheme,
-					loadingLanguages,
-					onLanguageLoaded
-				});
-			},
-			apply: (transaction, decorationSet, oldState, newState) => {
-				const oldNodeName = oldState.selection.$head.parent.type.name;
-				const newNodeName = newState.selection.$head.parent.type.name;
-				const oldNodes = findChildren(oldState.doc, (node) => node.type.name === name);
-				const newNodes = 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) => {
-						return node.pos >= rangeStep.from && node.pos + node.node.nodeSize <= rangeStep.to;
-					});
-				}))) return getDecorations({
-					doc: transaction.doc,
-					name,
-					defaultLanguage,
-					defaultTheme,
-					loadingLanguages,
-					onLanguageLoaded
-				});
-				return decorationSet.map(transaction.mapping, transaction.doc);
-			}
-		},
-		props: { decorations(state) {
-			return prismjsPlugin.getState(state);
-		} },
-		destroy() {
-			pluginView = null;
-			removePrismTheme();
-		}
-	});
-	return prismjsPlugin;
-}
+//#region src/extensions/blockquote.tsx
+const Blockquote = EmailNode.from(BlockquoteBase, ({ children, node, style }) => /* @__PURE__ */ jsx("blockquote", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style),
+		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+	},
+	children
+}));
 
 //#endregion
-//#region src/extensions/code-block.tsx
-const CodeBlockPrism = EmailNode.from(CodeBlock$1.extend({
-	addOptions() {
-		return {
-			languageClassPrefix: "language-",
-			exitOnTripleEnter: false,
-			exitOnArrowDown: false,
-			enableTabIndentation: true,
-			tabSize: 2,
-			defaultLanguage: "javascript",
-			defaultTheme: "default",
-			HTMLAttributes: {}
-		};
-	},
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			language: {
-				default: this.options.defaultLanguage,
-				parseHTML: (element) => {
-					if (!element) return null;
-					const { languageClassPrefix } = this.options;
-					if (!languageClassPrefix) return null;
-					const language = [...element.firstElementChild?.classList || []].filter((className) => className.startsWith(languageClassPrefix || "")).map((className) => className.replace(languageClassPrefix, ""))[0];
-					if (!language) return null;
-					return language;
-				},
-				rendered: false
-			},
-			theme: {
-				default: this.options.defaultTheme,
-				rendered: false
-			}
-		};
-	},
-	renderHTML({ node, HTMLAttributes }) {
-		return [
-			"pre",
-			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" },
-				0
-			]
-		];
-	},
-	addProseMirrorPlugins() {
-		return [...this.parent?.() || [], PrismPlugin({
-			name: this.name,
-			defaultLanguage: this.options.defaultLanguage,
-			defaultTheme: this.options.defaultTheme
-		})];
-	}
-}), ({ node, styles }) => {
-	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
-	const userTheme = ReactEmailComponents[node.attrs?.theme];
-	const theme = userTheme ? {
-		...userTheme,
-		base: {
-			...userTheme.base,
-			borderRadius: "0.125rem",
-			padding: "0.75rem 1rem"
-		}
-	} : { base: {
-		color: "#1e293b",
-		background: "#f1f5f9",
-		lineHeight: "1.5",
-		fontFamily: "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace",
-		padding: "0.75rem 1rem",
-		borderRadius: "0.125rem"
-	} };
-	return /* @__PURE__ */ jsx(CodeBlock, {
-		code: node.content?.[0]?.text ?? "",
-		language,
-		theme,
-		style: {
-			width: "auto",
-			...styles.codeBlock
+//#region src/utils/attribute-helpers.ts
+/**
+* Creates TipTap attribute definitions for a list of HTML attributes.
+* Each attribute will have the same pattern:
+* - default: null
+* - parseHTML: extracts the attribute from the element
+* - renderHTML: conditionally renders the attribute if it has a value
+*
+* @param attributeNames - Array of HTML attribute names to create definitions for
+* @returns Object with TipTap attribute definitions
+*
+* @example
+* const attrs = createStandardAttributes(['class', 'id', 'title']);
+* // Returns:
+* // {
+* //   class: {
+* //     default: null,
+* //     parseHTML: (element) => element.getAttribute('class'),
+* //     renderHTML: (attributes) => attributes.class ? { class: attributes.class } : {}
+* //   },
+* //   ...
+* // }
+*/
+function createStandardAttributes(attributeNames) {
+	return Object.fromEntries(attributeNames.map((attr) => [attr, {
+		default: null,
+		parseHTML: (element) => element.getAttribute(attr),
+		renderHTML: (attributes) => {
+			if (!attributes[attr]) return {};
+			return { [attr]: attributes[attr] };
 		}
-	});
-});
+	}]));
+}
+/**
+* Common HTML attributes used across multiple extensions.
+* These preserve attributes during HTML import and editing for better
+* fidelity when importing existing email templates.
+*/
+const COMMON_HTML_ATTRIBUTES = [
+	"id",
+	"class",
+	"title",
+	"lang",
+	"dir",
+	"data-id"
+];
+/**
+* Layout-specific HTML attributes used for positioning and sizing.
+*/
+const LAYOUT_ATTRIBUTES = [
+	"align",
+	"width",
+	"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 = [
+	"valign",
+	"bgcolor",
+	"colspan",
+	"rowspan"
+];
+/**
+* Table header cell-specific HTML attributes.
+* These are additional attributes that only apply to <th> elements.
+*/
+const TABLE_HEADER_ATTRIBUTES = [...TABLE_CELL_ATTRIBUTES, "scope"];
 
 //#endregion
-//#region src/extensions/div.tsx
-const Div = EmailNode.create({
-	name: "div",
+//#region src/extensions/body.tsx
+const Body = EmailNode.create({
+	name: "body",
 	group: "block",
 	content: "block+",
 	defining: true,
 	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+	},
 	parseHTML() {
 		return [{
-			tag: "div:not([data-type])",
+			tag: "body",
 			getAttrs: (node) => {
 				if (typeof node === "string") return false;
 				const element = node;
@@ -837,15 +630,12 @@ const Div = EmailNode.create({
 			0
 		];
 	},
-	addAttributes() {
-		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
-	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ jsx("div", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -854,269 +644,223 @@ const Div = EmailNode.create({
 });
 
 //#endregion
-//#region src/extensions/max-nesting.ts
-const MaxNesting = Extension.create({
-	name: "maxNesting",
+//#region src/extensions/bold.tsx
+/**
+* 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 = EmailMark.create({
+	name: "bold",
 	addOptions() {
-		return {
-			maxDepth: 3,
-			nodeTypes: void 0
-		};
+		return { HTMLAttributes: {} };
 	},
-	addProseMirrorPlugins() {
-		const { maxDepth, nodeTypes } = this.options;
-		if (typeof maxDepth !== "number" || maxDepth < 1) throw new Error("maxDepth must be a positive number");
-		return [new Plugin({
-			key: new 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;
+	parseHTML() {
+		return [
+			{ tag: "strong" },
+			{
+				tag: "b",
+				getAttrs: (node) => node.style.fontWeight !== "normal" && null
 			},
-			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;
+			{
+				style: "font-weight=400",
+				clearMark: (mark) => mark.type.name === this.name
+			}
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"strong",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("strong", {
+			style,
+			children
+		});
+	},
+	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 [markInputRule({
+			find: starInputRegex,
+			type: this.type
+		}), markInputRule({
+			find: underscoreInputRegex,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [markPasteRule({
+			find: starPasteRegex,
+			type: this.type
+		}), markPasteRule({
+			find: underscorePasteRegex,
+			type: this.type
 		})];
 	}
 });
 
 //#endregion
-//#region src/extensions/placeholder.ts
-const createPlaceholderExtension = (options) => {
-	return Placeholder.configure({
-		placeholder: ({ node }) => {
-			if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
-			return "Press '/' for commands";
-		},
-		includeChildren: true,
-		...options
-	});
-};
-const placeholder = createPlaceholderExtension();
+//#region src/extensions/bullet-list.tsx
+const BulletList = EmailNode.from(BulletListBase, ({ children, node, style }) => /* @__PURE__ */ jsx("ul", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
 
 //#endregion
-//#region src/extensions/preserved-style.ts
-const PreservedStyle = Mark.create({
-	name: "preservedStyle",
+//#region src/extensions/button.tsx
+const Button = EmailNode.create({
+	name: "button",
+	group: "block",
+	content: "inline*",
+	defining: true,
+	draggable: true,
+	marks: "bold",
 	addAttributes() {
-		return { style: {
-			default: null,
-			parseHTML: (element) => element.getAttribute("style"),
-			renderHTML: (attributes) => {
-				if (!attributes.style) return {};
-				return { style: attributes.style };
-			}
-		} };
+		return {
+			class: { default: "button" },
+			href: { default: "#" },
+			alignment: { default: "left" }
+		};
 	},
 	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;
+			tag: "a[data-id=\"react-email-button\"]",
+			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 [
-			"span",
-			mergeAttributes(HTMLAttributes),
-			0
+			"div",
+			mergeAttributes({ class: `align-${HTMLAttributes?.alignment}` }),
+			[
+				"a",
+				mergeAttributes({
+					class: `node-button ${HTMLAttributes?.class}`,
+					style: HTMLAttributes?.style,
+					"data-id": "react-email-button",
+					"data-href": HTMLAttributes?.href
+				}),
+				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/utils/get-text-alignment.ts
-function getTextAlignment(alignment) {
-	switch (alignment) {
-		case "left": return { textAlign: "left" };
-		case "center": return { textAlign: "center" };
-		case "right": return { textAlign: "right" };
-		default: return {};
-	}
-}
-
-//#endregion
-//#region src/extensions/section.tsx
-const Section = EmailNode.create({
-	name: "section",
-	group: "block",
-	content: "block+",
-	isolating: true,
-	defining: true,
-	parseHTML() {
-		return [{ tag: "section[data-type=\"section\"]" }];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"section",
-			mergeAttributes({
-				"data-type": "section",
-				class: "node-section"
-			}, HTMLAttributes),
-			0
-		];
-	},
-	addCommands() {
-		return { insertSection: () => ({ commands }) => {
-			return commands.insertContent({
-				type: this.name,
-				content: [{
-					type: "paragraph",
-					content: []
-				}]
-			});
-		} };
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		const textAlign = node.attrs?.align || node.attrs?.alignment;
-		return /* @__PURE__ */ jsx(Section$1, {
-			className: node.attrs?.class || void 0,
-			align: textAlign,
-			style: {
-				...styles.section,
-				...inlineStyles,
-				...getTextAlignment(textAlign)
-			},
-			children
-		});
+	},
+	addCommands() {
+		return {
+			updateButton: (attributes) => ({ commands }) => {
+				return commands.updateAttributes("button", attributes);
+			},
+			setButton: () => ({ commands }) => {
+				return commands.insertContent({
+					type: "button",
+					content: [{
+						type: "text",
+						text: "Button"
+					}]
+				});
+			}
+		};
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Column, {
+			align: node.attrs?.align || node.attrs?.alignment,
+			children: /* @__PURE__ */ jsx(Button$1, {
+				className: node.attrs?.class || void 0,
+				href: node.attrs?.href,
+				style: {
+					...style,
+					...inlineStyles
+				},
+				children
+			})
+		}) });
 	}
 });
 
 //#endregion
-//#region src/extensions/style-attribute.tsx
-const StyleAttribute = Extension.create({
-	name: "styleAttribute",
-	priority: 101,
+//#region src/extensions/class-attribute.tsx
+const ClassAttribute = Extension.create({
+	name: "classAttribute",
 	addOptions() {
 		return {
 			types: [],
-			style: []
+			class: []
 		};
 	},
 	addGlobalAttributes() {
 		return [{
 			types: this.options.types,
-			attributes: { style: {
+			attributes: { class: {
 				default: "",
-				parseHTML: (element) => element.getAttribute("style") || "",
+				parseHTML: (element) => element.className || "",
 				renderHTML: (attributes) => {
-					return { style: attributes.style ?? "" };
+					return attributes.class ? { class: attributes.class } : {};
 				}
 			} }
 		}];
 	},
 	addCommands() {
 		return {
-			unsetStyle: () => ({ commands }) => {
-				return this.options.types.every((type) => commands.resetAttributes(type, "style"));
+			unsetClass: () => ({ commands }) => {
+				return this.options.types.every((type) => commands.resetAttributes(type, "class"));
 			},
-			setStyle: (style) => ({ commands }) => {
-				return this.options.types.every((type) => commands.updateAttributes(type, { style }));
+			setClass: (classList) => ({ commands }) => {
+				return this.options.types.every((type) => commands.updateAttributes(type, { class: classList }));
 			}
 		};
 	},
 	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");
+				editor.commands.resetAttributes("paragraph", "class");
 			});
 			return false;
 		} };
@@ -1124,160 +868,259 @@ const StyleAttribute = Extension.create({
 });
 
 //#endregion
-//#region src/extensions/sup.ts
-/**
-* This extension allows you to mark text as superscript.
-* @see https://tiptap.dev/api/marks/superscript
-*/
-const Sup = Mark.create({
-	name: "sup",
-	addOptions() {
-		return { HTMLAttributes: {} };
-	},
-	parseHTML() {
-		return [{ tag: "sup" }];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"sup",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
+//#region src/extensions/code.tsx
+const Code = EmailMark.from(CodeBase, ({ children, node, style }) => /* @__PURE__ */ jsx("code", {
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
 	},
-	addCommands() {
-		return {
-			setSup: () => ({ commands }) => {
-				return commands.setMark(this.name);
-			},
-			toggleSup: () => ({ commands }) => {
-				return commands.toggleMark(this.name);
-			},
-			unsetSup: () => ({ commands }) => {
-				return commands.unsetMark(this.name);
-			}
-		};
-	}
-});
+	children
+}));
 
 //#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;
+//#region src/utils/prism-utils.ts
+const publicURL = "/styles/prism";
+function loadPrismTheme(theme) {
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = `${publicURL}/prism-${theme}.css`;
+	link.setAttribute("data-prism-theme", "");
+	document.head.appendChild(link);
+}
+function removePrismTheme() {
+	const existingTheme = document.querySelectorAll("link[rel=\"stylesheet\"][data-prism-theme]");
+	if (existingTheme.length > 0) existingTheme.forEach((cssLinkTag) => {
+		cssLinkTag.remove();
+	});
+}
+function hasPrismThemeLoaded(theme) {
+	return !!document.querySelector(`link[rel="stylesheet"][data-prism-theme][href="${publicURL}/prism-${theme}.css"]`);
+}
+
+//#endregion
+//#region src/extensions/prism-plugin.ts
+const PRISM_LANGUAGE_LOADED_META = "prismLanguageLoaded";
+function parseNodes(nodes, className = []) {
+	return nodes.flatMap((node) => {
+		const classes = [...className, ...node.properties ? node.properties.className : []];
+		if (node.children) return parseNodes(node.children, classes);
+		return {
+			text: node.value ?? "",
+			classes
+		};
+	});
+}
+function getHighlightNodes(html) {
+	return fromHtml(html, { fragment: true }).children;
+}
+function registeredLang(aliasOrLanguage) {
+	const allSupportLang = Object.keys(Prism.languages).filter((id) => typeof Prism.languages[id] === "object");
+	return Boolean(allSupportLang.find((x) => x === aliasOrLanguage));
+}
+function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
+	const decorations = [];
+	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;
+		let html = "";
+		try {
+			if (!registeredLang(language) && !loadingLanguages.has(language)) {
+				loadingLanguages.add(language);
+				import(`prismjs/components/prism-${language}`).then(() => {
+					loadingLanguages.delete(language);
+					onLanguageLoaded(language);
+				}).catch(() => {
+					loadingLanguages.delete(language);
 				});
-				return attrs;
 			}
-		}];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"table",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			[
-				"tbody",
-				{},
-				0
-			]
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		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__ */ jsx(Section$1, {
-			className: node.attrs?.class || void 0,
-			align: alignment,
-			style: resolveConflictingStyles(styles.reset, {
-				...inlineStyles,
-				...centeringStyles
-			}),
-			...width !== void 0 ? { width } : {},
-			children
+			if (!hasPrismThemeLoaded(theme)) loadPrismTheme(theme);
+			html = Prism.highlight(block.node.textContent, Prism.languages[language], language);
+		} catch {
+			html = Prism.highlight(block.node.textContent, Prism.languages.javascript, "js");
+		}
+		parseNodes(getHighlightNodes(html)).forEach((node) => {
+			const to = from + node.text.length;
+			if (node.classes.length) {
+				const decoration = Decoration.inline(from, to, { class: node.classes.join(" ") });
+				decorations.push(decoration);
+			}
+			from = to;
 		});
-	}
-});
-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 DecorationSet.create(doc, decorations);
+}
+function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
+	if (!defaultLanguage) throw Error("You must specify the defaultLanguage parameter");
+	const loadingLanguages = /* @__PURE__ */ new Set();
+	let pluginView = null;
+	const onLanguageLoaded = (language) => {
+		if (pluginView) pluginView.dispatch(pluginView.state.tr.setMeta(PRISM_LANGUAGE_LOADED_META, language));
+	};
+	const prismjsPlugin = new Plugin({
+		key: new PluginKey("prism"),
+		view(view) {
+			pluginView = view;
+			return { destroy() {
+				pluginView = null;
+			} };
+		},
+		state: {
+			init: (_, { doc }) => {
+				return getDecorations({
+					doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					loadingLanguages,
+					onLanguageLoaded
 				});
-				return attrs;
+			},
+			apply: (transaction, decorationSet, oldState, newState) => {
+				const oldNodeName = oldState.selection.$head.parent.type.name;
+				const newNodeName = newState.selection.$head.parent.type.name;
+				const oldNodes = findChildren(oldState.doc, (node) => node.type.name === name);
+				const newNodes = 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) => {
+						return node.pos >= rangeStep.from && node.pos + node.node.nodeSize <= rangeStep.to;
+					});
+				}))) return getDecorations({
+					doc: transaction.doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					loadingLanguages,
+					onLanguageLoaded
+				});
+				return decorationSet.map(transaction.mapping, transaction.doc);
 			}
-		}];
+		},
+		props: { decorations(state) {
+			return prismjsPlugin.getState(state);
+		} },
+		destroy() {
+			pluginView = null;
+			removePrismTheme();
+		}
+	});
+	return prismjsPlugin;
+}
+
+//#endregion
+//#region src/extensions/code-block.tsx
+const CodeBlockPrism = EmailNode.from(CodeBlock$1.extend({
+	addOptions() {
+		return {
+			languageClassPrefix: "language-",
+			exitOnTripleEnter: false,
+			exitOnArrowDown: false,
+			enableTabIndentation: true,
+			tabSize: 2,
+			defaultLanguage: "javascript",
+			defaultTheme: "default",
+			HTMLAttributes: {}
+		};
 	},
-	renderHTML({ HTMLAttributes }) {
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			language: {
+				default: this.options.defaultLanguage,
+				parseHTML: (element) => {
+					if (!element) return null;
+					const { languageClassPrefix } = this.options;
+					if (!languageClassPrefix) return null;
+					const language = [...element.firstElementChild?.classList || []].filter((className) => className.startsWith(languageClassPrefix || "")).map((className) => className.replace(languageClassPrefix, ""))[0];
+					if (!language) return null;
+					return language;
+				},
+				rendered: false
+			},
+			theme: {
+				default: this.options.defaultTheme,
+				rendered: false
+			}
+		};
+	},
+	renderHTML({ node, HTMLAttributes }) {
 		return [
-			"tr",
-			HTMLAttributes,
-			0
+			"pre",
+			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" },
+				0
+			]
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx("tr", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
+	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(TextSelection.create(state.doc, blockStart, blockEnd));
+					editor.view.dispatch(tr);
+					return true;
+				}
+				return false;
+			}
+		};
+	},
+	addProseMirrorPlugins() {
+		return [...this.parent?.() || [], PrismPlugin({
+			name: this.name,
+			defaultLanguage: this.options.defaultLanguage,
+			defaultTheme: this.options.defaultTheme
+		})];
 	}
+}), ({ node, style }) => {
+	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
+	const userTheme = ReactEmailComponents[node.attrs?.theme];
+	const theme = userTheme ? {
+		...userTheme,
+		base: {
+			...userTheme.base,
+			borderRadius: "0.125rem",
+			padding: "0.75rem 1rem"
+		}
+	} : { base: {
+		color: "#1e293b",
+		background: "#f1f5f9",
+		lineHeight: "1.5",
+		fontFamily: "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace",
+		padding: "0.75rem 1rem",
+		borderRadius: "0.125rem"
+	} };
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		code: node.content?.[0]?.text ?? "",
+		language,
+		theme,
+		style: {
+			width: "auto",
+			...style
+		}
+	});
 });
-const TableCell = EmailNode.create({
-	name: "tableCell",
-	group: "tableCell",
+
+//#endregion
+//#region src/extensions/div.tsx
+const Div = EmailNode.create({
+	name: "div",
+	group: "block",
 	content: "block+",
+	defining: true,
 	isolating: true,
-	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_CELL_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
-	},
 	parseHTML() {
 		return [{
-			tag: "td",
+			tag: "div:not([data-type])",
 			getAttrs: (node) => {
 				if (typeof node === "string") return false;
 				const element = node;
@@ -1291,60 +1134,2992 @@ const TableCell = EmailNode.create({
 	},
 	renderHTML({ HTMLAttributes }) {
 		return [
-			"td",
-			HTMLAttributes,
+			"div",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
 			0
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	addAttributes() {
+		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+	},
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx(Column, {
+		return /* @__PURE__ */ jsx("div", {
 			className: node.attrs?.class || void 0,
-			align: node.attrs?.align || node.attrs?.alignment,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
 		});
 	}
 });
-const TableHeader = Node.create({
-	name: "tableHeader",
-	group: "tableCell",
-	content: "block+",
-	isolating: true,
+
+//#endregion
+//#region src/extensions/divider.tsx
+const Divider = EmailNode.from(HorizontalRule.extend({
 	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_HEADER_ATTRIBUTES,
-			...TABLE_CELL_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
+		return { class: { default: "divider" } };
 	},
-	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;
+	addInputRules() {
+		return [new InputRule({
+			find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+			handler: ({ state, range }) => {
+				const attributes = {};
+				const { tr } = state;
+				const start = range.from;
+				const end = range.to;
+				tr.insert(start - 1, this.type.create(attributes)).delete(tr.mapping.map(start), tr.mapping.map(end));
 			}
-		}];
+		})];
 	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"th",
-			HTMLAttributes,
-			0
-		];
+	addNodeView() {
+		return ReactNodeViewRenderer((props) => {
+			const node = props.node;
+			const { class: className, ...rest } = node.attrs;
+			return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(Hr, {
+				...rest,
+				className: "node-hr",
+				style: inlineCssToJs(node.attrs.style)
+			}) });
+		});
 	}
+}), ({ node, style }) => {
+	return /* @__PURE__ */ jsx(Hr, {
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style)
+		}
+	});
 });
 
 //#endregion
-export { AlignmentAttribute, Body, Bold, Button, ClassAttribute, CodeBlockPrism, Div, EmailNode, MaxNesting, PreservedStyle, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, createPlaceholderExtension, placeholder, processStylesForUnlink };
+//#region src/extensions/global-content.ts
+const GLOBAL_CONTENT_NODE_TYPE = "globalContent";
+let cachedGlobalPosition = null;
+function findGlobalContentPositions(doc) {
+	const positions = [];
+	doc.descendants((node, position) => {
+		if (node.type.name === GLOBAL_CONTENT_NODE_TYPE) positions.push(position);
+	});
+	return positions;
+}
+function getCachedGlobalContentPosition(doc) {
+	if (cachedGlobalPosition != null) try {
+		if (doc.nodeAt(cachedGlobalPosition)?.type.name === GLOBAL_CONTENT_NODE_TYPE) return cachedGlobalPosition;
+	} catch {
+		cachedGlobalPosition = null;
+	}
+	cachedGlobalPosition = findGlobalContentPositions(doc)[0] ?? null;
+	return cachedGlobalPosition;
+}
+function getGlobalContent(key, editor) {
+	const position = getCachedGlobalContentPosition(editor.state.doc);
+	if (cachedGlobalPosition == null) return null;
+	return editor.state.doc.nodeAt(position)?.attrs.data[key] ?? null;
+}
+const GlobalContent = Node$1.create({
+	name: GLOBAL_CONTENT_NODE_TYPE,
+	addOptions() {
+		return {
+			key: GLOBAL_CONTENT_NODE_TYPE,
+			data: {}
+		};
+	},
+	group: "block",
+	selectable: false,
+	draggable: false,
+	atom: true,
+	addAttributes() {
+		return { data: { default: this.options.data } };
+	},
+	parseHTML() {
+		return [{ tag: `div[data-type="${this.name}"]` }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["div", mergeAttributes(HTMLAttributes, {
+			"data-type": this.name,
+			style: "width: 100%; height: 1px; visibility: hidden;"
+		})];
+	},
+	addCommands() {
+		return { setGlobalContent: (key, value) => ({ tr, dispatch }) => {
+			const ensureGlobalPosition = () => {
+				const positions = findGlobalContentPositions(tr.doc);
+				for (let i = positions.length - 1; i > 0; i--) tr.delete(positions[i], positions[i] + 1);
+				const pos = positions[0] ?? -1;
+				if (pos >= 0) cachedGlobalPosition = pos;
+				else {
+					cachedGlobalPosition = 0;
+					tr.insert(0, this.type.create());
+				}
+			};
+			if (dispatch) {
+				ensureGlobalPosition();
+				if (cachedGlobalPosition == null) return false;
+				tr.setNodeAttribute(cachedGlobalPosition, "data", {
+					...tr.doc.nodeAt(cachedGlobalPosition)?.attrs.data,
+					[key]: value
+				});
+			}
+			return true;
+		} };
+	}
+});
+
+//#endregion
+//#region src/extensions/hard-break.tsx
+const HardBreak = EmailNode.from(HardBreakBase, () => /* @__PURE__ */ jsx("br", {}));
+
+//#endregion
+//#region src/extensions/heading.tsx
+const Heading = EmailNode.from(Heading$2.extend({ addNodeView() {
+	return ReactNodeViewRenderer(({ node }) => {
+		const level = node.attrs.level ?? 1;
+		const { class: className, ...rest } = node.attrs;
+		const attrs = {
+			...rest,
+			className: `node-h${level} ${className}`,
+			style: inlineCssToJs(node.attrs.style)
+		};
+		return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(Heading$1, {
+			as: `h${level}`,
+			...attrs,
+			children: /* @__PURE__ */ jsx(NodeViewContent, {})
+		}) });
+	});
+} }), ({ children, node, style }) => {
+	return /* @__PURE__ */ jsx(Heading$1, {
+		as: `h${node.attrs?.level ?? 1}`,
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style),
+			...getTextAlignment(node.attrs?.align ?? node.attrs?.alignment)
+		},
+		children
+	});
+});
+
+//#endregion
+//#region src/extensions/italic.tsx
+const Italic = EmailMark.from(ItalicBase, ({ children, style }) => /* @__PURE__ */ jsx("em", {
+	style,
+	children
+}));
+
+//#endregion
+//#region src/extensions/preserved-style.tsx
+const PreservedStyle = EmailMark.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",
+			mergeAttributes(HTMLAttributes),
+			0
+		];
+	},
+	renderToReactEmail({ children, mark }) {
+		return /* @__PURE__ */ jsx("span", {
+			style: mark.attrs?.style ? inlineCssToJs(mark.attrs.style) : void 0,
+			children
+		});
+	}
+});
+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/link.tsx
+const Link = EmailMark.from(TiptapLink, ({ children, mark, style }) => {
+	const linkMarkStyle = mark.attrs?.style ? inlineCssToJs(mark.attrs.style) : {};
+	return /* @__PURE__ */ jsx(Link$1, {
+		href: mark.attrs?.href ?? void 0,
+		rel: mark.attrs?.rel ?? void 0,
+		style: {
+			...style,
+			...linkMarkStyle
+		},
+		target: mark.attrs?.target ?? void 0,
+		...mark.attrs?.["ses:no-track"] ? { "ses:no-track": mark.attrs["ses:no-track"] } : {},
+		children
+	});
+}).extend({
+	parseHTML() {
+		return [{
+			tag: "a[target]:not([data-id=\"react-email-button\"])",
+			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;
+			}
+		}, {
+			tag: "a[href]:not([data-id=\"react-email-button\"])",
+			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;
+			}
+		}];
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			"ses:no-track": {
+				default: null,
+				parseHTML: (element) => element.getAttribute("ses:no-track")
+			}
+		};
+	},
+	addCommands() {
+		return {
+			...this.parent?.(),
+			unsetLink: () => ({ state, chain }) => {
+				const { from } = state.selection;
+				const linkStyle = state.doc.resolve(from).marks().find((m) => m.type.name === "link")?.attrs?.style ?? null;
+				const preservedStyle = processStylesForUnlink(linkStyle);
+				const shouldRemoveUnderline = preservedStyle !== linkStyle;
+				if (preservedStyle) {
+					const cmd = chain().extendMarkRange("link").unsetMark("link").setMark("preservedStyle", { style: preservedStyle });
+					return shouldRemoveUnderline ? cmd.unsetMark("underline").run() : cmd.run();
+				}
+				return chain().extendMarkRange("link").unsetMark("link").unsetMark("underline").run();
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return { "Mod-k": () => {
+			editorEventBus.dispatch("bubble-menu:add-link", void 0);
+			return this.editor.chain().focus().toggleLink({ href: "" }).run();
+		} };
+	}
+});
+
+//#endregion
+//#region src/extensions/list-item.tsx
+const ListItem = EmailNode.from(ListItemBase, ({ children, node, style }) => /* @__PURE__ */ jsx("li", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style),
+		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+	},
+	children
+}));
+
+//#endregion
+//#region src/extensions/max-nesting.ts
+const MaxNesting = 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 Plugin({
+			key: new 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/ordered-list.tsx
+const OrderedList = EmailNode.from(OrderedListBase, ({ children, node, style }) => /* @__PURE__ */ jsx("ol", {
+	className: node.attrs?.class || void 0,
+	start: node.attrs?.start,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
+//#endregion
+//#region src/extensions/paragraph.tsx
+const Paragraph = EmailNode.from(ParagraphBase, ({ children, node, style }) => {
+	const isEmpty = !node.content || node.content.length === 0;
+	return /* @__PURE__ */ jsx("p", {
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style),
+			...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+		},
+		children: isEmpty ? /* @__PURE__ */ jsx("br", {}) : children
+	});
+});
+
+//#endregion
+//#region src/extensions/placeholder.ts
+const Placeholder = TipTapPlaceholder.configure({
+	placeholder: ({ node }) => {
+		if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+		return "Press '/' for commands";
+	},
+	includeChildren: true
+});
+
+//#endregion
+//#region src/extensions/preview-text.ts
+const PreviewText = Node$1.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/extensions/section.tsx
+const Section = EmailNode.create({
+	name: "section",
+	group: "block",
+	content: "block+",
+	isolating: true,
+	defining: true,
+	parseHTML() {
+		return [{ tag: "section[data-type=\"section\"]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"section",
+			mergeAttributes({
+				"data-type": "section",
+				class: "node-section"
+			}, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return { insertSection: () => ({ commands }) => {
+			return commands.insertContent({
+				type: this.name,
+				content: [{
+					type: "paragraph",
+					content: []
+				}]
+			});
+		} };
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		const textAlign = node.attrs?.align || node.attrs?.alignment;
+		return /* @__PURE__ */ jsx(Section$1, {
+			className: node.attrs?.class || void 0,
+			align: textAlign,
+			style: {
+				...style,
+				...inlineStyles,
+				...getTextAlignment(textAlign)
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/strike.tsx
+const Strike = EmailMark.from(StrikeBase, ({ children, style }) => /* @__PURE__ */ jsx("s", {
+	style,
+	children
+}));
+
+//#endregion
+//#region src/extensions/style-attribute.tsx
+const StyleAttribute = 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.tsx
+/**
+* This extension allows you to mark text as superscript.
+* @see https://tiptap.dev/api/marks/superscript
+*/
+const Sup = EmailMark.create({
+	name: "sup",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{ tag: "sup" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"sup",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("sup", {
+			style,
+			children
+		});
+	},
+	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",
+			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__ */ jsx(Section$1, {
+			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__ */ 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__ */ jsx(Column, {
+			className: node.attrs?.class || void 0,
+			align: node.attrs?.align || node.attrs?.alignment,
+			style: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+const TableHeader = Node$1.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.tsx
+const Uppercase = EmailMark.create({
+	name: "uppercase",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span",
+			getAttrs: (node) => {
+				if (node.style.textTransform === "uppercase") return {};
+				return false;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
+			0
+		];
+	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				...style,
+				textTransform: "uppercase"
+			},
+			children
+		});
+	},
+	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",
+				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__ */ jsx(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",
+			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(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__ */ jsx(Column, {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles,
+				...width ? { width } : {}
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/index.ts
+const starterKitExtensions = {
+	CodeBlockPrism,
+	Code,
+	Paragraph,
+	BulletList,
+	OrderedList,
+	Blockquote,
+	ListItem,
+	HardBreak,
+	Italic,
+	Placeholder,
+	PreviewText,
+	Bold,
+	Strike,
+	Heading,
+	Divider,
+	Link,
+	Sup,
+	Uppercase,
+	PreservedStyle,
+	Table,
+	TableRow,
+	TableCell,
+	TableHeader,
+	Body,
+	Div,
+	Button,
+	Section,
+	GlobalContent,
+	AlignmentAttribute,
+	StyleAttribute,
+	ClassAttribute,
+	MaxNesting
+};
+const StarterKit = Extension.create({
+	name: "reactEmailStarterKit",
+	addOptions() {
+		return {
+			TiptapStarterKit: {},
+			CodeBlockPrism: {
+				defaultLanguage: "javascript",
+				HTMLAttributes: { class: "prism node-codeBlock" }
+			},
+			Code: { HTMLAttributes: {
+				class: "node-inlineCode",
+				spellcheck: "false"
+			} },
+			Paragraph: { HTMLAttributes: { class: "node-paragraph" } },
+			BulletList: { HTMLAttributes: { class: "node-bulletList" } },
+			OrderedList: { HTMLAttributes: { class: "node-orderedList" } },
+			Blockquote: { HTMLAttributes: { class: "node-blockquote" } },
+			ListItem: {},
+			HardBreak: {},
+			Italic: {},
+			Placeholder: {},
+			PreviewText: {},
+			Bold: {},
+			Strike: {},
+			Heading: {},
+			Divider: {},
+			Link: {},
+			Sup: {},
+			Uppercase: {},
+			PreservedStyle: {},
+			Table: {},
+			TableRow: {},
+			TableCell: {},
+			TableHeader: {},
+			Body: {},
+			Div: {},
+			Button: {},
+			Section: {},
+			GlobalContent: {},
+			AlignmentAttribute: { types: [
+				"heading",
+				"paragraph",
+				"image",
+				"blockquote",
+				"codeBlock",
+				"bulletList",
+				"orderedList",
+				"listItem",
+				"button",
+				"youtube",
+				"twitter",
+				"table",
+				"tableRow",
+				"tableCell",
+				"tableHeader",
+				"columnsColumn"
+			] },
+			StyleAttribute: { types: [
+				"heading",
+				"paragraph",
+				"image",
+				"blockquote",
+				"codeBlock",
+				"bulletList",
+				"orderedList",
+				"listItem",
+				"button",
+				"youtube",
+				"twitter",
+				"horizontalRule",
+				"footer",
+				"section",
+				"div",
+				"body",
+				"table",
+				"tableRow",
+				"tableCell",
+				"tableHeader",
+				"columnsColumn",
+				"link"
+			] },
+			ClassAttribute: { types: [
+				"heading",
+				"paragraph",
+				"image",
+				"blockquote",
+				"bulletList",
+				"orderedList",
+				"listItem",
+				"button",
+				"youtube",
+				"twitter",
+				"horizontalRule",
+				"footer",
+				"section",
+				"div",
+				"body",
+				"table",
+				"tableRow",
+				"tableCell",
+				"tableHeader",
+				"columnsColumn",
+				"link"
+			] },
+			MaxNesting: {
+				maxDepth: 50,
+				nodeTypes: [
+					"section",
+					"bulletList",
+					"orderedList"
+				]
+			}
+		};
+	},
+	addExtensions() {
+		const extensions = [];
+		if (this.options.TiptapStarterKit !== false) extensions.push(TipTapStarterKit.configure({
+			undoRedo: false,
+			heading: false,
+			link: false,
+			underline: false,
+			trailingNode: false,
+			bold: false,
+			italic: false,
+			strike: false,
+			code: false,
+			paragraph: false,
+			bulletList: false,
+			orderedList: false,
+			listItem: false,
+			blockquote: false,
+			hardBreak: false,
+			gapcursor: false,
+			codeBlock: false,
+			horizontalRule: false,
+			dropcursor: {
+				color: "#61a8f8",
+				class: "rounded-full animate-[fade-in_300ms_ease-in-out] !z-40",
+				width: 4
+			},
+			...this.options.TiptapStarterKit
+		}));
+		for (const [name, extension] of Object.entries(starterKitExtensions)) {
+			const key = name;
+			const extensionOptions = this.options[key];
+			if (extensionOptions !== false) extensions.push(extension.configure(extensionOptions));
+		}
+		return extensions;
+	}
+});
+
+//#endregion
+//#region src/core/create-drop-handler.ts
+function createDropHandler({ onPaste, onUploadImage }) {
+	return (view, event, _slice, moved) => {
+		if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+			event.preventDefault();
+			const file = event.dataTransfer.files[0];
+			if (onPaste?.(file, view)) return true;
+			if (file.type.includes("image/") && onUploadImage) {
+				onUploadImage(file, view, (view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				})?.pos || 0) - 1);
+				return true;
+			}
+		}
+		return false;
+	};
+}
+
+//#endregion
+//#region src/utils/paste-sanitizer.ts
+/**
+* Sanitizes pasted HTML.
+* - From editor (has node-* classes): pass through as-is
+* - From external: strip all styles/classes, keep only semantic HTML
+*/
+/**
+* Detects content from the Resend editor by checking for node-* class names.
+*/
+const EDITOR_CLASS_PATTERN = /class="[^"]*node-/;
+/**
+* Attributes to preserve on specific elements for EXTERNAL content.
+* Only functional attributes - NO style or class.
+*/
+const PRESERVED_ATTRIBUTES = {
+	a: [
+		"href",
+		"target",
+		"rel"
+	],
+	img: [
+		"src",
+		"alt",
+		"width",
+		"height"
+	],
+	td: ["colspan", "rowspan"],
+	th: [
+		"colspan",
+		"rowspan",
+		"scope"
+	],
+	table: [
+		"border",
+		"cellpadding",
+		"cellspacing"
+	],
+	"*": ["id"]
+};
+function isFromEditor(html) {
+	return EDITOR_CLASS_PATTERN.test(html);
+}
+function sanitizePastedHtml(html) {
+	if (isFromEditor(html)) return html;
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	sanitizeNode(doc.body);
+	return doc.body.innerHTML;
+}
+function sanitizeNode(node) {
+	if (node.nodeType === Node.ELEMENT_NODE) sanitizeElement(node);
+	for (const child of Array.from(node.childNodes)) sanitizeNode(child);
+}
+function sanitizeElement(el) {
+	const allowedForTag = PRESERVED_ATTRIBUTES[el.tagName.toLowerCase()] || [];
+	const allowedGlobal = PRESERVED_ATTRIBUTES["*"] || [];
+	const allowed = new Set([...allowedForTag, ...allowedGlobal]);
+	const attributesToRemove = [];
+	for (const attr of Array.from(el.attributes)) {
+		if (attr.name.startsWith("data-")) {
+			attributesToRemove.push(attr.name);
+			continue;
+		}
+		if (!allowed.has(attr.name)) attributesToRemove.push(attr.name);
+	}
+	for (const attr of attributesToRemove) el.removeAttribute(attr);
+}
+
+//#endregion
+//#region src/core/create-paste-handler.ts
+function createPasteHandler({ onPaste, onUploadImage, extensions }) {
+	return (view, event, slice) => {
+		const text = event.clipboardData?.getData("text/plain");
+		if (text && onPaste?.(text, view)) {
+			event.preventDefault();
+			return true;
+		}
+		if (event.clipboardData?.files?.[0]) {
+			const file = event.clipboardData.files[0];
+			if (onPaste?.(file, view)) {
+				event.preventDefault();
+				return true;
+			}
+			if (file.type.includes("image/") && onUploadImage) {
+				const pos = view.state.selection.from;
+				onUploadImage(file, view, pos);
+				return true;
+			}
+		}
+		/**
+		* If the coming content has a single child, we can assume
+		* it's a plain text and doesn't need to be parsed and
+		* be introduced in a new line
+		*/
+		if (slice.content.childCount === 1) return false;
+		if (event.clipboardData?.getData?.("text/html")) {
+			event.preventDefault();
+			const jsonContent = generateJSON(sanitizePastedHtml(event.clipboardData.getData("text/html")), extensions);
+			const node = view.state.schema.nodeFromJSON(jsonContent);
+			const transaction = view.state.tr.replaceSelectionWith(node, false);
+			view.dispatch(transaction);
+			return true;
+		}
+		return false;
+	};
+}
+
+//#endregion
+//#region src/core/use-editor.ts
+const COLLABORATION_EXTENSION_NAMES = new Set(["liveblocksExtension", "collaboration"]);
+function hasCollaborationExtension(exts) {
+	return exts.some((ext) => COLLABORATION_EXTENSION_NAMES.has(ext.name));
+}
+function useEditor({ content, extensions = [], onUpdate, onPaste, onUploadImage, onReady, editable = true, ...rest }) {
+	const [contentError, setContentError] = React.useState(null);
+	const isCollaborative = hasCollaborationExtension(extensions);
+	const effectiveExtensions = React.useMemo(() => [
+		StarterKit,
+		...isCollaborative ? [] : [UndoRedo],
+		...extensions
+	], [extensions, isCollaborative]);
+	const editor = useEditor$1({
+		content: isCollaborative ? void 0 : content,
+		extensions: effectiveExtensions,
+		editable,
+		immediatelyRender: false,
+		enableContentCheck: true,
+		onContentError({ editor: editor$1, error, disableCollaboration }) {
+			disableCollaboration();
+			setContentError(error);
+			console.error(error);
+			editor$1.setEditable(false);
+		},
+		onCreate({ editor: editor$1 }) {
+			onReady?.(editor$1);
+		},
+		onUpdate({ editor: editor$1, transaction }) {
+			onUpdate?.(editor$1, transaction);
+		},
+		editorProps: {
+			handleDOMEvents: { click: (view, event) => {
+				if (!view.editable) {
+					if (event.target.closest("a")) {
+						event.preventDefault();
+						return true;
+					}
+				}
+				return false;
+			} },
+			handlePaste: createPasteHandler({
+				onPaste,
+				onUploadImage,
+				extensions: effectiveExtensions
+			}),
+			handleDrop: createDropHandler({
+				onPaste,
+				onUploadImage
+			})
+		},
+		...rest
+	});
+	return {
+		editor,
+		isEditorEmpty: useEditorState({
+			editor,
+			selector: (context) => {
+				if (!context.editor) return true;
+				return isDocumentVisuallyEmpty(context.editor.state.doc);
+			}
+		}) ?? true,
+		extensions: effectiveExtensions,
+		contentError,
+		isCollaborative
+	};
+}
+
+//#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__ */ 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__ */ jsx(BubbleMenuItem, {
+		name: "align-center",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "center" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "center"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignCenterIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-left.tsx
+function BubbleMenuAlignLeft({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ jsx(BubbleMenuItem, {
+		name: "align-left",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "left" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "left"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignLeftIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-right.tsx
+function BubbleMenuAlignRight({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ jsx(BubbleMenuItem, {
+		name: "align-right",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "right" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "right"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignRightIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/create-mark-bubble-item.tsx
+function createMarkBubbleItem(config) {
+	function MarkBubbleItem({ className, children }) {
+		const { editor } = useBubbleMenuContext();
+		const isActive = 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__ */ 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__ */ jsx(BoldIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/code.tsx
+const BubbleMenuCode = createMarkBubbleItem({
+	name: "code",
+	activeName: "code",
+	command: "toggleCode",
+	icon: /* @__PURE__ */ jsx(CodeIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/group.tsx
+function BubbleMenuItemGroup({ className, children }) {
+	return /* @__PURE__ */ 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__ */ jsx(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 = 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__ */ jsxs("div", {
+		"data-re-link-selector": "",
+		...isOpen ? { "data-open": "" } : {},
+		...editorState.hasLink ? { "data-has-link": "" } : {},
+		className,
+		children: [showToggle && /* @__PURE__ */ 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__ */ jsx(LinkIcon, {})
+		}), isOpen && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Remove link",
+				"data-re-link-selector-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-selector-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(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 = 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: TextIcon,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").run(),
+			isActive: editorState?.isParagraphActive ?? false
+		},
+		{
+			name: "Title",
+			icon: Heading1,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+			isActive: editorState?.isHeading1Active ?? false
+		},
+		{
+			name: "Subtitle",
+			icon: Heading2,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+			isActive: editorState?.isHeading2Active ?? false
+		},
+		{
+			name: "Heading",
+			icon: Heading3,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+			isActive: editorState?.isHeading3Active ?? false
+		},
+		{
+			name: "Bullet List",
+			icon: List,
+			command: () => editor.chain().focus().clearNodes().toggleBulletList().run(),
+			isActive: editorState?.isBulletListActive ?? false
+		},
+		{
+			name: "Numbered List",
+			icon: ListOrdered,
+			command: () => editor.chain().focus().clearNodes().toggleOrderedList().run(),
+			isActive: editorState?.isOrderedListActive ?? false
+		},
+		{
+			name: "Quote",
+			icon: TextQuote,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+			isActive: editorState?.isBlockquoteActive ?? false
+		},
+		{
+			name: "Code",
+			icon: Code$1,
+			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__ */ jsx(NodeSelectorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-re-node-selector": "",
+				...isOpen ? { "data-open": "" } : {},
+				className,
+				children
+			})
+		})
+	});
+}
+function NodeSelectorTrigger({ className, children }) {
+	const { activeItem, isOpen, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-re-node-selector-trigger": "",
+		className,
+		onClick: () => setIsOpen(!isOpen),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: activeItem.name }), /* @__PURE__ */ jsx(ChevronDown, {})] })
+	});
+}
+function NodeSelectorContent({ className, align = "start", children }) {
+	const { items, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ jsx(Popover.Content, {
+		align,
+		"data-re-node-selector-content": "",
+		className,
+		children: children ? children(items, () => setIsOpen(false)) : items.map((item) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-re-node-selector-item": "",
+				...item.isActive ? { "data-active": "" } : {},
+				onClick: () => {
+					item.command();
+					setIsOpen(false);
+				},
+				children: [
+					/* @__PURE__ */ jsx(Icon, {}),
+					/* @__PURE__ */ jsx("span", { children: item.name }),
+					item.isActive && /* @__PURE__ */ jsx(Check, {})
+				]
+			}, item.name);
+		})
+	});
+}
+function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(NodeSelectorRoot, {
+		omit,
+		open,
+		onOpenChange,
+		className,
+		children: [/* @__PURE__ */ jsx(NodeSelectorTrigger, { children: triggerContent }), /* @__PURE__ */ jsx(NodeSelectorContent, {})]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/root.tsx
+function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
+	const { editor } = useCurrentEditor();
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		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__ */ 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__ */ jsx(StrikethroughIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/underline.tsx
+const BubbleMenuUnderline = createMarkBubbleItem({
+	name: "underline",
+	activeName: "underline",
+	command: "toggleUnderline",
+	icon: /* @__PURE__ */ jsx(UnderlineIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/uppercase.tsx
+const BubbleMenuUppercase = createMarkBubbleItem({
+	name: "uppercase",
+	activeName: "uppercase",
+	command: "toggleUppercase",
+	icon: /* @__PURE__ */ jsx(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__ */ jsxs(BubbleMenuRoot, {
+		excludeNodes,
+		placement,
+		offset,
+		onHide: handleHide,
+		className,
+		children: [
+			has("node-selector") && /* @__PURE__ */ jsx(BubbleMenuNodeSelector, {
+				open: isNodeSelectorOpen,
+				onOpenChange: handleNodeSelectorOpenChange
+			}),
+			has("link-selector") && /* @__PURE__ */ jsx(BubbleMenuLinkSelector, {
+				open: isLinkSelectorOpen,
+				onOpenChange: handleLinkSelectorOpenChange
+			}),
+			hasFormattingItems && /* @__PURE__ */ jsxs(BubbleMenuItemGroup, { children: [
+				has("bold") && /* @__PURE__ */ jsx(BubbleMenuBold, {}),
+				has("italic") && /* @__PURE__ */ jsx(BubbleMenuItalic, {}),
+				has("underline") && /* @__PURE__ */ jsx(BubbleMenuUnderline, {}),
+				has("strike") && /* @__PURE__ */ jsx(BubbleMenuStrike, {}),
+				has("code") && /* @__PURE__ */ jsx(BubbleMenuCode, {}),
+				has("uppercase") && /* @__PURE__ */ jsx(BubbleMenuUppercase, {})
+			] }),
+			hasAlignmentItems && /* @__PURE__ */ jsxs(BubbleMenuItemGroup, { children: [
+				has("align-left") && /* @__PURE__ */ jsx(BubbleMenuAlignLeft, {}),
+				has("align-center") && /* @__PURE__ */ jsx(BubbleMenuAlignCenter, {}),
+				has("align-right") && /* @__PURE__ */ jsx(BubbleMenuAlignRight, {})
+			] })
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/separator.tsx
+function BubbleMenuSeparator({ className }) {
+	return /* @__PURE__ */ 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/button-bubble-menu/context.tsx
+const ButtonBubbleMenuContext = React.createContext(null);
+function useButtonBubbleMenuContext() {
+	const context = React.useContext(ButtonBubbleMenuContext);
+	if (!context) throw new Error("ButtonBubbleMenu compound components must be used within <ButtonBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/edit-link.tsx
+function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { setIsEditing } = useButtonBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-btn-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/root.tsx
+function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-btn-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ButtonBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/toolbar.tsx
+function ButtonBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useButtonBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-btn-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/default.tsx
+function ButtonBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
+	return /* @__PURE__ */ jsx(ButtonBubbleMenuRoot, {
+		placement,
+		offset,
+		onHide,
+		className,
+		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ButtonBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ButtonBubbleMenuEditLink, {}) })
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/index.ts
+const ButtonBubbleMenu = {
+	Root: ButtonBubbleMenuRoot,
+	Toolbar: ButtonBubbleMenuToolbar,
+	EditLink: ButtonBubbleMenuEditLink,
+	Default: ButtonBubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/image-bubble-menu/context.tsx
+const ImageBubbleMenuContext = React.createContext(null);
+function useImageBubbleMenuContext() {
+	const context = React.useContext(ImageBubbleMenuContext);
+	if (!context) throw new Error("ImageBubbleMenu compound components must be used within <ImageBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/edit-link.tsx
+function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { setIsEditing } = useImageBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-img-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/root.tsx
+function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-img-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("image") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ImageBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/toolbar.tsx
+function ImageBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useImageBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-img-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/default.tsx
+function ImageBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
+	return /* @__PURE__ */ jsx(ImageBubbleMenuRoot, {
+		placement,
+		offset,
+		onHide,
+		className,
+		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ImageBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ImageBubbleMenuEditLink, {}) })
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/index.ts
+const ImageBubbleMenu = {
+	Root: ImageBubbleMenuRoot,
+	Toolbar: ImageBubbleMenuToolbar,
+	EditLink: ImageBubbleMenuEditLink,
+	Default: ImageBubbleMenuDefault
+};
+
+//#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, onMouseDown, ...rest }) {
+	const { setIsEditing } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-link-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Remove link",
+				"data-re-link-bm-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-bm-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Check, {})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/open-link.tsx
+function LinkBubbleMenuOpenLink({ className, children, ...rest }) {
+	const { linkHref } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ 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__ */ jsx(ExternalLinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/root.tsx
+function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	const linkHref = useEditorState({
+		editor,
+		selector: ({ editor: e }) => e?.getAttributes("link").href ?? ""
+	});
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		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__ */ jsx(LinkBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				linkHref: linkHref ?? "",
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/toolbar.tsx
+function LinkBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useLinkBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-link-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/unlink.tsx
+function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { editor } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Remove link",
+		"data-re-link-bm-item": "",
+		"data-item": "unlink",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			editor.chain().focus().unsetLink().run();
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(UnlinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/default.tsx
+function LinkBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className, validateUrl, onLinkApply, onLinkRemove }) {
+	const has = (item) => !excludeItems.includes(item);
+	return /* @__PURE__ */ jsxs(LinkBubbleMenuRoot, {
+		placement,
+		offset,
+		onHide,
+		className,
+		children: [(has("edit-link") || has("open-link") || has("unlink")) && /* @__PURE__ */ jsxs(LinkBubbleMenuToolbar, { children: [
+			has("edit-link") && /* @__PURE__ */ jsx(LinkBubbleMenuEditLink, {}),
+			has("open-link") && /* @__PURE__ */ jsx(LinkBubbleMenuOpenLink, {}),
+			has("unlink") && /* @__PURE__ */ jsx(LinkBubbleMenuUnlink, {})
+		] }), /* @__PURE__ */ jsx(LinkBubbleMenuForm, {
+			validateUrl,
+			onLinkApply,
+			onLinkRemove
+		})]
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/index.ts
+const LinkBubbleMenu = {
+	Root: LinkBubbleMenuRoot,
+	Toolbar: LinkBubbleMenuToolbar,
+	Form: LinkBubbleMenuForm,
+	EditLink: LinkBubbleMenuEditLink,
+	Unlink: LinkBubbleMenuUnlink,
+	OpenLink: LinkBubbleMenuOpenLink,
+	Default: LinkBubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/slash-command/utils.ts
+function isInsideNode(editor, type) {
+	const { $from } = editor.state.selection;
+	for (let d = $from.depth; d > 0; d--) if ($from.node(d).type.name === type) return true;
+	return false;
+}
+function isAtMaxColumnsDepth(editor) {
+	const { from } = editor.state.selection;
+	return getColumnsDepth(editor.state.doc, from) >= MAX_COLUMNS_DEPTH;
+}
+function updateScrollView(container, item) {
+	const containerRect = container.getBoundingClientRect();
+	const itemRect = item.getBoundingClientRect();
+	if (itemRect.top < containerRect.top) container.scrollTop -= containerRect.top - itemRect.top;
+	else if (itemRect.bottom > containerRect.bottom) container.scrollTop += itemRect.bottom - containerRect.bottom;
+}
+
+//#endregion
+//#region src/ui/slash-command/command-list.tsx
+const CATEGORY_ORDER = [
+	"Text",
+	"Media",
+	"Layout",
+	"Utility"
+];
+function groupByCategory(items) {
+	const seen = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const existing = seen.get(item.category);
+		if (existing) existing.push(item);
+		else seen.set(item.category, [item]);
+	}
+	const ordered = [];
+	for (const cat of CATEGORY_ORDER) {
+		const group = seen.get(cat);
+		if (group) {
+			ordered.push({
+				category: cat,
+				items: group
+			});
+			seen.delete(cat);
+		}
+	}
+	for (const [category, group] of seen) ordered.push({
+		category,
+		items: group
+	});
+	return ordered;
+}
+function CommandItem({ item, selected, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"data-re-slash-command-item": "",
+		"data-selected": selected || void 0,
+		onClick: onSelect,
+		type: "button",
+		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
+	});
+}
+function CommandList({ items, command, query, ref }) {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		setSelectedIndex(0);
+	}, [items]);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const selected = container.querySelector("[data-selected]");
+		if (selected) updateScrollView(container, selected);
+	}, [selectedIndex]);
+	const selectItem = useCallback((index) => {
+		const item = items[index];
+		if (item) command(item);
+	}, [items, command]);
+	useImperativeHandle(ref, () => ({ onKeyDown: ({ event }) => {
+		if (items.length === 0) return false;
+		if (event.key === "ArrowUp") {
+			setSelectedIndex((i) => (i + items.length - 1) % items.length);
+			return true;
+		}
+		if (event.key === "ArrowDown") {
+			setSelectedIndex((i) => (i + 1) % items.length);
+			return true;
+		}
+		if (event.key === "Enter") {
+			selectItem(selectedIndex);
+			return true;
+		}
+		return false;
+	} }), [
+		items.length,
+		selectItem,
+		selectedIndex
+	]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-empty": "",
+			children: "No results"
+		})
+	});
+	if (query.trim().length > 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(CommandItem, {
+			item,
+			onSelect: () => selectItem(index),
+			selected: index === selectedIndex
+		}, item.title))
+	});
+	const groups = groupByCategory(items);
+	let flatIndex = 0;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-category": "",
+			children: group.category
+		}), group.items.map((item) => {
+			const currentIndex = flatIndex++;
+			return /* @__PURE__ */ jsx(CommandItem, {
+				item,
+				onSelect: () => selectItem(currentIndex),
+				selected: currentIndex === selectedIndex
+			}, item.title);
+		})] }, group.category))
+	});
+}
+
+//#endregion
+//#region src/ui/slash-command/commands.tsx
+const TEXT = {
+	title: "Text",
+	description: "Plain text block",
+	icon: /* @__PURE__ */ jsx(Text, { size: 20 }),
+	category: "Text",
+	searchTerms: ["p", "paragraph"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+	}
+};
+const H1 = {
+	title: "Title",
+	description: "Large heading",
+	icon: /* @__PURE__ */ jsx(Heading1, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"title",
+		"big",
+		"large",
+		"h1"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+	}
+};
+const H2 = {
+	title: "Subtitle",
+	description: "Medium heading",
+	icon: /* @__PURE__ */ jsx(Heading2, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"subtitle",
+		"medium",
+		"h2"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+	}
+};
+const H3 = {
+	title: "Heading",
+	description: "Small heading",
+	icon: /* @__PURE__ */ jsx(Heading3, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"subtitle",
+		"small",
+		"h3"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+	}
+};
+const BULLET_LIST = {
+	title: "Bullet list",
+	description: "Unordered list",
+	icon: /* @__PURE__ */ jsx(List, { size: 20 }),
+	category: "Text",
+	searchTerms: ["unordered", "point"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleBulletList().run();
+	}
+};
+const NUMBERED_LIST = {
+	title: "Numbered list",
+	description: "Ordered list",
+	icon: /* @__PURE__ */ jsx(ListOrdered, { size: 20 }),
+	category: "Text",
+	searchTerms: ["ordered"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+	}
+};
+const QUOTE = {
+	title: "Quote",
+	description: "Block quote",
+	icon: /* @__PURE__ */ jsx(TextQuote, { size: 20 }),
+	category: "Text",
+	searchTerms: ["blockquote"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+	}
+};
+const CODE = {
+	title: "Code block",
+	description: "Code snippet",
+	icon: /* @__PURE__ */ jsx(SquareCode, { size: 20 }),
+	category: "Text",
+	searchTerms: ["codeblock"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+	}
+};
+const BUTTON = {
+	title: "Button",
+	description: "Clickable button",
+	icon: /* @__PURE__ */ jsx(MousePointer, { size: 20 }),
+	category: "Layout",
+	searchTerms: ["button"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setButton().run();
+	}
+};
+const DIVIDER = {
+	title: "Divider",
+	description: "Horizontal separator",
+	icon: /* @__PURE__ */ jsx(SplitSquareVertical, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"hr",
+		"divider",
+		"separator"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+	}
+};
+const SECTION = {
+	title: "Section",
+	description: "Content section",
+	icon: /* @__PURE__ */ jsx(Rows2, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"section",
+		"row",
+		"container"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertSection().run();
+	}
+};
+const TWO_COLUMNS = {
+	title: "2 columns",
+	description: "Two column layout",
+	icon: /* @__PURE__ */ jsx(Columns2, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"side-by-side",
+		"multi-column",
+		"row",
+		"two",
+		"2"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(2).run();
+	}
+};
+const THREE_COLUMNS = {
+	title: "3 columns",
+	description: "Three column layout",
+	icon: /* @__PURE__ */ jsx(Columns3, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"multi-column",
+		"row",
+		"three",
+		"3"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(3).run();
+	}
+};
+const FOUR_COLUMNS = {
+	title: "4 columns",
+	description: "Four column layout",
+	icon: /* @__PURE__ */ jsx(Columns4, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"multi-column",
+		"row",
+		"four",
+		"4"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(4).run();
+	}
+};
+const defaultSlashCommands = [
+	TEXT,
+	H1,
+	H2,
+	H3,
+	BULLET_LIST,
+	NUMBERED_LIST,
+	QUOTE,
+	CODE,
+	BUTTON,
+	DIVIDER,
+	SECTION,
+	TWO_COLUMNS,
+	THREE_COLUMNS,
+	FOUR_COLUMNS
+];
+
+//#endregion
+//#region src/ui/slash-command/extension.ts
+const SlashCommandExtension = Extension.create({
+	name: "slash-command",
+	addOptions() {
+		return { suggestion: {
+			char: "/",
+			allow: ({ editor }) => !editor.isActive("codeBlock"),
+			command: ({ editor, range, props }) => {
+				props.command({
+					editor,
+					range
+				});
+			}
+		} };
+	},
+	addProseMirrorPlugins() {
+		return [Suggestion({
+			pluginKey: new PluginKey("slash-command"),
+			editor: this.editor,
+			...this.options.suggestion
+		})];
+	}
+});
+
+//#endregion
+//#region src/ui/slash-command/render.tsx
+function createRenderItems(component = CommandList) {
+	return () => {
+		let renderer = null;
+		let popup = null;
+		return {
+			onStart: (props) => {
+				renderer = new ReactRenderer(component, {
+					props,
+					editor: props.editor
+				});
+				if (!props.clientRect) return;
+				popup = tippy("body", {
+					getReferenceClientRect: props.clientRect,
+					appendTo: () => document.body,
+					content: renderer.element,
+					showOnCreate: true,
+					interactive: true,
+					trigger: "manual",
+					placement: "bottom-start"
+				});
+			},
+			onUpdate: (props) => {
+				if (!renderer) return;
+				renderer.updateProps(props);
+				if (popup?.[0] && props.clientRect) popup[0].setProps({ getReferenceClientRect: props.clientRect });
+			},
+			onKeyDown: (props) => {
+				if (props.event.key === "Escape") {
+					popup?.[0]?.hide();
+					return true;
+				}
+				return renderer?.ref?.onKeyDown(props) ?? false;
+			},
+			onExit: () => {
+				popup?.[0]?.destroy();
+				renderer?.destroy();
+				popup = null;
+				renderer = null;
+			}
+		};
+	};
+}
+
+//#endregion
+//#region src/ui/slash-command/search.ts
+function scoreItem(item, query) {
+	if (!query) return 100;
+	const q = query.toLowerCase();
+	const title = item.title.toLowerCase();
+	const description = item.description.toLowerCase();
+	const terms = item.searchTerms?.map((t) => t.toLowerCase()) ?? [];
+	if (title === q) return 100;
+	if (title.startsWith(q)) return 90;
+	if (title.split(/\s+/).some((w) => w.startsWith(q))) return 80;
+	if (terms.some((t) => t === q)) return 70;
+	if (terms.some((t) => t.startsWith(q))) return 60;
+	if (title.includes(q)) return 40;
+	if (terms.some((t) => t.includes(q))) return 30;
+	if (description.includes(q)) return 20;
+	return 0;
+}
+function filterAndRankItems(items, query) {
+	const trimmed = query.trim();
+	if (!trimmed) return items;
+	const scored = items.map((item) => ({
+		item,
+		score: scoreItem(item, trimmed)
+	})).filter(({ score }) => score > 0);
+	scored.sort((a, b) => b.score - a.score);
+	return scored.map(({ item }) => item);
+}
+
+//#endregion
+//#region src/ui/slash-command/create-slash-command.ts
+function defaultFilterItems(items, query, editor) {
+	return filterAndRankItems(isAtMaxColumnsDepth(editor) ? items.filter((item) => item.category !== "Layout" || !item.title.includes("column")) : items, query);
+}
+function createSlashCommand(options) {
+	const items = options?.items ?? defaultSlashCommands;
+	const filterFn = options?.filterItems ?? defaultFilterItems;
+	return SlashCommandExtension.configure({ suggestion: {
+		items: ({ query, editor }) => filterFn(items, query, editor),
+		render: createRenderItems(options?.component)
+	} });
+}
+
+//#endregion
+//#region src/ui/slash-command/index.ts
+const SlashCommand = createSlashCommand();
+
+//#endregion
+export { AlignmentAttribute, BULLET_LIST, BUTTON, Blockquote, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, BulletList, Button, ButtonBubbleMenu, ButtonBubbleMenuDefault, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, CODE, COLUMN_PARENT_TYPES, ClassAttribute, Code, CodeBlockPrism, ColumnsColumn, CommandList, DIVIDER, Div, Divider, EmailNode, FOUR_COLUMNS, FourColumns, GlobalContent, H1, H2, H3, HardBreak, Heading, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, Italic, Link, LinkBubbleMenu, LinkBubbleMenuDefault, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, ListItem, MAX_COLUMNS_DEPTH, MaxNesting, NUMBERED_LIST, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, OrderedList, Paragraph, Placeholder, PreservedStyle, PreviewText, QUOTE, SECTION, Section, SlashCommand, StarterKit, Strike, StyleAttribute, Sup, TEXT, THREE_COLUMNS, TWO_COLUMNS, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, composeReactEmail, createSlashCommand, defaultSlashCommands, editorEventBus, filterAndRankItems, getColumnsDepth, getGlobalContent, isAtMaxColumnsDepth, isDocumentVisuallyEmpty, isInsideNode, processStylesForUnlink, scoreItem, setTextAlignment, useButtonBubbleMenuContext, useEditor, useImageBubbleMenuContext, useLinkBubbleMenuContext };
 //# sourceMappingURL=index.mjs.map