@react-email/editor 0.0.0-experimental.4 → 0.0.0-experimental.40

package/dist/index.mjs

@@ -1,1387 +1,74 @@
-import { Extension, Mark, Node, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { jsx } from "react/jsx-runtime";
-import * as ReactEmailComponents from "@react-email/components";
-import { Button as Button$1, CodeBlock, Column, Row, Section as Section$1 } from "@react-email/components";
-import CodeBlock$1 from "@tiptap/extension-code-block";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { fromHtml } from "hast-util-from-html";
-import Prism from "prismjs";
-import TipTapPlaceholder from "@tiptap/extension-placeholder";
-
-//#region src/core/email-node.ts
-var EmailNode = class EmailNode extends 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/extensions/alignment-attribute.tsx
-const AlignmentAttribute = Extension.create({
-	name: "alignmentAttribute",
-	addOptions() {
-		return {
-			types: [],
-			alignments: [
-				"left",
-				"center",
-				"right",
-				"justify"
-			]
-		};
-	},
-	addGlobalAttributes() {
-		return [{
-			types: this.options.types,
-			attributes: { alignment: {
-				parseHTML: (element) => {
-					const explicitAlign = element.getAttribute("align") || element.getAttribute("alignment") || element.style.textAlign;
-					if (explicitAlign && this.options.alignments.includes(explicitAlign)) return explicitAlign;
-					return null;
-				},
-				renderHTML: (attributes) => {
-					if (attributes.alignment === "left") return {};
-					return { alignment: attributes.alignment };
-				}
-			} }
-		}];
-	},
-	addCommands() {
-		return { setAlignment: (alignment) => ({ commands }) => {
-			if (!this.options.alignments.includes(alignment)) return false;
-			return this.options.types.every((type) => commands.updateAttributes(type, { alignment }));
-		} };
-	},
-	addKeyboardShortcuts() {
-		return {
-			Enter: () => {
-				const { from } = this.editor.state.selection;
-				const currentAlignment = this.editor.state.doc.nodeAt(from)?.attrs?.alignment;
-				if (currentAlignment) requestAnimationFrame(() => {
-					this.editor.commands.setAlignment(currentAlignment);
-				});
-				return false;
-			},
-			"Mod-Shift-l": () => this.editor.commands.setAlignment("left"),
-			"Mod-Shift-e": () => this.editor.commands.setAlignment("center"),
-			"Mod-Shift-r": () => this.editor.commands.setAlignment("right"),
-			"Mod-Shift-j": () => this.editor.commands.setAlignment("justify")
-		};
-	}
-});
-
-//#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/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/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",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx("div", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
-	}
-});
-
-//#endregion
-//#region src/extensions/bold.ts
-/**
-* Matches bold text via `**` as input.
-*/
-const starInputRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/;
-/**
-* Matches bold text via `**` while pasting.
-*/
-const starPasteRegex = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g;
-/**
-* Matches bold text via `__` as input.
-*/
-const underscoreInputRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/;
-/**
-* Matches bold text via `__` while pasting.
-*/
-const underscorePasteRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
-/**
-* This extension allows you to mark text as bold.
-* @see https://tiptap.dev/api/marks/bold
-*/
-const Bold = Mark.create({
-	name: "bold",
-	addOptions() {
-		return { HTMLAttributes: {} };
-	},
-	parseHTML() {
-		return [
-			{ tag: "strong" },
-			{
-				tag: "b",
-				getAttrs: (node) => node.style.fontWeight !== "normal" && null
-			},
-			{
-				style: "font-weight=400",
-				clearMark: (mark) => mark.type.name === this.name
-			}
-		];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"strong",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	addCommands() {
-		return {
-			setBold: () => ({ commands }) => {
-				return commands.setMark(this.name);
-			},
-			toggleBold: () => ({ commands }) => {
-				return commands.toggleMark(this.name);
-			},
-			unsetBold: () => ({ commands }) => {
-				return commands.unsetMark(this.name);
-			}
-		};
-	},
-	addKeyboardShortcuts() {
-		return {
-			"Mod-b": () => this.editor.commands.toggleBold(),
-			"Mod-B": () => this.editor.commands.toggleBold()
-		};
-	},
-	addInputRules() {
-		return [markInputRule({
-			find: starInputRegex,
-			type: this.type
-		}), markInputRule({
-			find: underscoreInputRegex,
-			type: this.type
-		})];
-	},
-	addPasteRules() {
-		return [markPasteRule({
-			find: starPasteRegex,
-			type: this.type
-		}), markPasteRule({
-			find: underscorePasteRegex,
-			type: this.type
-		})];
-	}
-});
-
-//#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",
-			mergeAttributes({ class: `align-${HTMLAttributes?.alignment}` }),
-			[
-				"a",
-				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__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Column, {
-			align: node.attrs?.align || node.attrs?.alignment,
-			children: /* @__PURE__ */ jsx(Button$1, {
-				className: node.attrs?.class || void 0,
-				href: node.attrs?.href,
-				style: {
-					...styles.reset,
-					...styles.button,
-					...inlineStyles
-				},
-				children
-			})
-		}) });
-	}
-});
-
-//#endregion
-//#region src/extensions/class-attribute.tsx
-const ClassAttribute = Extension.create({
-	name: "classAttribute",
-	addOptions() {
-		return {
-			types: [],
-			class: []
-		};
-	},
-	addGlobalAttributes() {
-		return [{
-			types: this.options.types,
-			attributes: { class: {
-				default: "",
-				parseHTML: (element) => element.className || "",
-				renderHTML: (attributes) => {
-					return attributes.class ? { class: attributes.class } : {};
-				}
-			} }
-		}];
-	},
-	addCommands() {
-		return {
-			unsetClass: () => ({ commands }) => {
-				return this.options.types.every((type) => commands.resetAttributes(type, "class"));
-			},
-			setClass: (classList) => ({ commands }) => {
-				return this.options.types.every((type) => commands.updateAttributes(type, { class: classList }));
-			}
-		};
-	},
-	addKeyboardShortcuts() {
-		return { Enter: ({ editor }) => {
-			requestAnimationFrame(() => {
-				editor.commands.resetAttributes("paragraph", "class");
-			});
-			return false;
-		} };
-	}
-});
-
-//#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 fromHtml(html, { fragment: true }).children;
-}
-function registeredLang(aliasOrLanguage) {
-	const allSupportLang = Object.keys(Prism.languages).filter((id) => typeof Prism.languages[id] === "object");
-	return Boolean(allSupportLang.find((x) => x === aliasOrLanguage));
-}
-function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
-	const decorations = [];
-	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 = Prism.highlight(block.node.textContent, Prism.languages[language], language);
-		} catch {
-			html = Prism.highlight(block.node.textContent, Prism.languages.javascript, "js");
-		}
-		parseNodes(getHighlightNodes(html)).forEach((node) => {
-			const to = from + node.text.length;
-			if (node.classes.length) {
-				const decoration = Decoration.inline(from, to, { class: node.classes.join(" ") });
-				decorations.push(decoration);
-			}
-			from = to;
-		});
-	});
-	return 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 Plugin({
-		key: new PluginKey("prism"),
-		view(view) {
-			pluginView = view;
-			return { destroy() {
-				pluginView = null;
-			} };
+import { U as createPasteHandler, V as composeReactEmail, W as createDropHandler, t as StarterKit } from "./extensions-BvfmaKCn.mjs";
+import { t as EmailTheming } from "./extension-DyY8_bh4.mjs";
+import { J as BubbleMenuButtonDefault, O as BubbleMenuImageDefault, S as BubbleMenuLinkDefault, j as BubbleMenuDefault, t as SlashCommandRoot } from "./root-CkYaJZpj.mjs";
+import { UndoRedo } from "@tiptap/extensions";
+import { EditorProvider, useCurrentEditor } from "@tiptap/react";
+import { forwardRef, useImperativeHandle, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/email-editor/email-editor.tsx
+function RefBridge({ editorRef }) {
+	const { editor } = useCurrentEditor();
+	useImperativeHandle(editorRef, () => ({
+		export: async () => {
+			if (!editor) return {
+				html: "",
+				text: ""
+			};
+			return composeReactEmail({ editor });
 		},
-		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 = findChildren(oldState.doc, (node) => node.type.name === name);
-				const newNodes = 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);
-			}
+		getJSON: () => editor?.getJSON() ?? {
+			type: "doc",
+			content: []
 		},
-		props: { decorations(state) {
-			return prismjsPlugin.getState(state);
-		} },
-		destroy() {
-			pluginView = null;
-			removePrismTheme();
-		}
-	});
-	return prismjsPlugin;
-}
-
-//#endregion
-//#region src/extensions/code-block.tsx
-const CodeBlockPrism = EmailNode.from(CodeBlock$1.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 }) {
+		getHTML: () => editor?.getHTML() ?? "",
+		editor
+	}), [editor]);
+	return null;
+}
+const EmailEditor = forwardRef(({ content, onChange, onUploadImage, onReady, theme = "basic", editable = true, placeholder, bubbleMenu, extensions: extensionsProp, className }, ref) => {
+	const extensions = useMemo(() => {
+		if (extensionsProp) return extensionsProp;
 		return [
-			"pre",
-			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
-			]
+			StarterKit.configure({ Placeholder: placeholder ? { placeholder } : void 0 }),
+			UndoRedo,
+			EmailTheming.configure({ theme })
 		];
-	},
-	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 = ReactEmailComponents[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__ */ jsx(CodeBlock, {
-		code: node.content?.[0]?.text ?? "",
-		language,
+	}, [
+		extensionsProp,
 		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",
-			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__ */ jsx("div", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
-	}
-});
-
-//#endregion
-//#region src/extensions/max-nesting.ts
-const MaxNesting = Extension.create({
-	name: "maxNesting",
-	addOptions() {
-		return {
-			maxDepth: 3,
-			nodeTypes: void 0
-		};
-	},
-	addProseMirrorPlugins() {
-		const { maxDepth, nodeTypes } = this.options;
-		if (typeof maxDepth !== "number" || maxDepth < 1) throw new Error("maxDepth must be a positive number");
-		return [new Plugin({
-			key: new PluginKey("maxNesting"),
-			appendTransaction(transactions, _oldState, newState) {
-				if (!transactions.some((tr$1) => tr$1.docChanged)) return null;
-				const rangesToLift = [];
-				newState.doc.descendants((node, pos) => {
-					let depth = 0;
-					let currentPos = pos;
-					let currentNode = node;
-					while (currentNode && depth <= maxDepth) {
-						if (!nodeTypes || nodeTypes.includes(currentNode.type.name)) depth++;
-						const $pos = newState.doc.resolve(currentPos);
-						if ($pos.depth === 0) break;
-						currentPos = $pos.before($pos.depth);
-						currentNode = newState.doc.nodeAt(currentPos);
-					}
-					if (depth > maxDepth) {
-						const $pos = newState.doc.resolve(pos);
-						if ($pos.depth > 0) {
-							const range = $pos.blockRange();
-							if (range && "canReplace" in newState.schema.nodes.doc && typeof newState.schema.nodes.doc.canReplace === "function" && newState.schema.nodes.doc.canReplace(range.start - 1, range.end + 1, newState.doc.slice(range.start, range.end).content)) rangesToLift.push({
-								range,
-								target: range.start - 1
-							});
-						}
-					}
-				});
-				if (rangesToLift.length === 0) return null;
-				const tr = newState.tr;
-				for (let i = rangesToLift.length - 1; i >= 0; i--) {
-					const { range, target } = rangesToLift[i];
-					tr.lift(range, target);
-				}
-				return tr;
-			},
-			filterTransaction(tr) {
-				if (!tr.docChanged) return true;
-				let wouldCreateDeepNesting = false;
-				const newDoc = tr.doc;
-				newDoc.descendants((node, pos) => {
-					if (wouldCreateDeepNesting) return false;
-					let depth = 0;
-					let currentPos = pos;
-					let currentNode = node;
-					while (currentNode && depth <= maxDepth) {
-						if (!nodeTypes || nodeTypes.includes(currentNode.type.name)) depth++;
-						const $pos = newDoc.resolve(currentPos);
-						if ($pos.depth === 0) break;
-						currentPos = $pos.before($pos.depth);
-						currentNode = newDoc.nodeAt(currentPos);
-					}
-					if (depth > maxDepth) {
-						wouldCreateDeepNesting = true;
-						return false;
-					}
-				});
-				return !wouldCreateDeepNesting;
-			}
-		})];
-	}
-});
-
-//#endregion
-//#region src/extensions/placeholder.ts
-const Placeholder = TipTapPlaceholder.configure({
-	placeholder: ({ node }) => {
-		if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
-		return "Press '/' for commands";
-	},
-	includeChildren: true
-});
-
-//#endregion
-//#region src/extensions/preserved-style.ts
-const PreservedStyle = Mark.create({
-	name: "preservedStyle",
-	addAttributes() {
-		return { style: {
-			default: null,
-			parseHTML: (element) => element.getAttribute("style"),
-			renderHTML: (attributes) => {
-				if (!attributes.style) return {};
-				return { style: attributes.style };
-			}
-		} };
-	},
-	parseHTML() {
-		return [{
-			tag: "span[style]",
-			getAttrs: (element) => {
-				if (typeof element === "string") return false;
-				const style = element.getAttribute("style");
-				if (style && hasPreservableStyles(style)) return { style };
-				return false;
-			}
-		}];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"span",
-			mergeAttributes(HTMLAttributes),
-			0
-		];
-	}
-});
-const LINK_INDICATOR_STYLES = [
-	"color",
-	"text-decoration",
-	"text-decoration-line",
-	"text-decoration-color",
-	"text-decoration-style"
-];
-function parseStyleString(styleString) {
-	const temp = document.createElement("div");
-	temp.style.cssText = styleString;
-	return temp.style;
-}
-function hasBackground(style) {
-	const bgColor = style.backgroundColor;
-	const bg = style.background;
-	if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") return true;
-	if (bg && bg !== "transparent" && bg !== "none" && bg !== "rgba(0, 0, 0, 0)") return true;
-	return false;
-}
-function hasPreservableStyles(styleString) {
-	return processStylesForUnlink(styleString) !== null;
-}
-/**
-* Processes styles when unlinking:
-* - Has background (button-like): preserve all styles
-* - No background: strip link-indicator styles (color, text-decoration), keep the rest
-*/
-function processStylesForUnlink(styleString) {
-	if (!styleString) return null;
-	const style = parseStyleString(styleString);
-	if (hasBackground(style)) return styleString;
-	const filtered = [];
-	for (let i = 0; i < style.length; i++) {
-		const prop = style[i];
-		if (LINK_INDICATOR_STYLES.includes(prop)) continue;
-		const value = style.getPropertyValue(prop);
-		if (value) filtered.push(`${prop}: ${value}`);
-	}
-	return filtered.length > 0 ? filtered.join("; ") : null;
-}
-
-//#endregion
-//#region src/extensions/preview-text.ts
-const PreviewText = Node.create({
-	name: "previewText",
-	group: "block",
-	selectable: false,
-	draggable: false,
-	atom: true,
-	addOptions() {
-		return { HTMLAttributes: {} };
-	},
-	addStorage() {
-		return { previewText: null };
-	},
-	renderHTML() {
-		return ["div", { style: "display: none" }];
-	},
-	parseHTML() {
-		return [{
-			tag: "div[data-skip-in-text=\"true\"]",
-			getAttrs: (node) => {
-				if (typeof node === "string") return false;
-				const element = node;
-				let directText = "";
-				for (const child of element.childNodes) if (child.nodeType === 3) directText += child.textContent || "";
-				const cleanText = directText.trim();
-				if (cleanText) this.storage.previewText = cleanText;
-				return false;
-			}
-		}, {
-			tag: "span.preheader",
-			getAttrs: (node) => {
-				if (typeof node === "string") return false;
-				const preheaderText = node.textContent?.trim();
-				if (preheaderText) this.storage.previewText = preheaderText;
-				return false;
-			}
-		}];
-	}
-});
-
-//#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",
-			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__ */ jsx(Section$1, {
-			className: node.attrs?.class || void 0,
-			align: textAlign,
-			style: {
-				...styles.section,
-				...inlineStyles,
-				...getTextAlignment(textAlign)
-			},
-			children
-		});
-	}
-});
-
-//#endregion
-//#region src/extensions/style-attribute.tsx
-const StyleAttribute = Extension.create({
-	name: "styleAttribute",
-	priority: 101,
-	addOptions() {
-		return {
-			types: [],
-			style: []
-		};
-	},
-	addGlobalAttributes() {
-		return [{
-			types: this.options.types,
-			attributes: { style: {
-				default: "",
-				parseHTML: (element) => element.getAttribute("style") || "",
-				renderHTML: (attributes) => {
-					return { style: attributes.style ?? "" };
-				}
-			} }
-		}];
-	},
-	addCommands() {
-		return {
-			unsetStyle: () => ({ commands }) => {
-				return this.options.types.every((type) => commands.resetAttributes(type, "style"));
-			},
-			setStyle: (style) => ({ commands }) => {
-				return this.options.types.every((type) => commands.updateAttributes(type, { style }));
-			}
-		};
-	},
-	addKeyboardShortcuts() {
-		return { Enter: ({ editor }) => {
-			const { state } = editor.view;
-			const { selection } = state;
-			const { $from } = selection;
-			const textBefore = $from.nodeBefore?.text || "";
-			if (textBefore.includes("{{") || textBefore.includes("{{{")) return false;
-			requestAnimationFrame(() => {
-				editor.commands.resetAttributes("paragraph", "style");
-			});
-			return false;
-		} };
-	}
-});
-
-//#endregion
-//#region src/extensions/sup.ts
-/**
-* This extension allows you to mark text as superscript.
-* @see https://tiptap.dev/api/marks/superscript
-*/
-const Sup = Mark.create({
-	name: "sup",
-	addOptions() {
-		return { HTMLAttributes: {} };
-	},
-	parseHTML() {
-		return [{ tag: "sup" }];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"sup",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	addCommands() {
-		return {
-			setSup: () => ({ commands }) => {
-				return commands.setMark(this.name);
-			},
-			toggleSup: () => ({ commands }) => {
-				return commands.toggleMark(this.name);
-			},
-			unsetSup: () => ({ commands }) => {
-				return commands.unsetMark(this.name);
-			}
-		};
-	}
-});
-
-//#endregion
-//#region src/extensions/table.tsx
-const Table = EmailNode.create({
-	name: "table",
-	group: "block",
-	content: "tableRow+",
-	isolating: true,
-	tableRole: "table",
-	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
-	},
-	parseHTML() {
-		return [{
-			tag: "table",
-			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 [
-			"table",
-			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-			[
-				"tbody",
-				{},
-				0
-			]
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		const alignment = node.attrs?.align || node.attrs?.alignment;
-		const width = node.attrs?.width;
-		const centeringStyles = alignment === "center" ? {
-			marginLeft: "auto",
-			marginRight: "auto"
-		} : {};
-		return /* @__PURE__ */ jsx(Section$1, {
-			className: node.attrs?.class || void 0,
-			align: alignment,
-			style: resolveConflictingStyles(styles.reset, {
-				...inlineStyles,
-				...centeringStyles
+		placeholder
+	]);
+	return /* @__PURE__ */ jsxs(EditorProvider, {
+		extensions,
+		content,
+		editable,
+		immediatelyRender: false,
+		editorProps: useMemo(() => ({
+			handlePaste: createPasteHandler({
+				onUploadImage,
+				extensions
 			}),
-			...width !== void 0 ? { width } : {},
-			children
-		});
-	}
-});
-const TableRow = EmailNode.create({
-	name: "tableRow",
-	group: "tableRow",
-	content: "(tableCell | tableHeader)+",
-	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_CELL_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
-	},
-	parseHTML() {
-		return [{
-			tag: "tr",
-			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 [
-			"tr",
-			HTMLAttributes,
-			0
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx("tr", {
-			className: node.attrs?.class || void 0,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
-	}
-});
-const TableCell = EmailNode.create({
-	name: "tableCell",
-	group: "tableCell",
-	content: "block+",
-	isolating: true,
-	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_CELL_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
-	},
-	parseHTML() {
-		return [{
-			tag: "td",
-			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 [
-			"td",
-			HTMLAttributes,
-			0
-		];
-	},
-	renderToReactEmail({ children, node, styles }) {
-		const inlineStyles = inlineCssToJs(node.attrs?.style);
-		return /* @__PURE__ */ jsx(Column, {
-			className: node.attrs?.class || void 0,
-			align: node.attrs?.align || node.attrs?.alignment,
-			style: {
-				...styles.reset,
-				...inlineStyles
-			},
-			children
-		});
-	}
-});
-const TableHeader = Node.create({
-	name: "tableHeader",
-	group: "tableCell",
-	content: "block+",
-	isolating: true,
-	addAttributes() {
-		return { ...createStandardAttributes([
-			...TABLE_HEADER_ATTRIBUTES,
-			...TABLE_CELL_ATTRIBUTES,
-			...LAYOUT_ATTRIBUTES,
-			...COMMON_HTML_ATTRIBUTES
-		]) };
-	},
-	parseHTML() {
-		return [{
-			tag: "th",
-			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 [
-			"th",
-			HTMLAttributes,
-			0
-		];
-	}
+			handleDrop: createDropHandler({ onUploadImage })
+		}), [onUploadImage, extensions]),
+		editorContainerProps: { className },
+		onCreate: ({ editor }) => onReady?.(editor),
+		onUpdate: ({ editor }) => onChange?.(editor),
+		children: [
+			/* @__PURE__ */ jsx(RefBridge, { editorRef: ref }),
+			/* @__PURE__ */ jsx(BubbleMenuDefault, {
+				hideWhenActiveNodes: bubbleMenu?.hideWhenActiveNodes ?? ["button"],
+				hideWhenActiveMarks: bubbleMenu?.hideWhenActiveMarks ?? ["link"]
+			}),
+			/* @__PURE__ */ jsx(BubbleMenuLinkDefault, {}),
+			/* @__PURE__ */ jsx(BubbleMenuButtonDefault, {}),
+			/* @__PURE__ */ jsx(BubbleMenuImageDefault, {}),
+			/* @__PURE__ */ jsx(SlashCommandRoot, {})
+		]
+	}, theme);
 });
+EmailEditor.displayName = "EmailEditor";
 
 //#endregion
-export { AlignmentAttribute, Body, Bold, Button, ClassAttribute, CodeBlockPrism, Div, EmailNode, MaxNesting, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, processStylesForUnlink };
+export { EmailEditor };
 //# sourceMappingURL=index.mjs.map