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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Node, findChildren, mergeAttributes } from "@tiptap/core";
+import { Extension, Mark, Node, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
 import { jsx } from "react/jsx-runtime";
 import * as ReactEmailComponents from "@react-email/components";
 import { Button as Button$1, CodeBlock, Column, Row, Section as Section$1 } from "@react-email/components";
@@ -7,6 +7,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { fromHtml } from "hast-util-from-html";
 import Prism from "prismjs";
+import Placeholder from "@tiptap/extension-placeholder";
 
 //#region src/core/email-node.ts
 var EmailNode = class EmailNode extends Node {
@@ -38,6 +39,61 @@ var EmailNode = class EmailNode extends Node {
 	}
 };
 
+//#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/attribute-helpers.ts
 /**
@@ -94,6 +150,14 @@ const LAYOUT_ATTRIBUTES = [
 	"height"
 ];
 /**
+* Table-specific HTML attributes used for table layout and styling.
+*/
+const TABLE_ATTRIBUTES = [
+	"border",
+	"cellpadding",
+	"cellspacing"
+];
+/**
 * Table cell-specific HTML attributes.
 */
 const TABLE_CELL_ATTRIBUTES = [
@@ -110,6 +174,7 @@ const TABLE_HEADER_ATTRIBUTES = [...TABLE_CELL_ATTRIBUTES, "scope"];
 
 //#endregion
 //#region src/utils/styles.ts
+const WHITE_SPACE_REGEX = /\s+/;
 const inlineCssToJs = (inlineStyle, options = {}) => {
 	const styleObject = {};
 	if (!inlineStyle || inlineStyle === "" || typeof inlineStyle === "object") return styleObject;
@@ -124,6 +189,157 @@ const inlineCssToJs = (inlineStyle, options = {}) => {
 	});
 	return styleObject;
 };
+/**
+* Expands CSS shorthand properties (margin, padding) into their longhand equivalents.
+* This prevents shorthand properties from overriding specific longhand properties in email clients.
+*
+* @param styles - Style object that may contain shorthand properties
+* @returns New style object with shorthand properties expanded to longhand
+*
+* @example
+* expandShorthandProperties({ margin: '0', paddingTop: '10px' })
+* // Returns: { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '0', paddingTop: '10px' }
+*/
+function expandShorthandProperties(styles) {
+	if (!styles || typeof styles !== "object") return {};
+	const expanded = {};
+	for (const key in styles) {
+		const value = styles[key];
+		if (value === void 0 || value === null || value === "") continue;
+		switch (key) {
+			case "margin": {
+				const values = parseShorthandValue(value);
+				expanded.marginTop = values.top;
+				expanded.marginRight = values.right;
+				expanded.marginBottom = values.bottom;
+				expanded.marginLeft = values.left;
+				break;
+			}
+			case "padding": {
+				const values = parseShorthandValue(value);
+				expanded.paddingTop = values.top;
+				expanded.paddingRight = values.right;
+				expanded.paddingBottom = values.bottom;
+				expanded.paddingLeft = values.left;
+				break;
+			}
+			case "border": {
+				const values = convertBorderValue(value);
+				expanded.borderStyle = values.style;
+				expanded.borderWidth = values.width;
+				expanded.borderColor = values.color;
+				break;
+			}
+			case "borderTopLeftRadius":
+			case "borderTopRightRadius":
+			case "borderBottomLeftRadius":
+			case "borderBottomRightRadius":
+				expanded[key] = value;
+				if (styles.borderTopLeftRadius && styles.borderTopRightRadius && styles.borderBottomLeftRadius && styles.borderBottomRightRadius) {
+					const values = [
+						styles.borderTopLeftRadius,
+						styles.borderTopRightRadius,
+						styles.borderBottomLeftRadius,
+						styles.borderBottomRightRadius
+					];
+					if (new Set(values).size === 1) expanded.borderRadius = values[0];
+				}
+				break;
+			default: expanded[key] = value;
+		}
+	}
+	return expanded;
+}
+/**
+* Parses CSS shorthand value (1-4 values) into individual side values.
+* Follows CSS specification for shorthand property value parsing.
+*
+* @param value - Shorthand value string (e.g., '0', '10px 20px', '5px 10px 15px 20px')
+* @returns Object with top, right, bottom, left values
+*/
+function parseShorthandValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	const len = parts.length;
+	if (len === 1) return {
+		top: parts[0],
+		right: parts[0],
+		bottom: parts[0],
+		left: parts[0]
+	};
+	if (len === 2) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[0],
+		left: parts[1]
+	};
+	if (len === 3) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[1]
+	};
+	if (len === 4) return {
+		top: parts[0],
+		right: parts[1],
+		bottom: parts[2],
+		left: parts[3]
+	};
+	return {
+		top: stringValue,
+		right: stringValue,
+		bottom: stringValue,
+		left: stringValue
+	};
+}
+function convertBorderValue(value) {
+	const stringValue = String(value).trim();
+	const parts = stringValue.split(WHITE_SPACE_REGEX);
+	switch (parts.length) {
+		case 1: return {
+			style: "solid",
+			width: parts[0],
+			color: "black"
+		};
+		case 2: return {
+			style: parts[1],
+			width: parts[0],
+			color: "black"
+		};
+		case 3: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		case 4: return {
+			style: parts[1],
+			width: parts[0],
+			color: parts[2]
+		};
+		default: return {
+			style: "solid",
+			width: stringValue,
+			color: "black"
+		};
+	}
+}
+/**
+* Resolves conflicts between reset styles and inline styles by expanding
+* shorthand properties (margin, padding) to longhand before merging.
+* This prevents shorthand properties from overriding specific longhand properties.
+*
+* @param resetStyles - Base reset styles that may contain shorthand properties
+* @param inlineStyles - Inline styles that should override reset styles
+* @returns Merged styles with inline styles taking precedence
+*/
+function resolveConflictingStyles(resetStyles, inlineStyles) {
+	const expandedResetStyles = expandShorthandProperties(resetStyles);
+	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
+	return {
+		...expandedResetStyles,
+		...expandedInlineStyles
+	};
+}
 
 //#endregion
 //#region src/extensions/body.tsx
@@ -170,6 +386,92 @@ const Body = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/bold.ts
+/**
+* Matches bold text via `**` as input.
+*/
+const starInputRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/;
+/**
+* Matches bold text via `**` while pasting.
+*/
+const starPasteRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g;
+/**
+* Matches bold text via `__` as input.
+*/
+const underscoreInputRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/;
+/**
+* Matches bold text via `__` while pasting.
+*/
+const underscorePasteRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
+/**
+* This extension allows you to mark text as bold.
+* @see https://tiptap.dev/api/marks/bold
+*/
+const Bold = Mark.create({
+	name: "bold",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [
+			{ tag: "strong" },
+			{
+				tag: "b",
+				getAttrs: (node) => node.style.fontWeight !== "normal" && null
+			},
+			{
+				style: "font-weight=400",
+				clearMark: (mark) => mark.type.name === this.name
+			}
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"strong",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setBold: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleBold: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetBold: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-b": () => this.editor.commands.toggleBold(),
+			"Mod-B": () => this.editor.commands.toggleBold()
+		};
+	},
+	addInputRules() {
+		return [markInputRule({
+			find: starInputRegex,
+			type: this.type
+		}), markInputRule({
+			find: underscoreInputRegex,
+			type: this.type
+		})];
+	},
+	addPasteRules() {
+		return [markPasteRule({
+			find: starPasteRegex,
+			type: this.type
+		}), markPasteRule({
+			find: underscorePasteRegex,
+			type: this.type
+		})];
+	}
+});
+
 //#endregion
 //#region src/extensions/button.tsx
 const Button = EmailNode.create({
@@ -250,6 +552,48 @@ const Button = EmailNode.create({
 	}
 });
 
+//#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/utils/prism-utils.ts
 const publicURL = "/styles/prism";
@@ -509,6 +853,169 @@ const Div = EmailNode.create({
 	}
 });
 
+//#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/placeholder.ts
+const createPlaceholderExtension = (options) => {
+	return Placeholder.configure({
+		placeholder: ({ node }) => {
+			if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+			return "Press '/' for commands";
+		},
+		includeChildren: true,
+		...options
+	});
+};
+const placeholder = createPlaceholderExtension();
+
+//#endregion
+//#region src/extensions/preserved-style.ts
+const PreservedStyle = 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",
+			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/utils/get-text-alignment.ts
 function getTextAlignment(alignment) {
@@ -569,5 +1076,275 @@ const Section = EmailNode.create({
 });
 
 //#endregion
-export { Body, Button, CodeBlockPrism, Div, EmailNode, Section };
+//#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.ts
+/**
+* This extension allows you to mark text as superscript.
+* @see https://tiptap.dev/api/marks/superscript
+*/
+const Sup = Mark.create({
+	name: "sup",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{ tag: "sup" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"sup",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setSup: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleSup: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetSup: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	}
+});
+
+//#endregion
+//#region src/extensions/table.tsx
+const Table = EmailNode.create({
+	name: "table",
+	group: "block",
+	content: "tableRow+",
+	isolating: true,
+	tableRole: "table",
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "table",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"table",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			[
+				"tbody",
+				{},
+				0
+			]
+		];
+	},
+	renderToReactEmail({ children, node, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		const alignment = node.attrs?.align || node.attrs?.alignment;
+		const width = node.attrs?.width;
+		const centeringStyles = alignment === "center" ? {
+			marginLeft: "auto",
+			marginRight: "auto"
+		} : {};
+		return /* @__PURE__ */ jsx(Section$1, {
+			className: node.attrs?.class || void 0,
+			align: alignment,
+			style: resolveConflictingStyles(styles.reset, {
+				...inlineStyles,
+				...centeringStyles
+			}),
+			...width !== void 0 ? { width } : {},
+			children
+		});
+	}
+});
+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, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx("tr", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...styles.reset,
+				...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, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ jsx(Column, {
+			className: node.attrs?.class || void 0,
+			align: node.attrs?.align || node.attrs?.alignment,
+			style: {
+				...styles.reset,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+const TableHeader = Node.create({
+	name: "tableHeader",
+	group: "tableCell",
+	content: "block+",
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([
+			...TABLE_HEADER_ATTRIBUTES,
+			...TABLE_CELL_ATTRIBUTES,
+			...LAYOUT_ATTRIBUTES,
+			...COMMON_HTML_ATTRIBUTES
+		]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "th",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"th",
+			HTMLAttributes,
+			0
+		];
+	}
+});
+
+//#endregion
+export { AlignmentAttribute, Body, Bold, Button, ClassAttribute, CodeBlockPrism, Div, EmailNode, MaxNesting, PreservedStyle, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, createPlaceholderExtension, placeholder, processStylesForUnlink };
 //# sourceMappingURL=index.mjs.map