@react-email/editor 0.0.0-experimental.4 → 0.0.0-experimental.40

package/dist/extensions-BvfmaKCn.mjs

@@ -0,0 +1,2088 @@
+import { n as inlineCssToJs, r as resolveConflictingStyles } from "./styles-_TMw3YxC.mjs";
+import { d as TABLE_ATTRIBUTES, f as TABLE_CELL_ATTRIBUTES, h as EmailNode, i as FourColumns, l as COMMON_HTML_ATTRIBUTES, m as createStandardAttributes, o as ThreeColumns, p as TABLE_HEADER_ATTRIBUTES, r as ColumnsColumn, s as TwoColumns, t as editorEventBus, u as LAYOUT_ATTRIBUTES } from "./event-bus-CHEzOS_O.mjs";
+import { t as GlobalContent } from "./global-content-D_WYaFgX.mjs";
+import { UndoRedo } from "@tiptap/extensions";
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useEditor, useEditorState } from "@tiptap/react";
+import * as React from "react";
+import { generateJSON } from "@tiptap/html";
+import * as ReactEmailComponents from "@react-email/components";
+import { Body, Button, CodeBlock, Column, Container, Head, Heading, Hr, Html, Link, Preview, Row, Section, pretty, render, toPlainText } from "@react-email/components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Extension, InputRule, Mark, Node as Node$1, findChildren, mergeAttributes } from "@tiptap/core";
+import TipTapStarterKit from "@tiptap/starter-kit";
+import BlockquoteBase from "@tiptap/extension-blockquote";
+import BoldBase from "@tiptap/extension-bold";
+import BulletListBase from "@tiptap/extension-bullet-list";
+import CodeBase from "@tiptap/extension-code";
+import CodeBlock$1 from "@tiptap/extension-code-block";
+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 HorizontalRule from "@tiptap/extension-horizontal-rule";
+import HardBreakBase from "@tiptap/extension-hard-break";
+import { Heading as Heading$1 } 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 SuperscriptBase from "@tiptap/extension-superscript";
+import { Text } from "@tiptap/extension-text";
+import UnderlineBase from "@tiptap/extension-underline";
+
+//#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/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, { 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/core/serializer/compose-react-email.tsx
+const NODES_WITH_INCREMENTED_CHILD_DEPTH = new Set(["bulletList", "orderedList"]);
+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 typeToExtensionMap = Object.fromEntries(extensions.map((extension) => [extension.name, extension]));
+	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) return null;
+			const emailNode = typeToExtensionMap[node.type];
+			if (!emailNode || !(emailNode instanceof EmailNode)) return null;
+			const NodeComponent = emailNode.config.renderToReactEmail;
+			const childDepth = NODES_WITH_INCREMENTED_CHILD_DEPTH.has(node.type) ? depth + 1 : depth;
+			let renderedNode = node.text ? node.text : /* @__PURE__ */ jsx(NodeComponent, {
+				node: node.type === "table" && inlineStyles.width && !node.attrs?.width ? {
+					...node,
+					attrs: {
+						...node.attrs,
+						width: inlineStyles.width
+					}
+				} : node,
+				style,
+				extension: emailNode,
+				children: parseContent(node.content, childDepth)
+			}, index);
+			if (node.marks) for (const mark of node.marks) {
+				const emailMark = typeToExtensionMap[mark.type];
+				if (emailMark instanceof EmailMark) {
+					const MarkComponent = emailMark.config.renderToReactEmail;
+					renderedNode = /* @__PURE__ */ jsx(MarkComponent, {
+						mark,
+						node,
+						style: serializerPlugin?.getNodeStyles({
+							type: mark.type,
+							attrs: mark.attrs ?? {}
+						}, depth, editor) ?? {},
+						extension: emailMark,
+						children: renderedNode
+					});
+				}
+			}
+			return renderedNode;
+		});
+	}
+	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/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")
+		};
+	}
+});
+
+//#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/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/body.tsx
+const Body$1 = 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, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx("div", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/bold.tsx
+const BoldWithoutFontWeightInference = BoldBase.extend({ parseHTML() {
+	return [
+		{ tag: "strong" },
+		{
+			tag: "b",
+			getAttrs: (node) => node.style.fontWeight !== "normal" && null
+		},
+		{
+			style: "font-weight=400",
+			clearMark: (mark) => mark.type.name === this.name
+		}
+	];
+} });
+const Bold = EmailMark.from(BoldWithoutFontWeightInference, ({ children, style }) => /* @__PURE__ */ jsx("strong", {
+	style,
+	children
+}));
+
+//#endregion
+//#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/button.tsx
+const Button$1 = 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;
+			}
+		}];
+	},
+	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"
+					}]
+				});
+			}
+		};
+	},
+	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, {
+				className: node.attrs?.class || void 0,
+				href: node.attrs?.href,
+				style: {
+					...style,
+					...inlineStyles
+				},
+				children
+			})
+		}) });
+	}
+});
+
+//#endregion
+//#region src/extensions/class-attribute.tsx
+const ClassAttribute = Extension.create({
+	name: "classAttribute",
+	addOptions() {
+		return {
+			types: [],
+			class: []
+		};
+	},
+	addGlobalAttributes() {
+		return [{
+			types: this.options.types,
+			attributes: { class: {
+				default: "",
+				parseHTML: (element) => element.className || "",
+				renderHTML: (attributes) => {
+					return attributes.class ? { class: attributes.class } : {};
+				}
+			} }
+		}];
+	},
+	addCommands() {
+		return {
+			unsetClass: () => ({ commands }) => {
+				return this.options.types.every((type) => commands.resetAttributes(type, "class"));
+			},
+			setClass: (classList) => ({ commands }) => {
+				return this.options.types.every((type) => commands.updateAttributes(type, { class: classList }));
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return { Enter: ({ editor }) => {
+			requestAnimationFrame(() => {
+				editor.commands.resetAttributes("paragraph", "class");
+			});
+			return false;
+		} };
+	}
+});
+
+//#endregion
+//#region src/extensions/code.tsx
+const Code = EmailMark.from(CodeBase, ({ children, node, style }) => /* @__PURE__ */ jsx("code", {
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
+//#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"]`);
+}
+
+//#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;
+}
+
+//#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
+			]
+		];
+	},
+	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
+		}
+	});
+});
+
+//#endregion
+//#region src/utils/is-collaboration.ts
+const COLLABORATION_EXTENSION_NAMES = new Set(["liveblocksExtension", "collaboration"]);
+function hasCollaborationExtension(exts) {
+	return exts.some((ext) => COLLABORATION_EXTENSION_NAMES.has(ext.name));
+}
+
+//#endregion
+//#region src/extensions/container.tsx
+function hasContainerNode(doc) {
+	let found = false;
+	doc.forEach((node) => {
+		if (node.type.name === "container") found = true;
+	});
+	return found;
+}
+function wrapInContainer(state) {
+	const { doc } = state;
+	const containerType = state.schema.nodes.container;
+	const contentNodes = [];
+	const globalContentNodes = [];
+	doc.forEach((node) => {
+		if (node.type.name === "globalContent") globalContentNodes.push(node);
+		else contentNodes.push(node);
+	});
+	const containerContent = contentNodes.length > 0 ? contentNodes : [state.schema.nodes.paragraph.create()];
+	const containerNode = containerType.create(null, containerContent);
+	const newDocContent = [...globalContentNodes, containerNode];
+	const tr = state.tr;
+	tr.replaceWith(0, doc.content.size, newDocContent);
+	tr.setMeta("addToHistory", false);
+	return tr;
+}
+const Container$1 = EmailNode.create({
+	name: "container",
+	group: "block",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	selectable: false,
+	draggable: false,
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{ tag: "div[data-type=\"container\"]" }, {
+			tag: "table[role=\"presentation\"]",
+			priority: 60,
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const table = node;
+				if (!table.style.maxWidth) return false;
+				if (!table.querySelector(":scope > tbody > tr:only-child > td:only-child")) return false;
+				return null;
+			},
+			contentElement: (node) => node.querySelector(":scope > tbody > tr > td")
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			mergeAttributes({
+				"data-type": "container",
+				class: "node-container"
+			}, this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addProseMirrorPlugins() {
+		const isCollaborative = hasCollaborationExtension(this.editor.extensionManager.extensions);
+		return [new Plugin({
+			key: new PluginKey("containerEnforcer"),
+			view: isCollaborative ? void 0 : (editorView) => {
+				if (!hasContainerNode(editorView.state.doc)) {
+					const tr = wrapInContainer(editorView.state);
+					editorView.dispatch(tr);
+				}
+				return {};
+			},
+			appendTransaction(_transactions, oldState, newState) {
+				if (hasContainerNode(newState.doc)) return null;
+				if (newState.doc.eq(oldState.doc)) return null;
+				return wrapInContainer(newState);
+			}
+		})];
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx(Container, {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles,
+				width: "100%",
+				maxWidth: style?.width ?? style?.maxWidth
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/div.tsx
+const Div = EmailNode.create({
+	name: "div",
+	group: "block",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	parseHTML() {
+		return [{
+			tag: "div:not([data-type])",
+			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
+		];
+	},
+	addAttributes() {
+		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx("div", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#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 = node;
+	}
+	if (nonGlobalNodeCount === 0) return true;
+	if (nonGlobalNodeCount !== 1) return false;
+	if (firstNonGlobalNode.type.name === "container") return hasOnlyEmptyParagraph(firstNonGlobalNode);
+	return isEmptyParagraph(firstNonGlobalNode);
+}
+function hasOnlyEmptyParagraph(node) {
+	if (node.childCount === 0) return true;
+	if (node.childCount !== 1) return false;
+	return isEmptyParagraph(node.child(0));
+}
+function isEmptyParagraph(node) {
+	return node.type.name === "paragraph" && node.textContent.length === 0;
+}
+
+//#endregion
+//#region src/core/use-editor.ts
+function useEditor$1({ 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({
+		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/extensions/divider.tsx
+const Divider = EmailNode.from(HorizontalRule.extend({
+	addAttributes() {
+		return { class: { default: "divider" } };
+	},
+	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));
+			}
+		})];
+	},
+	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
+//#region src/extensions/hard-break.tsx
+const HardBreak = EmailNode.from(HardBreakBase, () => /* @__PURE__ */ jsx("br", {}));
+
+//#endregion
+//#region src/extensions/heading.tsx
+const Heading$2 = EmailNode.from(Heading$1.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, {
+			as: `h${level}`,
+			...attrs,
+			children: /* @__PURE__ */ jsx(NodeViewContent, {})
+		}) });
+	});
+} }), ({ children, node, style }) => {
+	return /* @__PURE__ */ jsx(Heading, {
+		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$1 = EmailMark.from(TiptapLink, ({ children, mark, style }) => {
+	const linkMarkStyle = mark.attrs?.style ? inlineCssToJs(mark.attrs.style) : {};
+	return /* @__PURE__ */ jsx(Link, {
+		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$1 = 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, {
+			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
+const SupBase = SuperscriptBase.extend({
+	name: "sup",
+	addCommands() {
+		return {
+			...this.parent?.(),
+			setSup: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleSup: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetSup: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	}
+});
+const Sup = EmailMark.from(SupBase, ({ children, style }) => /* @__PURE__ */ jsx("sup", {
+	style,
+	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;
+				});
+				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, {
+			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/text.tsx
+const Text$1 = EmailNode.from(Text, ({ children }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+});
+
+//#endregion
+//#region src/extensions/trailing-node.tsx
+const skipTrailingNodeMeta = "skipTrailingNode";
+function nodeEqualsType({ types, node }) {
+	return node && Array.isArray(types) && types.includes(node.type) || node?.type === types;
+}
+/**
+* This extension allows you to add an extra node at the end of a node.
+*
+* Differently from TipTap's native one, it allows you to pick which node to append the trailing node to.
+* @see https://www.tiptap.dev/api/extensions/trailing-node
+*
+* We could contribute this to TipTap's core extensions and I think we should at some once we get some time.
+*/
+const TrailingNode = Extension.create({
+	name: "trailingNode",
+	addOptions() {
+		return {
+			node: void 0,
+			appendTo: "doc",
+			notAfter: []
+		};
+	},
+	addProseMirrorPlugins() {
+		const plugin = new PluginKey(this.name);
+		const defaultNode = this.options.node || this.editor.schema.topNodeType.contentMatch.defaultType?.name || "paragraph";
+		const notAfter = Array.isArray(this.options.notAfter) ? this.options.notAfter : [this.options.notAfter].filter(Boolean);
+		const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => notAfter.concat(defaultNode).includes(node.name));
+		const appendToType = this.editor.schema.nodes[this.options.appendTo || "doc"];
+		const getInsertPositions = (doc) => {
+			const positions = [];
+			if (doc.type === appendToType) {
+				if (!nodeEqualsType({
+					node: doc.lastChild,
+					types: disabledNodes
+				})) positions.push(doc.content.size);
+			}
+			doc.descendants((node, pos) => {
+				if (node.type !== appendToType) return;
+				if (!nodeEqualsType({
+					node: node.lastChild,
+					types: disabledNodes
+				})) positions.push(pos + node.nodeSize - 1);
+			});
+			return positions;
+		};
+		return [new Plugin({
+			key: plugin,
+			appendTransaction: (transactions, __, state) => {
+				const { doc, tr, schema } = state;
+				const shouldInsert = plugin.getState(state);
+				const type = schema.nodes[defaultNode];
+				if (transactions.some((transaction) => transaction.getMeta(skipTrailingNodeMeta))) return;
+				if (!shouldInsert) return;
+				const positions = getInsertPositions(doc);
+				for (const pos of positions.sort((a, b) => b - a)) tr.insert(pos, type.create());
+				return positions.length > 0 ? tr : void 0;
+			},
+			state: {
+				init: (_, state) => {
+					return getInsertPositions(state.doc).length > 0;
+				},
+				apply: (tr, value) => {
+					if (!tr.docChanged) return value;
+					if (tr.getMeta("__uniqueIDTransaction")) return value;
+					return getInsertPositions(tr.doc).length > 0;
+				}
+			}
+		})];
+	}
+});
+
+//#endregion
+//#region src/extensions/underline.tsx
+const Underline = EmailMark.from(UnderlineBase, ({ children, style }) => /* @__PURE__ */ jsx("u", {
+	style,
+	children
+}));
+
+//#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/index.ts
+const starterKitExtensions = {
+	CodeBlockPrism,
+	Code,
+	TwoColumns,
+	ThreeColumns,
+	FourColumns,
+	Container: Container$1,
+	ColumnsColumn,
+	Paragraph,
+	BulletList,
+	OrderedList,
+	Blockquote,
+	ListItem,
+	HardBreak,
+	Italic,
+	Placeholder,
+	PreviewText,
+	TrailingNode,
+	Bold,
+	Strike,
+	Heading: Heading$2,
+	Divider,
+	Link: Link$1,
+	Sup,
+	Underline,
+	Uppercase,
+	PreservedStyle,
+	Table,
+	TableRow,
+	TableCell,
+	TableHeader,
+	Body: Body$1,
+	Div,
+	Button: Button$1,
+	Section: Section$1,
+	GlobalContent,
+	Text: Text$1,
+	AlignmentAttribute,
+	StyleAttribute,
+	ClassAttribute,
+	MaxNesting
+};
+const StarterKit = Extension.create({
+	name: "reactEmailStarterKit",
+	addOptions() {
+		return {
+			TiptapStarterKit: {},
+			CodeBlockPrism: {
+				defaultLanguage: "javascript",
+				HTMLAttributes: { class: "prism node-codeBlock" }
+			},
+			TrailingNode: {
+				node: "paragraph",
+				appendTo: "container"
+			},
+			Code: { HTMLAttributes: {
+				class: "node-inlineCode",
+				spellcheck: "false"
+			} },
+			TwoColumns: {},
+			ThreeColumns: {},
+			FourColumns: {},
+			ColumnsColumn: {},
+			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: {
+				openOnClick: false,
+				HTMLAttributes: { class: "node-link" }
+			},
+			Sup: {},
+			Underline: {},
+			Uppercase: {},
+			PreservedStyle: {},
+			Table: {},
+			TableRow: {},
+			TableCell: {},
+			TableHeader: {},
+			Body: {},
+			Container: {},
+			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"
+			] },
+			Text: {},
+			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,
+			text: 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
+export { Div as A, AlignmentAttribute as B, processStylesForUnlink as C, Divider as D, HardBreak as E, Button$1 as F, EmailMark as H, BulletList as I, Bold as L, CodeBlockPrism as M, Code as N, useEditor$1 as O, ClassAttribute as P, Body$1 as R, PreservedStyle as S, Heading$2 as T, createPasteHandler as U, composeReactEmail as V, createDropHandler as W, Paragraph as _, skipTrailingNodeMeta as a, ListItem as b, TableCell as c, Sup as d, StyleAttribute as f, Placeholder as g, PreviewText as h, TrailingNode as i, Container$1 as j, isDocumentVisuallyEmpty as k, TableHeader as l, Section$1 as m, Uppercase as n, Text$1 as o, Strike as p, Underline as r, Table as s, StarterKit as t, TableRow as u, OrderedList as v, Italic as w, Link$1 as x, MaxNesting as y, Blockquote as z };
+//# sourceMappingURL=extensions-BvfmaKCn.mjs.map