@react-email/editor 0.0.0-experimental.14 → 0.0.0-experimental.16

package/dist/index.mjs

@@ -1,51 +1,34 @@
-import { Extension, Mark, Node, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { StarterKit } from "@tiptap/starter-kit";
-import { Fragment, jsx, jsxs } 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 { Body as Body$1, Button as Button$1, CodeBlock, Column, Head, Html, Preview, Row, Section as Section$1, pretty, render, toPlainText } from "@react-email/components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Extension, Mark, Node as Node$1, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+import { UndoRedo } from "@tiptap/extensions";
+import { ReactRenderer, useCurrentEditor, useEditor as useEditor$1, useEditorState } from "@tiptap/react";
+import * as React from "react";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { StarterKit } from "@tiptap/starter-kit";
+import BlockquoteBase from "@tiptap/extension-blockquote";
+import BulletListBase from "@tiptap/extension-bullet-list";
+import CodeBase from "@tiptap/extension-code";
 import CodeBlock$1 from "@tiptap/extension-code-block";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { fromHtml } from "hast-util-from-html";
 import Prism from "prismjs";
+import HardBreakBase from "@tiptap/extension-hard-break";
+import ItalicBase from "@tiptap/extension-italic";
+import ListItemBase from "@tiptap/extension-list-item";
+import OrderedListBase from "@tiptap/extension-ordered-list";
+import ParagraphBase from "@tiptap/extension-paragraph";
 import TipTapPlaceholder from "@tiptap/extension-placeholder";
-import { useCurrentEditor, useEditorState } from "@tiptap/react";
-import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CaseUpperIcon, Check, ChevronDown, Code, CodeIcon, ExternalLinkIcon, Heading1, Heading2, Heading3, ItalicIcon, LinkIcon, List, ListOrdered, PencilIcon, StrikethroughIcon, TextIcon, TextQuote, UnderlineIcon, UnlinkIcon } from "lucide-react";
-import * as React from "react";
+import StrikeBase from "@tiptap/extension-strike";
+import { generateJSON } from "@tiptap/html";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CaseUpperIcon, Check, ChevronDown, Code as Code$1, CodeIcon, Columns2, Columns3, Columns4, ExternalLinkIcon, Heading1, Heading2, Heading3, ItalicIcon, LinkIcon, List, ListOrdered, MousePointer, PencilIcon, Rows2, SplitSquareVertical, SquareCode, StrikethroughIcon, Text, TextIcon, TextQuote, UnderlineIcon, UnlinkIcon } from "lucide-react";
 import * as Popover from "@radix-ui/react-popover";
 import { BubbleMenu as BubbleMenu$1 } from "@tiptap/react/menus";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
 
-//#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/core/event-bus.ts
 const EVENT_PREFIX = "@react-email/editor:";
 var EditorEventBus = class {
@@ -87,139 +70,6 @@ var EditorEventBus = class {
 };
 const editorEventBus = new EditorEventBus();
 
-//#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+/;
@@ -372,22 +222,358 @@ function convertBorderValue(value) {
 	}
 }
 /**
-* 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
+* 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/core/serializer/default-base-template.tsx
+function DefaultBaseTemplate({ children, previewText }) {
+	return /* @__PURE__ */ jsxs(Html, { children: [
+		/* @__PURE__ */ jsxs(Head, { children: [
+			/* @__PURE__ */ jsx("meta", {
+				content: "width=device-width",
+				name: "viewport"
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				content: "IE=edge",
+				httpEquiv: "X-UA-Compatible"
+			}),
+			/* @__PURE__ */ jsx("meta", { name: "x-apple-disable-message-reformatting" }),
+			/* @__PURE__ */ jsx("meta", {
+				content: "telephone=no,address=no,email=no,date=no,url=no",
+				name: "format-detection"
+			})
+		] }),
+		previewText && previewText !== "" && /* @__PURE__ */ jsx(Preview, { children: previewText }),
+		/* @__PURE__ */ jsx(Body$1, { children: /* @__PURE__ */ jsx(Section$1, {
+			width: "100%",
+			align: "center",
+			children: /* @__PURE__ */ jsx(Section$1, {
+				style: { width: "100%" },
+				children
+			})
+		}) })
+	] });
+}
+
+//#endregion
+//#region src/core/serializer/email-mark.ts
+var EmailMark = class EmailMark extends Mark {
+	constructor(config) {
+		super(config);
+	}
+	/**
+	* Create a new Mark instance
+	* @param config - Mark configuration object or a function that returns a configuration object
+	*/
+	static create(config) {
+		return new EmailMark(typeof config === "function" ? config() : config);
+	}
+	static from(mark, renderToReactEmail) {
+		const customMark = EmailMark.create({});
+		Object.assign(customMark, { ...mark });
+		customMark.config = {
+			...mark.config,
+			renderToReactEmail
+		};
+		return customMark;
+	}
+	configure(options) {
+		return super.configure(options);
+	}
+	extend(extendedConfig) {
+		const resolvedConfig = typeof extendedConfig === "function" ? extendedConfig() : extendedConfig;
+		return super.extend(resolvedConfig);
+	}
+};
+
+//#endregion
+//#region src/core/serializer/email-node.ts
+var EmailNode = class EmailNode extends Node$1 {
+	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/core/serializer/compose-react-email.tsx
+const MARK_ORDER = {
+	preservedStyle: 0,
+	italic: 1,
+	strike: 2,
+	underline: 3,
+	link: 4,
+	bold: 5,
+	code: 6
+};
+const NODES_WITH_INCREMENTED_CHILD_DEPTH = new Set(["bulletList", "orderedList"]);
+function getOrderedMarks(marks) {
+	if (!marks) return [];
+	return [...marks].sort((a, b) => (MARK_ORDER[a.type] ?? Number.MAX_SAFE_INTEGER) - (MARK_ORDER[b.type] ?? Number.MAX_SAFE_INTEGER));
+}
+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 emailNodeComponentRegistry = Object.fromEntries(extensions.filter((ext) => ext instanceof EmailNode).map((extension) => [extension.name, extension.config.renderToReactEmail]));
+	const emailMarkComponentRegistry = Object.fromEntries(extensions.filter((ext) => ext instanceof EmailMark).map((extension) => [extension.name, extension.config.renderToReactEmail]));
+	function renderMark(mark, node, children, depth) {
+		const markStyle = serializerPlugin?.getNodeStyles({
+			type: mark.type,
+			attrs: mark.attrs ?? {}
+		}, depth, editor) ?? {};
+		const markRenderer = emailMarkComponentRegistry[mark.type];
+		if (markRenderer) return markRenderer({
+			mark,
+			node,
+			style: markStyle,
+			children
+		});
+		return children;
+	}
+	function parseContent(content, depth = 0) {
+		if (!content) return;
+		return content.map((node, index) => {
+			const style = serializerPlugin?.getNodeStyles(node, depth, editor) ?? {};
+			const inlineStyles = inlineCssToJs(node.attrs?.style);
+			if (node.type && emailNodeComponentRegistry[node.type]) {
+				const Component = emailNodeComponentRegistry[node.type];
+				const childDepth = NODES_WITH_INCREMENTED_CHILD_DEPTH.has(node.type) ? depth + 1 : depth;
+				return /* @__PURE__ */ jsx(Component, {
+					node: node.type === "table" && inlineStyles.width && !node.attrs?.width ? {
+						...node,
+						attrs: {
+							...node.attrs,
+							width: inlineStyles.width
+						}
+					} : node,
+					style,
+					children: parseContent(node.content, childDepth)
+				}, index);
+			}
+			switch (node.type) {
+				case "text": {
+					let wrappedText = node.text;
+					getOrderedMarks(node.marks).forEach((mark) => {
+						wrappedText = renderMark(mark, node, wrappedText, depth);
+					});
+					const textAttributes = node.marks?.find((mark) => mark.type === "textStyle")?.attrs;
+					return /* @__PURE__ */ jsx("span", {
+						style: {
+							...textAttributes,
+							...style
+						},
+						children: wrappedText
+					}, index);
+				}
+				default: return null;
+			}
+		});
+	}
+	const unformattedHtml = await render(/* @__PURE__ */ jsx(serializerPlugin?.BaseTemplate ?? DefaultBaseTemplate, {
+		previewText: preview,
+		editor,
+		children: parseContent(data.content)
+	}));
+	const [prettyHtml, text] = await Promise.all([pretty(unformattedHtml), toPlainText(unformattedHtml)]);
+	return {
+		html: prettyHtml,
+		text
+	};
+};
+
+//#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/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/blockquote.tsx
+const Blockquote = EmailNode.from(BlockquoteBase, ({ children, node, style }) => /* @__PURE__ */ jsx("blockquote", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style),
+		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+	},
+	children
+}));
+
+//#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.
 */
-function resolveConflictingStyles(resetStyles, inlineStyles) {
-	const expandedResetStyles = expandShorthandProperties(resetStyles);
-	const expandedInlineStyles = expandShorthandProperties(inlineStyles);
-	return {
-		...expandedResetStyles,
-		...expandedInlineStyles
-	};
-}
+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/extensions/body.tsx
@@ -435,7 +621,7 @@ const Body = EmailNode.create({
 });
 
 //#endregion
-//#region src/extensions/bold.ts
+//#region src/extensions/bold.tsx
 /**
 * Matches bold text via `**` as input.
 */
@@ -456,7 +642,7 @@ 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({
+const Bold = EmailMark.create({
 	name: "bold",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -481,6 +667,12 @@ const Bold = Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("strong", {
+			style,
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setBold: () => ({ commands }) => {
@@ -520,6 +712,17 @@ const Bold = Mark.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/bullet-list.tsx
+const BulletList = EmailNode.from(BulletListBase, ({ children, node, style }) => /* @__PURE__ */ jsx("ul", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
 //#endregion
 //#region src/extensions/button.tsx
 const Button = EmailNode.create({
@@ -641,6 +844,16 @@ const ClassAttribute = Extension.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/code.tsx
+const Code = EmailMark.from(CodeBase, ({ children, node, style }) => /* @__PURE__ */ jsx("code", {
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
 //#endregion
 //#region src/utils/prism-utils.ts
 const publicURL = "/styles/prism";
@@ -919,6 +1132,29 @@ const Div = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/hard-break.tsx
+const HardBreak = EmailNode.from(HardBreakBase, () => /* @__PURE__ */ jsx("br", {}));
+
+//#endregion
+//#region src/extensions/italic.tsx
+const Italic = EmailMark.from(ItalicBase, ({ children, style }) => /* @__PURE__ */ jsx("em", {
+	style,
+	children
+}));
+
+//#endregion
+//#region src/extensions/list-item.tsx
+const ListItem = EmailNode.from(ListItemBase, ({ children, node, style }) => /* @__PURE__ */ jsx("li", {
+	className: node.attrs?.class || void 0,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style),
+		...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+	},
+	children
+}));
+
 //#endregion
 //#region src/extensions/max-nesting.ts
 const MaxNesting = Extension.create({
@@ -994,6 +1230,33 @@ const MaxNesting = Extension.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/ordered-list.tsx
+const OrderedList = EmailNode.from(OrderedListBase, ({ children, node, style }) => /* @__PURE__ */ jsx("ol", {
+	className: node.attrs?.class || void 0,
+	start: node.attrs?.start,
+	style: {
+		...style,
+		...inlineCssToJs(node.attrs?.style)
+	},
+	children
+}));
+
+//#endregion
+//#region src/extensions/paragraph.tsx
+const Paragraph = EmailNode.from(ParagraphBase, ({ children, node, style }) => {
+	const isEmpty = !node.content || node.content.length === 0;
+	return /* @__PURE__ */ jsx("p", {
+		className: node.attrs?.class || void 0,
+		style: {
+			...style,
+			...inlineCssToJs(node.attrs?.style),
+			...getTextAlignment(node.attrs?.align || node.attrs?.alignment)
+		},
+		children: isEmpty ? /* @__PURE__ */ jsx("br", {}) : children
+	});
+});
+
 //#endregion
 //#region src/extensions/placeholder.ts
 const Placeholder = TipTapPlaceholder.configure({
@@ -1005,8 +1268,8 @@ const Placeholder = TipTapPlaceholder.configure({
 });
 
 //#endregion
-//#region src/extensions/preserved-style.ts
-const PreservedStyle = Mark.create({
+//#region src/extensions/preserved-style.tsx
+const PreservedStyle = EmailMark.create({
 	name: "preservedStyle",
 	addAttributes() {
 		return { style: {
@@ -1035,6 +1298,12 @@ const PreservedStyle = Mark.create({
 			mergeAttributes(HTMLAttributes),
 			0
 		];
+	},
+	renderToReactEmail({ children, mark }) {
+		return /* @__PURE__ */ jsx("span", {
+			style: mark.attrs?.style ? inlineCssToJs(mark.attrs.style) : void 0,
+			children
+		});
 	}
 });
 const LINK_INDICATOR_STYLES = [
@@ -1080,7 +1349,7 @@ function processStylesForUnlink(styleString) {
 
 //#endregion
 //#region src/extensions/preview-text.ts
-const PreviewText = Node.create({
+const PreviewText = Node$1.create({
 	name: "previewText",
 	group: "block",
 	selectable: false,
@@ -1119,17 +1388,6 @@ const PreviewText = Node.create({
 	}
 });
 
-//#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({
@@ -1178,6 +1436,13 @@ const Section = EmailNode.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/strike.tsx
+const Strike = EmailMark.from(StrikeBase, ({ children, style }) => /* @__PURE__ */ jsx("s", {
+	style,
+	children
+}));
+
 //#endregion
 //#region src/extensions/style-attribute.tsx
 const StyleAttribute = Extension.create({
@@ -1227,12 +1492,12 @@ const StyleAttribute = Extension.create({
 });
 
 //#endregion
-//#region src/extensions/sup.ts
+//#region src/extensions/sup.tsx
 /**
 * This extension allows you to mark text as superscript.
 * @see https://tiptap.dev/api/marks/superscript
 */
-const Sup = Mark.create({
+const Sup = EmailMark.create({
 	name: "sup",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1247,6 +1512,12 @@ const Sup = Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("sup", {
+			style,
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setSup: () => ({ commands }) => {
@@ -1412,7 +1683,7 @@ const TableCell = EmailNode.create({
 		});
 	}
 });
-const TableHeader = Node.create({
+const TableHeader = Node$1.create({
 	name: "tableHeader",
 	group: "tableCell",
 	content: "block+",
@@ -1449,8 +1720,8 @@ const TableHeader = Node.create({
 });
 
 //#endregion
-//#region src/extensions/uppercase.ts
-const Uppercase = Mark.create({
+//#region src/extensions/uppercase.tsx
+const Uppercase = EmailMark.create({
 	name: "uppercase",
 	addOptions() {
 		return { HTMLAttributes: {} };
@@ -1471,6 +1742,15 @@ const Uppercase = Mark.create({
 			0
 		];
 	},
+	renderToReactEmail({ children, style }) {
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				...style,
+				textTransform: "uppercase"
+			},
+			children
+		});
+	},
 	addCommands() {
 		return {
 			setUppercase: () => ({ commands }) => {
@@ -1666,17 +1946,17 @@ const coreExtensions = [
 		underline: false,
 		trailingNode: false,
 		bold: false,
+		italic: false,
+		strike: false,
+		code: false,
+		paragraph: false,
+		bulletList: false,
+		orderedList: false,
+		listItem: false,
+		blockquote: false,
+		hardBreak: 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",
@@ -1688,9 +1968,21 @@ const coreExtensions = [
 		defaultLanguage: "javascript",
 		HTMLAttributes: { class: "prism node-codeBlock" }
 	}),
+	Code.configure({ HTMLAttributes: {
+		class: "node-inlineCode",
+		spellcheck: "false"
+	} }),
+	Paragraph.configure({ HTMLAttributes: { class: "node-paragraph" } }),
+	BulletList.configure({ HTMLAttributes: { class: "node-bulletList" } }),
+	OrderedList.configure({ HTMLAttributes: { class: "node-orderedList" } }),
+	Blockquote.configure({ HTMLAttributes: { class: "node-blockquote" } }),
+	ListItem,
+	HardBreak,
+	Italic,
 	Placeholder,
 	PreviewText,
 	Bold,
+	Strike,
 	Sup,
 	Uppercase,
 	PreservedStyle,
@@ -1777,6 +2069,221 @@ const coreExtensions = [
 	})
 ];
 
+//#endregion
+//#region src/core/create-drop-handler.ts
+function createDropHandler({ onPaste, onUploadImage }) {
+	return (view, event, _slice, moved) => {
+		if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+			event.preventDefault();
+			const file = event.dataTransfer.files[0];
+			if (onPaste?.(file, view)) return true;
+			if (file.type.includes("image/") && onUploadImage) {
+				onUploadImage(file, view, (view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				})?.pos || 0) - 1);
+				return true;
+			}
+		}
+		return false;
+	};
+}
+
+//#endregion
+//#region src/utils/paste-sanitizer.ts
+/**
+* Sanitizes pasted HTML.
+* - From editor (has node-* classes): pass through as-is
+* - From external: strip all styles/classes, keep only semantic HTML
+*/
+/**
+* Detects content from the Resend editor by checking for node-* class names.
+*/
+const EDITOR_CLASS_PATTERN = /class="[^"]*node-/;
+/**
+* Attributes to preserve on specific elements for EXTERNAL content.
+* Only functional attributes - NO style or class.
+*/
+const PRESERVED_ATTRIBUTES = {
+	a: [
+		"href",
+		"target",
+		"rel"
+	],
+	img: [
+		"src",
+		"alt",
+		"width",
+		"height"
+	],
+	td: ["colspan", "rowspan"],
+	th: [
+		"colspan",
+		"rowspan",
+		"scope"
+	],
+	table: [
+		"border",
+		"cellpadding",
+		"cellspacing"
+	],
+	"*": ["id"]
+};
+function isFromEditor(html) {
+	return EDITOR_CLASS_PATTERN.test(html);
+}
+function sanitizePastedHtml(html) {
+	if (isFromEditor(html)) return html;
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	sanitizeNode(doc.body);
+	return doc.body.innerHTML;
+}
+function sanitizeNode(node) {
+	if (node.nodeType === Node.ELEMENT_NODE) sanitizeElement(node);
+	for (const child of Array.from(node.childNodes)) sanitizeNode(child);
+}
+function sanitizeElement(el) {
+	const allowedForTag = PRESERVED_ATTRIBUTES[el.tagName.toLowerCase()] || [];
+	const allowedGlobal = PRESERVED_ATTRIBUTES["*"] || [];
+	const allowed = new Set([...allowedForTag, ...allowedGlobal]);
+	const attributesToRemove = [];
+	for (const attr of Array.from(el.attributes)) {
+		if (attr.name.startsWith("data-")) {
+			attributesToRemove.push(attr.name);
+			continue;
+		}
+		if (!allowed.has(attr.name)) attributesToRemove.push(attr.name);
+	}
+	for (const attr of attributesToRemove) el.removeAttribute(attr);
+}
+
+//#endregion
+//#region src/core/create-paste-handler.ts
+function createPasteHandler({ onPaste, onUploadImage, extensions }) {
+	return (view, event, slice) => {
+		const text = event.clipboardData?.getData("text/plain");
+		if (text && onPaste?.(text, view)) {
+			event.preventDefault();
+			return true;
+		}
+		if (event.clipboardData?.files?.[0]) {
+			const file = event.clipboardData.files[0];
+			if (onPaste?.(file, view)) {
+				event.preventDefault();
+				return true;
+			}
+			if (file.type.includes("image/") && onUploadImage) {
+				const pos = view.state.selection.from;
+				onUploadImage(file, view, pos);
+				return true;
+			}
+		}
+		/**
+		* If the coming content has a single child, we can assume
+		* it's a plain text and doesn't need to be parsed and
+		* be introduced in a new line
+		*/
+		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 node = view.state.schema.nodeFromJSON(jsonContent);
+			const transaction = view.state.tr.replaceSelectionWith(node, false);
+			view.dispatch(transaction);
+			return true;
+		}
+		return false;
+	};
+}
+
+//#endregion
+//#region src/core/is-document-visually-empty.ts
+function isDocumentVisuallyEmpty(doc) {
+	let nonGlobalNodeCount = 0;
+	let firstNonGlobalNode = null;
+	for (let index = 0; index < doc.childCount; index += 1) {
+		const node = doc.child(index);
+		if (node.type.name === "globalContent") continue;
+		nonGlobalNodeCount += 1;
+		if (firstNonGlobalNode === null) firstNonGlobalNode = {
+			type: node.type,
+			textContent: node.textContent,
+			childCount: node.content.childCount
+		};
+	}
+	if (nonGlobalNodeCount === 0) return true;
+	if (nonGlobalNodeCount !== 1) return false;
+	return firstNonGlobalNode?.type.name === "paragraph" && firstNonGlobalNode.textContent.trim().length === 0 && firstNonGlobalNode.childCount === 0;
+}
+
+//#endregion
+//#region src/core/use-editor.ts
+const COLLABORATION_EXTENSION_NAMES = new Set(["liveblocksExtension", "collaboration"]);
+function hasCollaborationExtension(exts) {
+	return exts.some((ext) => COLLABORATION_EXTENSION_NAMES.has(ext.name));
+}
+function useEditor({ content, extensions = [], onUpdate, onPaste, onUploadImage, onReady, editable = true, ...rest }) {
+	const [contentError, setContentError] = React.useState(null);
+	const isCollaborative = hasCollaborationExtension(extensions);
+	const effectiveExtensions = React.useMemo(() => [
+		...coreExtensions,
+		...isCollaborative ? [] : [UndoRedo],
+		...extensions
+	], [extensions, isCollaborative]);
+	const editor = useEditor$1({
+		content: isCollaborative ? void 0 : content,
+		extensions: effectiveExtensions,
+		immediatelyRender: false,
+		enableContentCheck: true,
+		onContentError({ editor: editor$1, error, disableCollaboration }) {
+			disableCollaboration();
+			setContentError(error);
+			console.error(error);
+			editor$1.setEditable(false);
+		},
+		onCreate({ editor: editor$1 }) {
+			onReady?.(editor$1);
+		},
+		onUpdate({ editor: editor$1, transaction }) {
+			onUpdate?.(editor$1, transaction);
+		},
+		editorProps: {
+			handleDOMEvents: { click: (view, event) => {
+				if (!view.editable) {
+					if (event.target.closest("a")) {
+						event.preventDefault();
+						return true;
+					}
+				}
+				return false;
+			} },
+			handlePaste: createPasteHandler({
+				onPaste,
+				onUploadImage,
+				extensions: effectiveExtensions
+			}),
+			handleDrop: createDropHandler({
+				onPaste,
+				onUploadImage
+			})
+		},
+		...rest
+	});
+	return {
+		editor,
+		isEditorEmpty: useEditorState({
+			editor,
+			selector: (context) => {
+				if (!context.editor) return true;
+				return isDocumentVisuallyEmpty(context.editor.state.doc);
+			}
+		}) ?? true,
+		extensions: effectiveExtensions,
+		contentError,
+		isCollaborative
+	};
+}
+
 //#endregion
 //#region src/utils/set-text-alignment.ts
 function setTextAlignment(editor, alignment) {
@@ -2216,7 +2723,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
 		},
 		{
 			name: "Code",
-			icon: Code,
+			icon: Code$1,
 			command: () => editor.chain().focus().clearNodes().toggleCodeBlock().run(),
 			isActive: editorState?.isCodeBlockActive ?? false
 		}
@@ -2881,5 +3388,463 @@ const LinkBubbleMenu = {
 };
 
 //#endregion
-export { AlignmentAttribute, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, Button, ButtonBubbleMenu, ButtonBubbleMenuDefault, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, COLUMN_PARENT_TYPES, ClassAttribute, CodeBlockPrism, ColumnsColumn, Div, EmailNode, FourColumns, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, LinkBubbleMenu, LinkBubbleMenuDefault, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, MAX_COLUMNS_DEPTH, MaxNesting, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, coreExtensions, editorEventBus, getColumnsDepth, processStylesForUnlink, setTextAlignment, useButtonBubbleMenuContext, useImageBubbleMenuContext, useLinkBubbleMenuContext };
+//#region src/ui/slash-command/utils.ts
+function isInsideNode(editor, type) {
+	const { $from } = editor.state.selection;
+	for (let d = $from.depth; d > 0; d--) if ($from.node(d).type.name === type) return true;
+	return false;
+}
+function isAtMaxColumnsDepth(editor) {
+	const { from } = editor.state.selection;
+	return getColumnsDepth(editor.state.doc, from) >= MAX_COLUMNS_DEPTH;
+}
+function updateScrollView(container, item) {
+	const containerRect = container.getBoundingClientRect();
+	const itemRect = item.getBoundingClientRect();
+	if (itemRect.top < containerRect.top) container.scrollTop -= containerRect.top - itemRect.top;
+	else if (itemRect.bottom > containerRect.bottom) container.scrollTop += itemRect.bottom - containerRect.bottom;
+}
+
+//#endregion
+//#region src/ui/slash-command/command-list.tsx
+const CATEGORY_ORDER = [
+	"Text",
+	"Media",
+	"Layout",
+	"Utility"
+];
+function groupByCategory(items) {
+	const seen = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const existing = seen.get(item.category);
+		if (existing) existing.push(item);
+		else seen.set(item.category, [item]);
+	}
+	const ordered = [];
+	for (const cat of CATEGORY_ORDER) {
+		const group = seen.get(cat);
+		if (group) {
+			ordered.push({
+				category: cat,
+				items: group
+			});
+			seen.delete(cat);
+		}
+	}
+	for (const [category, group] of seen) ordered.push({
+		category,
+		items: group
+	});
+	return ordered;
+}
+function CommandItem({ item, selected, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"data-re-slash-command-item": "",
+		"data-selected": selected || void 0,
+		onClick: onSelect,
+		type: "button",
+		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
+	});
+}
+function CommandList({ items, command, query, ref }) {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		setSelectedIndex(0);
+	}, [items]);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const selected = container.querySelector("[data-selected]");
+		if (selected) updateScrollView(container, selected);
+	}, [selectedIndex]);
+	const selectItem = useCallback((index) => {
+		const item = items[index];
+		if (item) command(item);
+	}, [items, command]);
+	useImperativeHandle(ref, () => ({ onKeyDown: ({ event }) => {
+		if (items.length === 0) return false;
+		if (event.key === "ArrowUp") {
+			setSelectedIndex((i) => (i + items.length - 1) % items.length);
+			return true;
+		}
+		if (event.key === "ArrowDown") {
+			setSelectedIndex((i) => (i + 1) % items.length);
+			return true;
+		}
+		if (event.key === "Enter") {
+			selectItem(selectedIndex);
+			return true;
+		}
+		return false;
+	} }), [
+		items.length,
+		selectItem,
+		selectedIndex
+	]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-empty": "",
+			children: "No results"
+		})
+	});
+	if (query.trim().length > 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(CommandItem, {
+			item,
+			onSelect: () => selectItem(index),
+			selected: index === selectedIndex
+		}, item.title))
+	});
+	const groups = groupByCategory(items);
+	let flatIndex = 0;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-category": "",
+			children: group.category
+		}), group.items.map((item) => {
+			const currentIndex = flatIndex++;
+			return /* @__PURE__ */ jsx(CommandItem, {
+				item,
+				onSelect: () => selectItem(currentIndex),
+				selected: currentIndex === selectedIndex
+			}, item.title);
+		})] }, group.category))
+	});
+}
+
+//#endregion
+//#region src/ui/slash-command/commands.tsx
+const TEXT = {
+	title: "Text",
+	description: "Plain text block",
+	icon: /* @__PURE__ */ jsx(Text, { size: 20 }),
+	category: "Text",
+	searchTerms: ["p", "paragraph"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+	}
+};
+const H1 = {
+	title: "Title",
+	description: "Large heading",
+	icon: /* @__PURE__ */ jsx(Heading1, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"title",
+		"big",
+		"large",
+		"h1"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+	}
+};
+const H2 = {
+	title: "Subtitle",
+	description: "Medium heading",
+	icon: /* @__PURE__ */ jsx(Heading2, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"subtitle",
+		"medium",
+		"h2"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+	}
+};
+const H3 = {
+	title: "Heading",
+	description: "Small heading",
+	icon: /* @__PURE__ */ jsx(Heading3, { size: 20 }),
+	category: "Text",
+	searchTerms: [
+		"subtitle",
+		"small",
+		"h3"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+	}
+};
+const BULLET_LIST = {
+	title: "Bullet list",
+	description: "Unordered list",
+	icon: /* @__PURE__ */ jsx(List, { size: 20 }),
+	category: "Text",
+	searchTerms: ["unordered", "point"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleBulletList().run();
+	}
+};
+const NUMBERED_LIST = {
+	title: "Numbered list",
+	description: "Ordered list",
+	icon: /* @__PURE__ */ jsx(ListOrdered, { size: 20 }),
+	category: "Text",
+	searchTerms: ["ordered"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+	}
+};
+const QUOTE = {
+	title: "Quote",
+	description: "Block quote",
+	icon: /* @__PURE__ */ jsx(TextQuote, { size: 20 }),
+	category: "Text",
+	searchTerms: ["blockquote"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+	}
+};
+const CODE = {
+	title: "Code block",
+	description: "Code snippet",
+	icon: /* @__PURE__ */ jsx(SquareCode, { size: 20 }),
+	category: "Text",
+	searchTerms: ["codeblock"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+	}
+};
+const BUTTON = {
+	title: "Button",
+	description: "Clickable button",
+	icon: /* @__PURE__ */ jsx(MousePointer, { size: 20 }),
+	category: "Layout",
+	searchTerms: ["button"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setButton().run();
+	}
+};
+const DIVIDER = {
+	title: "Divider",
+	description: "Horizontal separator",
+	icon: /* @__PURE__ */ jsx(SplitSquareVertical, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"hr",
+		"divider",
+		"separator"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+	}
+};
+const SECTION = {
+	title: "Section",
+	description: "Content section",
+	icon: /* @__PURE__ */ jsx(Rows2, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"section",
+		"row",
+		"container"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertSection().run();
+	}
+};
+const TWO_COLUMNS = {
+	title: "2 columns",
+	description: "Two column layout",
+	icon: /* @__PURE__ */ jsx(Columns2, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"side-by-side",
+		"multi-column",
+		"row",
+		"two",
+		"2"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(2).run();
+	}
+};
+const THREE_COLUMNS = {
+	title: "3 columns",
+	description: "Three column layout",
+	icon: /* @__PURE__ */ jsx(Columns3, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"multi-column",
+		"row",
+		"three",
+		"3"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(3).run();
+	}
+};
+const FOUR_COLUMNS = {
+	title: "4 columns",
+	description: "Four column layout",
+	icon: /* @__PURE__ */ jsx(Columns4, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"columns",
+		"column",
+		"layout",
+		"grid",
+		"split",
+		"multi-column",
+		"row",
+		"four",
+		"4"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).insertColumns(4).run();
+	}
+};
+const defaultSlashCommands = [
+	TEXT,
+	H1,
+	H2,
+	H3,
+	BULLET_LIST,
+	NUMBERED_LIST,
+	QUOTE,
+	CODE,
+	BUTTON,
+	DIVIDER,
+	SECTION,
+	TWO_COLUMNS,
+	THREE_COLUMNS,
+	FOUR_COLUMNS
+];
+
+//#endregion
+//#region src/ui/slash-command/extension.ts
+const SlashCommandExtension = Extension.create({
+	name: "slash-command",
+	addOptions() {
+		return { suggestion: {
+			char: "/",
+			allow: ({ editor }) => !editor.isActive("codeBlock"),
+			command: ({ editor, range, props }) => {
+				props.command({
+					editor,
+					range
+				});
+			}
+		} };
+	},
+	addProseMirrorPlugins() {
+		return [Suggestion({
+			pluginKey: new PluginKey("slash-command"),
+			editor: this.editor,
+			...this.options.suggestion
+		})];
+	}
+});
+
+//#endregion
+//#region src/ui/slash-command/render.tsx
+function createRenderItems(component = CommandList) {
+	return () => {
+		let renderer = null;
+		let popup = null;
+		return {
+			onStart: (props) => {
+				renderer = new ReactRenderer(component, {
+					props,
+					editor: props.editor
+				});
+				if (!props.clientRect) return;
+				popup = tippy("body", {
+					getReferenceClientRect: props.clientRect,
+					appendTo: () => document.body,
+					content: renderer.element,
+					showOnCreate: true,
+					interactive: true,
+					trigger: "manual",
+					placement: "bottom-start"
+				});
+			},
+			onUpdate: (props) => {
+				if (!renderer) return;
+				renderer.updateProps(props);
+				if (popup?.[0] && props.clientRect) popup[0].setProps({ getReferenceClientRect: props.clientRect });
+			},
+			onKeyDown: (props) => {
+				if (props.event.key === "Escape") {
+					popup?.[0]?.hide();
+					return true;
+				}
+				return renderer?.ref?.onKeyDown(props) ?? false;
+			},
+			onExit: () => {
+				popup?.[0]?.destroy();
+				renderer?.destroy();
+				popup = null;
+				renderer = null;
+			}
+		};
+	};
+}
+
+//#endregion
+//#region src/ui/slash-command/search.ts
+function scoreItem(item, query) {
+	if (!query) return 100;
+	const q = query.toLowerCase();
+	const title = item.title.toLowerCase();
+	const description = item.description.toLowerCase();
+	const terms = item.searchTerms?.map((t) => t.toLowerCase()) ?? [];
+	if (title === q) return 100;
+	if (title.startsWith(q)) return 90;
+	if (title.split(/\s+/).some((w) => w.startsWith(q))) return 80;
+	if (terms.some((t) => t === q)) return 70;
+	if (terms.some((t) => t.startsWith(q))) return 60;
+	if (title.includes(q)) return 40;
+	if (terms.some((t) => t.includes(q))) return 30;
+	if (description.includes(q)) return 20;
+	return 0;
+}
+function filterAndRankItems(items, query) {
+	const trimmed = query.trim();
+	if (!trimmed) return items;
+	const scored = items.map((item) => ({
+		item,
+		score: scoreItem(item, trimmed)
+	})).filter(({ score }) => score > 0);
+	scored.sort((a, b) => b.score - a.score);
+	return scored.map(({ item }) => item);
+}
+
+//#endregion
+//#region src/ui/slash-command/create-slash-command.ts
+function defaultFilterItems(items, query, editor) {
+	return filterAndRankItems(isAtMaxColumnsDepth(editor) ? items.filter((item) => item.category !== "Layout" || !item.title.includes("column")) : items, query);
+}
+function createSlashCommand(options) {
+	const items = options?.items ?? defaultSlashCommands;
+	const filterFn = options?.filterItems ?? defaultFilterItems;
+	return SlashCommandExtension.configure({ suggestion: {
+		items: ({ query, editor }) => filterFn(items, query, editor),
+		render: createRenderItems(options?.component)
+	} });
+}
+
+//#endregion
+//#region src/ui/slash-command/index.ts
+const SlashCommand = createSlashCommand();
+
+//#endregion
+export { AlignmentAttribute, BULLET_LIST, BUTTON, Blockquote, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, BulletList, Button, ButtonBubbleMenu, ButtonBubbleMenuDefault, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, CODE, COLUMN_PARENT_TYPES, ClassAttribute, Code, CodeBlockPrism, ColumnsColumn, CommandList, DIVIDER, Div, EmailNode, FOUR_COLUMNS, FourColumns, H1, H2, H3, HardBreak, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, Italic, LinkBubbleMenu, LinkBubbleMenuDefault, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, ListItem, MAX_COLUMNS_DEPTH, MaxNesting, NUMBERED_LIST, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, OrderedList, Paragraph, Placeholder, PreservedStyle, PreviewText, QUOTE, SECTION, Section, SlashCommand, Strike, StyleAttribute, Sup, TEXT, THREE_COLUMNS, TWO_COLUMNS, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, composeReactEmail, coreExtensions, createSlashCommand, defaultSlashCommands, editorEventBus, filterAndRankItems, getColumnsDepth, isAtMaxColumnsDepth, isInsideNode, processStylesForUnlink, scoreItem, setTextAlignment, useButtonBubbleMenuContext, useEditor, useImageBubbleMenuContext, useLinkBubbleMenuContext };
 //# sourceMappingURL=index.mjs.map