@react-email/editor 0.0.0-experimental.41 → 0.0.0-experimental.43

package/dist/{extensions-CkjPj2JO.cjs → extensions-B6VCxUmi.cjs}

@@ -1,6 +1,5 @@
-const require_event_bus = require('./event-bus-fb8U7hrl.cjs');
-const require_styles = require('./styles-C-cCyJCn.cjs');
-const require_global_content = require('./global-content-bJgotqmA.cjs');
+const require_event_bus = require('./event-bus-BJn1dJM1.cjs');
+const require_global_content = require('./global-content-C5WjNoMX.cjs');
 let _tiptap_extensions = require("@tiptap/extensions");
 let _tiptap_react = require("@tiptap/react");
 let react = require("react");
@@ -245,7 +244,7 @@ const composeReactEmail = async ({ editor, preview }) => {
 		if (!content) return;
 		return content.map((node, index) => {
 			const style = serializerPlugin?.getNodeStyles(node, depth, editor) ?? {};
-			const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+			const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 			if (!node.type) return null;
 			const emailNode = typeToExtensionMap[node.type];
 			if (!emailNode || !(emailNode instanceof require_event_bus.EmailNode)) return null;
@@ -366,7 +365,7 @@ const Blockquote = require_event_bus.EmailNode.from(_tiptap_extension_blockquote
 	className: node.attrs?.class || void 0,
 	style: {
 		...style,
-		...require_styles.inlineCssToJs(node.attrs?.style),
+		...require_global_content.inlineCssToJs(node.attrs?.style),
 		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
 	},
 	children
@@ -405,7 +404,7 @@ const Body = require_event_bus.EmailNode.create({
 		];
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
@@ -443,7 +442,7 @@ const BulletList = require_event_bus.EmailNode.from(_tiptap_extension_bullet_lis
 	className: node.attrs?.class || void 0,
 	style: {
 		...style,
-		...require_styles.inlineCssToJs(node.attrs?.style)
+		...require_global_content.inlineCssToJs(node.attrs?.style)
 	},
 	children
 }));
@@ -511,7 +510,7 @@ const Button = require_event_bus.EmailNode.create({
 		};
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.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, {
@@ -574,7 +573,7 @@ const ClassAttribute = _tiptap_core.Extension.create({
 const Code = EmailMark.from(_tiptap_extension_code.default, ({ children, node, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 	style: {
 		...style,
-		...require_styles.inlineCssToJs(node.attrs?.style)
+		...require_global_content.inlineCssToJs(node.attrs?.style)
 	},
 	children
 }));
@@ -899,9 +898,10 @@ const Container = require_event_bus.EmailNode.create({
 		})];
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Container, {
 			className: node.attrs?.class || void 0,
+			align: style.align || "center",
 			style: {
 				...style,
 				...inlineStyles,
@@ -946,7 +946,7 @@ const Div = require_event_bus.EmailNode.create({
 		return { ...require_event_bus.createStandardAttributes([...require_event_bus.COMMON_HTML_ATTRIBUTES, ...require_event_bus.LAYOUT_ATTRIBUTES]) };
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
@@ -1073,7 +1073,7 @@ const Divider = require_event_bus.EmailNode.from(_tiptap_extension_horizontal_ru
 			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: require_styles.inlineCssToJs(node.attrs.style)
+				style: require_global_content.inlineCssToJs(node.attrs.style)
 			}) });
 		});
 	}
@@ -1082,7 +1082,7 @@ const Divider = require_event_bus.EmailNode.from(_tiptap_extension_horizontal_ru
 		className: node.attrs?.class || void 0,
 		style: {
 			...style,
-			...require_styles.inlineCssToJs(node.attrs?.style)
+			...require_global_content.inlineCssToJs(node.attrs?.style)
 		}
 	});
 });
@@ -1100,7 +1100,7 @@ const Heading = require_event_bus.EmailNode.from(_tiptap_extension_heading.Headi
 		const attrs = {
 			...rest,
 			className: `node-h${level} ${className}`,
-			style: require_styles.inlineCssToJs(node.attrs.style)
+			style: require_global_content.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}`,
@@ -1114,7 +1114,7 @@ const Heading = require_event_bus.EmailNode.from(_tiptap_extension_heading.Headi
 		className: node.attrs?.class || void 0,
 		style: {
 			...style,
-			...require_styles.inlineCssToJs(node.attrs?.style),
+			...require_global_content.inlineCssToJs(node.attrs?.style),
 			...getTextAlignment(node.attrs?.align ?? node.attrs?.alignment)
 		},
 		children
@@ -1162,7 +1162,7 @@ const PreservedStyle = EmailMark.create({
 	},
 	renderToReactEmail({ children, mark }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			style: mark.attrs?.style ? require_styles.inlineCssToJs(mark.attrs.style) : void 0,
+			style: mark.attrs?.style ? require_global_content.inlineCssToJs(mark.attrs.style) : void 0,
 			children
 		});
 	}
@@ -1211,7 +1211,7 @@ function processStylesForUnlink(styleString) {
 //#endregion
 //#region src/extensions/link.tsx
 const Link = EmailMark.from(_tiptap_extension_link.default, ({ children, mark, style }) => {
-	const linkMarkStyle = mark.attrs?.style ? require_styles.inlineCssToJs(mark.attrs.style) : {};
+	const linkMarkStyle = mark.attrs?.style ? require_global_content.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,
@@ -1288,7 +1288,7 @@ const ListItem = require_event_bus.EmailNode.from(_tiptap_extension_list_item.de
 	className: node.attrs?.class || void 0,
 	style: {
 		...style,
-		...require_styles.inlineCssToJs(node.attrs?.style),
+		...require_global_content.inlineCssToJs(node.attrs?.style),
 		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
 	},
 	children
@@ -1376,7 +1376,7 @@ const OrderedList = require_event_bus.EmailNode.from(_tiptap_extension_ordered_l
 	start: node.attrs?.start,
 	style: {
 		...style,
-		...require_styles.inlineCssToJs(node.attrs?.style)
+		...require_global_content.inlineCssToJs(node.attrs?.style)
 	},
 	children
 }));
@@ -1389,7 +1389,7 @@ const Paragraph = require_event_bus.EmailNode.from(_tiptap_extension_paragraph.d
 		className: node.attrs?.class || void 0,
 		style: {
 			...style,
-			...require_styles.inlineCssToJs(node.attrs?.style),
+			...require_global_content.inlineCssToJs(node.attrs?.style),
 			...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
 		},
 		children: isEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}) : children
@@ -1449,6 +1449,9 @@ const PreviewText = _tiptap_core.Node.create({
 
 //#endregion
 //#region src/extensions/section.tsx
+function isSectionEmpty(node) {
+	return node.textContent === "" && node.content.size <= node.childCount * 2;
+}
 const Section$1 = require_event_bus.EmailNode.create({
 	name: "section",
 	group: "block",
@@ -1468,6 +1471,46 @@ const Section$1 = require_event_bus.EmailNode.create({
 			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.node(depth).type.name !== "section") continue;
+				if ($from.parentOffset !== 0) return false;
+				let atStart = true;
+				for (let d = depth; d < $from.depth; d++) if ($from.index(d) !== 0) {
+					atStart = false;
+					break;
+				}
+				if (!atStart) return false;
+				if (!isSectionEmpty($from.node(depth))) return false;
+				const tr = state.tr;
+				const from = $from.before(depth);
+				const to = $from.after(depth);
+				if ($from.node(depth - 1).childCount === 1) tr.replaceWith(from, to, state.schema.nodes.paragraph.create());
+				else tr.delete(from, to);
+				editor.view.dispatch(tr);
+				return true;
+			}
+			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 (prevNode.type.name === "section" && isSectionEmpty(prevNode)) {
+					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;
+		} };
+	},
 	addCommands() {
 		return { insertSection: () => ({ commands }) => {
 			return commands.insertContent({
@@ -1480,7 +1523,7 @@ const Section$1 = require_event_bus.EmailNode.create({
 		} };
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.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,
@@ -1615,7 +1658,7 @@ const Table = require_event_bus.EmailNode.create({
 		];
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		const alignment = node.attrs?.align || node.attrs?.alignment;
 		const width = node.attrs?.width;
 		const centeringStyles = alignment === "center" ? {
@@ -1625,7 +1668,7 @@ const Table = require_event_bus.EmailNode.create({
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
 			className: node.attrs?.class || void 0,
 			align: alignment,
-			style: require_styles.resolveConflictingStyles(style, {
+			style: require_global_content.resolveConflictingStyles(style, {
 				...inlineStyles,
 				...centeringStyles
 			}),
@@ -1667,7 +1710,7 @@ const TableRow = require_event_bus.EmailNode.create({
 		];
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			className: node.attrs?.class || void 0,
 			style: {
@@ -1712,7 +1755,7 @@ const TableCell = require_event_bus.EmailNode.create({
 		];
 	},
 	renderToReactEmail({ children, node, style }) {
-		const inlineStyles = require_styles.inlineCssToJs(node.attrs?.style);
+		const inlineStyles = require_global_content.inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
 			className: node.attrs?.class || void 0,
 			align: node.attrs?.align || node.attrs?.alignment,

package/dist/{extensions-BvfmaKCn.mjs → extensions-mStGDfMH.mjs}

@@ -1,9 +1,8 @@
-import { n as inlineCssToJs, r as resolveConflictingStyles } from "./styles-_TMw3YxC.mjs";
-import { d as TABLE_ATTRIBUTES, f as TABLE_CELL_ATTRIBUTES, h as EmailNode, i as FourColumns, l as COMMON_HTML_ATTRIBUTES, m as createStandardAttributes, o as ThreeColumns, p as TABLE_HEADER_ATTRIBUTES, r as ColumnsColumn, s as TwoColumns, t as editorEventBus, u as LAYOUT_ATTRIBUTES } from "./event-bus-CHEzOS_O.mjs";
-import { t as GlobalContent } from "./global-content-D_WYaFgX.mjs";
+import { a as resolveConflictingStyles, i as inlineCssToJs, t as GlobalContent } from "./global-content-CjA49_jE.mjs";
+import { a as FourColumns, c as TwoColumns, d as LAYOUT_ATTRIBUTES, f as TABLE_ATTRIBUTES, g as EmailNode, h as createStandardAttributes, i as ColumnsColumn, m as TABLE_HEADER_ATTRIBUTES, p as TABLE_CELL_ATTRIBUTES, s as ThreeColumns, t as editorEventBus, u as COMMON_HTML_ATTRIBUTES } from "./event-bus-DJpnfDHw.mjs";
 import { UndoRedo } from "@tiptap/extensions";
 import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useEditor, useEditorState } from "@tiptap/react";
-import * as React from "react";
+import * as React$1 from "react";
 import { generateJSON } from "@tiptap/html";
 import * as ReactEmailComponents from "@react-email/components";
 import { Body, Button, CodeBlock, Column, Container, Head, Heading, Hr, Html, Link, Preview, Row, Section, pretty, render, toPlainText } from "@react-email/components";
@@ -122,7 +121,7 @@ function sanitizeElement(el) {
 
 //#endregion
 //#region src/core/create-paste-handler.ts
-function createPasteHandler({ onPaste, onUploadImage, extensions }) {
+function createPasteHandler({ onPaste, onUploadImage, extensions: extensions$1 }) {
 	return (view, event, slice) => {
 		const text = event.clipboardData?.getData("text/plain");
 		if (text && onPaste?.(text, view)) {
@@ -149,7 +148,7 @@ function createPasteHandler({ onPaste, onUploadImage, extensions }) {
 		if (slice.content.childCount === 1) return false;
 		if (event.clipboardData?.getData?.("text/html")) {
 			event.preventDefault();
-			const jsonContent = generateJSON(sanitizePastedHtml(event.clipboardData.getData("text/html")), extensions);
+			const jsonContent = generateJSON(sanitizePastedHtml(event.clipboardData.getData("text/html")), extensions$1);
 			const node = view.state.schema.nodeFromJSON(jsonContent);
 			const transaction = view.state.tr.replaceSelectionWith(node, false);
 			view.dispatch(transaction);
@@ -219,9 +218,9 @@ var EmailMark = class EmailMark extends Mark {
 const NODES_WITH_INCREMENTED_CHILD_DEPTH = new Set(["bulletList", "orderedList"]);
 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 typeToExtensionMap = Object.fromEntries(extensions.map((extension) => [extension.name, extension]));
+	const extensions$1 = editor.extensionManager.extensions;
+	const serializerPlugin = extensions$1.map((ext) => ext.options?.serializerPlugin).filter((p) => Boolean(p)).at(-1);
+	const typeToExtensionMap = Object.fromEntries(extensions$1.map((extension) => [extension.name, extension]));
 	function parseContent(content, depth = 0) {
 		if (!content) return;
 		return content.map((node, index) => {
@@ -883,6 +882,7 @@ const Container$1 = EmailNode.create({
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ jsx(Container, {
 			className: node.attrs?.class || void 0,
+			align: style.align || "center",
 			style: {
 				...style,
 				...inlineStyles,
@@ -966,14 +966,14 @@ function isEmptyParagraph(node) {
 
 //#endregion
 //#region src/core/use-editor.ts
-function useEditor$1({ content, extensions = [], onUpdate, onPaste, onUploadImage, onReady, editable = true, ...rest }) {
-	const [contentError, setContentError] = React.useState(null);
-	const isCollaborative = hasCollaborationExtension(extensions);
-	const effectiveExtensions = React.useMemo(() => [
+function useEditor$1({ content, extensions: extensions$1 = [], onUpdate, onPaste, onUploadImage, onReady, editable = true, ...rest }) {
+	const [contentError, setContentError] = React$1.useState(null);
+	const isCollaborative = hasCollaborationExtension(extensions$1);
+	const effectiveExtensions = React$1.useMemo(() => [
 		StarterKit,
 		...isCollaborative ? [] : [UndoRedo],
-		...extensions
-	], [extensions, isCollaborative]);
+		...extensions$1
+	], [extensions$1, isCollaborative]);
 	const editor = useEditor({
 		content: isCollaborative ? void 0 : content,
 		extensions: effectiveExtensions,
@@ -1430,6 +1430,9 @@ const PreviewText = Node$1.create({
 
 //#endregion
 //#region src/extensions/section.tsx
+function isSectionEmpty(node) {
+	return node.textContent === "" && node.content.size <= node.childCount * 2;
+}
 const Section$1 = EmailNode.create({
 	name: "section",
 	group: "block",
@@ -1449,6 +1452,46 @@ const Section$1 = EmailNode.create({
 			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.node(depth).type.name !== "section") continue;
+				if ($from.parentOffset !== 0) return false;
+				let atStart = true;
+				for (let d = depth; d < $from.depth; d++) if ($from.index(d) !== 0) {
+					atStart = false;
+					break;
+				}
+				if (!atStart) return false;
+				if (!isSectionEmpty($from.node(depth))) return false;
+				const tr = state.tr;
+				const from = $from.before(depth);
+				const to = $from.after(depth);
+				if ($from.node(depth - 1).childCount === 1) tr.replaceWith(from, to, state.schema.nodes.paragraph.create());
+				else tr.delete(from, to);
+				editor.view.dispatch(tr);
+				return true;
+			}
+			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 (prevNode.type.name === "section" && isSectionEmpty(prevNode)) {
+					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;
+		} };
+	},
 	addCommands() {
 		return { insertSection: () => ({ commands }) => {
 			return commands.insertContent({
@@ -2046,8 +2089,8 @@ const StarterKit = Extension.create({
 		};
 	},
 	addExtensions() {
-		const extensions = [];
-		if (this.options.TiptapStarterKit !== false) extensions.push(TipTapStarterKit.configure({
+		const extensions$1 = [];
+		if (this.options.TiptapStarterKit !== false) extensions$1.push(TipTapStarterKit.configure({
 			undoRedo: false,
 			heading: false,
 			link: false,
@@ -2077,12 +2120,12 @@ const StarterKit = Extension.create({
 		for (const [name, extension] of Object.entries(starterKitExtensions)) {
 			const key = name;
 			const extensionOptions = this.options[key];
-			if (extensionOptions !== false) extensions.push(extension.configure(extensionOptions));
+			if (extensionOptions !== false) extensions$1.push(extension.configure(extensionOptions));
 		}
-		return extensions;
+		return extensions$1;
 	}
 });
 
 //#endregion
 export { Div as A, AlignmentAttribute as B, processStylesForUnlink as C, Divider as D, HardBreak as E, Button$1 as F, EmailMark as H, BulletList as I, Bold as L, CodeBlockPrism as M, Code as N, useEditor$1 as O, ClassAttribute as P, Body$1 as R, PreservedStyle as S, Heading$2 as T, createPasteHandler as U, composeReactEmail as V, createDropHandler as W, Paragraph as _, skipTrailingNodeMeta as a, ListItem as b, TableCell as c, Sup as d, StyleAttribute as f, Placeholder as g, PreviewText as h, TrailingNode as i, Container$1 as j, isDocumentVisuallyEmpty 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, OrderedList as v, Italic as w, Link$1 as x, MaxNesting as y, Blockquote as z };
-//# sourceMappingURL=extensions-BvfmaKCn.mjs.map
+//# sourceMappingURL=extensions-mStGDfMH.mjs.map