@react-email/editor 0.0.0-experimental.7 → 0.0.0-experimental.8

package/dist/index.js

@@ -23,6 +23,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let __tiptap_core = require("@tiptap/core");
 __tiptap_core = __toESM(__tiptap_core);
+let __tiptap_starter_kit = require("@tiptap/starter-kit");
+__tiptap_starter_kit = __toESM(__tiptap_starter_kit);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
 let __react_email_components = require("@react-email/components");
@@ -456,12 +458,12 @@ const Body = EmailNode.create({
 			0
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -617,7 +619,7 @@ const Button = EmailNode.create({
 			}
 		};
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		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,
@@ -625,8 +627,7 @@ const Button = EmailNode.create({
 				className: node.attrs?.class || void 0,
 				href: node.attrs?.href,
 				style: {
-					...styles.reset,
-					...styles.button,
+					...style,
 					...inlineStyles
 				},
 				children
@@ -881,7 +882,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 			defaultTheme: this.options.defaultTheme
 		})];
 	}
-}), ({ node, styles }) => {
+}), ({ node, style }) => {
 	const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
 	const userTheme = __react_email_components[node.attrs?.theme];
 	const theme = userTheme ? {
@@ -905,181 +906,11 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
 		theme,
 		style: {
 			width: "auto",
-			...styles.codeBlock
+			...style
 		}
 	});
 });
 
-//#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, styles }) {
-			const inlineStyles = inlineCssToJs(node.attrs?.style);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Row, {
-				className: node.attrs?.class || void 0,
-				style: {
-					...styles.reset,
-					...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, styles }) {
-		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: {
-				...styles.reset,
-				...inlineStyles,
-				...width ? { width } : {}
-			},
-			children
-		});
-	}
-});
-
 //#endregion
 //#region src/extensions/div.tsx
 const Div = EmailNode.create({
@@ -1112,12 +943,12 @@ const Div = EmailNode.create({
 	addAttributes() {
 		return { ...createStandardAttributes([...COMMON_HTML_ATTRIBUTES, ...LAYOUT_ATTRIBUTES]) };
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -1368,14 +1199,14 @@ const Section = EmailNode.create({
 			});
 		} };
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		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,
+				...style,
 				...inlineStyles,
 				...getTextAlignment(textAlign)
 			},
@@ -1508,7 +1339,7 @@ const Table = EmailNode.create({
 			]
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		const alignment = node.attrs?.align || node.attrs?.alignment;
 		const width = node.attrs?.width;
@@ -1519,7 +1350,7 @@ const Table = EmailNode.create({
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_email_components.Section, {
 			className: node.attrs?.class || void 0,
 			align: alignment,
-			style: resolveConflictingStyles(styles.reset, {
+			style: resolveConflictingStyles(style, {
 				...inlineStyles,
 				...centeringStyles
 			}),
@@ -1560,12 +1391,12 @@ const TableRow = EmailNode.create({
 			0
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = inlineCssToJs(node.attrs?.style);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			className: node.attrs?.class || void 0,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -1605,13 +1436,13 @@ const TableCell = EmailNode.create({
 			0
 		];
 	},
-	renderToReactEmail({ children, node, styles }) {
+	renderToReactEmail({ children, node, style }) {
 		const inlineStyles = 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,
 			style: {
-				...styles.reset,
+				...style,
 				...inlineStyles
 			},
 			children
@@ -1692,6 +1523,297 @@ const Uppercase = __tiptap_core.Mark.create({
 	}
 });
 
+//#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
+//#region src/extensions/index.ts
+const coreExtensions = [
+	__tiptap_starter_kit.StarterKit.configure({
+		undoRedo: false,
+		heading: false,
+		link: false,
+		underline: false,
+		trailingNode: false,
+		bold: false,
+		gapcursor: false,
+		listItem: {},
+		bulletList: { HTMLAttributes: { class: "node-bulletList" } },
+		paragraph: { HTMLAttributes: { class: "node-paragraph" } },
+		orderedList: { HTMLAttributes: { class: "node-orderedList" } },
+		blockquote: { HTMLAttributes: { class: "node-blockquote" } },
+		codeBlock: false,
+		code: { HTMLAttributes: {
+			class: "node-inlineCode",
+			spellcheck: "false"
+		} },
+		horizontalRule: false,
+		dropcursor: {
+			color: "#61a8f8",
+			class: "rounded-full animate-[fade-in_300ms_ease-in-out] !z-40",
+			width: 4
+		}
+	}),
+	CodeBlockPrism.configure({
+		defaultLanguage: "javascript",
+		HTMLAttributes: { class: "prism node-codeBlock" }
+	}),
+	Placeholder,
+	PreviewText,
+	Bold,
+	Sup,
+	Uppercase,
+	PreservedStyle,
+	Table,
+	TableRow,
+	TableCell,
+	TableHeader,
+	Body,
+	Div,
+	Button,
+	Section,
+	AlignmentAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"codeBlock",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn"
+	] }),
+	StyleAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"codeBlock",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"horizontalRule",
+		"footer",
+		"section",
+		"div",
+		"body",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn",
+		"link"
+	] }),
+	ClassAttribute.configure({ types: [
+		"heading",
+		"paragraph",
+		"image",
+		"blockquote",
+		"bulletList",
+		"orderedList",
+		"listItem",
+		"button",
+		"youtube",
+		"twitter",
+		"horizontalRule",
+		"footer",
+		"section",
+		"div",
+		"body",
+		"table",
+		"tableRow",
+		"tableCell",
+		"tableHeader",
+		"columnsColumn",
+		"link"
+	] }),
+	MaxNesting.configure({
+		maxDepth: 50,
+		nodeTypes: [
+			"section",
+			"bulletList",
+			"orderedList"
+		]
+	})
+];
+
 //#endregion
 //#region src/utils/set-text-alignment.ts
 function setTextAlignment(editor, alignment) {
@@ -2332,6 +2454,7 @@ exports.TableRow = TableRow;
 exports.ThreeColumns = ThreeColumns;
 exports.TwoColumns = TwoColumns;
 exports.Uppercase = Uppercase;
+exports.coreExtensions = coreExtensions;
 exports.editorEventBus = editorEventBus;
 exports.getColumnsDepth = getColumnsDepth;
 exports.processStylesForUnlink = processStylesForUnlink;