@haklex/rich-plugin-toolbar 0.57.0 → 0.59.0

package/dist/index.mjs

@@ -1,13 +1,15 @@
 import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
-import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
 import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
+import { TURN_INTO_COMMAND_IDS, getCommandMeta, normalizeCommandItems } from "@haklex/rich-editor/command-registry";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Popover, PopoverPanel, PopoverTrigger, TextInput, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Ellipsis, EyeOff, Heading1, Heading2, Heading3, Highlighter, Italic, List, ListChecks, ListOrdered, Pilcrow, Redo, Strikethrough, Underline, Undo } from "lucide-react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Ellipsis, EyeOff, Highlighter, Italic, Plus, Redo, Search, Strikethrough, Underline, Undo } from "lucide-react";
 import { $selectionTouchesSpoiler, $toggleSpoilerSelection, collectCommandItems } from "@haklex/rich-editor/commands";
+import { SlashCommandList, filterSlashItems, getDefaultSlashItems, slashCommandItemId } from "@haklex/rich-plugin-slash-menu";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { createElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { $findMatchingParent } from "@lexical/utils";
 //#region src/actions.ts
 /**
@@ -27,7 +29,10 @@ function getBlockType(anchorNode) {
 		if (listType === "check") return "check";
 		return "other";
 	}
-	if (anchorNode.getType() === "paragraph") return "paragraph";
+	if ($isQuoteNode(anchorNode)) return "quote";
+	const type = anchorNode.getType();
+	if (type === "paragraph") return "paragraph";
+	if (type === "code") return "code";
 	return "other";
 }
 /**
@@ -54,9 +59,29 @@ function applyBlockType(editor, type) {
 			$setBlocksType(selection, () => $createParagraphNode());
 			return;
 		}
-		if (type === "h1" || type === "h2" || type === "h3") $setBlocksType(selection, () => $createHeadingNode(type));
+		if (type === "h1" || type === "h2" || type === "h3") {
+			$setBlocksType(selection, () => $createHeadingNode(type));
+			return;
+		}
+		if (type === "quote") {
+			$setBlocksType(selection, () => $createQuoteNode());
+			return;
+		}
+		if (type === "code") $replaceWithCodeBlock(editor, selection);
 	});
 }
+function getCodeBlockKlass(editor) {
+	return editor._nodes.get("code-block")?.klass ?? null;
+}
+function $replaceWithCodeBlock(editor, selection) {
+	const CodeBlock = getCodeBlockKlass(editor);
+	if (!CodeBlock) return;
+	const blocks = [...new Set(selection.getNodes().concat(selection.anchor.getNode()).map((node) => node.getTopLevelElement()).filter((node) => node !== null))];
+	if (blocks.length === 0) return;
+	const code = blocks.map((block) => block.getTextContent()).join("\n");
+	blocks[0].replace(new CodeBlock(code, "text"));
+	for (const block of blocks.slice(1)) block.remove();
+}
 /**
 * Patch the `font-family` style on the current selection.
 * Passing an empty string clears the override and inherits the editor default.
@@ -106,16 +131,8 @@ function getFontLabel(fontFamily) {
 	for (const def of FONT_FAMILIES) if (def.value && fontFamily.startsWith(def.value.split(",")[0])) return def.label;
 	return "默认";
 }
-var BLOCK_TYPE_LABELS = {
-	paragraph: "Text",
-	h1: "Heading 1",
-	h2: "Heading 2",
-	h3: "Heading 3",
-	bullet: "Bulleted List",
-	number: "Numbered List",
-	check: "To-do List",
-	other: "Other"
-};
+var TURN_INTO_BLOCK_TYPES = TURN_INTO_COMMAND_IDS;
+var BLOCK_TYPE_LABELS = Object.fromEntries([...TURN_INTO_BLOCK_TYPES.map((type) => [type, getCommandMeta(type).title]), ["other", "Other"]]);
 //#endregion
 //#region src/styles.css.ts
 var toolbarContainer = "_1e1ersc0";
@@ -125,7 +142,9 @@ var toolbarButtonActive = "_1e1ersc3";
 var toolbarDropdownTrigger = "_1e1ersc4";
 var toolbarDropdownTriggerChevron = "_1e1ersc5";
 var toolbarSeparator = "_1e1ersc6";
-var toolbarDropdownItemActive = "_1e1ersc7";
+var insertSearch = "_1e1ersc7";
+var insertSearchIcon = "_1e1ersc8";
+var insertSearchInput = "_1e1ersc9";
 //#endregion
 //#region src/ToolbarButton.tsx
 function ToolbarButton({ icon, title, shortcut, active, disabled, onClick, tooltipHandle }) {
@@ -135,10 +154,8 @@ function ToolbarButton({ icon, title, shortcut, active, disabled, onClick, toolt
 		className: `${toolbarButton}${active ? ` ${toolbarButtonActive}` : ""}`,
 		disabled,
 		type: "button",
-		onMouseDown: (e) => {
-			e.preventDefault();
-			onClick();
-		}
+		onClick,
+		onMouseDown: (e) => e.preventDefault()
 	});
 	if (tooltipHandle) return /* @__PURE__ */ jsx(TooltipTrigger, {
 		handle: tooltipHandle,
@@ -152,13 +169,11 @@ function ToolbarButton({ icon, title, shortcut, active, disabled, onClick, toolt
 	return /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: button,
 		children: icon
-	}), /* @__PURE__ */ jsxs(TooltipContent, {
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		shortcut,
 		side: "bottom",
 		sideOffset: 4,
-		children: [title, shortcut && /* @__PURE__ */ jsx("span", {
-			className: "_1e1ersc8",
-			children: shortcut
-		})]
+		children: title
 	})] });
 }
 //#endregion
@@ -171,24 +186,21 @@ function ToolbarDropdown({ label, title, items, triggerWidth, tooltipHandle }) {
 	});
 	const triggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, /* @__PURE__ */ jsx("span", {
 		className: toolbarDropdownTriggerChevron,
-		children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+		children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
 	})] });
+	const activeLabel = items.find((item) => item.active)?.label ?? null;
 	const menu = /* @__PURE__ */ jsx(DropdownMenuContent, {
 		sideOffset: 4,
-		children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			className: item.active ? toolbarDropdownItemActive : void 0,
-			style: item.style,
-			onClick: item.onSelect,
-			children: [item.icon && /* @__PURE__ */ jsx("span", {
-				style: {
-					marginRight: 8,
-					display: "inline-flex",
-					transform: "scale(0.8)",
-					transformOrigin: "left center"
-				},
-				children: item.icon
-			}), item.label]
-		}, item.label))
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: activeLabel,
+			children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				closeOnClick: true,
+				style: item.style,
+				value: item.label,
+				onClick: item.onSelect,
+				children: [item.icon, item.label]
+			}, item.label))
+		})
 	});
 	if (tooltipHandle) return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		handle: tooltipHandle,
@@ -206,10 +218,359 @@ function ToolbarDropdown({ label, title, items, triggerWidth, tooltipHandle }) {
 	})] }), menu] });
 }
 //#endregion
+//#region src/block-types.tsx
+function blockTypeItems(editor, active) {
+	const hasCodeBlock = getCodeBlockKlass(editor) !== null;
+	return TURN_INTO_BLOCK_TYPES.filter((type) => type !== "code" || hasCodeBlock || active === "code").map((type) => {
+		const meta = getCommandMeta(type);
+		return {
+			label: meta.title,
+			icon: createElement(meta.icon, { size: 16 }),
+			active: active === type,
+			onSelect: () => applyBlockType(editor, type)
+		};
+	});
+}
+//#endregion
 //#region src/ToolbarSeparator.tsx
 function ToolbarSeparator() {
 	return /* @__PURE__ */ jsx("div", { className: toolbarSeparator });
 }
+var SEPARATOR_WIDTH = 13;
+function separatorEntry(key) {
+	return {
+		key,
+		node: /* @__PURE__ */ jsx(ToolbarSeparator, {}, key),
+		separator: true,
+		width: SEPARATOR_WIDTH
+	};
+}
+function buttonEntry(spec, handle) {
+	return {
+		key: spec.key,
+		width: 28,
+		menu: { items: [spec] },
+		node: /* @__PURE__ */ jsx(ToolbarButton, {
+			active: spec.active,
+			disabled: spec.disabled,
+			icon: spec.icon,
+			shortcut: spec.shortcut,
+			title: spec.label,
+			tooltipHandle: handle,
+			onClick: spec.onSelect
+		}, spec.key)
+	};
+}
+function dropdownEntry(key, options, handle) {
+	return {
+		key,
+		width: options.width,
+		menu: {
+			label: options.title,
+			items: options.items.map((item) => ({
+				...item,
+				onSelect: item.onSelect
+			}))
+		},
+		node: /* @__PURE__ */ jsx(ToolbarDropdown, {
+			items: options.items,
+			label: options.label,
+			title: options.title,
+			tooltipHandle: handle,
+			triggerWidth: options.width
+		}, key)
+	};
+}
+var icon = (Icon) => /* @__PURE__ */ jsx(Icon, {
+	size: 16,
+	strokeWidth: 2
+});
+function formattingButtons(editor, state) {
+	const text = (format) => () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+	const align = (format) => () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format);
+	return [
+		[{
+			key: "undo",
+			label: "Undo",
+			icon: icon(Undo),
+			shortcut: "Mod+Z",
+			disabled: !state.canUndo,
+			onSelect: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
+		}, {
+			key: "redo",
+			label: "Redo",
+			icon: icon(Redo),
+			shortcut: "Mod+Shift+Z",
+			disabled: !state.canRedo,
+			onSelect: () => editor.dispatchCommand(REDO_COMMAND, void 0)
+		}],
+		[
+			{
+				key: "bold",
+				label: "Bold",
+				icon: icon(Bold),
+				shortcut: "Mod+B",
+				active: state.isBold,
+				onSelect: text("bold")
+			},
+			{
+				key: "italic",
+				label: "Italic",
+				icon: icon(Italic),
+				shortcut: "Mod+I",
+				active: state.isItalic,
+				onSelect: text("italic")
+			},
+			{
+				key: "underline",
+				label: "Underline",
+				icon: icon(Underline),
+				shortcut: "Mod+U",
+				active: state.isUnderline,
+				onSelect: text("underline")
+			},
+			{
+				key: "strikethrough",
+				label: "Strikethrough",
+				icon: icon(Strikethrough),
+				active: state.isStrikethrough,
+				onSelect: text("strikethrough")
+			},
+			{
+				key: "code",
+				label: "Inline code",
+				icon: icon(Code),
+				active: state.isCode,
+				onSelect: text("code")
+			}
+		],
+		[{
+			key: "highlight",
+			label: "Highlight",
+			icon: icon(Highlighter),
+			active: state.isHighlight,
+			onSelect: text("highlight")
+		}, {
+			key: "spoiler",
+			label: "Spoiler",
+			icon: icon(EyeOff),
+			active: state.isSpoiler,
+			onSelect: () => editor.update($toggleSpoilerSelection)
+		}],
+		[
+			{
+				key: "bullet",
+				label: getCommandMeta("bullet").title,
+				icon: icon(getCommandMeta("bullet").icon),
+				active: state.blockType === "bullet",
+				onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
+			},
+			{
+				key: "number",
+				label: getCommandMeta("number").title,
+				icon: icon(getCommandMeta("number").icon),
+				active: state.blockType === "number",
+				onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
+			},
+			{
+				key: "check",
+				label: getCommandMeta("check").title,
+				icon: icon(getCommandMeta("check").icon),
+				active: state.blockType === "check",
+				onSelect: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0)
+			}
+		],
+		[
+			{
+				key: "align-left",
+				label: "Align left",
+				icon: icon(AlignLeft),
+				active: state.elementFormat === "left" || state.elementFormat === "",
+				onSelect: align("left")
+			},
+			{
+				key: "align-center",
+				label: "Align center",
+				icon: icon(AlignCenter),
+				active: state.elementFormat === "center",
+				onSelect: align("center")
+			},
+			{
+				key: "align-right",
+				label: "Align right",
+				icon: icon(AlignRight),
+				active: state.elementFormat === "right",
+				onSelect: align("right")
+			},
+			{
+				key: "align-justify",
+				label: "Justify",
+				icon: icon(AlignJustify),
+				active: state.elementFormat === "justify",
+				onSelect: align("justify")
+			}
+		]
+	];
+}
+//#endregion
+//#region src/InsertMenu.tsx
+var TITLE = "Insert";
+function InsertMenu({ handle, items, onSelect }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [highlighted, setHighlighted] = useState(0);
+	const listId = useId();
+	const filtered = useMemo(() => filterSlashItems(query, items), [query, items]);
+	const activeIndex = filtered.length === 0 ? null : Math.min(highlighted, filtered.length - 1);
+	useEffect(() => {
+		if (activeIndex === null) return;
+		filtered[activeIndex]?.ref?.current?.scrollIntoView?.({ block: "nearest" });
+	}, [activeIndex, filtered]);
+	const onOpenChange = (next) => {
+		setOpen(next);
+		if (!next) {
+			setQuery("");
+			setHighlighted(0);
+		}
+	};
+	const select = (item) => {
+		onOpenChange(false);
+		onSelect(item);
+	};
+	const onKeyDown = (event) => {
+		if (filtered.length === 0) return;
+		const current = activeIndex ?? 0;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setHighlighted((current + 1) % filtered.length);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setHighlighted((current - 1 + filtered.length) % filtered.length);
+		} else if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			select(filtered[current]);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [handle ? /* @__PURE__ */ jsx(TooltipTrigger, {
+			handle,
+			payload: { title: TITLE },
+			render: /* @__PURE__ */ jsx(PopoverTrigger, {
+				"aria-label": TITLE,
+				className: toolbarButton,
+				render: /* @__PURE__ */ jsx("button", { type: "button" })
+			}),
+			children: /* @__PURE__ */ jsx(Plus, { size: 16 })
+		}) : /* @__PURE__ */ jsx(PopoverTrigger, {
+			"aria-label": TITLE,
+			className: toolbarButton,
+			render: /* @__PURE__ */ jsx("button", { type: "button" }),
+			children: /* @__PURE__ */ jsx(Plus, { size: 16 })
+		}), /* @__PURE__ */ jsxs(PopoverPanel, {
+			flush: true,
+			align: "start",
+			side: "bottom",
+			size: "md",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: insertSearch,
+				children: [/* @__PURE__ */ jsx(Search, {
+					"aria-hidden": true,
+					className: insertSearchIcon,
+					size: 14
+				}), /* @__PURE__ */ jsx(TextInput, {
+					"aria-controls": listId,
+					"aria-label": "Search blocks",
+					className: insertSearchInput,
+					placeholder: "Search blocks",
+					type: "search",
+					value: query,
+					"aria-activedescendant": activeIndex === null ? void 0 : slashCommandItemId(listId, activeIndex),
+					onKeyDown,
+					onChange: (event) => {
+						setQuery(event.target.value);
+						setHighlighted(0);
+					}
+				})]
+			}), /* @__PURE__ */ jsx(SlashCommandList, {
+				id: listId,
+				items: filtered,
+				query,
+				selectedIndex: activeIndex,
+				variant: "embedded",
+				onHighlight: setHighlighted,
+				onSelect: select
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/overflow.ts
+function runWidth(entries, count, gap) {
+	let total = 0;
+	for (let i = 0; i < count; i++) total += entries[i].width + (i > 0 ? gap : 0);
+	return total;
+}
+function fitCount(entries, { available, gap, reserve }) {
+	if (available === null || runWidth(entries, entries.length, gap) <= available) return entries.length;
+	let count = 0;
+	while (count < entries.length && runWidth(entries, count + 1, gap) + gap + reserve <= available) count++;
+	while (count > 0 && entries[count - 1].separator) count--;
+	return count;
+}
+//#endregion
+//#region src/ToolbarOverflowMenu.tsx
+function ToolbarMenuButton({ children, handle, title }) {
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		handle,
+		payload: { title },
+		render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			"aria-label": title,
+			className: toolbarButton,
+			render: /* @__PURE__ */ jsx("button", { type: "button" })
+		}),
+		children
+	});
+}
+function ToolbarMenuItems({ items }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => item.active === void 0 ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		disabled: item.disabled,
+		shortcut: item.shortcut,
+		onClick: item.onSelect,
+		children: [item.icon, item.label]
+	}, item.label) : /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+		closeOnClick: true,
+		checked: item.active,
+		disabled: item.disabled,
+		onClick: item.onSelect,
+		children: [item.icon, item.label]
+	}, item.label)) });
+}
+function ToolbarOverflowMenu({ entries, handle, icon }) {
+	const sections = entries.filter((entry) => entry.separator || entry.menu);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		modal: false,
+		children: [/* @__PURE__ */ jsx(ToolbarMenuButton, {
+			handle,
+			title: "More tools",
+			children: icon
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			positionMethod: "fixed",
+			sideOffset: 4,
+			children: sections.map((entry, index) => {
+				if (entry.separator) {
+					const prev = sections[index - 1];
+					return prev && !prev.separator && index < sections.length - 1 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, entry.key) : null;
+				}
+				const menu = entry.menu;
+				if (!menu.label) return /* @__PURE__ */ jsx(ToolbarMenuItems, { items: menu.items }, entry.key);
+				return /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: menu.label }), /* @__PURE__ */ jsx(ToolbarMenuItems, { items: menu.items })] }, entry.key);
+			})
+		})]
+	});
+}
 //#endregion
 //#region src/use-toolbar-state.ts
 var INITIAL_TOOLBAR_STATE = {
@@ -300,334 +661,125 @@ function useToolbarState() {
 }
 //#endregion
 //#region src/ToolbarPlugin.tsx
-var ICON_SIZE = 15;
-var ICON_STROKE = 2;
 var DEFAULT_MAX_VISIBLE_INSERT_ITEMS = 5;
+function useAvailableWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width];
+}
 function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_INSERT_ITEMS, insertItemOrder }) {
 	const [editor] = useLexicalComposerContext();
 	const state = useToolbarState();
-	const [tooltipHandle] = useState(() => createTooltipHandle());
-	const toolbarItems = useMemo(() => {
-		const items = collectCommandItems(editor).filter((item) => item.placement?.includes("toolbar") && item.group === "insert");
+	const [handle] = useState(() => createTooltipHandle());
+	const [rowRef, available] = useAvailableWidth();
+	const insertItems = useMemo(() => {
+		const items = normalizeCommandItems(collectCommandItems(editor).filter((item) => item.placement?.includes("toolbar") && item.group === "insert"));
 		if (!insertItemOrder || insertItemOrder.length === 0) return items;
+		const order = insertItemOrder.map((title) => getCommandMeta(title)?.title ?? title);
 		return items.sort((a, b) => {
-			const ai = insertItemOrder.indexOf(a.title);
-			const bi = insertItemOrder.indexOf(b.title);
+			const ai = order.indexOf(a.title);
+			const bi = order.indexOf(b.title);
 			return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
 		});
 	}, [editor, insertItemOrder]);
-	const fontFamilyItems = useMemo(() => FONT_FAMILIES.map((def) => ({
-		label: def.label,
-		active: state.fontFamily === def.value,
-		style: def.value ? { fontFamily: def.value } : void 0,
-		onSelect: () => applyFontFamily(editor, def.value)
-	})), [editor, state.fontFamily]);
-	const headingItems = useMemo(() => [
-		{
-			label: "Text",
-			icon: /* @__PURE__ */ jsx(Pilcrow, {
-				size: ICON_SIZE,
-				strokeWidth: ICON_STROKE
-			}),
-			active: state.blockType === "paragraph",
-			onSelect: () => {
-				editor.update(() => {
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createParagraphNode());
-				});
-			}
-		},
-		{
-			label: "Heading 1",
-			icon: /* @__PURE__ */ jsx(Heading1, {
-				size: ICON_SIZE,
-				strokeWidth: ICON_STROKE
-			}),
-			active: state.blockType === "h1",
-			onSelect: () => {
-				editor.update(() => {
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h1"));
-				});
-			}
-		},
-		{
-			label: "Heading 2",
-			icon: /* @__PURE__ */ jsx(Heading2, {
-				size: ICON_SIZE,
-				strokeWidth: ICON_STROKE
-			}),
-			active: state.blockType === "h2",
-			onSelect: () => {
-				editor.update(() => {
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h2"));
-				});
-			}
-		},
-		{
-			label: "Heading 3",
-			icon: /* @__PURE__ */ jsx(Heading3, {
-				size: ICON_SIZE,
-				strokeWidth: ICON_STROKE
-			}),
-			active: state.blockType === "h3",
-			onSelect: () => {
-				editor.update(() => {
-					const selection = $getSelection();
-					if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h3"));
-				});
-			}
+	const slashItems = useMemo(() => getDefaultSlashItems(editor), [editor]);
+	const entries = useMemo(() => {
+		const list = [
+			dropdownEntry("font", {
+				title: "Font family",
+				label: getFontLabel(state.fontFamily),
+				width: 76,
+				items: FONT_FAMILIES.map((def) => ({
+					label: def.label,
+					active: state.fontFamily === def.value,
+					style: def.value ? { fontFamily: def.value } : void 0,
+					onSelect: () => applyFontFamily(editor, def.value)
+				}))
+			}, handle),
+			separatorEntry("sep-font"),
+			dropdownEntry("block", {
+				title: "Block type",
+				label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
+				width: 112,
+				items: blockTypeItems(editor, state.blockType)
+			}, handle)
+		];
+		for (const [index, group] of formattingButtons(editor, state).entries()) {
+			list.push(separatorEntry(`sep-${index}`));
+			for (const spec of group) list.push(buttonEntry(spec, handle));
 		}
-	], [editor, state.blockType]);
-	const containerClassName = className ? `${toolbarContainer} ${className}` : toolbarContainer;
-	const h = tooltipHandle;
+		list.push(separatorEntry("sep-insert"));
+		for (const item of insertItems.slice(0, maxVisibleInsertItems)) list.push(buttonEntry({
+			key: `insert-${item.title}`,
+			label: item.title,
+			icon: item.icon,
+			shortcut: item.shortcut,
+			onSelect: () => item.onSelect(editor, "")
+		}, handle));
+		const rest = insertItems.slice(maxVisibleInsertItems).map((item) => ({
+			label: item.title,
+			icon: item.icon,
+			shortcut: item.shortcut,
+			onSelect: () => item.onSelect(editor, "")
+		}));
+		list.push({
+			key: "insert-menu",
+			width: 28,
+			menu: rest.length > 0 ? {
+				label: "Insert",
+				items: rest
+			} : void 0,
+			node: /* @__PURE__ */ jsx(InsertMenu, {
+				handle,
+				items: slashItems,
+				onSelect: (item) => item.onSelect(editor, "")
+			}, "insert-menu")
+		});
+		return list;
+	}, [
+		editor,
+		state,
+		handle,
+		insertItems,
+		maxVisibleInsertItems,
+		slashItems
+	]);
+	const visibleCount = fitCount(entries, {
+		available,
+		gap: 2,
+		reserve: 28
+	});
+	const hidden = entries.slice(visibleCount);
 	return /* @__PURE__ */ jsxs(TooltipProvider, {
 		delay: 300,
 		children: [/* @__PURE__ */ jsx(TooltipRoot, {
 			disableHoverablePopup: true,
-			handle: tooltipHandle,
-			children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsxs(TooltipContent, {
+			handle,
+			children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsx(TooltipContent, {
+				shortcut: props.payload.shortcut,
 				side: "bottom",
 				sideOffset: 4,
-				children: [props.payload.title, props.payload.shortcut && /* @__PURE__ */ jsx("span", {
-					className: "_1e1ersc8",
-					children: props.payload.shortcut
-				})]
+				children: props.payload.title
 			}) : null)
 		}), /* @__PURE__ */ jsx("div", {
 			"aria-label": "Editor toolbar",
-			className: containerClassName,
+			className: className ? `${toolbarContainer} ${className}` : toolbarContainer,
 			role: "toolbar",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: toolbarRow,
-				children: [
-					/* @__PURE__ */ jsx(ToolbarDropdown, {
-						items: fontFamilyItems,
-						label: getFontLabel(state.fontFamily),
-						title: "Font family",
-						tooltipHandle: h,
-						triggerWidth: 76
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarDropdown, {
-						items: headingItems,
-						label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
-						title: "Block type",
-						tooltipHandle: h,
-						triggerWidth: 120
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						disabled: !state.canUndo,
-						icon: /* @__PURE__ */ jsx(Undo, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						shortcut: "Ctrl+Z",
-						title: "Undo",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						disabled: !state.canRedo,
-						icon: /* @__PURE__ */ jsx(Redo, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						shortcut: "Ctrl+Y",
-						title: "Redo",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0)
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isBold,
-						icon: /* @__PURE__ */ jsx(Bold, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						shortcut: "Ctrl+B",
-						title: "Bold",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isItalic,
-						icon: /* @__PURE__ */ jsx(Italic, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						shortcut: "Ctrl+I",
-						title: "Italic",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isUnderline,
-						icon: /* @__PURE__ */ jsx(Underline, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						shortcut: "Ctrl+U",
-						title: "Underline",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isStrikethrough,
-						icon: /* @__PURE__ */ jsx(Strikethrough, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Strikethrough",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isCode,
-						icon: /* @__PURE__ */ jsx(Code, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Inline Code",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isHighlight,
-						icon: /* @__PURE__ */ jsx(Highlighter, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Highlight",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.isSpoiler,
-						icon: /* @__PURE__ */ jsx(EyeOff, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Spoiler",
-						tooltipHandle: h,
-						onClick: () => editor.update($toggleSpoilerSelection)
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.blockType === "bullet",
-						icon: /* @__PURE__ */ jsx(List, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Bulleted List",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.blockType === "number",
-						icon: /* @__PURE__ */ jsx(ListOrdered, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Numbered List",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.blockType === "check",
-						icon: /* @__PURE__ */ jsx(ListChecks, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Checklist",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0)
-					}),
-					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.elementFormat === "left" || state.elementFormat === "",
-						icon: /* @__PURE__ */ jsx(AlignLeft, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Align Left",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.elementFormat === "center",
-						icon: /* @__PURE__ */ jsx(AlignCenter, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Align Center",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.elementFormat === "right",
-						icon: /* @__PURE__ */ jsx(AlignRight, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Align Right",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right")
-					}),
-					/* @__PURE__ */ jsx(ToolbarButton, {
-						active: state.elementFormat === "justify",
-						icon: /* @__PURE__ */ jsx(AlignJustify, {
-							size: ICON_SIZE,
-							strokeWidth: ICON_STROKE
-						}),
-						title: "Justify",
-						tooltipHandle: h,
-						onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify")
-					}),
-					toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-						toolbarItems.slice(0, maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsx(ToolbarButton, {
-							icon: item.icon,
-							shortcut: item.shortcut,
-							title: item.title,
-							tooltipHandle: h,
-							onClick: () => item.onSelect(editor, "")
-						}, item.title)),
-						toolbarItems.length > maxVisibleInsertItems && /* @__PURE__ */ jsxs(DropdownMenu, {
-							modal: false,
-							children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-								handle: h,
-								payload: { title: "More" },
-								render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
-									className: "_1e1ersc2",
-									render: /* @__PURE__ */ jsx("button", { type: "button" })
-								}),
-								children: /* @__PURE__ */ jsx(Ellipsis, {
-									size: ICON_SIZE,
-									strokeWidth: ICON_STROKE
-								})
-							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
-								positionMethod: "fixed",
-								sideOffset: 4,
-								children: toolbarItems.slice(maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-									onClick: () => item.onSelect(editor, ""),
-									children: [item.icon && /* @__PURE__ */ jsx("span", {
-										style: {
-											marginRight: 8,
-											display: "inline-flex",
-											transform: "scale(0.8)",
-											transformOrigin: "left center"
-										},
-										children: item.icon
-									}), item.title]
-								}, item.title))
-							})]
-						})
-					] })
-				]
+				ref: rowRef,
+				children: [entries.slice(0, visibleCount).map((entry) => entry.node), hidden.length > 0 && /* @__PURE__ */ jsx(ToolbarOverflowMenu, {
+					entries: hidden,
+					handle,
+					icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 })
+				})]
 			})
 		})]
 	});