@react-email/editor 0.0.0-experimental.6 → 0.0.0-experimental.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Extension, Mark, Node, findChildren, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { jsx } from "react/jsx-runtime";
+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 CodeBlock$1 from "@tiptap/extension-code-block";
@@ -8,6 +8,11 @@ import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { fromHtml } from "hast-util-from-html";
 import Prism from "prismjs";
 import TipTapPlaceholder from "@tiptap/extension-placeholder";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CaseUpperIcon, Check, ChevronDown, Code, CodeIcon, Heading1, Heading2, Heading3, ItalicIcon, LinkIcon, List, ListOrdered, StrikethroughIcon, TextIcon, TextQuote, UnderlineIcon, UnlinkIcon } from "lucide-react";
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { BubbleMenu as BubbleMenu$1 } from "@tiptap/react/menus";
 
 //#region src/core/email-node.ts
 var EmailNode = class EmailNode extends Node {
@@ -39,6 +44,48 @@ var EmailNode = class EmailNode extends Node {
 	}
 };
 
+//#endregion
+//#region src/core/event-bus.ts
+const EVENT_PREFIX = "@react-email/editor:";
+var EditorEventBus = class {
+	prefixEventName(eventName) {
+		return `${EVENT_PREFIX}${String(eventName)}`;
+	}
+	dispatch(eventName, payload, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const event = new CustomEvent(prefixedEventName, {
+			detail: payload,
+			bubbles: false,
+			cancelable: false
+		});
+		target.dispatchEvent(event);
+	}
+	on(eventName, handler, options) {
+		const target = options?.target ?? window;
+		const prefixedEventName = this.prefixEventName(eventName);
+		const abortController = new AbortController();
+		const wrappedHandler = (event) => {
+			const customEvent = event;
+			const result = handler(customEvent.detail);
+			if (result instanceof Promise) result.catch((error) => {
+				console.error(`Error in async event handler for ${prefixedEventName}:`, {
+					event: customEvent.detail,
+					error
+				});
+			});
+		};
+		target.addEventListener(prefixedEventName, wrappedHandler, {
+			...options,
+			signal: abortController.signal
+		});
+		return { unsubscribe: () => {
+			abortController.abort();
+		} };
+	}
+};
+const editorEventBus = new EditorEventBus();
+
 //#endregion
 //#region src/extensions/alignment-attribute.tsx
 const AlignmentAttribute = Extension.create({
@@ -772,6 +819,25 @@ const CodeBlockPrism = EmailNode.from(CodeBlock$1.extend({
 			]
 		];
 	},
+	addKeyboardShortcuts() {
+		return {
+			...this.parent?.(),
+			"Mod-a": ({ editor }) => {
+				const { state } = editor;
+				const { selection } = state;
+				const { $from } = selection;
+				for (let depth = $from.depth; depth >= 1; depth--) if ($from.node(depth).type.name === this.name) {
+					const blockStart = $from.start(depth);
+					const blockEnd = $from.end(depth);
+					if (selection.from === blockStart && selection.to === blockEnd) return false;
+					const tr = state.tr.setSelection(TextSelection.create(state.doc, blockStart, blockEnd));
+					editor.view.dispatch(tr);
+					return true;
+				}
+				return false;
+			}
+		};
+	},
 	addProseMirrorPlugins() {
 		return [...this.parent?.() || [], PrismPlugin({
 			name: this.name,
@@ -1553,5 +1619,637 @@ const TableHeader = Node.create({
 });
 
 //#endregion
-export { AlignmentAttribute, Body, Bold, Button, COLUMN_PARENT_TYPES, ClassAttribute, CodeBlockPrism, ColumnsColumn, Div, EmailNode, FourColumns, MAX_COLUMNS_DEPTH, MaxNesting, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, getColumnsDepth, processStylesForUnlink };
+//#region src/extensions/uppercase.ts
+const Uppercase = Mark.create({
+	name: "uppercase",
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span",
+			getAttrs: (node) => {
+				if (node.style.textTransform === "uppercase") return {};
+				return false;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setUppercase: () => ({ commands }) => {
+				return commands.setMark(this.name);
+			},
+			toggleUppercase: () => ({ commands }) => {
+				return commands.toggleMark(this.name);
+			},
+			unsetUppercase: () => ({ commands }) => {
+				return commands.unsetMark(this.name);
+			}
+		};
+	}
+});
+
+//#endregion
+//#region src/utils/set-text-alignment.ts
+function setTextAlignment(editor, alignment) {
+	const { from, to } = editor.state.selection;
+	const tr = editor.state.tr;
+	editor.state.doc.nodesBetween(from, to, (node, pos) => {
+		if (node.isTextblock) {
+			const prop = "align" in node.attrs ? "align" : "alignment";
+			tr.setNodeMarkup(pos, null, {
+				...node.attrs,
+				[prop]: alignment
+			});
+		}
+	});
+	editor.view.dispatch(tr);
+}
+
+//#endregion
+//#region src/ui/bubble-menu/context.tsx
+const BubbleMenuContext = React.createContext(null);
+function useBubbleMenuContext() {
+	const context = React.useContext(BubbleMenuContext);
+	if (!context) throw new Error("BubbleMenu compound components must be used within <BubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/bubble-menu/item.tsx
+function BubbleMenuItem({ name, isActive, onCommand, className, children,...rest }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": name,
+		"aria-pressed": isActive,
+		className,
+		"data-re-bubble-menu-item": "",
+		"data-item": name,
+		...isActive ? { "data-active": "" } : {},
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: onCommand,
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-center.tsx
+function BubbleMenuAlignCenter({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ jsx(BubbleMenuItem, {
+		name: "align-center",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "center" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "center"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignCenterIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-left.tsx
+function BubbleMenuAlignLeft({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ jsx(BubbleMenuItem, {
+		name: "align-left",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "left" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "left"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignLeftIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/align-right.tsx
+function BubbleMenuAlignRight({ className, children }) {
+	const { editor } = useBubbleMenuContext();
+	return /* @__PURE__ */ jsx(BubbleMenuItem, {
+		name: "align-right",
+		isActive: useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "right" }) ?? false
+		}),
+		onCommand: () => setTextAlignment(editor, "right"),
+		className,
+		children: children ?? /* @__PURE__ */ jsx(AlignRightIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/create-mark-bubble-item.tsx
+function createMarkBubbleItem(config) {
+	function MarkBubbleItem({ className, children }) {
+		const { editor } = useBubbleMenuContext();
+		const isActive = useEditorState({
+			editor,
+			selector: ({ editor: editor$1 }) => {
+				if (config.activeParams) return editor$1?.isActive(config.activeName, config.activeParams) ?? false;
+				return editor$1?.isActive(config.activeName) ?? false;
+			}
+		});
+		const handleCommand = () => {
+			const chain = editor.chain().focus();
+			const method = chain[config.command];
+			if (method) method.call(chain).run();
+		};
+		return /* @__PURE__ */ jsx(BubbleMenuItem, {
+			name: config.name,
+			isActive,
+			onCommand: handleCommand,
+			className,
+			children: children ?? config.icon
+		});
+	}
+	MarkBubbleItem.displayName = `BubbleMenu${config.name.charAt(0).toUpperCase() + config.name.slice(1)}`;
+	return MarkBubbleItem;
+}
+
+//#endregion
+//#region src/ui/bubble-menu/bold.tsx
+const BubbleMenuBold = createMarkBubbleItem({
+	name: "bold",
+	activeName: "bold",
+	command: "toggleBold",
+	icon: /* @__PURE__ */ jsx(BoldIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/code.tsx
+const BubbleMenuCode = createMarkBubbleItem({
+	name: "code",
+	activeName: "code",
+	command: "toggleCode",
+	icon: /* @__PURE__ */ jsx(CodeIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/group.tsx
+function BubbleMenuItemGroup({ className, children }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		className,
+		"data-re-bubble-menu-group": "",
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/italic.tsx
+const BubbleMenuItalic = createMarkBubbleItem({
+	name: "italic",
+	activeName: "italic",
+	command: "toggleItalic",
+	icon: /* @__PURE__ */ jsx(ItalicIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/utils.ts
+const SAFE_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:",
+	"tel:"
+]);
+/**
+* Basic URL validation and auto-prefixing.
+* Rejects dangerous schemes (javascript:, data:, vbscript:, etc.).
+* Returns the valid URL string or null.
+*/
+function getUrlFromString(str) {
+	if (str === "#") return str;
+	try {
+		const url = new URL(str);
+		if (SAFE_PROTOCOLS.has(url.protocol)) return str;
+		return null;
+	} catch {}
+	try {
+		if (str.includes(".") && !str.includes(" ")) return new URL(`https://${str}`).toString();
+	} catch {}
+	return null;
+}
+
+//#endregion
+//#region src/ui/bubble-menu/link-selector.tsx
+function BubbleMenuLinkSelector({ className, showToggle = true, validateUrl, onLinkApply, onLinkRemove, children }) {
+	const { editor } = useBubbleMenuContext();
+	const [isOpen, setIsOpen] = React.useState(false);
+	const editorState = useEditorState({
+		editor,
+		selector: ({ editor: editor$1 }) => ({
+			isLinkActive: editor$1?.isActive("link") ?? false,
+			hasLink: Boolean(editor$1?.getAttributes("link").href),
+			currentHref: editor$1?.getAttributes("link").href || ""
+		})
+	});
+	React.useEffect(() => {
+		const subscription = editorEventBus.on("bubble-menu:add-link", () => {
+			setIsOpen(true);
+		});
+		return () => {
+			setIsOpen(false);
+			subscription.unsubscribe();
+		};
+	}, []);
+	if (!editorState) return null;
+	const handleOpenLink = () => {
+		setIsOpen(!isOpen);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-re-link-selector": "",
+		...isOpen ? { "data-open": "" } : {},
+		...editorState.hasLink ? { "data-has-link": "" } : {},
+		className,
+		children: [showToggle && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": isOpen,
+			"aria-haspopup": "true",
+			"aria-label": "Add link",
+			"aria-pressed": editorState.isLinkActive && editorState.hasLink,
+			"data-re-link-selector-trigger": "",
+			onClick: handleOpenLink,
+			children: /* @__PURE__ */ jsx(LinkIcon, {})
+		}), isOpen && /* @__PURE__ */ jsx(LinkForm, {
+			editor,
+			currentHref: editorState.currentHref,
+			validateUrl,
+			onLinkApply,
+			onLinkRemove,
+			setIsOpen,
+			children
+		})]
+	});
+}
+function LinkForm({ editor, currentHref, validateUrl, onLinkApply, onLinkRemove, setIsOpen, children }) {
+	const inputRef = React.useRef(null);
+	const formRef = React.useRef(null);
+	const displayHref = currentHref === "#" ? "" : currentHref;
+	const [inputValue, setInputValue] = React.useState(displayHref);
+	React.useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, []);
+	React.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				if (editor.getAttributes("link").href === "#") editor.chain().unsetLink().run();
+				setIsOpen(false);
+			}
+		};
+		const handleClickOutside = (event) => {
+			if (formRef.current && !formRef.current.contains(event.target)) {
+				const form = formRef.current;
+				const submitEvent = new Event("submit", {
+					bubbles: true,
+					cancelable: true
+				});
+				form.dispatchEvent(submitEvent);
+				setIsOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [editor, setIsOpen]);
+	function handleSubmit(e) {
+		e.preventDefault();
+		const value = inputValue.trim();
+		if (value === "") {
+			setLinkHref(editor, "");
+			setIsOpen(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		const finalValue = (validateUrl ?? getUrlFromString)(value);
+		if (!finalValue) {
+			setLinkHref(editor, "");
+			setIsOpen(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		setLinkHref(editor, finalValue);
+		setIsOpen(false);
+		focusEditor(editor);
+		onLinkApply?.(finalValue);
+	}
+	function handleUnlink(e) {
+		e.stopPropagation();
+		setLinkHref(editor, "");
+		setIsOpen(false);
+		focusEditor(editor);
+		onLinkRemove?.();
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		ref: formRef,
+		"data-re-link-selector-form": "",
+		onMouseDown: (e) => e.stopPropagation(),
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => e.stopPropagation(),
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				"data-re-link-selector-input": "",
+				value: inputValue,
+				onFocus: (e) => e.stopPropagation(),
+				onChange: (e) => setInputValue(e.target.value),
+				placeholder: "Paste a link",
+				type: "text"
+			}),
+			children,
+			displayHref ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Remove link",
+				"data-re-link-selector-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-selector-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Check, {})
+			})
+		]
+	});
+}
+function setLinkHref(editor, href) {
+	if (href.length === 0) {
+		editor.chain().unsetLink().run();
+		return;
+	}
+	const { from, to } = editor.state.selection;
+	if (from === to) {
+		editor.chain().extendMarkRange("link").setLink({ href }).setTextSelection({
+			from,
+			to
+		}).run();
+		return;
+	}
+	editor.chain().setLink({ href }).run();
+}
+function focusEditor(editor) {
+	setTimeout(() => {
+		editor.commands.focus();
+	}, 0);
+}
+
+//#endregion
+//#region src/ui/bubble-menu/node-selector.tsx
+const NodeSelectorContext = React.createContext(null);
+function useNodeSelectorContext() {
+	const context = React.useContext(NodeSelectorContext);
+	if (!context) throw new Error("NodeSelector compound components must be used within <NodeSelector.Root>");
+	return context;
+}
+function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, className, children }) {
+	const { editor } = useBubbleMenuContext();
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const setIsOpen = React.useCallback((value) => {
+		if (!isControlled) setUncontrolledOpen(value);
+		onOpenChange?.(value);
+	}, [isControlled, onOpenChange]);
+	const editorState = useEditorState({
+		editor,
+		selector: ({ editor: editor$1 }) => ({
+			isParagraphActive: (editor$1?.isActive("paragraph") ?? false) && !editor$1?.isActive("bulletList") && !editor$1?.isActive("orderedList"),
+			isHeading1Active: editor$1?.isActive("heading", { level: 1 }) ?? false,
+			isHeading2Active: editor$1?.isActive("heading", { level: 2 }) ?? false,
+			isHeading3Active: editor$1?.isActive("heading", { level: 3 }) ?? false,
+			isBulletListActive: editor$1?.isActive("bulletList") ?? false,
+			isOrderedListActive: editor$1?.isActive("orderedList") ?? false,
+			isBlockquoteActive: editor$1?.isActive("blockquote") ?? false,
+			isCodeBlockActive: editor$1?.isActive("codeBlock") ?? false
+		})
+	});
+	const allItems = React.useMemo(() => [
+		{
+			name: "Text",
+			icon: TextIcon,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").run(),
+			isActive: editorState?.isParagraphActive ?? false
+		},
+		{
+			name: "Title",
+			icon: Heading1,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+			isActive: editorState?.isHeading1Active ?? false
+		},
+		{
+			name: "Subtitle",
+			icon: Heading2,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+			isActive: editorState?.isHeading2Active ?? false
+		},
+		{
+			name: "Heading",
+			icon: Heading3,
+			command: () => editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+			isActive: editorState?.isHeading3Active ?? false
+		},
+		{
+			name: "Bullet List",
+			icon: List,
+			command: () => editor.chain().focus().clearNodes().toggleBulletList().run(),
+			isActive: editorState?.isBulletListActive ?? false
+		},
+		{
+			name: "Numbered List",
+			icon: ListOrdered,
+			command: () => editor.chain().focus().clearNodes().toggleOrderedList().run(),
+			isActive: editorState?.isOrderedListActive ?? false
+		},
+		{
+			name: "Quote",
+			icon: TextQuote,
+			command: () => editor.chain().focus().clearNodes().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+			isActive: editorState?.isBlockquoteActive ?? false
+		},
+		{
+			name: "Code",
+			icon: Code,
+			command: () => editor.chain().focus().clearNodes().toggleCodeBlock().run(),
+			isActive: editorState?.isCodeBlockActive ?? false
+		}
+	], [editor, editorState]);
+	const items = React.useMemo(() => allItems.filter((item) => !omit.includes(item.name)), [allItems, omit]);
+	const activeItem = React.useMemo(() => items.find((item) => item.isActive) ?? { name: "Multiple" }, [items]);
+	const contextValue = React.useMemo(() => ({
+		items,
+		activeItem,
+		isOpen,
+		setIsOpen
+	}), [
+		items,
+		activeItem,
+		isOpen,
+		setIsOpen
+	]);
+	if (!editorState || items.length === 0) return null;
+	return /* @__PURE__ */ jsx(NodeSelectorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-re-node-selector": "",
+				...isOpen ? { "data-open": "" } : {},
+				className,
+				children
+			})
+		})
+	});
+}
+function NodeSelectorTrigger({ className, children }) {
+	const { activeItem, isOpen, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-re-node-selector-trigger": "",
+		className,
+		onClick: () => setIsOpen(!isOpen),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: activeItem.name }), /* @__PURE__ */ jsx(ChevronDown, {})] })
+	});
+}
+function NodeSelectorContent({ className, align = "start", children }) {
+	const { items, setIsOpen } = useNodeSelectorContext();
+	return /* @__PURE__ */ jsx(Popover.Content, {
+		align,
+		"data-re-node-selector-content": "",
+		className,
+		children: children ? children(items, () => setIsOpen(false)) : items.map((item) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-re-node-selector-item": "",
+				...item.isActive ? { "data-active": "" } : {},
+				onClick: () => {
+					item.command();
+					setIsOpen(false);
+				},
+				children: [
+					/* @__PURE__ */ jsx(Icon, {}),
+					/* @__PURE__ */ jsx("span", { children: item.name }),
+					item.isActive && /* @__PURE__ */ jsx(Check, {})
+				]
+			}, item.name);
+		})
+	});
+}
+function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(NodeSelectorRoot, {
+		omit,
+		open,
+		onOpenChange,
+		className,
+		children: [/* @__PURE__ */ jsx(NodeSelectorTrigger, { children: triggerContent }), /* @__PURE__ */ jsx(NodeSelectorContent, {})]
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/root.tsx
+function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
+	const { editor } = useCurrentEditor();
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-bubble-menu": "",
+		shouldShow: ({ editor: editor$1, view }) => {
+			for (const node of excludeNodes) if (editor$1.isActive(node)) return false;
+			if (view.dom.classList.contains("dragging")) return false;
+			return editor$1.view.state.selection.content().size > 0;
+		},
+		options: {
+			placement,
+			offset,
+			onHide
+		},
+		className,
+		children: /* @__PURE__ */ jsx(BubbleMenuContext.Provider, {
+			value: { editor },
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/separator.tsx
+function BubbleMenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx("hr", {
+		className,
+		"data-re-bubble-menu-separator": ""
+	});
+}
+
+//#endregion
+//#region src/ui/bubble-menu/strike.tsx
+const BubbleMenuStrike = createMarkBubbleItem({
+	name: "strike",
+	activeName: "strike",
+	command: "toggleStrike",
+	icon: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/underline.tsx
+const BubbleMenuUnderline = createMarkBubbleItem({
+	name: "underline",
+	activeName: "underline",
+	command: "toggleUnderline",
+	icon: /* @__PURE__ */ jsx(UnderlineIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/uppercase.tsx
+const BubbleMenuUppercase = createMarkBubbleItem({
+	name: "uppercase",
+	activeName: "uppercase",
+	command: "toggleUppercase",
+	icon: /* @__PURE__ */ jsx(CaseUpperIcon, {})
+});
+
+//#endregion
+//#region src/ui/bubble-menu/index.ts
+const BubbleMenu = {
+	Root: BubbleMenuRoot,
+	ItemGroup: BubbleMenuItemGroup,
+	Separator: BubbleMenuSeparator,
+	Item: BubbleMenuItem,
+	Bold: BubbleMenuBold,
+	Italic: BubbleMenuItalic,
+	Underline: BubbleMenuUnderline,
+	Strike: BubbleMenuStrike,
+	Code: BubbleMenuCode,
+	Uppercase: BubbleMenuUppercase,
+	AlignLeft: BubbleMenuAlignLeft,
+	AlignCenter: BubbleMenuAlignCenter,
+	AlignRight: BubbleMenuAlignRight,
+	NodeSelector: Object.assign(BubbleMenuNodeSelector, {
+		Root: NodeSelectorRoot,
+		Trigger: NodeSelectorTrigger,
+		Content: NodeSelectorContent
+	}),
+	LinkSelector: BubbleMenuLinkSelector
+};
+
+//#endregion
+export { AlignmentAttribute, Body, Bold, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, Button, COLUMN_PARENT_TYPES, ClassAttribute, CodeBlockPrism, ColumnsColumn, Div, EmailNode, FourColumns, MAX_COLUMNS_DEPTH, MaxNesting, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, Placeholder, PreservedStyle, PreviewText, Section, StyleAttribute, Sup, Table, TableCell, TableHeader, TableRow, ThreeColumns, TwoColumns, Uppercase, editorEventBus, getColumnsDepth, processStylesForUnlink, setTextAlignment };
 //# sourceMappingURL=index.mjs.map