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

package/dist/index.mjs

@@ -3,9 +3,9 @@ import { Body as Body$1, Button as Button$1, CodeBlock, Column, Head, Heading as
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Extension, InputRule, Mark, Node as Node$1, findChildren, mergeAttributes } from "@tiptap/core";
 import { UndoRedo } from "@tiptap/extensions";
-import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, ReactRenderer, useCurrentEditor, useEditor as useEditor$1, useEditorState } from "@tiptap/react";
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useCurrentEditor, useEditor as useEditor$1, useEditorState } from "@tiptap/react";
 import * as React from "react";
-import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import TipTapStarterKit from "@tiptap/starter-kit";
 import BlockquoteBase from "@tiptap/extension-blockquote";
 import BoldBase from "@tiptap/extension-bold";
@@ -32,8 +32,9 @@ 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 { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
 import Suggestion from "@tiptap/suggestion";
-import tippy from "tippy.js";
+import { createPortal } from "react-dom";
 
 //#region src/core/event-bus.ts
 const EVENT_PREFIX = "@react-email/editor:";
@@ -2999,7 +3000,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 } = useCurrentEditor();
 	if (!editor) return null;
 	return /* @__PURE__ */ jsx(BubbleMenu$1, {
@@ -3012,7 +3013,7 @@ function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, o
 		},
 		options: {
 			placement,
-			offset,
+			offset: offset$1,
 			onHide
 		},
 		className,
@@ -3052,7 +3053,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);
@@ -3074,7 +3075,7 @@ function BubbleMenuDefault({ excludeItems = [], excludeNodes, placement, offset,
 	return /* @__PURE__ */ jsxs(BubbleMenuRoot, {
 		excludeNodes,
 		placement,
-		offset,
+		offset: offset$1,
 		onHide: handleHide,
 		className,
 		children: [
@@ -3171,7 +3172,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 } = useCurrentEditor();
 	const [isEditing, setIsEditing] = React.useState(false);
 	if (!editor) return null;
@@ -3181,7 +3182,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?.();
@@ -3213,10 +3214,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__ */ jsx(ButtonBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ButtonBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ButtonBubbleMenuEditLink, {}) })
@@ -3266,7 +3267,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 } = useCurrentEditor();
 	const [isEditing, setIsEditing] = React.useState(false);
 	if (!editor) return null;
@@ -3276,7 +3277,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?.();
@@ -3308,10 +3309,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__ */ jsx(ImageBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ImageBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ImageBubbleMenuEditLink, {}) })
@@ -3483,7 +3484,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 } = useCurrentEditor();
 	const [isEditing, setIsEditing] = React.useState(false);
 	const linkHref = useEditorState({
@@ -3497,7 +3498,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?.();
@@ -3553,11 +3554,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__ */ jsxs(LinkBubbleMenuRoot, {
 		placement,
-		offset,
+		offset: offset$1,
 		onHide,
 		className,
 		children: [(has("edit-link") || has("open-link") || has("unlink")) && /* @__PURE__ */ jsxs(LinkBubbleMenuToolbar, { children: [
@@ -3643,42 +3644,14 @@ function CommandItem({ item, selected, onSelect }) {
 		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
 	});
 }
-function CommandList({ items, command, query, ref }) {
-	const [selectedIndex, setSelectedIndex] = useState(0);
+function CommandList({ items, query, selectedIndex, onSelect }) {
 	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", {
@@ -3691,7 +3664,7 @@ function CommandList({ items, command, query, ref }) {
 		ref: containerRef,
 		children: items.map((item, index) => /* @__PURE__ */ jsx(CommandItem, {
 			item,
-			onSelect: () => selectItem(index),
+			onSelect: () => onSelect(index),
 			selected: index === selectedIndex
 		}, item.title))
 	});
@@ -3707,7 +3680,7 @@ function CommandList({ items, command, query, ref }) {
 			const currentIndex = flatIndex++;
 			return /* @__PURE__ */ jsx(CommandItem, {
 				item,
-				onSelect: () => selectItem(currentIndex),
+				onSelect: () => onSelect(currentIndex),
 				selected: currentIndex === selectedIndex
 			}, item.title);
 		})] }, group.category))
@@ -3925,76 +3898,6 @@ const defaultSlashCommands = [
 	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) {
@@ -4025,23 +3928,145 @@ function filterAndRankItems(items, query) {
 }
 
 //#endregion
-//#region src/ui/slash-command/create-slash-command.ts
+//#region src/ui/slash-command/root.tsx
+const pluginKey = new 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 } = useCurrentEditor();
+	const [state, setState] = useState(INITIAL_STATE);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const itemsRef = useRef(itemsProp ?? defaultSlashCommands);
+	const filterRef = useRef(filterItemsProp ?? defaultFilterItems);
+	const allowRef = 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 = useRef(null);
+	const suggestionItemsRef = useRef([]);
+	const selectedIndexRef = useRef(0);
+	suggestionItemsRef.current = state.items;
+	selectedIndexRef.current = selectedIndex;
+	const { refs, floatingStyles } = useFloating({
+		open: state.active,
+		placement: "bottom-start",
+		middleware: [
+			offset(8),
+			flip(),
+			shift({ padding: 8 })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	useEffect(() => {
+		if (!state.clientRect) return;
+		refs.setReference({ getBoundingClientRect: state.clientRect });
+	}, [state.clientRect, refs]);
+	useEffect(() => {
+		setSelectedIndex(0);
+	}, [state.items]);
+	const onSelect = useCallback((index) => {
+		const item = suggestionItemsRef.current[index];
+		if (item && commandRef.current) commandRef.current(item);
+	}, []);
+	useEffect(() => {
+		if (!editor) return;
+		const plugin = Suggestion({
+			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__ */ jsx(CommandList, { ...renderProps });
+	return createPortal(/* @__PURE__ */ 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
-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, Divider, EmailNode, FOUR_COLUMNS, FourColumns, GlobalContent, H1, H2, H3, HardBreak, Heading, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, Italic, Link, 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, StarterKit, Strike, StyleAttribute, Sup, TEXT, THREE_COLUMNS, TWO_COLUMNS, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Underline, Uppercase, composeReactEmail, createSlashCommand, defaultSlashCommands, editorEventBus, filterAndRankItems, getColumnsDepth, getGlobalContent, isAtMaxColumnsDepth, isDocumentVisuallyEmpty, isInsideNode, processStylesForUnlink, scoreItem, setTextAlignment, useButtonBubbleMenuContext, useEditor, useImageBubbleMenuContext, useLinkBubbleMenuContext };
+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, Divider, EmailNode, FOUR_COLUMNS, FourColumns, GlobalContent, H1, H2, H3, HardBreak, Heading, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, Italic, Link, 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, StarterKit, Strike, StyleAttribute, Sup, TEXT, THREE_COLUMNS, TWO_COLUMNS, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Underline, Uppercase, composeReactEmail, defaultSlashCommands, editorEventBus, filterAndRankItems, getColumnsDepth, getGlobalContent, isAtMaxColumnsDepth, isDocumentVisuallyEmpty, isInsideNode, processStylesForUnlink, scoreItem, setTextAlignment, useButtonBubbleMenuContext, useEditor, useImageBubbleMenuContext, useLinkBubbleMenuContext };
 //# sourceMappingURL=index.mjs.map