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

package/dist/index.cjs

@@ -78,10 +78,10 @@ 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:";
@@ -3047,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, {
@@ -3060,7 +3060,7 @@ function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, o
 		},
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide
 		},
 		className,
@@ -3100,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);
@@ -3122,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: [
@@ -3219,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;
@@ -3229,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?.();
@@ -3261,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, {}) })
@@ -3314,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;
@@ -3324,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?.();
@@ -3356,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, {}) })
@@ -3531,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)({
@@ -3545,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?.();
@@ -3601,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: [
@@ -3691,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", {
@@ -3739,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))
 	});
@@ -3755,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))
@@ -3973,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) {
@@ -4073,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;
@@ -4187,7 +4211,6 @@ exports.TwoColumns = TwoColumns;
 exports.Underline = Underline;
 exports.Uppercase = Uppercase;
 exports.composeReactEmail = composeReactEmail;
-exports.createSlashCommand = createSlashCommand;
 exports.defaultSlashCommands = defaultSlashCommands;
 exports.editorEventBus = editorEventBus;
 exports.filterAndRankItems = filterAndRankItems;