@react-email/editor 0.0.0-experimental.0

package/dist/index.js

@@ -0,0 +1,607 @@
+//#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 __tiptap_core = require("@tiptap/core");
+__tiptap_core = __toESM(__tiptap_core);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
+let __react_email_components = require("@react-email/components");
+__react_email_components = __toESM(__react_email_components);
+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");
+__tiptap_pm_state = __toESM(__tiptap_pm_state);
+let __tiptap_pm_view = require("@tiptap/pm/view");
+__tiptap_pm_view = __toESM(__tiptap_pm_view);
+let hast_util_from_html = require("hast-util-from-html");
+hast_util_from_html = __toESM(hast_util_from_html);
+let prismjs = require("prismjs");
+prismjs = __toESM(prismjs);
+
+//#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/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 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 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;
+};
+
+//#endregion
+//#region src/extensions/body.tsx
+const Body = EmailNode.create({
+	name: "body",
+	group: "block",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	addAttributes() {
+		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+	},
+	parseHTML() {
+		return [{
+			tag: "body",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	renderToReactEmail({ children, node, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...styles.reset,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/extensions/button.tsx
+const Button = EmailNode.create({
+	name: "button",
+	group: "block",
+	content: "inline*",
+	defining: true,
+	draggable: true,
+	marks: "bold",
+	addAttributes() {
+		return {
+			class: { default: "button" },
+			href: { default: "#" },
+			alignment: { default: "left" }
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "a[data-id=\"react-email-button\"]",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			(0, __tiptap_core.mergeAttributes)({ class: `align-${HTMLAttributes?.alignment}` }),
+			[
+				"a",
+				(0, __tiptap_core.mergeAttributes)({
+					class: `node-button ${HTMLAttributes?.class}`,
+					style: HTMLAttributes?.style,
+					"data-id": "react-email-button",
+					"data-href": HTMLAttributes?.href
+				}),
+				0
+			]
+		];
+	},
+	addCommands() {
+		return {
+			updateButton: (attributes) => ({ commands }) => {
+				return commands.updateAttributes("button", attributes);
+			},
+			setButton: () => ({ commands }) => {
+				return commands.insertContent({
+					type: "button",
+					content: [{
+						type: "text",
+						text: "Button"
+					}]
+				});
+			}
+		};
+	},
+	renderToReactEmail({ children, node, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Row, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Column, {
+			align: node.attrs?.align || node.attrs?.alignment,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Button, {
+				className: node.attrs?.class || void 0,
+				href: node.attrs?.href,
+				style: {
+					...styles.reset,
+					...styles.button,
+					...inlineStyles
+				},
+				children
+			})
+		}) });
+	}
+});
+
+//#endregion
+//#region src/utils/prism-utils.ts
+const publicURL = "/styles/prism";
+function loadPrismTheme(theme) {
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = `${publicURL}/prism-${theme}.css`;
+	link.setAttribute("data-prism-theme", "");
+	document.head.appendChild(link);
+}
+function removePrismTheme() {
+	const existingTheme = document.querySelectorAll("link[rel=\"stylesheet\"][data-prism-theme]");
+	if (existingTheme.length > 0) existingTheme.forEach((cssLinkTag) => {
+		cssLinkTag.remove();
+	});
+}
+function hasPrismThemeLoaded(theme) {
+	return !!document.querySelector(`link[rel="stylesheet"][data-prism-theme][href="${publicURL}/prism-${theme}.css"]`);
+}
+
+//#endregion
+//#region src/extensions/prism-plugin.ts
+const PRISM_LANGUAGE_LOADED_META = "prismLanguageLoaded";
+function parseNodes(nodes, className = []) {
+	return nodes.flatMap((node) => {
+		const classes = [...className, ...node.properties ? node.properties.className : []];
+		if (node.children) return parseNodes(node.children, classes);
+		return {
+			text: node.value ?? "",
+			classes
+		};
+	});
+}
+function getHighlightNodes(html) {
+	return (0, hast_util_from_html.fromHtml)(html, { fragment: true }).children;
+}
+function registeredLang(aliasOrLanguage) {
+	const allSupportLang = Object.keys(prismjs.default.languages).filter((id) => typeof prismjs.default.languages[id] === "object");
+	return Boolean(allSupportLang.find((x) => x === aliasOrLanguage));
+}
+function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
+	const decorations = [];
+	(0, __tiptap_core.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
+		let from = block.pos + 1;
+		const language = block.node.attrs.language || defaultLanguage;
+		const theme = block.node.attrs.theme || defaultTheme;
+		let html = "";
+		try {
+			if (!registeredLang(language) && !loadingLanguages.has(language)) {
+				loadingLanguages.add(language);
+				import(`prismjs/components/prism-${language}`).then(() => {
+					loadingLanguages.delete(language);
+					onLanguageLoaded(language);
+				}).catch(() => {
+					loadingLanguages.delete(language);
+				});
+			}
+			if (!hasPrismThemeLoaded(theme)) loadPrismTheme(theme);
+			html = prismjs.default.highlight(block.node.textContent, prismjs.default.languages[language], language);
+		} catch {
+			html = prismjs.default.highlight(block.node.textContent, prismjs.default.languages.javascript, "js");
+		}
+		parseNodes(getHighlightNodes(html)).forEach((node) => {
+			const to = from + node.text.length;
+			if (node.classes.length) {
+				const decoration = __tiptap_pm_view.Decoration.inline(from, to, { class: node.classes.join(" ") });
+				decorations.push(decoration);
+			}
+			from = to;
+		});
+	});
+	return __tiptap_pm_view.DecorationSet.create(doc, decorations);
+}
+function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
+	if (!defaultLanguage) throw Error("You must specify the defaultLanguage parameter");
+	const loadingLanguages = /* @__PURE__ */ new Set();
+	let pluginView = null;
+	const onLanguageLoaded = (language) => {
+		if (pluginView) pluginView.dispatch(pluginView.state.tr.setMeta(PRISM_LANGUAGE_LOADED_META, language));
+	};
+	const prismjsPlugin = new __tiptap_pm_state.Plugin({
+		key: new __tiptap_pm_state.PluginKey("prism"),
+		view(view) {
+			pluginView = view;
+			return { destroy() {
+				pluginView = null;
+			} };
+		},
+		state: {
+			init: (_, { doc }) => {
+				return getDecorations({
+					doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					loadingLanguages,
+					onLanguageLoaded
+				});
+			},
+			apply: (transaction, decorationSet, oldState, newState) => {
+				const oldNodeName = oldState.selection.$head.parent.type.name;
+				const newNodeName = newState.selection.$head.parent.type.name;
+				const oldNodes = (0, __tiptap_core.findChildren)(oldState.doc, (node) => node.type.name === name);
+				const newNodes = (0, __tiptap_core.findChildren)(newState.doc, (node) => node.type.name === name);
+				if (transaction.getMeta(PRISM_LANGUAGE_LOADED_META) || transaction.docChanged && ([oldNodeName, newNodeName].includes(name) || newNodes.length !== oldNodes.length || transaction.steps.some((step) => {
+					const rangeStep = step;
+					return rangeStep.from !== void 0 && rangeStep.to !== void 0 && oldNodes.some((node) => {
+						return node.pos >= rangeStep.from && node.pos + node.node.nodeSize <= rangeStep.to;
+					});
+				}))) return getDecorations({
+					doc: transaction.doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					loadingLanguages,
+					onLanguageLoaded
+				});
+				return decorationSet.map(transaction.mapping, transaction.doc);
+			}
+		},
+		props: { decorations(state) {
+			return prismjsPlugin.getState(state);
+		} },
+		destroy() {
+			pluginView = null;
+			removePrismTheme();
+		}
+	});
+	return prismjsPlugin;
+}
+
+//#endregion
+//#region src/extensions/code-block.tsx
+const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.extend({
+	addOptions() {
+		return {
+			languageClassPrefix: "language-",
+			exitOnTripleEnter: false,
+			exitOnArrowDown: false,
+			enableTabIndentation: true,
+			tabSize: 2,
+			defaultLanguage: "javascript",
+			defaultTheme: "default",
+			HTMLAttributes: {}
+		};
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			language: {
+				default: this.options.defaultLanguage,
+				parseHTML: (element) => {
+					if (!element) return null;
+					const { languageClassPrefix } = this.options;
+					if (!languageClassPrefix) return null;
+					const language = [...element.firstElementChild?.classList || []].filter((className) => className.startsWith(languageClassPrefix || "")).map((className) => className.replace(languageClassPrefix, ""))[0];
+					if (!language) return null;
+					return language;
+				},
+				rendered: false
+			},
+			theme: {
+				default: this.options.defaultTheme,
+				rendered: false
+			}
+		};
+	},
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"pre",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null }, { "data-theme": node.attrs.theme }),
+			[
+				"code",
+				{ class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language} node-codeTag` : "node-codeTag" },
+				0
+			]
+		];
+	},
+	addProseMirrorPlugins() {
+		return [...this.parent?.() || [], PrismPlugin({
+			name: this.name,
+			defaultLanguage: this.options.defaultLanguage,
+			defaultTheme: this.options.defaultTheme
+		})];
+	}
+}), ({ node, styles }) => {
+	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
+	const userTheme = __react_email_components[node.attrs?.theme];
+	const theme = userTheme ? {
+		...userTheme,
+		base: {
+			...userTheme.base,
+			borderRadius: "0.125rem",
+			padding: "0.75rem 1rem"
+		}
+	} : { base: {
+		color: "#1e293b",
+		background: "#f1f5f9",
+		lineHeight: "1.5",
+		fontFamily: "\"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace",
+		padding: "0.75rem 1rem",
+		borderRadius: "0.125rem"
+	} };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.CodeBlock, {
+		code: node.content?.[0]?.text ?? "",
+		language,
+		theme,
+		style: {
+			width: "auto",
+			...styles.codeBlock
+		}
+	});
+});
+
+//#endregion
+//#region src/extensions/div.tsx
+const Div = EmailNode.create({
+	name: "div",
+	group: "block",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	parseHTML() {
+		return [{
+			tag: "div:not([data-type])",
+			getAttrs: (node) => {
+				if (typeof node === "string") return false;
+				const element = node;
+				const attrs = {};
+				Array.from(element.attributes).forEach((attr) => {
+					attrs[attr.name] = attr.value;
+				});
+				return attrs;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			(0, __tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
+			0
+		];
+	},
+	addAttributes() {
+		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
+	},
+	renderToReactEmail({ children, node, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: node.attrs?.class || void 0,
+			style: {
+				...styles.reset,
+				...inlineStyles
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+//#region src/utils/get-text-alignment.ts
+function getTextAlignment(alignment) {
+	switch (alignment) {
+		case "left": return { textAlign: "left" };
+		case "center": return { textAlign: "center" };
+		case "right": return { textAlign: "right" };
+		default: return {};
+	}
+}
+
+//#endregion
+//#region src/extensions/section.tsx
+const Section = EmailNode.create({
+	name: "section",
+	group: "block",
+	content: "block+",
+	isolating: true,
+	defining: true,
+	parseHTML() {
+		return [{ tag: "section[data-type=\"section\"]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"section",
+			(0, __tiptap_core.mergeAttributes)({
+				"data-type": "section",
+				class: "node-section"
+			}, HTMLAttributes),
+			0
+		];
+	},
+	addCommands() {
+		return { insertSection: () => ({ commands }) => {
+			return commands.insertContent({
+				type: this.name,
+				content: [{
+					type: "paragraph",
+					content: []
+				}]
+			});
+		} };
+	},
+	renderToReactEmail({ children, node, styles }) {
+		const inlineStyles = inlineCssToJs(node.attrs?.style);
+		const textAlign = node.attrs?.align || node.attrs?.alignment;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Section, {
+			className: node.attrs?.class || void 0,
+			align: textAlign,
+			style: {
+				...styles.section,
+				...inlineStyles,
+				...getTextAlignment(textAlign)
+			},
+			children
+		});
+	}
+});
+
+//#endregion
+exports.Body = Body;
+exports.Button = Button;
+exports.CodeBlockPrism = CodeBlockPrism;
+exports.Div = Div;
+exports.EmailNode = EmailNode;
+exports.Section = Section;