@react-email/editor 0.0.0-experimental.15 → 0.0.0-experimental.17

package/dist/index.cjs

@@ -25,11 +25,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-let _tiptap_core = require("@tiptap/core");
-let _tiptap_starter_kit = require("@tiptap/starter-kit");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _react_email_components = require("@react-email/components");
 _react_email_components = __toESM(_react_email_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tiptap_core = require("@tiptap/core");
+let _tiptap_extensions = require("@tiptap/extensions");
+let _tiptap_react = require("@tiptap/react");
+let react = require("react");
+react = __toESM(react);
+let _tiptap_starter_kit = require("@tiptap/starter-kit");
+_tiptap_starter_kit = __toESM(_tiptap_starter_kit);
+let _tiptap_extension_blockquote = require("@tiptap/extension-blockquote");
+_tiptap_extension_blockquote = __toESM(_tiptap_extension_blockquote);
+let _tiptap_extension_bullet_list = require("@tiptap/extension-bullet-list");
+_tiptap_extension_bullet_list = __toESM(_tiptap_extension_bullet_list);
+let _tiptap_extension_code = require("@tiptap/extension-code");
+_tiptap_extension_code = __toESM(_tiptap_extension_code);
 let _tiptap_extension_code_block = require("@tiptap/extension-code-block");
 _tiptap_extension_code_block = __toESM(_tiptap_extension_code_block);
 let _tiptap_pm_state = require("@tiptap/pm/state");
@@ -37,12 +48,27 @@ let _tiptap_pm_view = require("@tiptap/pm/view");
 let hast_util_from_html = require("hast-util-from-html");
 let prismjs = require("prismjs");
 prismjs = __toESM(prismjs);
+let _tiptap_extension_horizontal_rule = require("@tiptap/extension-horizontal-rule");
+_tiptap_extension_horizontal_rule = __toESM(_tiptap_extension_horizontal_rule);
+let _tiptap_extension_hard_break = require("@tiptap/extension-hard-break");
+_tiptap_extension_hard_break = __toESM(_tiptap_extension_hard_break);
+let _tiptap_extension_heading = require("@tiptap/extension-heading");
+let _tiptap_extension_italic = require("@tiptap/extension-italic");
+_tiptap_extension_italic = __toESM(_tiptap_extension_italic);
+let _tiptap_extension_link = require("@tiptap/extension-link");
+_tiptap_extension_link = __toESM(_tiptap_extension_link);
+let _tiptap_extension_list_item = require("@tiptap/extension-list-item");
+_tiptap_extension_list_item = __toESM(_tiptap_extension_list_item);
+let _tiptap_extension_ordered_list = require("@tiptap/extension-ordered-list");
+_tiptap_extension_ordered_list = __toESM(_tiptap_extension_ordered_list);
+let _tiptap_extension_paragraph = require("@tiptap/extension-paragraph");
+_tiptap_extension_paragraph = __toESM(_tiptap_extension_paragraph);
 let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
 _tiptap_extension_placeholder = __toESM(_tiptap_extension_placeholder);
-let _tiptap_react = require("@tiptap/react");
+let _tiptap_extension_strike = require("@tiptap/extension-strike");
+_tiptap_extension_strike = __toESM(_tiptap_extension_strike);
+let _tiptap_html = require("@tiptap/html");
 let lucide_react = require("lucide-react");
-let react = require("react");
-react = __toESM(react);
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 let _tiptap_react_menus = require("@tiptap/react/menus");
@@ -51,37 +77,6 @@ _tiptap_suggestion = __toESM(_tiptap_suggestion);
 let tippy_js = require("tippy.js");
 tippy_js = __toESM(tippy_js);
 
-//#region src/core/email-node.ts
-var EmailNode = class EmailNode extends _tiptap_core.Node {
-	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
-		};
-		return customNode;
-	}
-	configure(options) {
-		return super.configure(options);
-	}
-	extend(extendedConfig) {
-		const resolvedConfig = typeof extendedConfig === "function" ? extendedConfig() : extendedConfig;
-		return super.extend(resolvedConfig);
-	}
-};
-
-//#endregion
 //#region src/core/event-bus.ts
 const EVENT_PREFIX = "@react-email/editor:";
 var EditorEventBus = class {
@@ -123,139 +118,6 @@ var EditorEventBus = class {
 };
 const editorEventBus = new EditorEventBus();
 
-//#endregion
-//#region src/extensions/alignment-attribute.tsx
-const AlignmentAttribute = _tiptap_core.Extension.create({
-	name: "alignmentAttribute",
-	addOptions() {
-		return {
-			types: [],
-			alignments: [
-				"left",
-				"center",
-				"right",
-				"justify"
-			]
-		};
-	},
-	addGlobalAttributes() {
-		return [{
-			types: this.options.types,
-			attributes: { alignment: {
-				parseHTML: (element) => {
-					const explicitAlign = element.getAttribute("align") || element.getAttribute("alignment") || element.style.textAlign;
-					if (explicitAlign && this.options.alignments.includes(explicitAlign)) return explicitAlign;
-					return null;
-				},
-				renderHTML: (attributes) => {
-					if (attributes.alignment === "left") return {};
-					return { alignment: attributes.alignment };
-				}
-			} }
-		}];
-	},
-	addCommands() {
-		return { setAlignment: (alignment) => ({ commands }) => {
-			if (!this.options.alignments.includes(alignment)) return false;
-			return this.options.types.every((type) => commands.updateAttributes(type, { alignment }));
-		} };
-	},
-	addKeyboardShortcuts() {
-		return {
-			Enter: () => {
-				const { from } = this.editor.state.selection;
-				const currentAlignment = this.editor.state.doc.nodeAt(from)?.attrs?.alignment;
-				if (currentAlignment) requestAnimationFrame(() => {
-					this.editor.commands.setAlignment(currentAlignment);
-				});
-				return false;
-			},
-			"Mod-Shift-l": () => this.editor.commands.setAlignment("left"),
-			"Mod-Shift-e": () => this.editor.commands.setAlignment("center"),
-			"Mod-Shift-r": () => this.editor.commands.setAlignment("right"),
-			"Mod-Shift-j": () => this.editor.commands.setAlignment("justify")
-		};
-	}
-});
-
-//#endregion
-//#region src/utils/attribute-helpers.ts
-/**
-* 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/utils/styles.ts
 const WHITE_SPACE_REGEX = /\s+/;
@@ -412,18 +274,354 @@ function convertBorderValue(value) {
 * shorthand properties (margin, padding) to longhand before merging.
 * This prevents shorthand properties from overriding specific longhand properties.
 *
-* @param resetStyles - Base reset styles that may contain shorthand properties
-* @param inlineStyles - Inline styles that should override reset styles
-* @returns Merged styles with inline styles taking precedence
+* @param resetStyles - Base reset styles that may contain shorthand properties
+* @param inlineStyles - Inline styles that should override reset styles
+* @returns Merged styles with inline styles taking precedence
+*/
+function resolveConflictingStyles(resetStyles, inlineStyles) {
+	const expandedResetStyles = expandShorthandProperties(resetStyles);
+	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
+	return {
+		...expandedResetStyles,
+		...expandedInlineStyles
+	};
+}
+
+//#endregion
+//#region src/core/serializer/default-base-template.tsx
+function DefaultBaseTemplate({ children, previewText }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_react_email_components.Html, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_react_email_components.Head, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
+				content: "width=device-width",
+				name: "viewport"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
+				content: "IE=edge",
+				httpEquiv: "X-UA-Compatible"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", { name: "x-apple-disable-message-reformatting" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
+				content: "telephone=no,address=no,email=no,date=no,url=no",
+				name: "format-detection"
+			})
+		] }),
+		previewText && previewText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Preview, { children: previewText }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Body, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
+			width: "100%",
+			align: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
+				style: { width: "100%" },
+				children
+			})
+		}) })
+	] });
+}
+
+//#endregion
+//#region src/core/serializer/email-mark.ts
+var EmailMark = class EmailMark extends _tiptap_core.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/email-node.ts
+var EmailNode = class EmailNode extends _tiptap_core.Node {
+	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
+		};
+		return customNode;
+	}
+	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 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__ */ (0, react_jsx_runtime.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);
+			}
+			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__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							...textAttributes,
+							...style
+						},
+						children: wrappedText
+					}, index);
+				}
+				default: return null;
+			}
+		});
+	}
+	const unformattedHtml = await (0, _react_email_components.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(serializerPlugin?.BaseTemplate ?? DefaultBaseTemplate, {
+		previewText: preview,
+		editor,
+		children: parseContent(data.content)
+	}));
+	const [prettyHtml, text] = await Promise.all([(0, _react_email_components.pretty)(unformattedHtml), (0, _react_email_components.toPlainText)(unformattedHtml)]);
+	return {
+		html: prettyHtml,
+		text
+	};
+};
+
+//#endregion
+//#region src/extensions/alignment-attribute.tsx
+const AlignmentAttribute = _tiptap_core.Extension.create({
+	name: "alignmentAttribute",
+	addOptions() {
+		return {
+			types: [],
+			alignments: [
+				"left",
+				"center",
+				"right",
+				"justify"
+			]
+		};
+	},
+	addGlobalAttributes() {
+		return [{
+			types: this.options.types,
+			attributes: { alignment: {
+				parseHTML: (element) => {
+					const explicitAlign = element.getAttribute("align") || element.getAttribute("alignment") || element.style.textAlign;
+					if (explicitAlign && this.options.alignments.includes(explicitAlign)) return explicitAlign;
+					return null;
+				},
+				renderHTML: (attributes) => {
+					if (attributes.alignment === "left") return {};
+					return { alignment: attributes.alignment };
+				}
+			} }
+		}];
+	},
+	addCommands() {
+		return { setAlignment: (alignment) => ({ commands }) => {
+			if (!this.options.alignments.includes(alignment)) return false;
+			return this.options.types.every((type) => commands.updateAttributes(type, { alignment }));
+		} };
+	},
+	addKeyboardShortcuts() {
+		return {
+			Enter: () => {
+				const { from } = this.editor.state.selection;
+				const currentAlignment = this.editor.state.doc.nodeAt(from)?.attrs?.alignment;
+				if (currentAlignment) requestAnimationFrame(() => {
+					this.editor.commands.setAlignment(currentAlignment);
+				});
+				return false;
+			},
+			"Mod-Shift-l": () => this.editor.commands.setAlignment("left"),
+			"Mod-Shift-e": () => this.editor.commands.setAlignment("center"),
+			"Mod-Shift-r": () => this.editor.commands.setAlignment("right"),
+			"Mod-Shift-j": () => this.editor.commands.setAlignment("justify")
+		};
+	}
+});
+
+//#endregion
+//#region src/utils/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(_tiptap_extension_blockquote.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.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/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 resolveConflictingStyles(resetStyles, inlineStyles) {
-	const expandedResetStyles = expandShorthandProperties(resetStyles);
-	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
-	return {
-		...expandedResetStyles,
-		...expandedInlineStyles
-	};
+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/body.tsx
@@ -471,7 +669,7 @@ const Body = EmailNode.create({
 });
 
 //#endregion
-//#region src/extensions/bold.ts
+//#region src/extensions/bold.tsx
 /**
 * Matches bold text via `**` as input.
 */
@@ -492,7 +690,7 @@ const underscorePasteRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
 * This extension allows you to mark text as bold.
 * @see https://tiptap.dev/api/marks/bold
 */
-const Bold = _tiptap_core.Mark.create({
+const Bold = EmailMark.create({
 	name: "bold",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -517,6 +715,12 @@ const Bold = _tiptap_core.Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+			style,
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setBold: () => ({ commands }) => {
@@ -556,6 +760,17 @@ const Bold = _tiptap_core.Mark.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/bullet-list.tsx
+const BulletList = EmailNode.from(_tiptap_extension_bullet_list.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
 //#endregion
 //#region src/extensions/button.tsx
 const Button = EmailNode.create({
@@ -677,6 +892,16 @@ const ClassAttribute = _tiptap_core.Extension.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/code.tsx
+const Code = EmailMark.from(_tiptap_extension_code.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
 //#endregion
 //#region src/utils/prism-utils.ts
 const publicURL = "/styles/prism";
@@ -911,16 +1136,314 @@ const CodeBlockPrism = EmailNode.from(_tiptap_extension_code_block.default.exten
 });
 
 //#endregion
-//#region src/extensions/div.tsx
-const Div = EmailNode.create({
-	name: "div",
-	group: "block",
-	content: "block+",
-	defining: true,
-	isolating: true,
+//#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",
+			(0, _tiptap_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/divider.tsx
+const Divider = EmailNode.from(_tiptap_extension_horizontal_rule.default.extend({
+	addAttributes() {
+		return { class: { default: "divider" } };
+	},
+	addInputRules() {
+		return [new _tiptap_core.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 (0, _tiptap_react.ReactNodeViewRenderer)((props) => {
+			const node = props.node;
+			const { class: className, ...rest } = node.attrs;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.NodeViewWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Hr, {
+				...rest,
+				className: "node-hr",
+				style: inlineCssToJs(node.attrs.style)
+			}) });
+		});
+	}
+}), ({ node, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Hr, {
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style)
+		}
+	});
+});
+
+//#endregion
+//#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 = _tiptap_core.Node.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", (0, _tiptap_core.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(_tiptap_extension_hard_break.default, () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}));
+
+//#endregion
+//#region src/extensions/heading.tsx
+const Heading = EmailNode.from(_tiptap_extension_heading.Heading.extend({ addNodeView() {
+	return (0, _tiptap_react.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__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.NodeViewWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Heading, {
+			as: `h${level}`,
+			...attrs,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.NodeViewContent, {})
+		}) });
+	});
+} }), ({ children, node, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.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(_tiptap_extension_italic.default, ({ children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.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",
+			(0, _tiptap_core.mergeAttributes)(HTMLAttributes),
+			0
+		];
+	},
+	renderToReactEmail({ children, mark }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.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(_tiptap_extension_link.default, ({ children, mark, style }) => {
+	const linkMarkStyle = mark.attrs?.style ? inlineCssToJs(mark.attrs.style) : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.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: "div:not([data-type])",
+			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;
@@ -932,29 +1455,51 @@ const Div = EmailNode.create({
 			}
 		}];
 	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"div",
-			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
 	addAttributes() {
-		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+		return {
+			...this.parent?.(),
+			"ses:no-track": {
+				default: null,
+				parseHTML: (element) => element.getAttribute("ses:no-track")
+			}
+		};
 	},
-	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...style,
-				...inlineStyles
-			},
-			children
-		});
+	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(_tiptap_extension_list_item.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.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 = _tiptap_core.Extension.create({
@@ -1030,6 +1575,33 @@ const MaxNesting = _tiptap_core.Extension.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/ordered-list.tsx
+const OrderedList = EmailNode.from(_tiptap_extension_ordered_list.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.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(_tiptap_extension_paragraph.default, ({ children, node, style }) => {
+	const isEmpty = !node.content || node.content.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style),
+			...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+		},
+		children: isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}) : children
+	});
+});
+
 //#endregion
 //#region src/extensions/placeholder.ts
 const Placeholder = _tiptap_extension_placeholder.default.configure({
@@ -1040,80 +1612,6 @@ const Placeholder = _tiptap_extension_placeholder.default.configure({
 	includeChildren: true
 });
 
-//#endregion
-//#region src/extensions/preserved-style.ts
-const PreservedStyle = _tiptap_core.Mark.create({
-	name: "preservedStyle",
-	addAttributes() {
-		return { style: {
-			default: null,
-			parseHTML: (element) => element.getAttribute("style"),
-			renderHTML: (attributes) => {
-				if (!attributes.style) return {};
-				return { style: attributes.style };
-			}
-		} };
-	},
-	parseHTML() {
-		return [{
-			tag: "span[style]",
-			getAttrs: (element) => {
-				if (typeof element === "string") return false;
-				const style = element.getAttribute("style");
-				if (style && hasPreservableStyles(style)) return { style };
-				return false;
-			}
-		}];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"span",
-			(0, _tiptap_core.mergeAttributes)(HTMLAttributes),
-			0
-		];
-	}
-});
-const LINK_INDICATOR_STYLES = [
-	"color",
-	"text-decoration",
-	"text-decoration-line",
-	"text-decoration-color",
-	"text-decoration-style"
-];
-function parseStyleString(styleString) {
-	const temp = document.createElement("div");
-	temp.style.cssText = styleString;
-	return temp.style;
-}
-function hasBackground(style) {
-	const bgColor = style.backgroundColor;
-	const bg = style.background;
-	if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") return true;
-	if (bg && bg !== "transparent" && bg !== "none" && bg !== "rgba(0, 0, 0, 0)") return true;
-	return false;
-}
-function hasPreservableStyles(styleString) {
-	return processStylesForUnlink(styleString) !== null;
-}
-/**
-* Processes styles when unlinking:
-* - Has background (button-like): preserve all styles
-* - No background: strip link-indicator styles (color, text-decoration), keep the rest
-*/
-function processStylesForUnlink(styleString) {
-	if (!styleString) return null;
-	const style = parseStyleString(styleString);
-	if (hasBackground(style)) return styleString;
-	const filtered = [];
-	for (let i = 0; i < style.length; i++) {
-		const prop = style[i];
-		if (LINK_INDICATOR_STYLES.includes(prop)) continue;
-		const value = style.getPropertyValue(prop);
-		if (value) filtered.push(`${prop}: ${value}`);
-	}
-	return filtered.length > 0 ? filtered.join("; ") : null;
-}
-
 //#endregion
 //#region src/extensions/preview-text.ts
 const PreviewText = _tiptap_core.Node.create({
@@ -1155,17 +1653,6 @@ const PreviewText = _tiptap_core.Node.create({
 	}
 });
 
-//#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({
@@ -1214,6 +1701,13 @@ const Section = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/strike.tsx
+const Strike = EmailMark.from(_tiptap_extension_strike.default, ({ children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("s", {
+	style,
+	children
+}));
+
 //#endregion
 //#region src/extensions/style-attribute.tsx
 const StyleAttribute = _tiptap_core.Extension.create({
@@ -1263,12 +1757,12 @@ const StyleAttribute = _tiptap_core.Extension.create({
 });
 
 //#endregion
-//#region src/extensions/sup.ts
+//#region src/extensions/sup.tsx
 /**
 * This extension allows you to mark text as superscript.
 * @see https://tiptap.dev/api/marks/superscript
 */
-const Sup = _tiptap_core.Mark.create({
+const Sup = EmailMark.create({
 	name: "sup",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1283,6 +1777,12 @@ const Sup = _tiptap_core.Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", {
+			style,
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setSup: () => ({ commands }) => {
@@ -1485,8 +1985,8 @@ const TableHeader = _tiptap_core.Node.create({
 });
 
 //#endregion
-//#region src/extensions/uppercase.ts
-const Uppercase = _tiptap_core.Mark.create({
+//#region src/extensions/uppercase.tsx
+const Uppercase = EmailMark.create({
 	name: "uppercase",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1507,6 +2007,15 @@ const Uppercase = _tiptap_core.Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: {
+				...style,
+				textTransform: "uppercase"
+			},
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setUppercase: () => ({ commands }) => {
@@ -1694,39 +2203,23 @@ const ColumnsColumn = EmailNode.create({
 
 //#endregion
 //#region src/extensions/index.ts
-const coreExtensions = [
-	_tiptap_starter_kit.StarterKit.configure({
-		undoRedo: false,
-		heading: false,
-		link: false,
-		underline: false,
-		trailingNode: false,
-		bold: false,
-		gapcursor: false,
-		listItem: {},
-		bulletList: { HTMLAttributes: { class: "node-bulletList" } },
-		paragraph: { HTMLAttributes: { class: "node-paragraph" } },
-		orderedList: { HTMLAttributes: { class: "node-orderedList" } },
-		blockquote: { HTMLAttributes: { class: "node-blockquote" } },
-		codeBlock: false,
-		code: { HTMLAttributes: {
-			class: "node-inlineCode",
-			spellcheck: "false"
-		} },
-		horizontalRule: false,
-		dropcursor: {
-			color: "#61a8f8",
-			class: "rounded-full animate-[fade-in_300ms_ease-in-out] !z-40",
-			width: 4
-		}
-	}),
-	CodeBlockPrism.configure({
-		defaultLanguage: "javascript",
-		HTMLAttributes: { class: "prism node-codeBlock" }
-	}),
+const starterKitExtensions = {
+	CodeBlockPrism,
+	Code,
+	Paragraph,
+	BulletList,
+	OrderedList,
+	Blockquote,
+	ListItem,
+	HardBreak,
+	Italic,
 	Placeholder,
 	PreviewText,
 	Bold,
+	Strike,
+	Heading,
+	Divider,
+	Link,
 	Sup,
 	Uppercase,
 	PreservedStyle,
@@ -1738,80 +2231,378 @@ const coreExtensions = [
 	Div,
 	Button,
 	Section,
-	AlignmentAttribute.configure({ types: [
-		"heading",
-		"paragraph",
-		"image",
-		"blockquote",
-		"codeBlock",
-		"bulletList",
-		"orderedList",
-		"listItem",
-		"button",
-		"youtube",
-		"twitter",
-		"table",
-		"tableRow",
-		"tableCell",
-		"tableHeader",
-		"columnsColumn"
-	] }),
-	StyleAttribute.configure({ types: [
-		"heading",
-		"paragraph",
-		"image",
-		"blockquote",
-		"codeBlock",
-		"bulletList",
-		"orderedList",
-		"listItem",
-		"button",
-		"youtube",
-		"twitter",
-		"horizontalRule",
-		"footer",
-		"section",
-		"div",
-		"body",
-		"table",
-		"tableRow",
-		"tableCell",
-		"tableHeader",
-		"columnsColumn",
-		"link"
-	] }),
-	ClassAttribute.configure({ types: [
-		"heading",
-		"paragraph",
-		"image",
-		"blockquote",
-		"bulletList",
-		"orderedList",
-		"listItem",
-		"button",
-		"youtube",
-		"twitter",
-		"horizontalRule",
-		"footer",
-		"section",
-		"div",
-		"body",
-		"table",
-		"tableRow",
-		"tableCell",
-		"tableHeader",
-		"columnsColumn",
-		"link"
-	] }),
-	MaxNesting.configure({
-		maxDepth: 50,
-		nodeTypes: [
-			"section",
-			"bulletList",
-			"orderedList"
-		]
-	})
-];
+	GlobalContent,
+	AlignmentAttribute,
+	StyleAttribute,
+	ClassAttribute,
+	MaxNesting
+};
+const StarterKit = _tiptap_core.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(_tiptap_starter_kit.default.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 = (0, _tiptap_html.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/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
+		};
+	}
+	if (nonGlobalNodeCount === 0) return true;
+	if (nonGlobalNodeCount !== 1) return false;
+	return firstNonGlobalNode?.type.name === "paragraph" && firstNonGlobalNode.textContent.trim().length === 0 && firstNonGlobalNode.childCount === 0;
+}
+
+//#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 ? [] : [_tiptap_extensions.UndoRedo],
+		...extensions
+	], [extensions, isCollaborative]);
+	const editor = (0, _tiptap_react.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: (0, _tiptap_react.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
@@ -2967,13 +3758,12 @@ function groupByCategory(items) {
 	return ordered;
 }
 function CommandItem({ item, selected, onSelect }) {
-	const Icon = item.icon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		"data-re-slash-command-item": "",
 		"data-selected": selected || void 0,
 		onClick: onSelect,
 		type: "button",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { size: 20 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title })]
+		children: [item.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title })]
 	});
 }
 function CommandList({ items, command, query, ref }) {
@@ -3048,11 +3838,11 @@ function CommandList({ items, command, query, ref }) {
 }
 
 //#endregion
-//#region src/ui/slash-command/commands.ts
+//#region src/ui/slash-command/commands.tsx
 const TEXT = {
 	title: "Text",
 	description: "Plain text block",
-	icon: lucide_react.Text,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Text, { size: 20 }),
 	category: "Text",
 	searchTerms: ["p", "paragraph"],
 	command: ({ editor, range }) => {
@@ -3062,7 +3852,7 @@ const TEXT = {
 const H1 = {
 	title: "Title",
 	description: "Large heading",
-	icon: lucide_react.Heading1,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading1, { size: 20 }),
 	category: "Text",
 	searchTerms: [
 		"title",
@@ -3077,7 +3867,7 @@ const H1 = {
 const H2 = {
 	title: "Subtitle",
 	description: "Medium heading",
-	icon: lucide_react.Heading2,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading2, { size: 20 }),
 	category: "Text",
 	searchTerms: [
 		"subtitle",
@@ -3091,7 +3881,7 @@ const H2 = {
 const H3 = {
 	title: "Heading",
 	description: "Small heading",
-	icon: lucide_react.Heading3,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading3, { size: 20 }),
 	category: "Text",
 	searchTerms: [
 		"subtitle",
@@ -3105,7 +3895,7 @@ const H3 = {
 const BULLET_LIST = {
 	title: "Bullet list",
 	description: "Unordered list",
-	icon: lucide_react.List,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { size: 20 }),
 	category: "Text",
 	searchTerms: ["unordered", "point"],
 	command: ({ editor, range }) => {
@@ -3115,7 +3905,7 @@ const BULLET_LIST = {
 const NUMBERED_LIST = {
 	title: "Numbered list",
 	description: "Ordered list",
-	icon: lucide_react.ListOrdered,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListOrdered, { size: 20 }),
 	category: "Text",
 	searchTerms: ["ordered"],
 	command: ({ editor, range }) => {
@@ -3125,7 +3915,7 @@ const NUMBERED_LIST = {
 const QUOTE = {
 	title: "Quote",
 	description: "Block quote",
-	icon: lucide_react.TextQuote,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TextQuote, { size: 20 }),
 	category: "Text",
 	searchTerms: ["blockquote"],
 	command: ({ editor, range }) => {
@@ -3135,7 +3925,7 @@ const QUOTE = {
 const CODE = {
 	title: "Code block",
 	description: "Code snippet",
-	icon: lucide_react.SquareCode,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SquareCode, { size: 20 }),
 	category: "Text",
 	searchTerms: ["codeblock"],
 	command: ({ editor, range }) => {
@@ -3145,7 +3935,7 @@ const CODE = {
 const BUTTON = {
 	title: "Button",
 	description: "Clickable button",
-	icon: lucide_react.MousePointer,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MousePointer, { size: 20 }),
 	category: "Layout",
 	searchTerms: ["button"],
 	command: ({ editor, range }) => {
@@ -3155,7 +3945,7 @@ const BUTTON = {
 const DIVIDER = {
 	title: "Divider",
 	description: "Horizontal separator",
-	icon: lucide_react.SplitSquareVertical,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SplitSquareVertical, { size: 20 }),
 	category: "Layout",
 	searchTerms: [
 		"hr",
@@ -3169,7 +3959,7 @@ const DIVIDER = {
 const SECTION = {
 	title: "Section",
 	description: "Content section",
-	icon: lucide_react.Rows2,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Rows2, { size: 20 }),
 	category: "Layout",
 	searchTerms: [
 		"section",
@@ -3183,7 +3973,7 @@ const SECTION = {
 const TWO_COLUMNS = {
 	title: "2 columns",
 	description: "Two column layout",
-	icon: lucide_react.Columns2,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Columns2, { size: 20 }),
 	category: "Layout",
 	searchTerms: [
 		"columns",
@@ -3204,7 +3994,7 @@ const TWO_COLUMNS = {
 const THREE_COLUMNS = {
 	title: "3 columns",
 	description: "Three column layout",
-	icon: lucide_react.Columns3,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Columns3, { size: 20 }),
 	category: "Layout",
 	searchTerms: [
 		"columns",
@@ -3224,7 +4014,7 @@ const THREE_COLUMNS = {
 const FOUR_COLUMNS = {
 	title: "4 columns",
 	description: "Four column layout",
-	icon: lucide_react.Columns4,
+	icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Columns4, { size: 20 }),
 	category: "Layout",
 	searchTerms: [
 		"columns",
@@ -3379,6 +4169,7 @@ const SlashCommand = createSlashCommand();
 exports.AlignmentAttribute = AlignmentAttribute;
 exports.BULLET_LIST = BULLET_LIST;
 exports.BUTTON = BUTTON;
+exports.Blockquote = Blockquote;
 exports.Body = Body;
 exports.Bold = Bold;
 exports.BubbleMenu = BubbleMenu;
@@ -3398,6 +4189,7 @@ exports.BubbleMenuSeparator = BubbleMenuSeparator;
 exports.BubbleMenuStrike = BubbleMenuStrike;
 exports.BubbleMenuUnderline = BubbleMenuUnderline;
 exports.BubbleMenuUppercase = BubbleMenuUppercase;
+exports.BulletList = BulletList;
 exports.Button = Button;
 exports.ButtonBubbleMenu = ButtonBubbleMenu;
 exports.ButtonBubbleMenuDefault = ButtonBubbleMenuDefault;
@@ -3407,6 +4199,7 @@ exports.ButtonBubbleMenuToolbar = ButtonBubbleMenuToolbar;
 exports.CODE = CODE;
 exports.COLUMN_PARENT_TYPES = COLUMN_PARENT_TYPES;
 exports.ClassAttribute = ClassAttribute;
+exports.Code = Code;
 exports.CodeBlockPrism = CodeBlockPrism;
 exports.ColumnsColumn = ColumnsColumn;
 exports.CommandList = CommandList;
@@ -3415,14 +4208,17 @@ exports.Div = Div;
 exports.EmailNode = EmailNode;
 exports.FOUR_COLUMNS = FOUR_COLUMNS;
 exports.FourColumns = FourColumns;
+exports.GlobalContent = GlobalContent;
 exports.H1 = H1;
 exports.H2 = H2;
 exports.H3 = H3;
+exports.HardBreak = HardBreak;
 exports.ImageBubbleMenu = ImageBubbleMenu;
 exports.ImageBubbleMenuDefault = ImageBubbleMenuDefault;
 exports.ImageBubbleMenuEditLink = ImageBubbleMenuEditLink;
 exports.ImageBubbleMenuRoot = ImageBubbleMenuRoot;
 exports.ImageBubbleMenuToolbar = ImageBubbleMenuToolbar;
+exports.Italic = Italic;
 exports.LinkBubbleMenu = LinkBubbleMenu;
 exports.LinkBubbleMenuDefault = LinkBubbleMenuDefault;
 exports.LinkBubbleMenuEditLink = LinkBubbleMenuEditLink;
@@ -3431,12 +4227,15 @@ exports.LinkBubbleMenuOpenLink = LinkBubbleMenuOpenLink;
 exports.LinkBubbleMenuRoot = LinkBubbleMenuRoot;
 exports.LinkBubbleMenuToolbar = LinkBubbleMenuToolbar;
 exports.LinkBubbleMenuUnlink = LinkBubbleMenuUnlink;
+exports.ListItem = ListItem;
 exports.MAX_COLUMNS_DEPTH = MAX_COLUMNS_DEPTH;
 exports.MaxNesting = MaxNesting;
 exports.NUMBERED_LIST = NUMBERED_LIST;
 exports.NodeSelectorContent = NodeSelectorContent;
 exports.NodeSelectorRoot = NodeSelectorRoot;
 exports.NodeSelectorTrigger = NodeSelectorTrigger;
+exports.OrderedList = OrderedList;
+exports.Paragraph = Paragraph;
 exports.Placeholder = Placeholder;
 exports.PreservedStyle = PreservedStyle;
 exports.PreviewText = PreviewText;
@@ -3444,6 +4243,8 @@ exports.QUOTE = QUOTE;
 exports.SECTION = SECTION;
 exports.Section = Section;
 exports.SlashCommand = SlashCommand;
+exports.StarterKit = StarterKit;
+exports.Strike = Strike;
 exports.StyleAttribute = StyleAttribute;
 exports.Sup = Sup;
 exports.TEXT = TEXT;
@@ -3456,17 +4257,19 @@ exports.TableRow = TableRow;
 exports.ThreeColumns = ThreeColumns;
 exports.TwoColumns = TwoColumns;
 exports.Uppercase = Uppercase;
-exports.coreExtensions = coreExtensions;
+exports.composeReactEmail = composeReactEmail;
 exports.createSlashCommand = createSlashCommand;
 exports.defaultSlashCommands = defaultSlashCommands;
 exports.editorEventBus = editorEventBus;
 exports.filterAndRankItems = filterAndRankItems;
 exports.getColumnsDepth = getColumnsDepth;
+exports.getGlobalContent = getGlobalContent;
 exports.isAtMaxColumnsDepth = isAtMaxColumnsDepth;
 exports.isInsideNode = isInsideNode;
 exports.processStylesForUnlink = processStylesForUnlink;
 exports.scoreItem = scoreItem;
 exports.setTextAlignment = setTextAlignment;
 exports.useButtonBubbleMenuContext = useButtonBubbleMenuContext;
+exports.useEditor = useEditor;
 exports.useImageBubbleMenuContext = useImageBubbleMenuContext;
 exports.useLinkBubbleMenuContext = useLinkBubbleMenuContext;