@haklex/rich-plugin-floating-toolbar 0.58.0 → 0.59.0

package/dist/index.mjs

@@ -1,23 +1,32 @@
 import { getDOMRectFromTextSelection, useTextSelectionSnapshot } from "@haklex/rich-editor";
 import { $selectionTouchesSpoiler, $toggleSpoilerSelection } from "@haklex/rich-editor/commands";
 import { $createRubyNode, $isKaTeXInlineNode, $isRubyNode } from "@haklex/rich-editor/nodes";
-import { ColorPicker } from "@haklex/rich-editor-ui";
+import { ActionButton, ColorPicker, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Kbd, TextInput, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
 import { usePortalContainer, usePortalTheme, vars } from "@haklex/rich-style-token";
-import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
-import { $createTextNode, $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
-import { Bold, Check, Code, EyeOff, Highlighter, Italic, Languages, Link, Strikethrough, Subscript, Superscript, Trash2, Underline, X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { $createTextNode, $getNearestNodeFromDOMNode, $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
+import { Bold, Code, Ellipsis, EyeOff, Highlighter, Italic, Languages, Link, RemoveFormatting, Strikethrough, Subscript, Superscript, Trash2, Underline, Unlink, X } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/styles.css.ts
-var toolbar = "_1m6axz71";
-var btn = "_1m6axz72";
-var btnActive = "_1m6axz73";
-var rubyEditor = "_1m6axz75";
-//#endregion
-//#region src/FloatingToolbarPlugin.tsx
+//#region src/selection-state.ts
+var INITIAL_STATE = {
+	isBold: false,
+	isItalic: false,
+	isUnderline: false,
+	isStrikethrough: false,
+	isSuperscript: false,
+	isSubscript: false,
+	isCode: false,
+	isHighlight: false,
+	isLink: false,
+	isRuby: false,
+	isSpoiler: false,
+	fontColor: "",
+	backgroundColor: ""
+};
 function isEffectiveLinkNode(node) {
 	if (!$isLinkNode(node)) return false;
 	return !$isAutoLinkNode(node) || !node.getIsUnlinked();
@@ -25,6 +34,19 @@ function isEffectiveLinkNode(node) {
 function isRegularLinkNode(node) {
 	return $isLinkNode(node) && !$isAutoLinkNode(node);
 }
+function $selectionHasLink(selection) {
+	return selection.getNodes().some((node) => {
+		return isEffectiveLinkNode(node.getParent()) || isEffectiveLinkNode(node);
+	});
+}
+function $getSelectedLinkUrl(selection) {
+	let current = selection.anchor.getNode();
+	while (current) {
+		if ($isLinkNode(current)) return current.getURL();
+		current = current.getParent();
+	}
+	return "";
+}
 function collectSelectedActiveAutoLinkNodes(selection) {
 	const autoLinkNodes = /* @__PURE__ */ new Map();
 	for (const node of selection.getNodes()) {
@@ -34,20 +56,6 @@ function collectSelectedActiveAutoLinkNodes(selection) {
 	}
 	return Array.from(autoLinkNodes.values());
 }
-var INITIAL_STATE = {
-	isBold: false,
-	isItalic: false,
-	isUnderline: false,
-	isStrikethrough: false,
-	isSuperscript: false,
-	isSubscript: false,
-	isCode: false,
-	isHighlight: false,
-	isLink: false,
-	isRuby: false,
-	isSpoiler: false,
-	fontColor: ""
-};
 function findRubyAncestor(node) {
 	let current = node;
 	while (current) {
@@ -66,10 +74,6 @@ function getSelectedRubyNodes(nodes) {
 }
 function getSelectionState(selection) {
 	const nodes = selection.getNodes();
-	const hasLink = nodes.some((node) => {
-		return isEffectiveLinkNode(node.getParent()) || isEffectiveLinkNode(node);
-	});
-	const hasRuby = getSelectedRubyNodes(nodes).length > 0;
 	let fontColor = $getSelectionStyleValueForProperty(selection, "color", "");
 	if (!fontColor) {
 		const katex = nodes.find((n) => $isKaTeXInlineNode(n));
@@ -84,42 +88,641 @@ function getSelectionState(selection) {
 		isSubscript: selection.hasFormat("subscript"),
 		isCode: selection.hasFormat("code"),
 		isHighlight: selection.hasFormat("highlight"),
-		isLink: hasLink,
-		isRuby: hasRuby,
+		isLink: $selectionHasLink(selection),
+		isRuby: getSelectedRubyNodes(nodes).length > 0,
 		isSpoiler: $selectionTouchesSpoiler(selection),
-		fontColor
+		fontColor,
+		backgroundColor: $getSelectionStyleValueForProperty(selection, "background-color", "")
 	};
 }
-function computePosition(rect, toolbar, container) {
-	if (rect.width === 0 && rect.height === 0) return null;
-	const toolbarWidth = toolbar.offsetWidth;
-	const toolbarHeight = toolbar.offsetHeight;
-	const containerRect = container === document.body ? void 0 : container.getBoundingClientRect();
-	const offsetX = containerRect?.left ?? 0;
-	const offsetY = containerRect?.top ?? 0;
-	const availableWidth = containerRect?.width ?? window.innerWidth;
-	const rawLeft = rect.left - offsetX + rect.width / 2 - toolbarWidth / 2;
-	const clampedLeft = Math.max(8, Math.min(rawLeft, availableWidth - toolbarWidth - 8));
+//#endregion
+//#region src/actions.ts
+var SCHEME = /^[a-z][\d+.a-z-]*:/i;
+var LOOKS_LIKE_URL = /^(?:https?:\/\/|www\.)\S+$|^[\w-]+(?:\.[\w-]+)+(?:[#/?]\S*)?$/i;
+function normalizeUrl(input) {
+	const url = input.trim();
+	if (!url) return "";
+	if (SCHEME.test(url) || url.startsWith("/") || url.startsWith("#")) return url;
+	return `https://${url}`;
+}
+function looksLikeUrl(text) {
+	return LOOKS_LIKE_URL.test(text.trim());
+}
+async function readClipboardUrl() {
+	try {
+		if ((await navigator.permissions?.query({ name: "clipboard-read" }))?.state !== "granted") return "";
+		const text = (await navigator.clipboard?.readText())?.trim() ?? "";
+		return looksLikeUrl(text) ? text : "";
+	} catch {
+		return "";
+	}
+}
+function $removeLinks(editor, selection) {
+	for (const autoLinkNode of collectSelectedActiveAutoLinkNodes(selection)) {
+		autoLinkNode.setIsUnlinked(true);
+		autoLinkNode.markDirty();
+	}
+	if (selection.getNodes().some((node) => {
+		return isRegularLinkNode(node.getParent()) || isRegularLinkNode(node);
+	})) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+}
+function $clearFormatting() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return;
+	for (const node of selection.extract()) if ($isTextNode(node)) {
+		node.setFormat(0);
+		node.setStyle("");
+	} else if ($isKaTeXInlineNode(node)) node.setColor(null);
+}
+function $wrapSelectionInRuby() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return null;
+	const text = selection.getTextContent();
+	if (!text.trim()) return null;
+	selection.removeText();
+	const rubyNode = $createRubyNode("");
+	rubyNode.append($createTextNode(text));
+	const freshSelection = $getSelection();
+	if ($isRangeSelection(freshSelection)) freshSelection.insertNodes([rubyNode]);
 	return {
-		top: rect.top - offsetY - toolbarHeight - 10,
-		left: clampedLeft
+		nodeKey: rubyNode.getKey(),
+		reading: "",
+		isNew: true
 	};
 }
-function ToolbarButton({ active, onClick, ariaLabel, children }) {
-	return /* @__PURE__ */ jsxs("button", {
-		"aria-label": ariaLabel,
-		"aria-pressed": active,
-		className: `${btn}${active ? ` ${btnActive}` : ""}`,
-		type: "button",
-		onMouseDown: (e) => {
-			e.preventDefault();
-			onClick();
+function $unwrapRuby(nodeKey) {
+	const node = $getNodeByKey(nodeKey);
+	if (!$isRubyNode(node)) return;
+	for (const child of node.getChildren()) node.insertBefore(child);
+	node.remove();
+}
+function $setRubyReading(nodeKey, reading) {
+	const node = $getNodeByKey(nodeKey);
+	if ($isRubyNode(node)) node.setReading(reading);
+}
+//#endregion
+//#region src/styles.css.ts
+var toolbar = "_1m6axz71";
+var btn = "_1m6axz74";
+var colorTrigger = "_1m6axz75";
+var separator = "_1m6axz76";
+var inputRow = "_1m6axz77";
+var inputIcon = "_1m6axz78";
+var inlineInput = "_1m6axz79";
+//#endregion
+//#region src/ToolbarButton.tsx
+function createToolbarTooltipHandle() {
+	return createTooltipHandle();
+}
+function ToolbarButton({ active, children, handle, label, onClick, render, shortcut }) {
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		"aria-label": label,
+		"data-shortcut": shortcut,
+		"data-tooltip": label,
+		handle,
+		payload: {
+			label,
+			shortcut
 		},
-		children: [children, active && /* @__PURE__ */ jsx("span", { className: "_1m6axz74" })]
+		render: render ?? /* @__PURE__ */ jsx("button", {
+			"aria-pressed": active,
+			className: "_1m6axz74",
+			type: "button",
+			onClick,
+			onMouseDown: (e) => e.preventDefault()
+		}),
+		children
+	});
+}
+//#endregion
+//#region src/FormatBar.tsx
+var ICON$1 = {
+	size: 16,
+	strokeWidth: 2
+};
+var MARKS = [
+	{
+		format: "bold",
+		label: "Bold",
+		shortcut: "Mod+B",
+		icon: /* @__PURE__ */ jsx(Bold, { ...ICON$1 })
+	},
+	{
+		format: "italic",
+		label: "Italic",
+		shortcut: "Mod+I",
+		icon: /* @__PURE__ */ jsx(Italic, { ...ICON$1 })
+	},
+	{
+		format: "underline",
+		label: "Underline",
+		shortcut: "Mod+U",
+		icon: /* @__PURE__ */ jsx(Underline, { ...ICON$1 })
+	},
+	{
+		format: "strikethrough",
+		label: "Strikethrough",
+		icon: /* @__PURE__ */ jsx(Strikethrough, { ...ICON$1 })
+	}
+];
+var STATE_KEY = {
+	bold: "isBold",
+	italic: "isItalic",
+	underline: "isUnderline",
+	strikethrough: "isStrikethrough"
+};
+function Separator() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: separator
 	});
 }
-var ICON_SIZE = 15;
-var ICON_STROKE = 2;
+function FormatBar({ actions, handle, onBackgroundColor, onClearFormatting, onColor, onFormat, onLink, onRuby, onSpoiler, state }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		MARKS.map((mark) => /* @__PURE__ */ jsx(ToolbarButton, {
+			active: Boolean(state[STATE_KEY[mark.format]]),
+			handle,
+			label: mark.label,
+			shortcut: mark.shortcut,
+			onClick: () => onFormat(mark.format),
+			children: mark.icon
+		}, mark.format)),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: state.isCode,
+			handle,
+			label: "Inline code",
+			onClick: () => onFormat("code"),
+			children: /* @__PURE__ */ jsx(Code, { ...ICON$1 })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: state.isHighlight,
+			handle,
+			label: "Highlight",
+			onClick: () => onFormat("highlight"),
+			children: /* @__PURE__ */ jsx(Highlighter, { ...ICON$1 })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: state.isSpoiler,
+			handle,
+			label: "Spoiler",
+			onClick: onSpoiler,
+			children: /* @__PURE__ */ jsx(EyeOff, { ...ICON$1 })
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: state.isLink,
+			handle,
+			label: "Link",
+			shortcut: "Mod+K",
+			onClick: onLink,
+			children: /* @__PURE__ */ jsx(Link, { ...ICON$1 })
+		}),
+		/* @__PURE__ */ jsx(ToolbarButton, {
+			active: state.isRuby,
+			handle,
+			label: "Ruby",
+			onClick: onRuby,
+			children: /* @__PURE__ */ jsx(Languages, { ...ICON$1 })
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsx(ColorPicker, {
+			className: colorTrigger,
+			currentBackground: state.backgroundColor,
+			currentColor: state.fontColor || "inherit",
+			tooltip: "Text color",
+			onSelect: onColor,
+			onSelectBackground: onBackgroundColor
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenu, {
+			modal: false,
+			children: [/* @__PURE__ */ jsx(ToolbarButton, {
+				handle,
+				label: "More formatting",
+				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx("button", {
+					className: btn,
+					type: "button",
+					onMouseDown: (e) => e.preventDefault()
+				}) }),
+				onClick: () => {},
+				children: /* @__PURE__ */ jsx(Ellipsis, { ...ICON$1 })
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "end",
+				positionMethod: "fixed",
+				sideOffset: 8,
+				children: [
+					/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+						checked: state.isSuperscript,
+						onCheckedChange: () => onFormat("superscript"),
+						children: [/* @__PURE__ */ jsx(Superscript, { ...ICON$1 }), "Superscript"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+						checked: state.isSubscript,
+						onCheckedChange: () => onFormat("subscript"),
+						children: [/* @__PURE__ */ jsx(Subscript, { ...ICON$1 }), "Subscript"]
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: onClearFormatting,
+						children: [/* @__PURE__ */ jsx(RemoveFormatting, { ...ICON$1 }), "Clear formatting"]
+					})
+				]
+			})]
+		}),
+		actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), actions] })
+	] });
+}
+//#endregion
+//#region src/InlineInputBar.tsx
+function InlineInputBar({ handle, icon, label, onCancel, onChange, onSubmit, placeholder, secondary, type = "text", value }) {
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current?.focus({ preventScroll: true });
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: inputRow,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: inputIcon,
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(TextInput, {
+				"aria-label": label,
+				autoComplete: "off",
+				className: inlineInput,
+				placeholder,
+				ref: inputRef,
+				spellCheck: false,
+				type,
+				value,
+				onChange: (e) => onChange(e.target.value),
+				onKeyDown: (e) => {
+					if (e.nativeEvent.isComposing) return;
+					if (e.key === "Enter") {
+						e.preventDefault();
+						onSubmit();
+					} else if (e.key === "Escape") {
+						e.preventDefault();
+						e.stopPropagation();
+						onCancel();
+					}
+				}
+			}),
+			/* @__PURE__ */ jsxs(ActionButton, {
+				"aria-label": "Save",
+				size: "md",
+				variant: "solid",
+				onClick: onSubmit,
+				onMouseDown: (e) => e.preventDefault(),
+				children: ["Save", /* @__PURE__ */ jsx(Kbd, {
+					keys: "enter",
+					size: "sm",
+					tone: "inverted"
+				})]
+			}),
+			/* @__PURE__ */ jsx(TooltipTrigger, {
+				handle,
+				payload: {
+					label: secondary.label,
+					shortcut: secondary.shortcut
+				},
+				render: /* @__PURE__ */ jsx(ActionButton, {
+					icon: true,
+					"aria-label": secondary.label,
+					danger: secondary.danger,
+					size: "md",
+					onClick: secondary.onClick,
+					onMouseDown: (e) => e.preventDefault()
+				}),
+				children: secondary.icon
+			})
+		]
+	});
+}
+//#endregion
+//#region src/roving.ts
+function items(toolbar) {
+	return Array.from(toolbar.querySelectorAll("button:not(:disabled)"));
+}
+function syncRovingTabIndex(toolbar, focused) {
+	const buttons = items(toolbar);
+	if (!buttons.includes(focused)) return;
+	for (const button of buttons) button.tabIndex = button === focused ? 0 : -1;
+}
+function focusFirstItem(toolbar) {
+	if (!toolbar) return false;
+	const first = items(toolbar)[0];
+	first?.focus();
+	return Boolean(first);
+}
+function moveToolbarFocus(e) {
+	const buttons = items(e.currentTarget);
+	const index = buttons.indexOf(document.activeElement);
+	if (index === -1) return false;
+	const last = buttons.length - 1;
+	const next = e.key === "ArrowRight" ? index === last ? 0 : index + 1 : e.key === "ArrowLeft" ? index === 0 ? last : index - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
+	if (next === -1) return false;
+	e.preventDefault();
+	buttons[next]?.focus();
+	return true;
+}
+//#endregion
+//#region src/use-editor-bindings.ts
+function useEditorBindings({ editor, editRuby, modeRef, openLink, toolbarRef, updateToolbar }) {
+	useEffect(() => {
+		const onRootClick = (event) => {
+			const target = event.target;
+			if (!target) return;
+			if (window.getSelection()?.isCollapsed === false) return;
+			const ruby = editor.read(() => {
+				const node = findRubyAncestor($getNearestNodeFromDOMNode(target));
+				return node ? {
+					key: node.getKey(),
+					reading: node.getReading()
+				} : null;
+			});
+			if (ruby) editRuby(ruby.key, ruby.reading);
+		};
+		let attachedRoot = null;
+		return mergeCleanups(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+			updateToolbar();
+			return false;
+		}, COMMAND_PRIORITY_LOW), editor.registerUpdateListener(({ editorState }) => {
+			editorState.read(updateToolbar);
+		}), editor.registerCommand(KEY_DOWN_COMMAND, (event) => {
+			const isModK = event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey;
+			const isAltF10 = event.key === "F10" && event.altKey;
+			if (!isModK && !isAltF10 || modeRef.current.kind !== "format") return false;
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || selection.isCollapsed()) return false;
+			if (isAltF10 && !toolbarRef.current) return false;
+			event.preventDefault();
+			if (isAltF10) {
+				queueMicrotask(() => focusFirstItem(toolbarRef.current));
+				return true;
+			}
+			queueMicrotask(() => openLink("editor"));
+			return true;
+		}, COMMAND_PRIORITY_LOW), editor.registerRootListener((root) => {
+			attachedRoot?.removeEventListener("click", onRootClick);
+			attachedRoot = root;
+			root?.addEventListener("click", onRootClick);
+		}), () => attachedRoot?.removeEventListener("click", onRootClick));
+	}, [
+		editRuby,
+		editor,
+		modeRef,
+		openLink,
+		toolbarRef,
+		updateToolbar
+	]);
+}
+function mergeCleanups(...cleanups) {
+	return () => {
+		for (const cleanup of cleanups) cleanup();
+	};
+}
+//#endregion
+//#region src/use-inline-modes.ts
+var FORMAT = { kind: "format" };
+function useInlineModes(editor, onClose) {
+	const [mode, setModeState] = useState(FORMAT);
+	const modeRef = useRef(mode);
+	const savedSelectionRef = useRef(null);
+	const setMode = useCallback((next) => {
+		const resolved = typeof next === "function" ? next(modeRef.current) : next;
+		modeRef.current = resolved;
+		setModeState(resolved);
+	}, []);
+	const close = useCallback((restoreFocus) => {
+		const current = modeRef.current;
+		setMode(FORMAT);
+		if (!restoreFocus || current.kind === "format") {
+			onClose(null);
+			return;
+		}
+		if (current.origin === "editor") onClose("editor");
+		else onClose(current.kind === "link" ? "Link" : "Ruby");
+	}, [onClose, setMode]);
+	const openLink = useCallback((origin) => {
+		const info = editor.read(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || selection.isCollapsed()) return null;
+			const hasLink = $selectionHasLink(selection);
+			const existing = hasLink ? $getSelectedLinkUrl(selection) : "";
+			const text = selection.getTextContent().trim();
+			return {
+				hasLink,
+				initial: existing || (looksLikeUrl(text) ? text : ""),
+				selection: selection.clone()
+			};
+		});
+		if (!info) return;
+		savedSelectionRef.current = info.selection;
+		setMode({
+			kind: "link",
+			draft: info.initial,
+			dirty: false,
+			existing: info.hasLink,
+			origin
+		});
+		if (info.initial) return;
+		readClipboardUrl().then((url) => {
+			if (!url) return;
+			setMode((prev) => prev.kind === "link" && !prev.dirty && !prev.draft ? {
+				...prev,
+				draft: url
+			} : prev);
+		});
+	}, [editor, setMode]);
+	const setLinkDraft = useCallback((draft) => {
+		setMode((prev) => prev.kind === "link" ? {
+			...prev,
+			draft,
+			dirty: true
+		} : prev);
+	}, [setMode]);
+	const saveLink = useCallback((restoreFocus = true) => {
+		const current = modeRef.current;
+		if (current.kind !== "link") return;
+		const url = normalizeUrl(current.draft);
+		if (url) editor.update(() => {
+			const saved = savedSelectionRef.current;
+			const selection = $getSelection();
+			if (saved && (!$isRangeSelection(selection) || selection.isCollapsed())) $setSelection(saved.clone());
+			editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+		});
+		savedSelectionRef.current = null;
+		close(restoreFocus);
+	}, [close, editor]);
+	const removeLink = useCallback(() => {
+		if (modeRef.current.kind !== "link") return;
+		editor.update(() => {
+			const saved = savedSelectionRef.current;
+			const selection = $getSelection();
+			if (saved && (!$isRangeSelection(selection) || selection.isCollapsed())) $setSelection(saved.clone());
+			const target = $getSelection();
+			if ($isRangeSelection(target)) $removeLinks(editor, target);
+		});
+		savedSelectionRef.current = null;
+		close(true);
+	}, [close, editor]);
+	const openRuby = useCallback((origin) => {
+		const existing = editor.read(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection)) return void 0;
+			const ruby = getSelectedRubyNodes(selection.getNodes())[0];
+			return ruby ? {
+				nodeKey: ruby.getKey(),
+				reading: ruby.getReading(),
+				isNew: false
+			} : null;
+		});
+		if (existing === void 0) return;
+		if (existing) {
+			setMode({
+				kind: "ruby",
+				draft: existing,
+				origin
+			});
+			return;
+		}
+		let draft = null;
+		editor.update(() => {
+			draft = $wrapSelectionInRuby();
+		}, { discrete: true });
+		if (draft) setMode({
+			kind: "ruby",
+			draft,
+			origin
+		});
+	}, [editor, setMode]);
+	const editRuby = useCallback((nodeKey, reading) => {
+		setMode({
+			kind: "ruby",
+			draft: {
+				nodeKey,
+				reading,
+				isNew: false
+			},
+			origin: "editor"
+		});
+	}, [setMode]);
+	const setRubyDraft = useCallback((reading) => {
+		setMode((prev) => prev.kind === "ruby" ? {
+			...prev,
+			draft: {
+				...prev.draft,
+				reading
+			}
+		} : prev);
+	}, [setMode]);
+	const saveRuby = useCallback((restoreFocus = true) => {
+		const current = modeRef.current;
+		if (current.kind !== "ruby") return;
+		const reading = current.draft.reading.trim();
+		editor.update(() => {
+			if (reading) $setRubyReading(current.draft.nodeKey, reading);
+			else $unwrapRuby(current.draft.nodeKey);
+		});
+		close(restoreFocus);
+	}, [close, editor]);
+	const cancelRuby = useCallback(() => {
+		const current = modeRef.current;
+		if (current.kind !== "ruby") return;
+		if (current.draft.isNew) editor.update(() => $unwrapRuby(current.draft.nodeKey));
+		close(true);
+	}, [close, editor]);
+	const removeRuby = useCallback(() => {
+		const current = modeRef.current;
+		if (current.kind !== "ruby") return;
+		editor.update(() => $unwrapRuby(current.draft.nodeKey));
+		close(true);
+	}, [close, editor]);
+	return {
+		mode,
+		modeRef,
+		cancel: close,
+		cancelRuby,
+		commitOnOutsideClick: useCallback(() => {
+			const current = modeRef.current;
+			if (current.kind === "link") {
+				if (current.dirty && current.draft.trim()) saveLink(false);
+				else close(false);
+			} else if (current.kind === "ruby") saveRuby(false);
+		}, [
+			close,
+			saveLink,
+			saveRuby
+		]),
+		editRuby,
+		openLink,
+		openRuby,
+		removeLink,
+		removeRuby,
+		saveLink,
+		saveRuby,
+		setLinkDraft,
+		setRubyDraft
+	};
+}
+//#endregion
+//#region src/position.ts
+var GAP = 8;
+var EDGE = 8;
+function computeToolbarPosition({ anchor, size, bounds }) {
+	const above = anchor.top - GAP - size.height;
+	const below = anchor.bottom + GAP;
+	const fitsAbove = above >= bounds.top;
+	const fitsBelow = below + size.height <= bounds.bottom;
+	const placement = fitsAbove || !fitsBelow ? "top" : "bottom";
+	const top = placement === "top" ? Math.max(above, bounds.top) : below;
+	const center = (anchor.left + anchor.right) / 2;
+	const minLeft = bounds.left + EDGE;
+	const maxLeft = bounds.right - size.width - EDGE;
+	return {
+		top,
+		left: Math.max(minLeft, Math.min(center - size.width / 2, maxLeft)),
+		placement
+	};
+}
+function isPinned(el) {
+	const { position } = window.getComputedStyle(el);
+	return position === "sticky" || position === "fixed";
+}
+function findScrollParent(el) {
+	let current = el?.parentElement ?? null;
+	while (current) {
+		const { overflowY } = window.getComputedStyle(current);
+		if (overflowY === "auto" || overflowY === "scroll") return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+function getViewportBounds(rootElement, own, anchorTop) {
+	const bounds = {
+		top: 0,
+		left: 0,
+		right: window.innerWidth,
+		bottom: window.innerHeight
+	};
+	const scrollParent = findScrollParent(rootElement);
+	if (scrollParent) {
+		const rect = scrollParent.getBoundingClientRect();
+		bounds.top = Math.max(bounds.top, rect.top);
+		bounds.bottom = Math.min(bounds.bottom, rect.bottom);
+	}
+	const rootRect = rootElement.getBoundingClientRect();
+	for (const bar of document.querySelectorAll("[role=\"toolbar\"]")) {
+		if (bar === own || own?.contains(bar) || !isPinned(bar)) continue;
+		const rect = bar.getBoundingClientRect();
+		if (rect.right > rootRect.left && rect.left < rootRect.right && rect.top < anchorTop && rect.bottom > bounds.top) bounds.top = Math.min(rect.bottom, anchorTop);
+	}
+	return bounds;
+}
+//#endregion
+//#region src/use-toolbar-position.ts
 function extractCssVarName(value) {
 	return value.match(/^var\((--[^\s),]+)(?:,[^)]+)?\)$/)?.[1] ?? null;
 }
@@ -133,472 +736,263 @@ function collectThemeVarNames(contract, output) {
 	return output;
 }
 var THEME_VAR_NAMES = Array.from(collectThemeVarNames(vars, /* @__PURE__ */ new Set()));
+function applyThemeVars(editor, toolbar) {
+	const rootElement = editor.getRootElement();
+	if (!rootElement) return;
+	const computed = window.getComputedStyle(rootElement);
+	for (const name of THEME_VAR_NAMES) {
+		const value = computed.getPropertyValue(name).trim();
+		if (value) toolbar.style.setProperty(name, value);
+	}
+}
+function useToolbarPosition({ active, editor, getAnchor, portalContainer, toolbarRef, trigger }) {
+	useLayoutEffect(() => {
+		if (!active) return;
+		const position = () => {
+			const toolbar = toolbarRef.current;
+			const rootElement = editor.getRootElement();
+			if (!toolbar || !rootElement) return;
+			applyThemeVars(editor, toolbar);
+			const anchor = getAnchor();
+			if (!anchor) return;
+			const pos = computeToolbarPosition({
+				anchor,
+				size: {
+					width: toolbar.offsetWidth,
+					height: toolbar.offsetHeight
+				},
+				bounds: getViewportBounds(rootElement, toolbar, anchor.top)
+			});
+			const containerRect = portalContainer === document.body ? null : portalContainer.getBoundingClientRect();
+			toolbar.style.top = `${pos.top - (containerRect?.top ?? 0)}px`;
+			toolbar.style.left = `${pos.left - (containerRect?.left ?? 0)}px`;
+			toolbar.dataset.placement = pos.placement;
+		};
+		position();
+		const frame = requestAnimationFrame(position);
+		const onScroll = () => requestAnimationFrame(position);
+		window.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", onScroll);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", onScroll, { capture: true });
+			window.removeEventListener("resize", onScroll);
+		};
+	}, [
+		active,
+		editor,
+		getAnchor,
+		portalContainer,
+		toolbarRef,
+		trigger
+	]);
+}
+//#endregion
+//#region src/FloatingToolbarPlugin.tsx
+var ICON = {
+	size: 16,
+	strokeWidth: 2
+};
+function toBox(rect) {
+	if (rect.width === 0 && rect.height === 0) return null;
+	return {
+		top: rect.top,
+		bottom: rect.bottom,
+		left: rect.left,
+		right: rect.right
+	};
+}
 function FloatingToolbarPlugin({ actions } = {}) {
 	const [editor] = useLexicalComposerContext();
 	const { className: portalClassName, theme: portalTheme } = usePortalTheme();
 	const portalContainer = usePortalContainer();
 	const selectionSnapshot = useTextSelectionSnapshot();
 	const toolbarRef = useRef(null);
+	const [handle] = useState(createToolbarTooltipHandle);
 	const [visible, setVisible] = useState(false);
 	const [state, setState] = useState(INITIAL_STATE);
-	const [rubyEdit, setRubyEdit] = useState(null);
-	const rubyEditorRef = useRef(null);
-	const rubyInputRef = useRef(null);
-	const rubyEditRef = useRef(rubyEdit);
-	rubyEditRef.current = rubyEdit;
-	const updateToolbar = useCallback(() => {
-		const selection = $getSelection();
-		if (!$isRangeSelection(selection) || selection.isCollapsed()) {
-			setVisible(false);
-			return;
-		}
-		setState(getSelectionState(selection));
-		setVisible(true);
-	}, []);
-	const applyThemeVars = useCallback((toolbar) => {
-		const rootElement = editor.getRootElement();
-		if (!rootElement) return;
-		const computed = window.getComputedStyle(rootElement);
-		for (const name of THEME_VAR_NAMES) {
-			const value = computed.getPropertyValue(name).trim();
-			if (value) toolbar.style.setProperty(name, value);
-		}
-	}, [editor]);
-	useEffect(() => {
-		const unregisterCommand = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-			updateToolbar();
-			return false;
-		}, COMMAND_PRIORITY_LOW);
-		const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
-			editorState.read(() => {
-				updateToolbar();
-			});
-		});
-		return () => {
-			unregisterCommand();
-			unregisterUpdate();
-		};
-	}, [editor, updateToolbar]);
+	const [pendingFocus, setPendingFocus] = useState(null);
+	const lastAnchorRef = useRef(null);
+	const modes = useInlineModes(editor, useCallback((target) => {
+		setPendingFocus(target ? { target } : null);
+	}, []));
+	const { mode, modeRef, openLink, openRuby, editRuby, commitOnOutsideClick } = modes;
+	useEditorBindings({
+		editor,
+		editRuby,
+		modeRef,
+		openLink,
+		toolbarRef,
+		updateToolbar: useCallback(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+				setVisible(false);
+				return;
+			}
+			setState(getSelectionState(selection));
+			setVisible(true);
+		}, [])
+	});
 	useEffect(() => {
 		if (!selectionSnapshot) setVisible(false);
 	}, [selectionSnapshot]);
 	useEffect(() => {
-		if (!visible || !toolbarRef.current || !selectionSnapshot) return;
-		const positionToolbar = () => {
-			const toolbar = toolbarRef.current;
-			if (!toolbar) return;
-			applyThemeVars(toolbar);
-			const rootElement = editor.getRootElement();
-			if (!rootElement) {
-				setVisible(false);
-				return;
-			}
-			const rect = getDOMRectFromTextSelection(rootElement, selectionSnapshot);
-			if (!rect) {
-				setVisible(false);
-				return;
-			}
-			const pos = computePosition(rect, toolbar, portalContainer);
-			if (!pos) {
-				setVisible(false);
-				return;
-			}
-			toolbar.style.top = `${pos.top}px`;
-			toolbar.style.left = `${pos.left}px`;
+		if (!pendingFocus) return;
+		const button = pendingFocus.target === "editor" ? null : toolbarRef.current?.querySelector(`[aria-label="${pendingFocus.target}"]`);
+		if (button) button.focus();
+		else editor.focus();
+		setPendingFocus(null);
+	}, [editor, pendingFocus]);
+	useEffect(() => {
+		if (mode.kind === "format") return;
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (toolbarRef.current?.contains(target)) return;
+			commitOnOutsideClick();
+		};
+		const timer = setTimeout(() => document.addEventListener("mousedown", onPointerDown), 0);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener("mousedown", onPointerDown);
 		};
-		requestAnimationFrame(positionToolbar);
+	}, [commitOnOutsideClick, mode.kind]);
+	const rubyKey = mode.kind === "ruby" ? mode.draft.nodeKey : null;
+	const getAnchor = useCallback(() => {
 		const rootElement = editor.getRootElement();
-		if (!rootElement) return;
-		let scrollParent = window;
-		let el = rootElement.parentElement;
-		while (el) {
-			const { overflowY } = window.getComputedStyle(el);
-			if (overflowY === "auto" || overflowY === "scroll") {
-				scrollParent = el;
-				break;
-			}
-			el = el.parentElement;
+		let anchor = null;
+		if (rubyKey) {
+			const dom = editor.getElementByKey(rubyKey);
+			anchor = dom ? toBox(dom.getBoundingClientRect()) : null;
+		} else if (rootElement && selectionSnapshot) {
+			const rect = getDOMRectFromTextSelection(rootElement, selectionSnapshot);
+			anchor = rect ? toBox(rect) : null;
 		}
-		const onScroll = () => requestAnimationFrame(positionToolbar);
-		scrollParent.addEventListener("scroll", onScroll, { passive: true });
-		return () => scrollParent.removeEventListener("scroll", onScroll);
+		if (anchor) lastAnchorRef.current = anchor;
+		return anchor ?? lastAnchorRef.current;
 	}, [
-		applyThemeVars,
 		editor,
-		portalContainer,
-		selectionSnapshot,
-		state,
-		visible
+		rubyKey,
+		selectionSnapshot
 	]);
-	const handleFormat = useCallback((format) => {
-		editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
-	}, [editor]);
-	const handleLink = useCallback(() => {
+	const shown = visible || mode.kind !== "format";
+	useToolbarPosition({
+		active: shown,
+		editor,
+		getAnchor,
+		portalContainer,
+		toolbarRef,
+		trigger: `${mode.kind}:${JSON.stringify(state)}`
+	});
+	const handleFormat = useCallback((format) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format), [editor]);
+	const patchSelection = useCallback((styles, katexColor) => {
 		editor.update(() => {
 			const selection = $getSelection();
 			if (!$isRangeSelection(selection)) return;
-			const nodes = selection.getNodes();
-			if (nodes.some((node) => {
-				return isEffectiveLinkNode(node.getParent()) || isEffectiveLinkNode(node);
-			})) {
-				for (const autoLinkNode of collectSelectedActiveAutoLinkNodes(selection)) {
-					autoLinkNode.setIsUnlinked(true);
-					autoLinkNode.markDirty();
-				}
-				if (nodes.some((node) => {
-					return isRegularLinkNode(node.getParent()) || isRegularLinkNode(node);
-				})) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-			} else {
-				const text = selection.getTextContent();
-				const url = /^https?:\/\//.test(text) ? text : "";
-				editor.dispatchCommand(TOGGLE_LINK_COMMAND, url || "https://");
-			}
+			$patchStyleText(selection, styles);
+			if (katexColor === void 0) return;
+			for (const node of selection.getNodes()) if ($isKaTeXInlineNode(node)) node.setColor(katexColor);
 		});
 	}, [editor]);
 	const handleColor = useCallback((value) => {
-		editor.update(() => {
-			const sel = $getSelection();
-			if (!$isRangeSelection(sel)) return;
-			const color = value === "inherit" ? null : value;
-			$patchStyleText(sel, { color });
-			for (const node of sel.getNodes()) if ($isKaTeXInlineNode(node)) node.setColor(color);
-		});
-	}, [editor]);
-	const handleRuby = useCallback(() => {
-		editor.update(() => {
-			const selection = $getSelection();
-			if (!$isRangeSelection(selection)) return;
-			const rubyNodes = getSelectedRubyNodes(selection.getNodes());
-			if (rubyNodes.length > 0) {
-				const rubyNode = rubyNodes[0];
-				if (!rubyNode) return;
-				setRubyEdit({
-					nodeKey: rubyNode.getKey(),
-					reading: rubyNode.getReading(),
-					baseText: rubyNode.getTextContent(),
-					isNew: false
-				});
-			} else {
-				const text = selection.getTextContent();
-				if (!text.trim()) return;
-				selection.removeText();
-				const rubyNode = $createRubyNode("");
-				rubyNode.append($createTextNode(text));
-				const freshSelection = $getSelection();
-				if ($isRangeSelection(freshSelection)) freshSelection.insertNodes([rubyNode]);
-				setRubyEdit({
-					nodeKey: rubyNode.getKey(),
-					reading: "",
-					baseText: text,
-					isNew: true
-				});
-			}
-		});
-	}, [editor]);
-	const handleRubyConfirm = useCallback(() => {
-		const edit = rubyEditRef.current;
-		if (!edit) return;
-		editor.update(() => {
-			const node = $getNodeByKey(edit.nodeKey);
-			if ($isRubyNode(node)) node.setReading(edit.reading);
-		});
-		setRubyEdit(null);
-	}, [editor]);
-	const handleRubyCancel = useCallback(() => {
-		const edit = rubyEditRef.current;
-		if (!edit) return;
-		if (edit.isNew) editor.update(() => {
-			const node = $getNodeByKey(edit.nodeKey);
-			if ($isRubyNode(node)) {
-				const children = node.getChildren();
-				for (const child of children) node.insertBefore(child);
-				node.remove();
-			}
-		});
-		setRubyEdit(null);
-	}, [editor]);
-	const handleRubyDelete = useCallback(() => {
-		const edit = rubyEditRef.current;
-		if (!edit) return;
-		editor.update(() => {
-			const node = $getNodeByKey(edit.nodeKey);
-			if ($isRubyNode(node)) {
-				const children = node.getChildren();
-				for (const child of children) node.insertBefore(child);
-				node.remove();
-			}
-		});
-		setRubyEdit(null);
-	}, [editor]);
-	const isRubyEditing = rubyEdit !== null;
-	useEffect(() => {
-		if (!isRubyEditing) return;
-		const handleClickOutside = (e) => {
-			const currentEdit = rubyEditRef.current;
-			if (!currentEdit) return;
-			if (rubyEditorRef.current && !rubyEditorRef.current.contains(e.target)) {
-				if (currentEdit.reading.trim()) editor.update(() => {
-					const node = $getNodeByKey(currentEdit.nodeKey);
-					if ($isRubyNode(node)) node.setReading(currentEdit.reading);
-				});
-				else if (currentEdit.isNew) editor.update(() => {
-					const node = $getNodeByKey(currentEdit.nodeKey);
-					if ($isRubyNode(node)) {
-						const children = node.getChildren();
-						for (const child of children) node.insertBefore(child);
-						node.remove();
-					}
-				});
-				setRubyEdit(null);
-			}
-		};
-		const timer = setTimeout(() => {
-			document.addEventListener("mousedown", handleClickOutside);
-		}, 0);
-		return () => {
-			clearTimeout(timer);
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [editor, isRubyEditing]);
-	useEffect(() => {
-		if (!rubyEdit || !rubyEditorRef.current) return;
-		const positionEditor = () => {
-			const editorEl = rubyEditorRef.current;
-			if (!editorEl) return;
-			applyThemeVars(editorEl);
-			const rubyDom = editor.getElementByKey(rubyEdit.nodeKey);
-			if (!rubyDom) return;
-			const rect = rubyDom.getBoundingClientRect();
-			const containerRect = portalContainer === document.body ? void 0 : portalContainer.getBoundingClientRect();
-			const oX = containerRect?.left ?? 0;
-			const oY = containerRect?.top ?? 0;
-			const availW = containerRect?.width ?? window.innerWidth;
-			const editorWidth = editorEl.offsetWidth;
-			const rawLeft = rect.left - oX + rect.width / 2 - editorWidth / 2;
-			const clampedLeft = Math.max(8, Math.min(rawLeft, availW - editorWidth - 8));
-			editorEl.style.top = `${rect.bottom - oY + 8}px`;
-			editorEl.style.left = `${clampedLeft}px`;
-		};
-		requestAnimationFrame(positionEditor);
-		requestAnimationFrame(() => {
-			rubyInputRef.current?.focus();
-		});
-	}, [
-		applyThemeVars,
-		editor,
-		rubyEdit
-	]);
-	if (!visible && !rubyEdit) return null;
-	const toolbarClassName = portalClassName ? `${toolbar} ${portalClassName}` : toolbar;
-	const rubyEditorClassName = portalClassName ? `${rubyEditor} ${portalClassName}` : rubyEditor;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [visible && !rubyEdit && createPortal(/* @__PURE__ */ jsxs("div", {
-		"aria-label": "Text formatting",
-		className: toolbarClassName,
-		"data-theme": portalClassName ? portalTheme : void 0,
-		ref: toolbarRef,
-		role: "toolbar",
-		style: {
-			position: "fixed",
-			zIndex: 50
-		},
-		children: [
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isBold,
-				ariaLabel: "Bold",
-				onClick: () => handleFormat("bold"),
-				children: /* @__PURE__ */ jsx(Bold, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isItalic,
-				ariaLabel: "Italic",
-				onClick: () => handleFormat("italic"),
-				children: /* @__PURE__ */ jsx(Italic, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isUnderline,
-				ariaLabel: "Underline",
-				onClick: () => handleFormat("underline"),
-				children: /* @__PURE__ */ jsx(Underline, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isStrikethrough,
-				ariaLabel: "Strikethrough",
-				onClick: () => handleFormat("strikethrough"),
-				children: /* @__PURE__ */ jsx(Strikethrough, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isSuperscript,
-				ariaLabel: "Superscript",
-				onClick: () => handleFormat("superscript"),
-				children: /* @__PURE__ */ jsx(Superscript, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isSubscript,
-				ariaLabel: "Subscript",
-				onClick: () => handleFormat("subscript"),
-				children: /* @__PURE__ */ jsx(Subscript, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx("span", { className: "_1m6axz7f" }),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isCode,
-				ariaLabel: "Code",
-				onClick: () => handleFormat("code"),
-				children: /* @__PURE__ */ jsx(Code, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isHighlight,
-				ariaLabel: "Highlight",
-				onClick: () => handleFormat("highlight"),
-				children: /* @__PURE__ */ jsx(Highlighter, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isSpoiler,
-				ariaLabel: "Spoiler",
-				onClick: () => editor.update($toggleSpoilerSelection),
-				children: /* @__PURE__ */ jsx(EyeOff, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isLink,
-				ariaLabel: "Link",
-				onClick: handleLink,
-				children: /* @__PURE__ */ jsx(Link, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
-				})
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				active: state.isRuby,
-				ariaLabel: "Ruby annotation",
-				onClick: handleRuby,
-				children: /* @__PURE__ */ jsx(Languages, {
-					size: ICON_SIZE,
-					strokeWidth: ICON_STROKE
+		const color = value === "inherit" ? null : value;
+		patchSelection({ color }, color);
+	}, [patchSelection]);
+	const handleBackgroundColor = useCallback((value) => {
+		patchSelection({ "background-color": value === "inherit" ? null : value });
+	}, [patchSelection]);
+	if (!shown) return null;
+	const toolbarClassName = [
+		toolbar,
+		mode.kind === "link" && "_1m6axz72",
+		mode.kind === "ruby" && "_1m6axz73",
+		portalClassName
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(TooltipProvider, {
+		delay: 400,
+		children: [/* @__PURE__ */ jsx(TooltipRoot, {
+			disableHoverablePopup: true,
+			handle,
+			children: ((props) => props.payload ? /* @__PURE__ */ jsx(TooltipContent, {
+				"data-slot": "toolbar-tooltip",
+				shortcut: props.payload.shortcut,
+				children: props.payload.label
+			}) : null)
+		}), createPortal(/* @__PURE__ */ jsxs("div", {
+			"aria-label": mode.kind === "format" ? "Text formatting" : void 0,
+			className: toolbarClassName,
+			"data-theme": portalClassName ? portalTheme : void 0,
+			ref: toolbarRef,
+			role: mode.kind === "format" ? "toolbar" : "group",
+			style: {
+				position: "fixed",
+				zIndex: 50
+			},
+			onFocus: (e) => syncRovingTabIndex(e.currentTarget, e.target),
+			onKeyDown: (e) => {
+				if (mode.kind !== "format") return;
+				if (moveToolbarFocus(e)) return;
+				if (e.key === "Escape" || e.key === "Tab") {
+					e.preventDefault();
+					editor.focus();
+				}
+			},
+			children: [
+				mode.kind === "format" && /* @__PURE__ */ jsx(FormatBar, {
+					actions,
+					handle,
+					state,
+					onBackgroundColor: handleBackgroundColor,
+					onClearFormatting: () => editor.update($clearFormatting),
+					onColor: handleColor,
+					onFormat: handleFormat,
+					onLink: () => openLink("toolbar"),
+					onRuby: () => openRuby("toolbar"),
+					onSpoiler: () => editor.update($toggleSpoilerSelection)
+				}),
+				mode.kind === "link" && /* @__PURE__ */ jsx(InlineInputBar, {
+					handle,
+					icon: /* @__PURE__ */ jsx(Link, { ...ICON }),
+					label: "URL",
+					placeholder: "Paste or type a link",
+					type: "url",
+					value: mode.draft,
+					secondary: mode.existing ? {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Unlink, { ...ICON }),
+						label: "Remove link",
+						onClick: modes.removeLink
+					} : {
+						icon: /* @__PURE__ */ jsx(X, { ...ICON }),
+						label: "Back to formatting",
+						shortcut: "Escape",
+						onClick: () => modes.cancel(true)
+					},
+					onCancel: () => modes.cancel(true),
+					onChange: modes.setLinkDraft,
+					onSubmit: () => modes.saveLink()
+				}),
+				mode.kind === "ruby" && /* @__PURE__ */ jsx(InlineInputBar, {
+					handle,
+					icon: /* @__PURE__ */ jsx(Languages, { ...ICON }),
+					label: "Reading",
+					placeholder: "Reading",
+					value: mode.draft.reading,
+					secondary: {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Trash2, { ...ICON }),
+						label: "Remove ruby",
+						onClick: modes.removeRuby
+					},
+					onCancel: modes.cancelRuby,
+					onChange: modes.setRubyDraft,
+					onSubmit: () => modes.saveRuby()
 				})
-			}),
-			/* @__PURE__ */ jsx("span", { className: "_1m6axz7f" }),
-			/* @__PURE__ */ jsx(ColorPicker, {
-				currentColor: state.fontColor || "inherit",
-				onSelect: handleColor
-			}),
-			actions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "_1m6axz7f" }), actions] })
-		]
-	}), portalContainer), rubyEdit && createPortal(/* @__PURE__ */ jsxs("div", {
-		className: rubyEditorClassName,
-		"data-theme": portalClassName ? portalTheme : void 0,
-		ref: rubyEditorRef,
-		style: {
-			position: "fixed",
-			zIndex: 51
-		},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "_1m6axz76",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "_1m6axz77",
-					children: rubyEdit.reading || "\xA0"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "_1m6axz78",
-					children: rubyEdit.baseText
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "_1m6axz79",
-				children: [
-					/* @__PURE__ */ jsx("input", {
-						className: "_1m6axz7a",
-						placeholder: "读音",
-						ref: rubyInputRef,
-						value: rubyEdit.reading,
-						onChange: (e) => setRubyEdit((prev) => prev ? {
-							...prev,
-							reading: e.target.value
-						} : null),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") {
-								e.preventDefault();
-								handleRubyConfirm();
-							}
-							if (e.key === "Escape") {
-								e.preventDefault();
-								handleRubyCancel();
-							}
-						}
-					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Confirm",
-						className: `_1m6axz7b _1m6axz7c`,
-						type: "button",
-						onMouseDown: (e) => {
-							e.preventDefault();
-							handleRubyConfirm();
-						},
-						children: /* @__PURE__ */ jsx(Check, {
-							size: 14,
-							strokeWidth: ICON_STROKE
-						})
-					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Cancel",
-						className: "_1m6axz7b",
-						type: "button",
-						onMouseDown: (e) => {
-							e.preventDefault();
-							handleRubyCancel();
-						},
-						children: /* @__PURE__ */ jsx(X, {
-							size: 14,
-							strokeWidth: ICON_STROKE
-						})
-					}),
-					/* @__PURE__ */ jsx("span", { className: "_1m6axz7f" }),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Delete ruby",
-						className: `_1m6axz7b _1m6axz7d`,
-						type: "button",
-						onMouseDown: (e) => {
-							e.preventDefault();
-							handleRubyDelete();
-						},
-						children: /* @__PURE__ */ jsx(Trash2, {
-							size: 14,
-							strokeWidth: ICON_STROKE
-						})
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "_1m6axz7e",
-				children: "Enter 保存 / Esc 取消"
-			})
-		]
-	}), portalContainer)] });
+			]
+		}), portalContainer)]
+	});
 }
 //#endregion
 export { FloatingToolbarPlugin };