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

package/dist/ui/index.mjs

@@ -0,0 +1,1584 @@
+import { _ as editorEventBus, i as MAX_COLUMNS_DEPTH, s as getColumnsDepth } from "../columns-CUxUEHje.mjs";
+import { t as setTextAlignment } from "../set-text-alignment-DZvgnbvz.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCurrentEditor, useEditorState } from "@tiptap/react";
+import * as React from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { PluginKey } from "@tiptap/pm/state";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, CaseUpperIcon, Check, ChevronDown, Code, 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 { createPortal } from "react-dom";
+
+//#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;
+}
+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/link-selector.tsx
+function BubbleMenuLinkSelector({ className, showToggle = true, validateUrl, onLinkApply, onLinkRemove, children, open: controlledOpen, onOpenChange }) {
+	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 }) => ({
+			isLinkActive: editor$1?.isActive("link") ?? false,
+			hasLink: Boolean(editor$1?.getAttributes("link").href),
+			currentHref: editor$1?.getAttributes("link").href || ""
+		})
+	});
+	const setIsOpenRef = React.useRef(setIsOpen);
+	setIsOpenRef.current = setIsOpen;
+	React.useEffect(() => {
+		const subscription = editorEventBus.on("bubble-menu:add-link", () => {
+			setIsOpenRef.current(true);
+		});
+		return () => {
+			setIsOpenRef.current(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, {})
+			})
+		]
+	});
+}
+
+//#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: offset$1 = 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: offset$1,
+			onHide
+		},
+		className,
+		children: /* @__PURE__ */ jsx(BubbleMenuContext.Provider, {
+			value: { editor },
+			children
+		})
+	});
+}
+
+//#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/default.tsx
+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);
+	const handleNodeSelectorOpenChange = React.useCallback((open) => {
+		setIsNodeSelectorOpen(open);
+		if (open) setIsLinkSelectorOpen(false);
+	}, []);
+	const handleLinkSelectorOpenChange = React.useCallback((open) => {
+		setIsLinkSelectorOpen(open);
+		if (open) setIsNodeSelectorOpen(false);
+	}, []);
+	const handleHide = React.useCallback(() => {
+		setIsNodeSelectorOpen(false);
+		setIsLinkSelectorOpen(false);
+		onHide?.();
+	}, [onHide]);
+	const hasFormattingItems = has("bold") || has("italic") || has("underline") || has("strike") || has("code") || has("uppercase");
+	const hasAlignmentItems = has("align-left") || has("align-center") || has("align-right");
+	return /* @__PURE__ */ jsxs(BubbleMenuRoot, {
+		excludeNodes,
+		placement,
+		offset: offset$1,
+		onHide: handleHide,
+		className,
+		children: [
+			has("node-selector") && /* @__PURE__ */ jsx(BubbleMenuNodeSelector, {
+				open: isNodeSelectorOpen,
+				onOpenChange: handleNodeSelectorOpenChange
+			}),
+			has("link-selector") && /* @__PURE__ */ jsx(BubbleMenuLinkSelector, {
+				open: isLinkSelectorOpen,
+				onOpenChange: handleLinkSelectorOpenChange
+			}),
+			hasFormattingItems && /* @__PURE__ */ jsxs(BubbleMenuItemGroup, { children: [
+				has("bold") && /* @__PURE__ */ jsx(BubbleMenuBold, {}),
+				has("italic") && /* @__PURE__ */ jsx(BubbleMenuItalic, {}),
+				has("underline") && /* @__PURE__ */ jsx(BubbleMenuUnderline, {}),
+				has("strike") && /* @__PURE__ */ jsx(BubbleMenuStrike, {}),
+				has("code") && /* @__PURE__ */ jsx(BubbleMenuCode, {}),
+				has("uppercase") && /* @__PURE__ */ jsx(BubbleMenuUppercase, {})
+			] }),
+			hasAlignmentItems && /* @__PURE__ */ jsxs(BubbleMenuItemGroup, { children: [
+				has("align-left") && /* @__PURE__ */ jsx(BubbleMenuAlignLeft, {}),
+				has("align-center") && /* @__PURE__ */ jsx(BubbleMenuAlignCenter, {}),
+				has("align-right") && /* @__PURE__ */ jsx(BubbleMenuAlignRight, {})
+			] })
+		]
+	});
+}
+
+//#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/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,
+	Default: BubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/button-bubble-menu/context.tsx
+const ButtonBubbleMenuContext = React.createContext(null);
+function useButtonBubbleMenuContext() {
+	const context = React.useContext(ButtonBubbleMenuContext);
+	if (!context) throw new Error("ButtonBubbleMenu compound components must be used within <ButtonBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/edit-link.tsx
+function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { setIsEditing } = useButtonBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-btn-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/root.tsx
+function ButtonBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-btn-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset: offset$1,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ButtonBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/toolbar.tsx
+function ButtonBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useButtonBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-btn-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/default.tsx
+function ButtonBubbleMenuDefault({ excludeItems = [], placement, offset: offset$1, onHide, className }) {
+	return /* @__PURE__ */ jsx(ButtonBubbleMenuRoot, {
+		placement,
+		offset: offset$1,
+		onHide,
+		className,
+		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ButtonBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ButtonBubbleMenuEditLink, {}) })
+	});
+}
+
+//#endregion
+//#region src/ui/button-bubble-menu/index.ts
+const ButtonBubbleMenu = {
+	Root: ButtonBubbleMenuRoot,
+	Toolbar: ButtonBubbleMenuToolbar,
+	EditLink: ButtonBubbleMenuEditLink,
+	Default: ButtonBubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/image-bubble-menu/context.tsx
+const ImageBubbleMenuContext = React.createContext(null);
+function useImageBubbleMenuContext() {
+	const context = React.useContext(ImageBubbleMenuContext);
+	if (!context) throw new Error("ImageBubbleMenu compound components must be used within <ImageBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/edit-link.tsx
+function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { setIsEditing } = useImageBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-img-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		children: children ?? /* @__PURE__ */ jsx(LinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/root.tsx
+function ImageBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-img-bm": "",
+		shouldShow: ({ editor: e, view }) => e.isActive("image") && !view.dom.classList.contains("dragging"),
+		options: {
+			placement,
+			offset: offset$1,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(ImageBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/toolbar.tsx
+function ImageBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useImageBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-img-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/default.tsx
+function ImageBubbleMenuDefault({ excludeItems = [], placement, offset: offset$1, onHide, className }) {
+	return /* @__PURE__ */ jsx(ImageBubbleMenuRoot, {
+		placement,
+		offset: offset$1,
+		onHide,
+		className,
+		children: !excludeItems.includes("edit-link") && /* @__PURE__ */ jsx(ImageBubbleMenuToolbar, { children: /* @__PURE__ */ jsx(ImageBubbleMenuEditLink, {}) })
+	});
+}
+
+//#endregion
+//#region src/ui/image-bubble-menu/index.ts
+const ImageBubbleMenu = {
+	Root: ImageBubbleMenuRoot,
+	Toolbar: ImageBubbleMenuToolbar,
+	EditLink: ImageBubbleMenuEditLink,
+	Default: ImageBubbleMenuDefault
+};
+
+//#endregion
+//#region src/ui/link-bubble-menu/context.tsx
+const LinkBubbleMenuContext = React.createContext(null);
+function useLinkBubbleMenuContext() {
+	const context = React.useContext(LinkBubbleMenuContext);
+	if (!context) throw new Error("LinkBubbleMenu compound components must be used within <LinkBubbleMenu.Root>");
+	return context;
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/edit-link.tsx
+function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { setIsEditing } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Edit link",
+		"data-re-link-bm-item": "",
+		"data-item": "edit-link",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			setIsEditing(true);
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(PencilIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/form.tsx
+function LinkBubbleMenuForm({ className, validateUrl, onLinkApply, onLinkRemove, children }) {
+	const { editor, linkHref, isEditing, setIsEditing } = useLinkBubbleMenuContext();
+	const inputRef = React.useRef(null);
+	const formRef = React.useRef(null);
+	const displayHref = linkHref === "#" ? "" : linkHref;
+	const [inputValue, setInputValue] = React.useState(displayHref);
+	React.useEffect(() => {
+		if (!isEditing) return;
+		const timeoutId = setTimeout(() => {
+			inputRef.current?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, [isEditing]);
+	React.useEffect(() => {
+		if (!isEditing) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") setIsEditing(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);
+				setIsEditing(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [isEditing, setIsEditing]);
+	if (!isEditing) return null;
+	function handleSubmit(e) {
+		e.preventDefault();
+		const value = inputValue.trim();
+		if (value === "") {
+			setLinkHref(editor, "");
+			setIsEditing(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		const finalValue = (validateUrl ?? getUrlFromString)(value);
+		if (!finalValue) {
+			setLinkHref(editor, "");
+			setIsEditing(false);
+			focusEditor(editor);
+			onLinkRemove?.();
+			return;
+		}
+		setLinkHref(editor, finalValue);
+		setIsEditing(false);
+		focusEditor(editor);
+		onLinkApply?.(finalValue);
+	}
+	function handleUnlink(e) {
+		e.stopPropagation();
+		setLinkHref(editor, "");
+		setIsEditing(false);
+		focusEditor(editor);
+		onLinkRemove?.();
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		ref: formRef,
+		"data-re-link-bm-form": "",
+		className,
+		onMouseDown: (e) => e.stopPropagation(),
+		onClick: (e) => e.stopPropagation(),
+		onKeyDown: (e) => e.stopPropagation(),
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				"data-re-link-bm-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-bm-unlink": "",
+				onClick: handleUnlink,
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"aria-label": "Apply link",
+				"data-re-link-bm-apply": "",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Check, {})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/open-link.tsx
+function LinkBubbleMenuOpenLink({ className, children, ...rest }) {
+	const { linkHref } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		href: linkHref,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		"aria-label": "Open link",
+		"data-re-link-bm-item": "",
+		"data-item": "open-link",
+		className,
+		children: children ?? /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/root.tsx
+function LinkBubbleMenuRoot({ onHide, placement = "top", offset: offset$1 = 8, className, children }) {
+	const { editor } = useCurrentEditor();
+	const [isEditing, setIsEditing] = React.useState(false);
+	const linkHref = useEditorState({
+		editor,
+		selector: ({ editor: e }) => e?.getAttributes("link").href ?? ""
+	});
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(BubbleMenu$1, {
+		editor,
+		"data-re-link-bm": "",
+		shouldShow: ({ editor: e }) => e.isActive("link") && e.view.state.selection.content().size === 0,
+		options: {
+			placement,
+			offset: offset$1,
+			onHide: () => {
+				setIsEditing(false);
+				onHide?.();
+			}
+		},
+		className,
+		children: /* @__PURE__ */ jsx(LinkBubbleMenuContext.Provider, {
+			value: {
+				editor,
+				linkHref: linkHref ?? "",
+				isEditing,
+				setIsEditing
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/toolbar.tsx
+function LinkBubbleMenuToolbar({ children, ...rest }) {
+	const { isEditing } = useLinkBubbleMenuContext();
+	if (isEditing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-link-bm-toolbar": "",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/unlink.tsx
+function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown, ...rest }) {
+	const { editor } = useLinkBubbleMenuContext();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Remove link",
+		"data-re-link-bm-item": "",
+		"data-item": "unlink",
+		className,
+		onMouseDown: (e) => {
+			e.preventDefault();
+			onMouseDown?.(e);
+		},
+		onClick: (e) => {
+			onClick?.(e);
+			editor.chain().focus().unsetLink().run();
+		},
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(UnlinkIcon, {})
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/default.tsx
+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$1,
+		onHide,
+		className,
+		children: [(has("edit-link") || has("open-link") || has("unlink")) && /* @__PURE__ */ jsxs(LinkBubbleMenuToolbar, { children: [
+			has("edit-link") && /* @__PURE__ */ jsx(LinkBubbleMenuEditLink, {}),
+			has("open-link") && /* @__PURE__ */ jsx(LinkBubbleMenuOpenLink, {}),
+			has("unlink") && /* @__PURE__ */ jsx(LinkBubbleMenuUnlink, {})
+		] }), /* @__PURE__ */ jsx(LinkBubbleMenuForm, {
+			validateUrl,
+			onLinkApply,
+			onLinkRemove
+		})]
+	});
+}
+
+//#endregion
+//#region src/ui/link-bubble-menu/index.ts
+const LinkBubbleMenu = {
+	Root: LinkBubbleMenuRoot,
+	Toolbar: LinkBubbleMenuToolbar,
+	Form: LinkBubbleMenuForm,
+	EditLink: LinkBubbleMenuEditLink,
+	Unlink: LinkBubbleMenuUnlink,
+	OpenLink: LinkBubbleMenuOpenLink,
+	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 }) {
+	return /* @__PURE__ */ jsxs("button", {
+		"data-re-slash-command-item": "",
+		"data-selected": selected || void 0,
+		onClick: onSelect,
+		type: "button",
+		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
+	});
+}
+function CommandList({ items, query, selectedIndex, onSelect }) {
+	const containerRef = useRef(null);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const selected = container.querySelector("[data-selected]");
+		if (selected) updateScrollView(container, selected);
+	}, [selectedIndex]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-empty": "",
+			children: "No results"
+		})
+	});
+	if (query.trim().length > 0) return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(CommandItem, {
+			item,
+			onSelect: () => onSelect(index),
+			selected: index === selectedIndex
+		}, item.title))
+	});
+	const groups = groupByCategory(items);
+	let flatIndex = 0;
+	return /* @__PURE__ */ jsx("div", {
+		"data-re-slash-command": "",
+		ref: containerRef,
+		children: groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			"data-re-slash-command-category": "",
+			children: group.category
+		}), group.items.map((item) => {
+			const currentIndex = flatIndex++;
+			return /* @__PURE__ */ jsx(CommandItem, {
+				item,
+				onSelect: () => onSelect(currentIndex),
+				selected: currentIndex === selectedIndex
+			}, item.title);
+		})] }, group.category))
+	});
+}
+
+//#endregion
+//#region src/ui/slash-command/commands.tsx
+const TEXT = {
+	title: "Text",
+	description: "Plain text block",
+	icon: /* @__PURE__ */ jsx(Text, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Heading1, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Heading2, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Heading3, { size: 20 }),
+	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: /* @__PURE__ */ jsx(List, { size: 20 }),
+	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: /* @__PURE__ */ jsx(ListOrdered, { size: 20 }),
+	category: "Text",
+	searchTerms: ["ordered"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+	}
+};
+const QUOTE = {
+	title: "Quote",
+	description: "Block quote",
+	icon: /* @__PURE__ */ jsx(TextQuote, { size: 20 }),
+	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: /* @__PURE__ */ jsx(SquareCode, { size: 20 }),
+	category: "Text",
+	searchTerms: ["codeblock"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+	}
+};
+const BUTTON = {
+	title: "Button",
+	description: "Clickable button",
+	icon: /* @__PURE__ */ jsx(MousePointer, { size: 20 }),
+	category: "Layout",
+	searchTerms: ["button"],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setButton().run();
+	}
+};
+const DIVIDER = {
+	title: "Divider",
+	description: "Horizontal separator",
+	icon: /* @__PURE__ */ jsx(SplitSquareVertical, { size: 20 }),
+	category: "Layout",
+	searchTerms: [
+		"hr",
+		"divider",
+		"separator"
+	],
+	command: ({ editor, range }) => {
+		editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+	}
+};
+const SECTION = {
+	title: "Section",
+	description: "Content section",
+	icon: /* @__PURE__ */ jsx(Rows2, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Columns2, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Columns3, { size: 20 }),
+	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: /* @__PURE__ */ jsx(Columns4, { size: 20 }),
+	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/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/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 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 = {
+	Root: SlashCommandRoot,
+	CommandList
+};
+
+//#endregion
+export { BULLET_LIST, BUTTON, BubbleMenu, BubbleMenuAlignCenter, BubbleMenuAlignLeft, BubbleMenuAlignRight, BubbleMenuBold, BubbleMenuCode, BubbleMenuDefault, BubbleMenuItalic, BubbleMenuItem, BubbleMenuItemGroup, BubbleMenuLinkSelector, BubbleMenuNodeSelector, BubbleMenuRoot, BubbleMenuSeparator, BubbleMenuStrike, BubbleMenuUnderline, BubbleMenuUppercase, ButtonBubbleMenu, ButtonBubbleMenuDefault, ButtonBubbleMenuEditLink, ButtonBubbleMenuRoot, ButtonBubbleMenuToolbar, CODE, CommandList, DIVIDER, FOUR_COLUMNS, H1, H2, H3, ImageBubbleMenu, ImageBubbleMenuDefault, ImageBubbleMenuEditLink, ImageBubbleMenuRoot, ImageBubbleMenuToolbar, LinkBubbleMenu, LinkBubbleMenuDefault, LinkBubbleMenuEditLink, LinkBubbleMenuForm, LinkBubbleMenuOpenLink, LinkBubbleMenuRoot, LinkBubbleMenuToolbar, LinkBubbleMenuUnlink, NUMBERED_LIST, NodeSelectorContent, NodeSelectorRoot, NodeSelectorTrigger, QUOTE, SECTION, SlashCommand, TEXT, THREE_COLUMNS, TWO_COLUMNS, defaultSlashCommands, filterAndRankItems, isAtMaxColumnsDepth, isInsideNode, scoreItem, useButtonBubbleMenuContext, useImageBubbleMenuContext, useLinkBubbleMenuContext };
+//# sourceMappingURL=index.mjs.map