@react-email/editor 0.0.0-experimental.22 → 0.0.0-experimental.25

package/dist/columns-ZSaLdkg9.cjs

@@ -0,0 +1,630 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let _react_email_components = require("@react-email/components");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tiptap_core = require("@tiptap/core");
+let _tiptap_pm_state = require("@tiptap/pm/state");
+
+//#region src/core/event-bus.ts
+const EVENT_PREFIX = "@react-email/editor:";
+var EditorEventBus = class {
+	prefixEventName(eventName) {
+		return `${EVENT_PREFIX}${String(eventName)}`;
+	}
+	dispatch(eventName, payload, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const event = new CustomEvent(prefixedEventName, {
+			detail: payload,
+			bubbles: false,
+			cancelable: false
+		});
+		target.dispatchEvent(event);
+	}
+	on(eventName, handler, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const abortController = new AbortController();
+		const wrappedHandler = (event) => {
+			const customEvent = event;
+			const result = handler(customEvent.detail);
+			if (result instanceof Promise) result.catch((error) => {
+				console.error(`Error in async event handler for ${prefixedEventName}:`, {
+					event: customEvent.detail,
+					error
+				});
+			});
+		};
+		target.addEventListener(prefixedEventName, wrappedHandler, {
+			...options,
+			signal: abortController.signal
+		});
+		return { unsubscribe: () => {
+			abortController.abort();
+		} };
+	}
+};
+const editorEventBus = new EditorEventBus();
+
+//#endregion
+//#region src/utils/styles.ts
+const WHITE_SPACE_REGEX = /\s+/;
+const inlineCssToJs = (inlineStyle, options = {}) => {
+	const styleObject = {};
+	if (!inlineStyle || inlineStyle === "" || typeof inlineStyle === "object") return styleObject;
+	inlineStyle.split(";").forEach((style) => {
+		if (style.trim()) {
+			const [key, value] = style.split(":");
+			const valueTrimmed = value?.trim();
+			if (!valueTrimmed) return;
+			const formattedKey = key.trim().replace(/-\w/g, (match) => match[1].toUpperCase());
+			styleObject[formattedKey] = options?.removeUnit ? valueTrimmed.replace(/px|%/g, "") : valueTrimmed;
+		}
+	});
+	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/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/utils/attribute-helpers.ts
+/**
+* Creates TipTap attribute definitions for a list of HTML attributes.
+* Each attribute will have the same pattern:
+* - default: null
+* - parseHTML: extracts the attribute from the element
+* - renderHTML: conditionally renders the attribute if it has a value
+*
+* @param attributeNames - Array of HTML attribute names to create definitions for
+* @returns Object with TipTap attribute definitions
+*
+* @example
+* const attrs = createStandardAttributes(['class', 'id', 'title']);
+* // Returns:
+* // {
+* //   class: {
+* //     default: null,
+* //     parseHTML: (element) => element.getAttribute('class'),
+* //     renderHTML: (attributes) => attributes.class ? { class: attributes.class } : {}
+* //   },
+* //   ...
+* // }
+*/
+function createStandardAttributes(attributeNames) {
+	return Object.fromEntries(attributeNames.map((attr) => [attr, {
+		default: null,
+		parseHTML: (element) => element.getAttribute(attr),
+		renderHTML: (attributes) => {
+			if (!attributes[attr]) return {};
+			return { [attr]: attributes[attr] };
+		}
+	}]));
+}
+/**
+* Common HTML attributes used across multiple extensions.
+* These preserve attributes during HTML import and editing for better
+* fidelity when importing existing email templates.
+*/
+const COMMON_HTML_ATTRIBUTES = [
+	"id",
+	"class",
+	"title",
+	"lang",
+	"dir",
+	"data-id"
+];
+/**
+* Layout-specific HTML attributes used for positioning and sizing.
+*/
+const LAYOUT_ATTRIBUTES = [
+	"align",
+	"width",
+	"height"
+];
+/**
+* Table-specific HTML attributes used for table layout and styling.
+*/
+const TABLE_ATTRIBUTES = [
+	"border",
+	"cellpadding",
+	"cellspacing"
+];
+/**
+* Table cell-specific HTML attributes.
+*/
+const TABLE_CELL_ATTRIBUTES = [
+	"valign",
+	"bgcolor",
+	"colspan",
+	"rowspan"
+];
+/**
+* Table header cell-specific HTML attributes.
+* These are additional attributes that only apply to <th> elements.
+*/
+const TABLE_HEADER_ATTRIBUTES = [...TABLE_CELL_ATTRIBUTES, "scope"];
+
+//#endregion
+//#region src/extensions/columns.tsx
+const COLUMN_PARENT_TYPES = [
+	"twoColumns",
+	"threeColumns",
+	"fourColumns"
+];
+const COLUMN_PARENT_SET = new Set(COLUMN_PARENT_TYPES);
+const MAX_COLUMNS_DEPTH = 3;
+function getColumnsDepth(doc, from) {
+	const $from = doc.resolve(from);
+	let depth = 0;
+	for (let d = $from.depth; d > 0; d--) if (COLUMN_PARENT_SET.has($from.node(d).type.name)) depth++;
+	return depth;
+}
+const VARIANTS = [
+	{
+		name: "twoColumns",
+		columnCount: 2,
+		content: "columnsColumn columnsColumn",
+		dataType: "two-columns"
+	},
+	{
+		name: "threeColumns",
+		columnCount: 3,
+		content: "columnsColumn columnsColumn columnsColumn",
+		dataType: "three-columns"
+	},
+	{
+		name: "fourColumns",
+		columnCount: 4,
+		content: "columnsColumn{4}",
+		dataType: "four-columns"
+	}
+];
+const NODE_TYPE_MAP = {
+	2: "twoColumns",
+	3: "threeColumns",
+	4: "fourColumns"
+};
+function createColumnsNode(config, includeCommands) {
+	return EmailNode.create({
+		name: config.name,
+		group: "block",
+		content: config.content,
+		isolating: true,
+		defining: true,
+		addAttributes() {
+			return createStandardAttributes([...LAYOUT_ATTRIBUTES, ...COMMON_HTML_ATTRIBUTES]);
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${config.dataType}"]` }];
+		},
+		renderHTML({ HTMLAttributes }) {
+			return [
+				"div",
+				(0, _tiptap_core.mergeAttributes)({
+					"data-type": config.dataType,
+					class: "node-columns"
+				}, HTMLAttributes),
+				0
+			];
+		},
+		...includeCommands && { addCommands() {
+			return { insertColumns: (count) => ({ commands, state }) => {
+				if (getColumnsDepth(state.doc, state.selection.from) >= MAX_COLUMNS_DEPTH) return false;
+				const nodeType = NODE_TYPE_MAP[count];
+				const children = Array.from({ length: count }, () => ({
+					type: "columnsColumn",
+					content: [{
+						type: "paragraph",
+						content: []
+					}]
+				}));
+				return commands.insertContent({
+					type: nodeType,
+					content: children
+				});
+			} };
+		} },
+		renderToReactEmail({ children, node, style }) {
+			const inlineStyles = inlineCssToJs(node.attrs?.style);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Row, {
+				className: node.attrs?.class || void 0,
+				style: {
+					...style,
+					...inlineStyles
+				},
+				children
+			});
+		}
+	});
+}
+const TwoColumns = createColumnsNode(VARIANTS[0], true);
+const ThreeColumns = createColumnsNode(VARIANTS[1], false);
+const FourColumns = createColumnsNode(VARIANTS[2], false);
+const ColumnsColumn = EmailNode.create({
+	name: "columnsColumn",
+	group: "columnsColumn",
+	content: "block+",
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([...LAYOUT_ATTRIBUTES, ...COMMON_HTML_ATTRIBUTES]) };
+	},
+	parseHTML() {
+		return [{ tag: "div[data-type=\"column\"]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			(0, _tiptap_core.mergeAttributes)({
+				"data-type": "column",
+				class: "node-column"
+			}, HTMLAttributes),
+			0
+		];
+	},
+	addKeyboardShortcuts() {
+		return {
+			Backspace: ({ editor }) => {
+				const { state } = editor;
+				const { selection } = state;
+				const { empty, $from } = selection;
+				if (!empty) return false;
+				for (let depth = $from.depth; depth >= 1; depth--) {
+					if ($from.pos !== $from.start(depth)) break;
+					const indexInParent = $from.index(depth - 1);
+					if (indexInParent === 0) continue;
+					const prevNode = $from.node(depth - 1).child(indexInParent - 1);
+					if (COLUMN_PARENT_SET.has(prevNode.type.name)) {
+						const deleteFrom = $from.before(depth) - prevNode.nodeSize;
+						const deleteTo = $from.before(depth);
+						editor.view.dispatch(state.tr.delete(deleteFrom, deleteTo));
+						return true;
+					}
+					break;
+				}
+				return false;
+			},
+			"Mod-a": ({ editor }) => {
+				const { state } = editor;
+				const { $from } = state.selection;
+				for (let d = $from.depth; d > 0; d--) {
+					if ($from.node(d).type.name !== "columnsColumn") continue;
+					const columnStart = $from.start(d);
+					const columnEnd = $from.end(d);
+					const { from, to } = state.selection;
+					if (from === columnStart && to === columnEnd) return false;
+					editor.view.dispatch(state.tr.setSelection(_tiptap_pm_state.TextSelection.create(state.doc, columnStart, columnEnd)));
+					return true;
+				}
+				return false;
+			}
+		};
+	},
+	renderToReactEmail({ children, node, style }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		const width = node.attrs?.width;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
+			className: node.attrs?.class || void 0,
+			style: {
+				...style,
+				...inlineStyles,
+				...width ? { width } : {}
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+Object.defineProperty(exports, 'COLUMN_PARENT_TYPES', {
+  enumerable: true,
+  get: function () {
+    return COLUMN_PARENT_TYPES;
+  }
+});
+Object.defineProperty(exports, 'COMMON_HTML_ATTRIBUTES', {
+  enumerable: true,
+  get: function () {
+    return COMMON_HTML_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, 'ColumnsColumn', {
+  enumerable: true,
+  get: function () {
+    return ColumnsColumn;
+  }
+});
+Object.defineProperty(exports, 'EmailNode', {
+  enumerable: true,
+  get: function () {
+    return EmailNode;
+  }
+});
+Object.defineProperty(exports, 'FourColumns', {
+  enumerable: true,
+  get: function () {
+    return FourColumns;
+  }
+});
+Object.defineProperty(exports, 'LAYOUT_ATTRIBUTES', {
+  enumerable: true,
+  get: function () {
+    return LAYOUT_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, 'MAX_COLUMNS_DEPTH', {
+  enumerable: true,
+  get: function () {
+    return MAX_COLUMNS_DEPTH;
+  }
+});
+Object.defineProperty(exports, 'TABLE_ATTRIBUTES', {
+  enumerable: true,
+  get: function () {
+    return TABLE_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, 'TABLE_CELL_ATTRIBUTES', {
+  enumerable: true,
+  get: function () {
+    return TABLE_CELL_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, 'TABLE_HEADER_ATTRIBUTES', {
+  enumerable: true,
+  get: function () {
+    return TABLE_HEADER_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, 'ThreeColumns', {
+  enumerable: true,
+  get: function () {
+    return ThreeColumns;
+  }
+});
+Object.defineProperty(exports, 'TwoColumns', {
+  enumerable: true,
+  get: function () {
+    return TwoColumns;
+  }
+});
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});
+Object.defineProperty(exports, 'createStandardAttributes', {
+  enumerable: true,
+  get: function () {
+    return createStandardAttributes;
+  }
+});
+Object.defineProperty(exports, 'editorEventBus', {
+  enumerable: true,
+  get: function () {
+    return editorEventBus;
+  }
+});
+Object.defineProperty(exports, 'getColumnsDepth', {
+  enumerable: true,
+  get: function () {
+    return getColumnsDepth;
+  }
+});
+Object.defineProperty(exports, 'inlineCssToJs', {
+  enumerable: true,
+  get: function () {
+    return inlineCssToJs;
+  }
+});
+Object.defineProperty(exports, 'resolveConflictingStyles', {
+  enumerable: true,
+  get: function () {
+    return resolveConflictingStyles;
+  }
+});

package/dist/core/index.cjs

@@ -0,0 +1,8 @@
+const require_columns = require('../columns-ZSaLdkg9.cjs');
+const require_core = require('../core-Rxnpk8B_.cjs');
+
+exports.EmailNode = require_columns.EmailNode;
+exports.composeReactEmail = require_core.composeReactEmail;
+exports.editorEventBus = require_columns.editorEventBus;
+exports.isDocumentVisuallyEmpty = require_core.isDocumentVisuallyEmpty;
+exports.useEditor = require_core.useEditor;

package/dist/core/index.d.cts

@@ -0,0 +1,2 @@
+import { a as composeReactEmail, c as EditorEventMap, d as editorEventBus, i as RendererComponent, l as EditorEventName, n as EmailNode, o as isDocumentVisuallyEmpty, r as EmailNodeConfig, s as EditorEventHandler, t as useEditor, u as EditorEventSubscription } from "../index-CfslA7KT.cjs";
+export { EditorEventHandler, EditorEventMap, EditorEventName, EditorEventSubscription, EmailNode, EmailNodeConfig, RendererComponent, composeReactEmail, editorEventBus, isDocumentVisuallyEmpty, useEditor };

package/dist/core/index.d.mts

@@ -0,0 +1,2 @@
+import { a as composeReactEmail, c as EditorEventMap, d as editorEventBus, i as RendererComponent, l as EditorEventName, n as EmailNode, o as isDocumentVisuallyEmpty, r as EmailNodeConfig, s as EditorEventHandler, t as useEditor, u as EditorEventSubscription } from "../index-hbHRR7oB.mjs";
+export { EditorEventHandler, EditorEventMap, EditorEventName, EditorEventSubscription, EmailNode, EmailNodeConfig, RendererComponent, composeReactEmail, editorEventBus, isDocumentVisuallyEmpty, useEditor };

package/dist/core/index.mjs

@@ -0,0 +1,4 @@
+import { _ as editorEventBus, m as EmailNode } from "../columns-CUxUEHje.mjs";
+import { B as isDocumentVisuallyEmpty, t as useEditor, z as composeReactEmail } from "../core-C5_RDJBI.mjs";
+
+export { EmailNode, composeReactEmail, editorEventBus, isDocumentVisuallyEmpty, useEditor };