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

package/dist/index.cjs

@@ -46,6 +46,10 @@ react = __toESM(react);
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 let _tiptap_react_menus = require("@tiptap/react/menus");
+let _tiptap_suggestion = require("@tiptap/suggestion");
+_tiptap_suggestion = __toESM(_tiptap_suggestion);
+let tippy_js = require("tippy.js");
+tippy_js = __toESM(tippy_js);
 
 //#region src/core/email-node.ts
 var EmailNode = class EmailNode extends _tiptap_core.Node {
@@ -2912,8 +2916,469 @@ const LinkBubbleMenu = {
 	Default: LinkBubbleMenuDefault
 };
 
+//#endregion
+//#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 }) {
+	const Icon = item.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"data-re-slash-command-item": "",
+		"data-selected": selected || void 0,
+		onClick: onSelect,
+		type: "button",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { size: 20 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title })]
+	});
+}
+function CommandList({ items, command, query, ref }) {
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const containerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setSelectedIndex(0);
+	}, [items]);
+	(0, react.useLayoutEffect)(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const selected = container.querySelector("[data-selected]");
+		if (selected) updateScrollView(container, selected);
+	}, [selectedIndex]);
+	const selectItem = (0, react.useCallback)((index) => {
+		const item = items[index];
+		if (item) command(item);
+	}, [items, command]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-re-slash-command": "",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-re-slash-command-empty": "",
+			children: "No results"
+		})
+	});
+	if (query.trim().length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+			item,
+			onSelect: () => selectItem(index),
+			selected: index === selectedIndex
+		}, item.title))
+	});
+	const groups = groupByCategory(items);
+	let flatIndex = 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-re-slash-command-category": "",
+			children: group.category
+		}), group.items.map((item) => {
+			const currentIndex = flatIndex++;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+				item,
+				onSelect: () => selectItem(currentIndex),
+				selected: currentIndex === selectedIndex
+			}, item.title);
+		})] }, group.category))
+	});
+}
+
+//#endregion
+//#region src/ui/slash-command/commands.ts
+const TEXT = {
+	title: "Text",
+	description: "Plain text block",
+	icon: lucide_react.Text,
+	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: lucide_react.Heading1,
+	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: lucide_react.Heading2,
+	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: lucide_react.Heading3,
+	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: lucide_react.List,
+	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: lucide_react.ListOrdered,
+	category: "Text",
+	searchTerms: ["ordered"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+	}
+};
+const QUOTE = {
+	title: "Quote",
+	description: "Block quote",
+	icon: lucide_react.TextQuote,
+	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: lucide_react.SquareCode,
+	category: "Text",
+	searchTerms: ["codeblock"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+	}
+};
+const BUTTON = {
+	title: "Button",
+	description: "Clickable button",
+	icon: lucide_react.MousePointer,
+	category: "Layout",
+	searchTerms: ["button"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setButton().run();
+	}
+};
+const DIVIDER = {
+	title: "Divider",
+	description: "Horizontal separator",
+	icon: lucide_react.SplitSquareVertical,
+	category: "Layout",
+	searchTerms: [
+		"hr",
+		"divider",
+		"separator"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+	}
+};
+const SECTION = {
+	title: "Section",
+	description: "Content section",
+	icon: lucide_react.Rows2,
+	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: lucide_react.Columns2,
+	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: lucide_react.Columns3,
+	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: lucide_react.Columns4,
+	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 = _tiptap_core.Extension.create({
+	name: "slash-command",
+	addOptions() {
+		return { suggestion: {
+			char: "/",
+			allow: ({ editor }) => !editor.isActive("codeBlock"),
+			command: ({ editor, range, props }) => {
+				props.command({
+					editor,
+					range
+				});
+			}
+		} };
+	},
+	addProseMirrorPlugins() {
+		return [(0, _tiptap_suggestion.default)({
+			pluginKey: new _tiptap_pm_state.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 _tiptap_react.ReactRenderer(component, {
+					props,
+					editor: props.editor
+				});
+				if (!props.clientRect) return;
+				popup = (0, tippy_js.default)("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
 exports.AlignmentAttribute = AlignmentAttribute;
+exports.BULLET_LIST = BULLET_LIST;
+exports.BUTTON = BUTTON;
 exports.Body = Body;
 exports.Bold = Bold;
 exports.BubbleMenu = BubbleMenu;
@@ -2939,13 +3404,20 @@ exports.ButtonBubbleMenuDefault = ButtonBubbleMenuDefault;
 exports.ButtonBubbleMenuEditLink = ButtonBubbleMenuEditLink;
 exports.ButtonBubbleMenuRoot = ButtonBubbleMenuRoot;
 exports.ButtonBubbleMenuToolbar = ButtonBubbleMenuToolbar;
+exports.CODE = CODE;
 exports.COLUMN_PARENT_TYPES = COLUMN_PARENT_TYPES;
 exports.ClassAttribute = ClassAttribute;
 exports.CodeBlockPrism = CodeBlockPrism;
 exports.ColumnsColumn = ColumnsColumn;
+exports.CommandList = CommandList;
+exports.DIVIDER = DIVIDER;
 exports.Div = Div;
 exports.EmailNode = EmailNode;
+exports.FOUR_COLUMNS = FOUR_COLUMNS;
 exports.FourColumns = FourColumns;
+exports.H1 = H1;
+exports.H2 = H2;
+exports.H3 = H3;
 exports.ImageBubbleMenu = ImageBubbleMenu;
 exports.ImageBubbleMenuDefault = ImageBubbleMenuDefault;
 exports.ImageBubbleMenuEditLink = ImageBubbleMenuEditLink;
@@ -2961,15 +3433,22 @@ exports.LinkBubbleMenuToolbar = LinkBubbleMenuToolbar;
 exports.LinkBubbleMenuUnlink = LinkBubbleMenuUnlink;
 exports.MAX_COLUMNS_DEPTH = MAX_COLUMNS_DEPTH;
 exports.MaxNesting = MaxNesting;
+exports.NUMBERED_LIST = NUMBERED_LIST;
 exports.NodeSelectorContent = NodeSelectorContent;
 exports.NodeSelectorRoot = NodeSelectorRoot;
 exports.NodeSelectorTrigger = NodeSelectorTrigger;
 exports.Placeholder = Placeholder;
 exports.PreservedStyle = PreservedStyle;
 exports.PreviewText = PreviewText;
+exports.QUOTE = QUOTE;
+exports.SECTION = SECTION;
 exports.Section = Section;
+exports.SlashCommand = SlashCommand;
 exports.StyleAttribute = StyleAttribute;
 exports.Sup = Sup;
+exports.TEXT = TEXT;
+exports.THREE_COLUMNS = THREE_COLUMNS;
+exports.TWO_COLUMNS = TWO_COLUMNS;
 exports.Table = Table;
 exports.TableCell = TableCell;
 exports.TableHeader = TableHeader;
@@ -2978,9 +3457,15 @@ exports.ThreeColumns = ThreeColumns;
 exports.TwoColumns = TwoColumns;
 exports.Uppercase = Uppercase;
 exports.coreExtensions = coreExtensions;
+exports.createSlashCommand = createSlashCommand;
+exports.defaultSlashCommands = defaultSlashCommands;
 exports.editorEventBus = editorEventBus;
+exports.filterAndRankItems = filterAndRankItems;
 exports.getColumnsDepth = getColumnsDepth;
+exports.isAtMaxColumnsDepth = isAtMaxColumnsDepth;
+exports.isInsideNode = isInsideNode;
 exports.processStylesForUnlink = processStylesForUnlink;
+exports.scoreItem = scoreItem;
 exports.setTextAlignment = setTextAlignment;
 exports.useButtonBubbleMenuContext = useButtonBubbleMenuContext;
 exports.useImageBubbleMenuContext = useImageBubbleMenuContext;