@react-email/editor 0.0.0-experimental.20 → 0.0.0-experimental.22

package/dist/index.cjs

@@ -37,6 +37,8 @@ let _tiptap_starter_kit = require("@tiptap/starter-kit");
 _tiptap_starter_kit = __toESM(_tiptap_starter_kit);
 let _tiptap_extension_blockquote = require("@tiptap/extension-blockquote");
 _tiptap_extension_blockquote = __toESM(_tiptap_extension_blockquote);
+let _tiptap_extension_bold = require("@tiptap/extension-bold");
+_tiptap_extension_bold = __toESM(_tiptap_extension_bold);
 let _tiptap_extension_bullet_list = require("@tiptap/extension-bullet-list");
 _tiptap_extension_bullet_list = __toESM(_tiptap_extension_bullet_list);
 let _tiptap_extension_code = require("@tiptap/extension-code");
@@ -67,15 +69,19 @@ let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
 _tiptap_extension_placeholder = __toESM(_tiptap_extension_placeholder);
 let _tiptap_extension_strike = require("@tiptap/extension-strike");
 _tiptap_extension_strike = __toESM(_tiptap_extension_strike);
+let _tiptap_extension_superscript = require("@tiptap/extension-superscript");
+_tiptap_extension_superscript = __toESM(_tiptap_extension_superscript);
+let _tiptap_extension_underline = require("@tiptap/extension-underline");
+_tiptap_extension_underline = __toESM(_tiptap_extension_underline);
 let _tiptap_html = require("@tiptap/html");
 let lucide_react = require("lucide-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 _floating_ui_react_dom = require("@floating-ui/react-dom");
 let _tiptap_suggestion = require("@tiptap/suggestion");
 _tiptap_suggestion = __toESM(_tiptap_suggestion);
-let tippy_js = require("tippy.js");
-tippy_js = __toESM(tippy_js);
+let react_dom = require("react-dom");
 
 //#region src/core/event-bus.ts
 const EVENT_PREFIX = "@react-email/editor:";
@@ -690,95 +696,23 @@ const Body = EmailNode.create({
 
 //#endregion
 //#region src/extensions/bold.tsx
-/**
-* 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 = EmailMark.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",
-			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	renderToReactEmail({ children, style }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-			style,
-			children
-		});
-	},
-	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 [(0, _tiptap_core.markInputRule)({
-			find: starInputRegex,
-			type: this.type
-		}), (0, _tiptap_core.markInputRule)({
-			find: underscoreInputRegex,
-			type: this.type
-		})];
-	},
-	addPasteRules() {
-		return [(0, _tiptap_core.markPasteRule)({
-			find: starPasteRegex,
-			type: this.type
-		}), (0, _tiptap_core.markPasteRule)({
-			find: underscorePasteRegex,
-			type: this.type
-		})];
-	}
-});
+const BoldWithoutFontWeightInference = _tiptap_extension_bold.default.extend({ parseHTML() {
+	return [
+		{ tag: "strong" },
+		{
+			tag: "b",
+			getAttrs: (node) => node.style.fontWeight !== "normal" && null
+		},
+		{
+			style: "font-weight=400",
+			clearMark: (mark) => mark.type.name === this.name
+		}
+	];
+} });
+const Bold = EmailMark.from(BoldWithoutFontWeightInference, ({ children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+	style,
+	children
+}));
 
 //#endregion
 //#region src/extensions/bullet-list.tsx
@@ -1778,33 +1712,11 @@ const StyleAttribute = _tiptap_core.Extension.create({
 
 //#endregion
 //#region src/extensions/sup.tsx
-/**
-* This extension allows you to mark text as superscript.
-* @see https://tiptap.dev/api/marks/superscript
-*/
-const Sup = EmailMark.create({
+const SupBase = _tiptap_extension_superscript.default.extend({
 	name: "sup",
-	addOptions() {
-		return { HTMLAttributes: {} };
-	},
-	parseHTML() {
-		return [{ tag: "sup" }];
-	},
-	renderHTML({ HTMLAttributes }) {
-		return [
-			"sup",
-			(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
-			0
-		];
-	},
-	renderToReactEmail({ children, style }) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", {
-			style,
-			children
-		});
-	},
 	addCommands() {
 		return {
+			...this.parent?.(),
 			setSup: () => ({ commands }) => {
 				return commands.setMark(this.name);
 			},
@@ -1817,6 +1729,10 @@ const Sup = EmailMark.create({
 		};
 	}
 });
+const Sup = EmailMark.from(SupBase, ({ children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", {
+	style,
+	children
+}));
 
 //#endregion
 //#region src/extensions/table.tsx
@@ -2004,6 +1920,13 @@ const TableHeader = _tiptap_core.Node.create({
 	}
 });
 
+//#endregion
+//#region src/extensions/underline.tsx
+const Underline = EmailMark.from(_tiptap_extension_underline.default, ({ children, style }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("u", {
+	style,
+	children
+}));
+
 //#endregion
 //#region src/extensions/uppercase.tsx
 const Uppercase = EmailMark.create({
@@ -2241,6 +2164,7 @@ const starterKitExtensions = {
 	Divider,
 	Link,
 	Sup,
+	Underline,
 	Uppercase,
 	PreservedStyle,
 	Table,
@@ -2285,6 +2209,7 @@ const StarterKit = _tiptap_core.Extension.create({
 			Divider: {},
 			Link: {},
 			Sup: {},
+			Underline: {},
 			Uppercase: {},
 			PreservedStyle: {},
 			Table: {},
@@ -3122,7 +3047,7 @@ function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, on
 
 //#endregion
 //#region src/ui/bubble-menu/root.tsx
-function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
+function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset: offset$1 = 8, onHide, className, children }) {
 	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	if (!editor) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
@@ -3135,7 +3060,7 @@ function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, o
 		},
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide
 		},
 		className,
@@ -3175,7 +3100,7 @@ const BubbleMenuUppercase = createMarkBubbleItem({
 
 //#endregion
 //#region src/ui/bubble-menu/default.tsx
-function BubbleMenuDefault({ excludeItems = [], excludeNodes, placement, offset, onHide, className }) {
+function BubbleMenuDefault({ excludeItems = [], excludeNodes, placement, offset: offset$1, onHide, className }) {
 	const [isNodeSelectorOpen, setIsNodeSelectorOpen] = react.useState(false);
 	const [isLinkSelectorOpen, setIsLinkSelectorOpen] = react.useState(false);
 	const has = (item) => !excludeItems.includes(item);
@@ -3197,7 +3122,7 @@ function BubbleMenuDefault({ excludeItems = [], excludeNodes, placement, offset,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BubbleMenuRoot, {
 		excludeNodes,
 		placement,
-		offset,
+		offset: offset$1,
 		onHide: handleHide,
 		className,
 		children: [
@@ -3294,7 +3219,7 @@ function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown, .
 
 //#endregion
 //#region src/ui/button-bubble-menu/root.tsx
-function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+function ButtonBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
 	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	const [isEditing, setIsEditing] = react.useState(false);
 	if (!editor) return null;
@@ -3304,7 +3229,7 @@ function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className
 		shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide: () => {
 				setIsEditing(false);
 				onHide?.();
@@ -3336,10 +3261,10 @@ function ButtonBubbleMenuToolbar({ children, ...rest }) {
 
 //#endregion
 //#region src/ui/button-bubble-menu/default.tsx
-function ButtonBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
+function ButtonBubbleMenuDefault({ excludeItems = [], placement, offset: offset$1, onHide, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuToolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuEditLink, {}) })
@@ -3389,7 +3314,7 @@ function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown, ..
 
 //#endregion
 //#region src/ui/image-bubble-menu/root.tsx
-function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+function ImageBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
 	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	const [isEditing, setIsEditing] = react.useState(false);
 	if (!editor) return null;
@@ -3399,7 +3324,7 @@ function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className,
 		shouldShow: ({ editor: e, view }) => e.isActive("image") && !view.dom.classList.contains("dragging"),
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide: () => {
 				setIsEditing(false);
 				onHide?.();
@@ -3431,10 +3356,10 @@ function ImageBubbleMenuToolbar({ children, ...rest }) {
 
 //#endregion
 //#region src/ui/image-bubble-menu/default.tsx
-function ImageBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
+function ImageBubbleMenuDefault({ excludeItems = [], placement, offset: offset$1, onHide, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuToolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuEditLink, {}) })
@@ -3606,7 +3531,7 @@ function LinkBubbleMenuOpenLink({ className, children, ...rest }) {
 
 //#endregion
 //#region src/ui/link-bubble-menu/root.tsx
-function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
+function LinkBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
 	const { editor } = (0, _tiptap_react.useCurrentEditor)();
 	const [isEditing, setIsEditing] = react.useState(false);
 	const linkHref = (0, _tiptap_react.useEditorState)({
@@ -3620,7 +3545,7 @@ function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className,
 		shouldShow: ({ editor: e }) => e.isActive("link") && e.view.state.selection.content().size === 0,
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide: () => {
 				setIsEditing(false);
 				onHide?.();
@@ -3676,11 +3601,11 @@ function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown, ...re
 
 //#endregion
 //#region src/ui/link-bubble-menu/default.tsx
-function LinkBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className, validateUrl, onLinkApply, onLinkRemove }) {
+function LinkBubbleMenuDefault({ excludeItems = [], placement, offset: offset$1, onHide, className, validateUrl, onLinkApply, onLinkRemove }) {
 	const has = (item) => !excludeItems.includes(item);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: [(has("edit-link") || has("open-link") || has("unlink")) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkBubbleMenuToolbar, { children: [
@@ -3766,42 +3691,14 @@ function CommandItem({ item, selected, onSelect }) {
 		children: [item.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.title })]
 	});
 }
-function CommandList({ items, command, query, ref }) {
-	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+function CommandList({ items, query, selectedIndex, onSelect }) {
 	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", {
@@ -3814,7 +3711,7 @@ function CommandList({ items, command, query, ref }) {
 		ref: containerRef,
 		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
 			item,
-			onSelect: () => selectItem(index),
+			onSelect: () => onSelect(index),
 			selected: index === selectedIndex
 		}, item.title))
 	});
@@ -3830,7 +3727,7 @@ function CommandList({ items, command, query, ref }) {
 			const currentIndex = flatIndex++;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
 				item,
-				onSelect: () => selectItem(currentIndex),
+				onSelect: () => onSelect(currentIndex),
 				selected: currentIndex === selectedIndex
 			}, item.title);
 		})] }, group.category))
@@ -4048,76 +3945,6 @@ const defaultSlashCommands = [
 	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) {
@@ -4148,22 +3975,144 @@ function filterAndRankItems(items, query) {
 }
 
 //#endregion
-//#region src/ui/slash-command/create-slash-command.ts
+//#region src/ui/slash-command/root.tsx
+const pluginKey = new _tiptap_pm_state.PluginKey("slash-command");
+const INITIAL_STATE = {
+	active: false,
+	query: "",
+	items: [],
+	clientRect: null
+};
 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)
-	} });
+function SlashCommandRoot({ items: itemsProp, filterItems: filterItemsProp, char = "/", allow: allowProp, children }) {
+	const { editor } = (0, _tiptap_react.useCurrentEditor)();
+	const [state, setState] = (0, react.useState)(INITIAL_STATE);
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const itemsRef = (0, react.useRef)(itemsProp ?? defaultSlashCommands);
+	const filterRef = (0, react.useRef)(filterItemsProp ?? defaultFilterItems);
+	const allowRef = (0, react.useRef)(allowProp ?? (({ editor: e }) => !e.isActive("codeBlock")));
+	itemsRef.current = itemsProp ?? defaultSlashCommands;
+	filterRef.current = filterItemsProp ?? defaultFilterItems;
+	allowRef.current = allowProp ?? (({ editor: e }) => !e.isActive("codeBlock"));
+	const commandRef = (0, react.useRef)(null);
+	const suggestionItemsRef = (0, react.useRef)([]);
+	const selectedIndexRef = (0, react.useRef)(0);
+	suggestionItemsRef.current = state.items;
+	selectedIndexRef.current = selectedIndex;
+	const { refs, floatingStyles } = (0, _floating_ui_react_dom.useFloating)({
+		open: state.active,
+		placement: "bottom-start",
+		middleware: [
+			(0, _floating_ui_react_dom.offset)(8),
+			(0, _floating_ui_react_dom.flip)(),
+			(0, _floating_ui_react_dom.shift)({ padding: 8 })
+		],
+		whileElementsMounted: _floating_ui_react_dom.autoUpdate
+	});
+	(0, react.useEffect)(() => {
+		if (!state.clientRect) return;
+		refs.setReference({ getBoundingClientRect: state.clientRect });
+	}, [state.clientRect, refs]);
+	(0, react.useEffect)(() => {
+		setSelectedIndex(0);
+	}, [state.items]);
+	const onSelect = (0, react.useCallback)((index) => {
+		const item = suggestionItemsRef.current[index];
+		if (item && commandRef.current) commandRef.current(item);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!editor) return;
+		const plugin = (0, _tiptap_suggestion.default)({
+			pluginKey,
+			editor,
+			char,
+			allow: ({ editor: e }) => allowRef.current({ editor: e }),
+			command: ({ editor: e, range, props }) => {
+				props.command({
+					editor: e,
+					range
+				});
+			},
+			items: ({ query, editor: e }) => filterRef.current(itemsRef.current, query, e),
+			render: () => ({
+				onStart: (props) => {
+					commandRef.current = props.command;
+					setState({
+						active: true,
+						query: props.query,
+						items: props.items,
+						clientRect: props.clientRect ?? null
+					});
+				},
+				onUpdate: (props) => {
+					commandRef.current = props.command;
+					setState({
+						active: true,
+						query: props.query,
+						items: props.items,
+						clientRect: props.clientRect ?? null
+					});
+				},
+				onKeyDown: ({ event }) => {
+					if (event.key === "Escape") {
+						setState(INITIAL_STATE);
+						return true;
+					}
+					const items = suggestionItemsRef.current;
+					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") {
+						const item = items[selectedIndexRef.current];
+						if (item && commandRef.current) commandRef.current(item);
+						return true;
+					}
+					return false;
+				},
+				onExit: () => {
+					setState(INITIAL_STATE);
+					requestAnimationFrame(() => {
+						commandRef.current = null;
+					});
+				}
+			})
+		});
+		editor.registerPlugin(plugin, (newPlugin, plugins) => [newPlugin, ...plugins]);
+		return () => {
+			editor.unregisterPlugin(pluginKey);
+		};
+	}, [editor, char]);
+	if (!editor || !state.active) return null;
+	const renderProps = {
+		items: state.items,
+		query: state.query,
+		selectedIndex,
+		onSelect
+	};
+	let content;
+	if (children) content = children(renderProps);
+	else content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandList, { ...renderProps });
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		children: content
+	}), document.body);
 }
 
 //#endregion
 //#region src/ui/slash-command/index.ts
-const SlashCommand = createSlashCommand();
+const SlashCommand = {
+	Root: SlashCommandRoot,
+	CommandList
+};
 
 //#endregion
 exports.AlignmentAttribute = AlignmentAttribute;
@@ -4259,9 +4208,9 @@ exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.ThreeColumns = ThreeColumns;
 exports.TwoColumns = TwoColumns;
+exports.Underline = Underline;
 exports.Uppercase = Uppercase;
 exports.composeReactEmail = composeReactEmail;
-exports.createSlashCommand = createSlashCommand;
 exports.defaultSlashCommands = defaultSlashCommands;
 exports.editorEventBus = editorEventBus;
 exports.filterAndRankItems = filterAndRankItems;