@questpie/admin 3.0.2 → 3.0.4

package/dist/client/components/fields/rich-text-editor/toolbar.mjs

@@ -1,6 +1,8 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { cn } from "../../../lib/utils.mjs";
 import { Button } from "../../ui/button.mjs";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "../../ui/select.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
 import { TableControls } from "./table-controls.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
@@ -36,13 +38,79 @@ const EDITOR_ICONS = {
 	alignLeft: "ph:text-align-left",
 	alignCenter: "ph:text-align-center",
 	alignRight: "ph:text-align-right",
-	alignJustify: "ph:text-align-justify"
+	alignJustify: "ph:text-align-justify",
+	blocks: "ph:list-plus",
+	formatting: "ph:text-aa",
+	insert: "ph:plus",
+	more: "ph:dots-three-vertical"
 };
+const HEADING_OPTIONS = [
+	{
+		value: "paragraph",
+		group: "text"
+	},
+	{
+		value: "1",
+		group: "heading"
+	},
+	{
+		value: "2",
+		group: "heading"
+	},
+	{
+		value: "3",
+		group: "heading"
+	},
+	{
+		value: "4",
+		group: "heading"
+	},
+	{
+		value: "5",
+		group: "heading"
+	},
+	{
+		value: "6",
+		group: "heading"
+	}
+];
+const ALIGNMENT_OPTIONS = [
+	{
+		value: "left",
+		icon: EDITOR_ICONS.alignLeft,
+		labelKey: "editor.alignLeft"
+	},
+	{
+		value: "center",
+		icon: EDITOR_ICONS.alignCenter,
+		labelKey: "editor.alignCenter"
+	},
+	{
+		value: "right",
+		icon: EDITOR_ICONS.alignRight,
+		labelKey: "editor.alignRight"
+	},
+	{
+		value: "justify",
+		icon: EDITOR_ICONS.alignJustify,
+		labelKey: "editor.alignJustify"
+	}
+];
+function getHeadingOptionLabel(value, t) {
+	if (value === "paragraph") return t("editor.paragraph");
+	return t("editor.heading", { level: value });
+}
+function getCurrentAlignment(editor) {
+	if (editor.isActive({ textAlign: "center" })) return "center";
+	if (editor.isActive({ textAlign: "right" })) return "right";
+	if (editor.isActive({ textAlign: "justify" })) return "justify";
+	return "left";
+}
 /**
 * Icon-based toolbar button with tooltip showing keyboard shortcuts
 */
 function ToolbarButton(t0) {
-	const $ = c(28);
+	const $ = c(30);
 	let active;
 	let children;
 	let className;
@@ -84,16 +152,18 @@ function ToolbarButton(t0) {
 	} else t1 = $[12];
 	const tooltipText = t1;
 	const iconSuffix = active ? "-fill" : "";
-	const buttonSize = iconName ? "icon-xs" : "xs";
-	let t2;
+	const buttonSize = iconName ? "icon-sm" : "xs";
+	const t2 = typeof active === "boolean" ? active : void 0;
+	let t3;
 	if ($[13] !== className) {
-		t2 = cn("text-muted-foreground hover:text-foreground hover:bg-transparent", "data-[active=true]:text-foreground data-[active=true]:bg-transparent", "aria-expanded:bg-transparent", className);
+		t3 = cn("item-surface text-muted-foreground hover:bg-surface-high hover:text-foreground motion-reduce:transition-none", "data-[active=true]:bg-surface-high data-[active=true]:text-foreground", "aria-expanded:bg-surface-high", className);
 		$[13] = className;
-		$[14] = t2;
-	} else t2 = $[14];
-	let t3;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
 	if ($[15] !== children || $[16] !== iconName || $[17] !== iconSuffix) {
-		t3 = iconName ? /* @__PURE__ */ jsx(Icon, {
+		t4 = iconName ? /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
 			icon: `${iconName}${iconSuffix}`,
 			width: 16,
 			height: 16
@@ -101,21 +171,24 @@ function ToolbarButton(t0) {
 		$[15] = children;
 		$[16] = iconName;
 		$[17] = iconSuffix;
-		$[18] = t3;
-	} else t3 = $[18];
-	let t4;
-	if ($[19] !== active || $[20] !== buttonSize || $[21] !== disabled || $[22] !== onClick || $[23] !== rest || $[24] !== t2 || $[25] !== t3 || $[26] !== tooltipText) {
-		t4 = /* @__PURE__ */ jsx(Button, {
+		$[18] = t4;
+	} else t4 = $[18];
+	let t5;
+	if ($[19] !== active || $[20] !== buttonSize || $[21] !== disabled || $[22] !== onClick || $[23] !== rest || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== title || $[28] !== tooltipText) {
+		t5 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: buttonSize,
+			"aria-label": title,
+			"aria-pressed": t2,
 			"data-active": active,
+			"data-rich-text-toolbar-button": "",
 			title: tooltipText,
 			disabled,
 			onClick,
-			className: t2,
+			className: t3,
 			...rest,
-			children: t3
+			children: t4
 		});
 		$[19] = active;
 		$[20] = buttonSize;
@@ -124,10 +197,12 @@ function ToolbarButton(t0) {
 		$[23] = rest;
 		$[24] = t2;
 		$[25] = t3;
-		$[26] = tooltipText;
-		$[27] = t4;
-	} else t4 = $[27];
-	return t4;
+		$[26] = t4;
+		$[27] = title;
+		$[28] = tooltipText;
+		$[29] = t5;
+	} else t5 = $[29];
+	return t5;
 }
 /**
 * Toolbar button group with divider
@@ -139,6 +214,7 @@ function ToolbarGroup(t0) {
 	if ($[0] !== children) {
 		t1 = /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-1",
+			role: "group",
 			children
 		});
 		$[0] = children;
@@ -146,17 +222,101 @@ function ToolbarGroup(t0) {
 	} else t1 = $[1];
 	return t1;
 }
+function ToolbarMenuItem(t0) {
+	const $ = c(17);
+	const { active, disabled, icon, label, onClick, shortcut } = t0;
+	const t1 = active ? "true" : void 0;
+	const t2 = active ? "bg-accent text-accent-foreground" : "";
+	let t3;
+	if ($[0] !== t2) {
+		t3 = cn("min-w-44", t2);
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== icon) {
+		t4 = /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			icon
+		});
+		$[2] = icon;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== label) {
+		t5 = /* @__PURE__ */ jsx("span", { children: label });
+		$[4] = label;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== active || $[7] !== shortcut) {
+		t6 = shortcut ? /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut }) : active ? /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			icon: "ph:check",
+			className: "ml-auto size-3.5"
+		}) : null;
+		$[6] = active;
+		$[7] = shortcut;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== disabled || $[10] !== onClick || $[11] !== t1 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			"aria-current": t1,
+			disabled,
+			onClick,
+			className: t3,
+			children: [
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[9] = disabled;
+		$[10] = onClick;
+		$[11] = t1;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+}
 /**
 * Main toolbar component with icon-based buttons
 */
 function RichTextToolbar(t0) {
-	const $ = c(107);
+	const $ = c(77);
 	const { editor, features, disabled, headingValue, onHeadingChange, onLinkClick, onImageClick, onTableClick, inTable } = t0;
 	const { t } = useTranslation();
 	const isEditable = !disabled;
 	let t1;
-	if ($[0] !== editor || $[1] !== features.history || $[2] !== isEditable || $[3] !== t) {
-		t1 = features.history && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+	if ($[0] !== editor) {
+		t1 = getCurrentAlignment(editor);
+		$[0] = editor;
+		$[1] = t1;
+	} else t1 = $[1];
+	const currentAlignment = t1;
+	let t2;
+	if ($[2] !== currentAlignment) {
+		t2 = ALIGNMENT_OPTIONS.find((option) => option.value === currentAlignment) ?? ALIGNMENT_OPTIONS[0];
+		$[2] = currentAlignment;
+		$[3] = t2;
+	} else t2 = $[3];
+	const currentAlignmentOption = t2;
+	const hasMoreFormatting = features.underline || features.strike || features.code;
+	const hasBlockMenu = features.bulletList || features.orderedList || features.blockquote || features.codeBlock || features.horizontalRule;
+	const hasInsertMenu = features.link || features.image || features.table;
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("editor.richTextToolbar");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== editor || $[7] !== features.history || $[8] !== isEditable || $[9] !== t) {
+		t4 = features.history && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
 			icon: EDITOR_ICONS.undo,
 			disabled: !isEditable || !editor.can().undo(),
 			title: t("editor.undo"),
@@ -169,59 +329,51 @@ function RichTextToolbar(t0) {
 			shortcut: "⌘⇧Z",
 			onClick: () => editor.chain().focus().redo().run()
 		})] });
-		$[0] = editor;
-		$[1] = features.history;
-		$[2] = isEditable;
-		$[3] = t;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== features.heading || $[6] !== headingValue || $[7] !== isEditable || $[8] !== onHeadingChange) {
-		t2 = features.heading && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs("select", {
-			className: "border-input bg-transparent h-6 border px-2 text-xs",
+		$[6] = editor;
+		$[7] = features.history;
+		$[8] = isEditable;
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== features.heading || $[12] !== headingValue || $[13] !== isEditable || $[14] !== onHeadingChange || $[15] !== t) {
+		t5 = features.heading && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(Select, {
 			value: headingValue,
-			onChange: (event) => onHeadingChange(event.target.value),
 			disabled: !isEditable,
-			children: [
-				/* @__PURE__ */ jsx("option", {
-					value: "paragraph",
-					children: "Paragraph"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "1",
-					children: "Heading 1"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "2",
-					children: "Heading 2"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "3",
-					children: "Heading 3"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "4",
-					children: "Heading 4"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "5",
-					children: "Heading 5"
-				}),
-				/* @__PURE__ */ jsx("option", {
-					value: "6",
-					children: "Heading 6"
-				})
-			]
+			onValueChange: (value) => {
+				if (typeof value === "string") onHeadingChange(value);
+			},
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				"aria-label": t("editor.blockType"),
+				className: "h-8 min-w-[136px] px-2.5 text-sm",
+				size: "sm",
+				children: /* @__PURE__ */ jsx(SelectValue, { children: HEADING_OPTIONS.find((option_1) => option_1.value === headingValue)?.value ? getHeadingOptionLabel(HEADING_OPTIONS.find((option_0) => option_0.value === headingValue)?.value ?? "paragraph", t) : t("editor.paragraph") })
+			}), /* @__PURE__ */ jsxs(SelectContent, {
+				align: "start",
+				className: "min-w-[136px]",
+				children: [
+					/* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: t("editor.textBlocks") }), /* @__PURE__ */ jsx(SelectItem, {
+						value: "paragraph",
+						children: t("editor.paragraph")
+					})] }),
+					/* @__PURE__ */ jsx(SelectSeparator, {}),
+					/* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: t("editor.headings") }), HEADING_OPTIONS.filter(_temp).map((option_3) => /* @__PURE__ */ jsx(SelectItem, {
+						value: option_3.value,
+						children: getHeadingOptionLabel(option_3.value, t)
+					}, option_3.value))] })
+				]
+			})]
 		}) });
-		$[5] = features.heading;
-		$[6] = headingValue;
-		$[7] = isEditable;
-		$[8] = onHeadingChange;
-		$[9] = t2;
-	} else t2 = $[9];
-	let t3;
-	if ($[10] !== editor || $[11] !== features.bold || $[12] !== isEditable || $[13] !== t) {
-		t3 = features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+		$[11] = features.heading;
+		$[12] = headingValue;
+		$[13] = isEditable;
+		$[14] = onHeadingChange;
+		$[15] = t;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== editor || $[18] !== features.bold || $[19] !== isEditable || $[20] !== t) {
+		t6 = features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
 			icon: EDITOR_ICONS.bold,
 			active: editor.isActive("bold"),
 			disabled: !isEditable,
@@ -229,15 +381,15 @@ function RichTextToolbar(t0) {
 			shortcut: "⌘B",
 			onClick: () => editor.chain().focus().toggleBold().run()
 		});
-		$[10] = editor;
-		$[11] = features.bold;
-		$[12] = isEditable;
-		$[13] = t;
-		$[14] = t3;
-	} else t3 = $[14];
-	let t4;
-	if ($[15] !== editor || $[16] !== features.italic || $[17] !== isEditable || $[18] !== t) {
-		t4 = features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+		$[17] = editor;
+		$[18] = features.bold;
+		$[19] = isEditable;
+		$[20] = t;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== editor || $[23] !== features.italic || $[24] !== isEditable || $[25] !== t) {
+		t7 = features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
 			icon: EDITOR_ICONS.italic,
 			active: editor.isActive("italic"),
 			disabled: !isEditable,
@@ -245,237 +397,210 @@ function RichTextToolbar(t0) {
 			shortcut: "⌘I",
 			onClick: () => editor.chain().focus().toggleItalic().run()
 		});
-		$[15] = editor;
-		$[16] = features.italic;
-		$[17] = isEditable;
-		$[18] = t;
-		$[19] = t4;
-	} else t4 = $[19];
-	let t5;
-	if ($[20] !== editor || $[21] !== features.underline || $[22] !== isEditable || $[23] !== t) {
-		t5 = features.underline && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.underline,
-			active: editor.isActive("underline"),
-			disabled: !isEditable,
-			title: t("editor.underline"),
-			shortcut: "⌘U",
-			onClick: () => editor.chain().focus().toggleUnderline().run()
-		});
-		$[20] = editor;
-		$[21] = features.underline;
-		$[22] = isEditable;
-		$[23] = t;
-		$[24] = t5;
-	} else t5 = $[24];
-	let t6;
-	if ($[25] !== editor || $[26] !== features.strike || $[27] !== isEditable || $[28] !== t) {
-		t6 = features.strike && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.strikethrough,
-			active: editor.isActive("strike"),
-			disabled: !isEditable,
-			title: t("editor.strikethrough"),
-			onClick: () => editor.chain().focus().toggleStrike().run()
-		});
-		$[25] = editor;
-		$[26] = features.strike;
-		$[27] = isEditable;
-		$[28] = t;
-		$[29] = t6;
-	} else t6 = $[29];
-	let t7;
-	if ($[30] !== editor || $[31] !== features.code || $[32] !== isEditable || $[33] !== t) {
-		t7 = features.code && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.code,
-			active: editor.isActive("code"),
-			disabled: !isEditable,
-			title: t("editor.code"),
-			shortcut: "⌘E",
-			onClick: () => editor.chain().focus().toggleCode().run()
-		});
-		$[30] = editor;
-		$[31] = features.code;
+		$[22] = editor;
+		$[23] = features.italic;
+		$[24] = isEditable;
+		$[25] = t;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== editor || $[28] !== features.code || $[29] !== features.strike || $[30] !== features.underline || $[31] !== hasMoreFormatting || $[32] !== isEditable || $[33] !== t) {
+		t8 = hasMoreFormatting && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.formatting,
+				active: editor.isActive("underline") || editor.isActive("strike") || editor.isActive("code"),
+				disabled: !isEditable,
+				title: t("editor.moreFormatting")
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-56",
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.formatting") }),
+				features.underline && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.underline,
+					active: editor.isActive("underline"),
+					disabled: !isEditable,
+					label: t("editor.underline"),
+					shortcut: "⌘U",
+					onClick: () => editor.chain().focus().toggleUnderline().run()
+				}),
+				features.strike && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.strikethrough,
+					active: editor.isActive("strike"),
+					disabled: !isEditable,
+					label: t("editor.strikethrough"),
+					onClick: () => editor.chain().focus().toggleStrike().run()
+				}),
+				features.code && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.code,
+					active: editor.isActive("code"),
+					disabled: !isEditable,
+					label: t("editor.code"),
+					shortcut: "⌘E",
+					onClick: () => editor.chain().focus().toggleCode().run()
+				})
+			]
+		})] });
+		$[27] = editor;
+		$[28] = features.code;
+		$[29] = features.strike;
+		$[30] = features.underline;
+		$[31] = hasMoreFormatting;
 		$[32] = isEditable;
 		$[33] = t;
-		$[34] = t7;
-	} else t7 = $[34];
-	let t8;
-	if ($[35] !== editor || $[36] !== features.codeBlock || $[37] !== isEditable || $[38] !== t) {
-		t8 = features.codeBlock && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.codeBlock,
-			active: editor.isActive("codeBlock"),
-			disabled: !isEditable,
-			title: t("editor.codeBlock"),
-			onClick: () => editor.chain().focus().toggleCodeBlock().run()
-		});
-		$[35] = editor;
-		$[36] = features.codeBlock;
-		$[37] = isEditable;
-		$[38] = t;
-		$[39] = t8;
-	} else t8 = $[39];
+		$[34] = t8;
+	} else t8 = $[34];
 	let t9;
-	if ($[40] !== t3 || $[41] !== t4 || $[42] !== t5 || $[43] !== t6 || $[44] !== t7 || $[45] !== t8) {
+	if ($[35] !== t6 || $[36] !== t7 || $[37] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			t3,
-			t4,
-			t5,
 			t6,
 			t7,
 			t8
 		] });
-		$[40] = t3;
-		$[41] = t4;
-		$[42] = t5;
-		$[43] = t6;
-		$[44] = t7;
-		$[45] = t8;
-		$[46] = t9;
-	} else t9 = $[46];
+		$[35] = t6;
+		$[36] = t7;
+		$[37] = t8;
+		$[38] = t9;
+	} else t9 = $[38];
 	let t10;
-	if ($[47] !== editor || $[48] !== features.bulletList || $[49] !== isEditable || $[50] !== t) {
-		t10 = features.bulletList && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.bulletList,
-			active: editor.isActive("bulletList"),
-			disabled: !isEditable,
-			title: t("editor.unorderedList"),
-			onClick: () => editor.chain().focus().toggleBulletList().run()
-		});
-		$[47] = editor;
-		$[48] = features.bulletList;
-		$[49] = isEditable;
-		$[50] = t;
-		$[51] = t10;
-	} else t10 = $[51];
-	let t11;
-	if ($[52] !== editor || $[53] !== features.orderedList || $[54] !== isEditable || $[55] !== t) {
-		t11 = features.orderedList && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.orderedList,
-			active: editor.isActive("orderedList"),
-			disabled: !isEditable,
-			title: t("editor.orderedList"),
-			onClick: () => editor.chain().focus().toggleOrderedList().run()
-		});
-		$[52] = editor;
-		$[53] = features.orderedList;
-		$[54] = isEditable;
-		$[55] = t;
-		$[56] = t11;
-	} else t11 = $[56];
-	let t12;
-	if ($[57] !== editor || $[58] !== features.blockquote || $[59] !== isEditable || $[60] !== t) {
-		t12 = features.blockquote && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.blockquote,
-			active: editor.isActive("blockquote"),
-			disabled: !isEditable,
-			title: t("editor.quote"),
-			onClick: () => editor.chain().focus().toggleBlockquote().run()
-		});
-		$[57] = editor;
-		$[58] = features.blockquote;
-		$[59] = isEditable;
-		$[60] = t;
-		$[61] = t12;
-	} else t12 = $[61];
-	let t13;
-	if ($[62] !== editor || $[63] !== features.horizontalRule || $[64] !== isEditable || $[65] !== t) {
-		t13 = features.horizontalRule && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.horizontalRule,
-			disabled: !isEditable,
-			title: t("editor.horizontalRule"),
-			onClick: () => editor.chain().focus().setHorizontalRule().run()
-		});
-		$[62] = editor;
-		$[63] = features.horizontalRule;
-		$[64] = isEditable;
-		$[65] = t;
-		$[66] = t13;
-	} else t13 = $[66];
-	let t14;
-	if ($[67] !== t10 || $[68] !== t11 || $[69] !== t12 || $[70] !== t13) {
-		t14 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			t10,
-			t11,
-			t12,
-			t13
-		] });
-		$[67] = t10;
-		$[68] = t11;
-		$[69] = t12;
-		$[70] = t13;
-		$[71] = t14;
-	} else t14 = $[71];
-	let t15;
-	if ($[72] !== editor || $[73] !== features.align || $[74] !== isEditable || $[75] !== t) {
-		t15 = features.align && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.alignLeft,
-				active: editor.isActive({ textAlign: "left" }),
+	if ($[39] !== editor || $[40] !== features.blockquote || $[41] !== features.bulletList || $[42] !== features.codeBlock || $[43] !== features.horizontalRule || $[44] !== features.orderedList || $[45] !== hasBlockMenu || $[46] !== isEditable || $[47] !== t) {
+		t10 = hasBlockMenu && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.blocks,
+				active: editor.isActive("bulletList") || editor.isActive("orderedList") || editor.isActive("blockquote") || editor.isActive("codeBlock"),
 				disabled: !isEditable,
-				title: t("editor.alignLeft"),
-				onClick: () => editor.chain().focus().setTextAlign("left").run()
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.alignCenter,
-				active: editor.isActive({ textAlign: "center" }),
-				disabled: !isEditable,
-				title: t("editor.alignCenter"),
-				onClick: () => editor.chain().focus().setTextAlign("center").run()
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.alignRight,
-				active: editor.isActive({ textAlign: "right" }),
+				title: t("editor.blocks")
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-56",
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.list") }),
+				features.bulletList && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.bulletList,
+					active: editor.isActive("bulletList"),
+					disabled: !isEditable,
+					label: t("editor.unorderedList"),
+					onClick: () => editor.chain().focus().toggleBulletList().run()
+				}),
+				features.orderedList && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.orderedList,
+					active: editor.isActive("orderedList"),
+					disabled: !isEditable,
+					label: t("editor.orderedList"),
+					onClick: () => editor.chain().focus().toggleOrderedList().run()
+				}),
+				(features.blockquote || features.codeBlock || features.horizontalRule) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				features.blockquote && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.blockquote,
+					active: editor.isActive("blockquote"),
+					disabled: !isEditable,
+					label: t("editor.quote"),
+					onClick: () => editor.chain().focus().toggleBlockquote().run()
+				}),
+				features.codeBlock && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.codeBlock,
+					active: editor.isActive("codeBlock"),
+					disabled: !isEditable,
+					label: t("editor.codeBlock"),
+					onClick: () => editor.chain().focus().toggleCodeBlock().run()
+				}),
+				features.horizontalRule && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.horizontalRule,
+					disabled: !isEditable,
+					label: t("editor.horizontalRule"),
+					onClick: () => editor.chain().focus().setHorizontalRule().run()
+				})
+			]
+		})] }) });
+		$[39] = editor;
+		$[40] = features.blockquote;
+		$[41] = features.bulletList;
+		$[42] = features.codeBlock;
+		$[43] = features.horizontalRule;
+		$[44] = features.orderedList;
+		$[45] = hasBlockMenu;
+		$[46] = isEditable;
+		$[47] = t;
+		$[48] = t10;
+	} else t10 = $[48];
+	let t11;
+	if ($[49] !== currentAlignment || $[50] !== currentAlignmentOption || $[51] !== editor || $[52] !== features.align || $[53] !== isEditable || $[54] !== t) {
+		t11 = features.align && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: currentAlignmentOption.icon,
+				active: currentAlignment !== "left",
 				disabled: !isEditable,
-				title: t("editor.alignRight"),
-				onClick: () => editor.chain().focus().setTextAlign("right").run()
-			}),
-			/* @__PURE__ */ jsx(ToolbarButton, {
-				icon: EDITOR_ICONS.alignJustify,
-				active: editor.isActive({ textAlign: "justify" }),
+				title: t("editor.alignment")
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-56",
+			children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.alignment") }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: currentAlignment,
+				onValueChange: (value_0) => {
+					editor.chain().focus().setTextAlign(value_0).run();
+				},
+				children: ALIGNMENT_OPTIONS.map((option_4) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: option_4.value,
+					disabled: !isEditable,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						"aria-hidden": "true",
+						icon: option_4.icon
+					}), /* @__PURE__ */ jsx("span", { children: t(option_4.labelKey) })]
+				}, option_4.value))
+			})]
+		})] }) });
+		$[49] = currentAlignment;
+		$[50] = currentAlignmentOption;
+		$[51] = editor;
+		$[52] = features.align;
+		$[53] = isEditable;
+		$[54] = t;
+		$[55] = t11;
+	} else t11 = $[55];
+	let t12;
+	if ($[56] !== editor || $[57] !== features.image || $[58] !== features.link || $[59] !== features.table || $[60] !== features.tableControls || $[61] !== hasInsertMenu || $[62] !== inTable || $[63] !== isEditable || $[64] !== onImageClick || $[65] !== onLinkClick || $[66] !== onTableClick || $[67] !== t) {
+		t12 = hasInsertMenu && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx(ToolbarButton, {
+				icon: EDITOR_ICONS.insert,
+				active: editor.isActive("link"),
 				disabled: !isEditable,
-				title: t("editor.alignJustify"),
-				onClick: () => editor.chain().focus().setTextAlign("justify").run()
+				title: t("editor.insert")
 			})
-		] });
-		$[72] = editor;
-		$[73] = features.align;
-		$[74] = isEditable;
-		$[75] = t;
-		$[76] = t15;
-	} else t15 = $[76];
-	let t16;
-	if ($[77] !== editor || $[78] !== features.link || $[79] !== isEditable || $[80] !== onLinkClick || $[81] !== t) {
-		t16 = features.link && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.link,
-			active: editor.isActive("link"),
-			disabled: !isEditable,
-			title: t("editor.link"),
-			shortcut: "⌘K",
-			onClick: onLinkClick
-		});
-		$[77] = editor;
-		$[78] = features.link;
-		$[79] = isEditable;
-		$[80] = onLinkClick;
-		$[81] = t;
-		$[82] = t16;
-	} else t16 = $[82];
-	let t17;
-	if ($[83] !== features.image || $[84] !== isEditable || $[85] !== onImageClick || $[86] !== t) {
-		t17 = features.image && /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.image,
-			disabled: !isEditable,
-			title: t("editor.image"),
-			onClick: onImageClick
-		});
-		$[83] = features.image;
-		$[84] = isEditable;
-		$[85] = onImageClick;
-		$[86] = t;
-		$[87] = t17;
-	} else t17 = $[87];
-	let t18;
-	if ($[88] !== editor || $[89] !== features.table || $[90] !== features.tableControls || $[91] !== inTable || $[92] !== isEditable || $[93] !== onTableClick || $[94] !== t) {
-		t18 = features.table && (features.tableControls ? /* @__PURE__ */ jsx(TableControls, {
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-56",
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("editor.insert") }),
+				features.link && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.link,
+					active: editor.isActive("link"),
+					disabled: !isEditable,
+					label: t("editor.link"),
+					shortcut: "⌘K",
+					onClick: onLinkClick
+				}),
+				features.image && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.image,
+					disabled: !isEditable,
+					label: t("editor.image"),
+					onClick: onImageClick
+				}),
+				features.table && /* @__PURE__ */ jsx(ToolbarMenuItem, {
+					icon: EDITOR_ICONS.table,
+					active: inTable,
+					disabled: !isEditable,
+					label: t("editor.table"),
+					onClick: onTableClick
+				})
+			]
+		})] }), features.table && features.tableControls && inTable && /* @__PURE__ */ jsx(TableControls, {
 			editor,
 			disabled: !isEditable,
 			inTable,
@@ -485,56 +610,49 @@ function RichTextToolbar(t0) {
 				disabled: !isEditable,
 				title: t("editor.table")
 			})
-		}) : /* @__PURE__ */ jsx(ToolbarButton, {
-			icon: EDITOR_ICONS.table,
-			active: inTable,
-			disabled: !isEditable,
-			title: t("editor.table"),
-			onClick: onTableClick
-		}));
-		$[88] = editor;
-		$[89] = features.table;
-		$[90] = features.tableControls;
-		$[91] = inTable;
-		$[92] = isEditable;
-		$[93] = onTableClick;
-		$[94] = t;
-		$[95] = t18;
-	} else t18 = $[95];
-	let t19;
-	if ($[96] !== t16 || $[97] !== t17 || $[98] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-			t16,
-			t17,
-			t18
-		] });
-		$[96] = t16;
-		$[97] = t17;
-		$[98] = t18;
-		$[99] = t19;
-	} else t19 = $[99];
-	let t20;
-	if ($[100] !== t1 || $[101] !== t14 || $[102] !== t15 || $[103] !== t19 || $[104] !== t2 || $[105] !== t9) {
-		t20 = /* @__PURE__ */ jsxs("div", {
-			className: "bg-muted flex flex-wrap items-center gap-1.5 border-b p-1.5",
+		})] });
+		$[56] = editor;
+		$[57] = features.image;
+		$[58] = features.link;
+		$[59] = features.table;
+		$[60] = features.tableControls;
+		$[61] = hasInsertMenu;
+		$[62] = inTable;
+		$[63] = isEditable;
+		$[64] = onImageClick;
+		$[65] = onLinkClick;
+		$[66] = onTableClick;
+		$[67] = t;
+		$[68] = t12;
+	} else t12 = $[68];
+	let t13;
+	if ($[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t3 || $[73] !== t4 || $[74] !== t5 || $[75] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			"aria-label": t3,
+			className: "qp-rich-text-editor__toolbar border-border-subtle bg-surface-low flex flex-nowrap items-center gap-1.5 overflow-x-auto border-b p-1.5",
+			role: "toolbar",
 			children: [
-				t1,
-				t2,
+				t4,
+				t5,
 				t9,
-				t14,
-				t15,
-				t19
+				t10,
+				t11,
+				t12
 			]
 		});
-		$[100] = t1;
-		$[101] = t14;
-		$[102] = t15;
-		$[103] = t19;
-		$[104] = t2;
-		$[105] = t9;
-		$[106] = t20;
-	} else t20 = $[106];
-	return t20;
+		$[69] = t10;
+		$[70] = t11;
+		$[71] = t12;
+		$[72] = t3;
+		$[73] = t4;
+		$[74] = t5;
+		$[75] = t9;
+		$[76] = t13;
+	} else t13 = $[76];
+	return t13;
+}
+function _temp(option_2) {
+	return option_2.group === "heading";
 }
 
 //#endregion