@react-email/editor 1.3.2 → 1.3.4

package/dist/{extension-W9raGSI9.cjs → extension-r1aNq37Z.cjs}

@@ -114,12 +114,45 @@ function injectThemeCss(styles, options = {}) {
 	const container = options.scopeSelector ?? ".tiptap-extended .tiptap.ProseMirror";
 	const prefix = ".node-";
 	const styleId = options.styleId ?? "tiptap-extended-theme-css";
+	const getNodeSelector = (classReference) => `${container} ${prefix}${classReference}`;
+	const getSelectors = (classReference) => {
+		switch (classReference) {
+			case "body": return [container];
+			case "reset": return [];
+			case "list": return [
+				getNodeSelector("list"),
+				getNodeSelector("bulletList"),
+				getNodeSelector("orderedList")
+			];
+			case "bulletList": return [getNodeSelector("bulletList")];
+			case "orderedList": return [getNodeSelector("orderedList")];
+			case "nestedList": return [
+				getNodeSelector("nestedList"),
+				`${container} .node-list .node-list`,
+				`${container} .node-bulletList .node-bulletList`,
+				`${container} .node-bulletList .node-orderedList`,
+				`${container} .node-orderedList .node-bulletList`,
+				`${container} .node-orderedList .node-orderedList`
+			];
+			case "listParagraph": return [`${container} .node-listItem > .node-paragraph`];
+			default: return [getNodeSelector(classReference)];
+		}
+	};
+	const resetStyles = styles.reset ?? {};
 	const css = Object.entries(styles).reduce((acc, [key, value]) => {
-		return `${acc}${key === "body" ? container : `${container} ${prefix}${key}`}{${Object.entries(value).reduce((acc, [prop, val]) => {
+		const classReference = key;
+		const selectors = getSelectors(classReference);
+		if (selectors.length === 0) return acc;
+		const resolvedStyles = RESET_NODE_TYPES.has(classReference) ? {
+			...resetStyles,
+			...value
+		} : value;
+		const cssString = Object.entries(resolvedStyles).reduce((acc, [prop, val]) => {
 			const normalizeProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
 			if (val === void 0) return acc;
 			return `${acc}${normalizeProp}:${val};`;
-		}, "")}}`;
+		}, "");
+		return `${acc}${selectors.join(",")}{${cssString}}`;
 	}, "");
 	let styleTag = document.getElementById(styleId);
 	if (!styleTag) {
@@ -162,6 +195,9 @@ const PANEL_SECTION_TITLES = {
 	h2: "Subtitle",
 	h3: "Heading",
 	paragraph: "Paragraph",
+	list: "List",
+	"nested-list": "Nested List",
+	"list-item": "List Item",
 	link: "Link",
 	image: "Image",
 	button: "Button",
@@ -367,6 +403,27 @@ const THEME_BASIC = [
 		classReference: "paragraph",
 		inputs: []
 	},
+	{
+		id: "list",
+		title: "List",
+		category: "Text",
+		classReference: "list",
+		inputs: []
+	},
+	{
+		id: "nested-list",
+		title: "Nested List",
+		category: "Text",
+		classReference: "nestedList",
+		inputs: []
+	},
+	{
+		id: "list-item",
+		title: "List Item",
+		category: "Text",
+		classReference: "listItem",
+		inputs: []
+	},
 	{
 		id: "link",
 		title: "Link",
@@ -716,6 +773,27 @@ const THEME_MINIMAL = [
 		classReference: "paragraph",
 		inputs: []
 	},
+	{
+		id: "list",
+		title: "List",
+		category: "Text",
+		classReference: "list",
+		inputs: []
+	},
+	{
+		id: "nested-list",
+		title: "Nested List",
+		category: "Text",
+		classReference: "nestedList",
+		inputs: []
+	},
+	{
+		id: "list-item",
+		title: "List Item",
+		category: "Text",
+		classReference: "listItem",
+		inputs: []
+	},
 	{
 		id: "link",
 		title: "Link",
@@ -786,14 +864,16 @@ const RESET_BASIC = {
 		paddingLeft: "1.1em",
 		paddingBottom: "1em"
 	},
+	bulletList: { listStyleType: "disc" },
+	orderedList: { listStyleType: "decimal" },
 	nestedList: {
 		paddingLeft: "1.1em",
 		paddingBottom: "0"
 	},
 	listItem: {
 		marginLeft: "1em",
-		marginBottom: "0.3em",
-		marginTop: "0.3em"
+		paddingBottom: "0.3em",
+		paddingTop: "0.3em"
 	},
 	listParagraph: {
 		padding: "0",
@@ -814,12 +894,24 @@ const RESET_BASIC = {
 	footer: { fontSize: "0.8em" },
 	hr: {
 		paddingBottom: "1em",
+		borderStyle: "solid",
 		borderWidth: "2px"
 	},
 	image: { maxWidth: "100%" },
 	button: {
 		lineHeight: "100%",
-		display: "inline-block"
+		display: "inline-block",
+		paddingTop: "0.625em",
+		paddingRight: "1.25em",
+		paddingBottom: "0.625em",
+		paddingLeft: "1.25em",
+		backgroundColor: "#000000",
+		color: "#ffffff",
+		borderRadius: "0.375em",
+		fontWeight: 500,
+		fontSize: "0.875em",
+		textDecoration: "none",
+		textAlign: "center"
 	},
 	inlineCode: {
 		paddingTop: "0.25em",
@@ -831,6 +923,13 @@ const RESET_BASIC = {
 		borderRadius: "4px"
 	},
 	codeBlock: {
+		background: "#f1f5f9",
+		borderRadius: "4px",
+		paddingTop: "0.75rem",
+		paddingRight: "1rem",
+		paddingBottom: "0.75rem",
+		paddingLeft: "1rem",
+		overflowX: "auto",
 		fontFamily: "monospace",
 		fontWeight: "500",
 		fontSize: ".92em"
@@ -853,9 +952,14 @@ const RESET_THEMES = {
 			return acc;
 		}, {}),
 		reset: RESET_BASIC.reset,
-		button: RESET_BASIC.button,
+		button: {
+			lineHeight: RESET_BASIC.button.lineHeight,
+			display: RESET_BASIC.button.display
+		},
 		image: RESET_BASIC.image,
 		list: RESET_BASIC.list,
+		bulletList: RESET_BASIC.bulletList,
+		orderedList: RESET_BASIC.orderedList,
 		nestedList: RESET_BASIC.nestedList,
 		listItem: RESET_BASIC.listItem,
 		listParagraph: RESET_BASIC.listParagraph,
@@ -1180,6 +1284,9 @@ const PANEL_SECTION_IDS = new Set([
 	"container",
 	"typography",
 	"paragraph",
+	"list",
+	"nested-list",
+	"list-item",
 	"link",
 	"image",
 	"button",
@@ -1193,6 +1300,9 @@ const PANEL_SECTION_IDS_BY_TITLE = {
 	container: "container",
 	typography: "typography",
 	paragraph: "paragraph",
+	list: "list",
+	"nested list": "nested-list",
+	"list item": "list-item",
 	link: "link",
 	image: "image",
 	button: "button",
@@ -1202,6 +1312,9 @@ const PANEL_SECTION_IDS_BY_TITLE = {
 const PANEL_SECTION_IDS_BY_CLASS_REFERENCE = {
 	container: "container",
 	paragraph: "paragraph",
+	list: "list",
+	nestedList: "nested-list",
+	listItem: "list-item",
 	link: "link",
 	image: "image",
 	button: "button",
@@ -1279,6 +1392,9 @@ const CLASS_REFERENCE_TO_PANEL_ID = {
 	link: "link",
 	image: "image",
 	button: "button",
+	list: "list",
+	nestedList: "nested-list",
+	listItem: "list-item",
 	codeBlock: "code-block",
 	inlineCode: "inline-code"
 };
@@ -1382,13 +1498,21 @@ function getMergedCssJs(theme, panelStyles) {
 	return mergeCssJs(RESET_THEMES[theme], parsed);
 }
 /**
-* Returns resolved React.CSSProperties for a node when you already have merged CssJs
-* (e.g. in the serializer where there is no editor). Centralizes which theme keys
-* apply to which node type.
+* Node types and theme component keys that should receive the universal
+* `reset` CSS (e.g. `margin: 0; padding: 0`) layered underneath their own
+* theme styles. Shared between `getResolvedNodeStyles` (email serializer)
+* and `injectThemeCss` (editor preview) so both surfaces stay in sync.
+*
+* Includes both raw tiptap node names (e.g. `tableCell`) and theme
+* component keys (e.g. `list`) because the serializer matches against both.
+*
+* `bulletList` and `orderedList` are intentionally omitted: their elements
+* already carry the shared `node-list` class, so the `list` reset rule
+* covers them without forcing the dedicated `.node-bulletList` /
+* `.node-orderedList` rules to redundantly emit `margin: 0; padding: 0`.
 */
 const RESET_NODE_TYPES = new Set([
 	"body",
-	"bulletList",
 	"button",
 	"columns",
 	"div",
@@ -1399,7 +1523,6 @@ const RESET_NODE_TYPES = new Set([
 	"listItem",
 	"listParagraph",
 	"nestedList",
-	"orderedList",
 	"table",
 	"paragraph",
 	"tableCell",
@@ -1407,6 +1530,11 @@ const RESET_NODE_TYPES = new Set([
 	"tableRow",
 	"youtube"
 ]);
+/**
+* Returns resolved React.CSSProperties for a node when you already have merged CssJs
+* (e.g. in the serializer where there is no editor). Centralizes which theme keys
+* apply to which node type.
+*/
 function getResolvedNodeStyles(node, depth, mergedCssJs) {
 	const key = getThemeComponentKey(node.type ?? "", depth, node.attrs ?? {});
 	if (!key) {
@@ -1619,6 +1747,12 @@ Object.defineProperty(exports, "INBOX_EMAIL_DEFAULTS", {
 		return INBOX_EMAIL_DEFAULTS;
 	}
 });
+Object.defineProperty(exports, "RESET_NODE_TYPES", {
+	enumerable: true,
+	get: function() {
+		return RESET_NODE_TYPES;
+	}
+});
 Object.defineProperty(exports, "RESET_THEMES", {
 	enumerable: true,
 	get: function() {

package/dist/extensions/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_focus_scopes = require("../focus-scopes-l_Ki0562.cjs");
-const require_extensions = require("../extensions-CG4gZ1-f.cjs");
-const require_extension = require("../extension-W9raGSI9.cjs");
+const require_extensions = require("../extensions-BYOlFEwI.cjs");
+const require_extension = require("../extension-r1aNq37Z.cjs");
 exports.AlignmentAttribute = require_extensions.AlignmentAttribute;
 exports.Blockquote = require_extensions.Blockquote;
 exports.Body = require_extensions.Body;

package/dist/extensions/index.mjs

@@ -1,4 +1,4 @@
-import { A as Code, C as Italic, D as Div, E as Divider, F as Body, I as Blockquote, L as AlignmentAttribute, M as Button, N as BulletList, O as Container, P as Bold, S as processStylesForUnlink, T as HardBreak, _ as OrderedList, a as skipTrailingNodeMeta, b as Link, c as TableCell, d as Sup, f as StyleAttribute, g as Paragraph, h as PreviewText, i as TrailingNode, j as ClassAttribute, k as CodeBlockPrism, l as TableHeader, m as Section, n as Uppercase, o as Text, p as Strike, r as Underline, s as Table, t as StarterKit, u as TableRow, v as MaxNesting, w as Heading, x as PreservedStyle, y as ListItem } from "../extensions-CQ3r7pnM.mjs";
+import { A as Code, C as Italic, D as Div, E as Divider, F as Body, I as Blockquote, L as AlignmentAttribute, M as Button, N as BulletList, O as Container, P as Bold, S as processStylesForUnlink, T as HardBreak, _ as OrderedList, a as skipTrailingNodeMeta, b as Link, c as TableCell, d as Sup, f as StyleAttribute, g as Paragraph, h as PreviewText, i as TrailingNode, j as ClassAttribute, k as CodeBlockPrism, l as TableHeader, m as Section, n as Uppercase, o as Text, p as Strike, r as Underline, s as Table, t as StarterKit, u as TableRow, v as MaxNesting, w as Heading, x as PreservedStyle, y as ListItem } from "../extensions-BxF4VdQD.mjs";
 import { a as COLUMN_PARENT_TYPES, c as MAX_COLUMNS_DEPTH, d as getColumnsDepth, i as focusScopePluginKey, l as ThreeColumns, n as createFocusScopePlugin, o as ColumnsColumn, r as createFocusScopesStorage, s as FourColumns, t as FocusScopes, u as TwoColumns } from "../focus-scopes-B_0O7l7d.mjs";
-import { T as getGlobalContent, w as GlobalContent } from "../extension-TtsG0Puz.mjs";
+import { E as getGlobalContent, T as GlobalContent } from "../extension-M9mAMex9.mjs";
 export { AlignmentAttribute, Blockquote, Body, Bold, BulletList, Button, COLUMN_PARENT_TYPES, ClassAttribute, Code, CodeBlockPrism, ColumnsColumn, Container, Div, Divider, FocusScopes, FourColumns, GlobalContent, HardBreak, Heading, Italic, Link, ListItem, MAX_COLUMNS_DEPTH, MaxNesting, OrderedList, Paragraph, PreservedStyle, PreviewText, Section, StarterKit, Strike, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, Text, ThreeColumns, TrailingNode, TwoColumns, Underline, Uppercase, createFocusScopePlugin, createFocusScopesStorage, focusScopePluginKey, getColumnsDepth, getGlobalContent, processStylesForUnlink, skipTrailingNodeMeta };

package/dist/{extensions-CG4gZ1-f.cjs → extensions-BYOlFEwI.cjs}

@@ -2,7 +2,7 @@ const require_focus_scopes = require("./focus-scopes-l_Ki0562.cjs");
 const require_email_node = require("./email-node-DvyWFrOM.cjs");
 const require_core = require("./core-CLyAVVUW.cjs");
 const require_event_bus = require("./event-bus-C_wS2tD6.cjs");
-const require_extension = require("./extension-W9raGSI9.cjs");
+const require_extension = require("./extension-r1aNq37Z.cjs");
 let _tiptap_react = require("@tiptap/react");
 let react_email = require("react-email");
 react_email = require_focus_scopes.__toESM(react_email);
@@ -1629,10 +1629,10 @@ const StarterKit = _tiptap_core.Extension.create({
 			FourColumns: {},
 			ColumnsColumn: {},
 			Paragraph: { HTMLAttributes: { class: "node-paragraph" } },
-			BulletList: { HTMLAttributes: { class: "node-bulletList" } },
-			OrderedList: { HTMLAttributes: { class: "node-orderedList" } },
+			BulletList: { HTMLAttributes: { class: "node-list node-bulletList" } },
+			OrderedList: { HTMLAttributes: { class: "node-list node-orderedList" } },
 			Blockquote: { HTMLAttributes: { class: "node-blockquote" } },
-			ListItem: {},
+			ListItem: { HTMLAttributes: { class: "node-listItem" } },
 			HardBreak: {},
 			Italic: {},
 			PreviewText: {},

package/dist/{extensions-CQ3r7pnM.mjs → extensions-BxF4VdQD.mjs}

@@ -2,7 +2,7 @@ import { a as jsToInlineCss, i as inlineCssToJs, o as resolveConflictingStyles,
 import { r as EmailMark } from "./core-CbSTyrV4.mjs";
 import { _ as TABLE_ATTRIBUTES, b as createStandardAttributes, f as hasPrismThemeLoaded, g as LAYOUT_ATTRIBUTES, h as COMMON_HTML_ATTRIBUTES, l as ThreeColumns, m as removePrismTheme, o as ColumnsColumn, p as loadPrismTheme, s as FourColumns, t as FocusScopes, u as TwoColumns, v as TABLE_CELL_ATTRIBUTES, y as TABLE_HEADER_ATTRIBUTES } from "./focus-scopes-B_0O7l7d.mjs";
 import { t as editorEventBus } from "./event-bus-CqrIUE24.mjs";
-import { i as getResolvedNodeStyles, n as getEmailTheming, r as getMergedCssJs, w as GlobalContent } from "./extension-TtsG0Puz.mjs";
+import { T as GlobalContent, a as getResolvedNodeStyles, i as getMergedCssJs, r as getEmailTheming } from "./extension-M9mAMex9.mjs";
 import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import * as ReactEmailComponents from "react-email";
 import { Button, CodeBlock, Column, Container, Heading, Hr, Link, Row, Section } from "react-email";
@@ -1612,10 +1612,10 @@ const StarterKit = Extension.create({
 			FourColumns: {},
 			ColumnsColumn: {},
 			Paragraph: { HTMLAttributes: { class: "node-paragraph" } },
-			BulletList: { HTMLAttributes: { class: "node-bulletList" } },
-			OrderedList: { HTMLAttributes: { class: "node-orderedList" } },
+			BulletList: { HTMLAttributes: { class: "node-list node-bulletList" } },
+			OrderedList: { HTMLAttributes: { class: "node-list node-orderedList" } },
 			Blockquote: { HTMLAttributes: { class: "node-blockquote" } },
-			ListItem: {},
+			ListItem: { HTMLAttributes: { class: "node-listItem" } },
 			HardBreak: {},
 			Italic: {},
 			PreviewText: {},
@@ -1759,4 +1759,4 @@ const StarterKit = Extension.create({
 //#endregion
 export { Code as A, Italic as C, Div as D, Divider as E, Body$1 as F, Blockquote as I, AlignmentAttribute as L, Button$1 as M, BulletList as N, Container$1 as O, Bold as P, processStylesForUnlink as S, HardBreak as T, OrderedList as _, skipTrailingNodeMeta as a, Link$1 as b, TableCell as c, Sup as d, StyleAttribute as f, Paragraph as g, PreviewText as h, TrailingNode as i, ClassAttribute as j, CodeBlockPrism as k, TableHeader as l, Section$1 as m, Uppercase as n, Text$1 as o, Strike as p, Underline as r, Table as s, StarterKit as t, TableRow as u, MaxNesting as v, Heading$2 as w, PreservedStyle as x, ListItem as y };
 
-//# sourceMappingURL=extensions-CQ3r7pnM.mjs.map
+//# sourceMappingURL=extensions-BxF4VdQD.mjs.map