@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/ai-menu.mjs

@@ -0,0 +1,488 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Command as Command$1, CommandGroup, CommandItem, CommandList } from "../../ui/command.mjs";
+import { Popover, PopoverAnchor, PopoverContent } from "../../ui/popover.mjs";
+import { commentPlugin } from "../plugins/comment-kit.mjs";
+import { AIChatEditor } from "./ai-chat-editor.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, useEditorRef, useFocusedLast, useHotkeys, usePluginOption } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, NodeApi, TextApi, isHotkey } from "platejs";
+import { AIChatPlugin, AIPlugin, useEditorChat, useLastAssistantMessage } from "@platejs/ai/react";
+import { getTransientCommentKey } from "@platejs/comment";
+import { BlockSelectionPlugin, useIsSelecting } from "@platejs/selection/react";
+import { getTransientSuggestionKey } from "@platejs/suggestion";
+import { Command } from "cmdk";
+import { Album, BadgeHelp, BookOpenCheck, Check, CornerUpLeft, FeatherIcon, ListEnd, ListMinus, ListPlus, Loader2Icon, PauseIcon, PenLine, SmileIcon, Wand, X } from "lucide-react";
+
+//#region src/components/editor/ui/ai-menu.tsx
+function AIMenu() {
+	const { api, editor } = useEditorPlugin(AIChatPlugin);
+	const mode = usePluginOption(AIChatPlugin, "mode");
+	const toolName = usePluginOption(AIChatPlugin, "toolName");
+	const streaming = usePluginOption(AIChatPlugin, "streaming");
+	const isSelecting = useIsSelecting();
+	const isFocusedLast = useFocusedLast();
+	const open = usePluginOption(AIChatPlugin, "open") && isFocusedLast;
+	const [value, setValue] = React$1.useState("");
+	const [input, setInput] = React$1.useState("");
+	const { messages, status } = usePluginOption(AIChatPlugin, "chat");
+	const [anchorElement, setAnchorElement] = React$1.useState(null);
+	const content = useLastAssistantMessage()?.parts.find((part) => part.type === "text")?.text;
+	React$1.useEffect(() => {
+		if (streaming) {
+			const anchor = api.aiChat.node({ anchor: true });
+			if (!anchor) return;
+			setTimeout(() => {
+				setAnchorElement(editor.api.toDOMNode(anchor[0]));
+			}, 0);
+		}
+	}, [streaming]);
+	const setOpen = (open$1) => {
+		if (open$1) api.aiChat.show();
+		else api.aiChat.hide();
+	};
+	const show = (anchorElement$1) => {
+		setAnchorElement(anchorElement$1);
+		setOpen(true);
+	};
+	useEditorChat({
+		onOpenBlockSelection: (blocks) => {
+			if (blocks.length > 0 && blocks[blocks.length - 1].length > 0) show(editor.api.toDOMNode(blocks[blocks.length - 1][0]));
+		},
+		onOpenChange: (open$1) => {
+			if (!open$1) {
+				setAnchorElement(null);
+				setInput("");
+			}
+		},
+		onOpenCursor: () => {
+			const [ancestor] = editor.api.block({ highest: true });
+			if (!editor.api.isAt({ end: true }) && !editor.api.isEmpty(ancestor)) editor.getApi(BlockSelectionPlugin).blockSelection.set(ancestor.id);
+			show(editor.api.toDOMNode(ancestor));
+		},
+		onOpenSelection: () => {
+			const blocks = editor.api.blocks();
+			if (blocks.length > 0 && blocks[blocks.length - 1].length > 0) show(editor.api.toDOMNode(blocks[blocks.length - 1][0]));
+		}
+	});
+	useHotkeys("esc", () => {
+		api.aiChat.stop();
+	});
+	const isLoading = status === "streaming" || status === "submitted";
+	React$1.useEffect(() => {
+		if (toolName === "edit" && mode === "chat" && !isLoading) {
+			let anchorNode = editor.api.node({
+				at: [],
+				reverse: true,
+				match: (n) => !!n[KEYS.suggestion] && !!n[getTransientSuggestionKey()]
+			});
+			if (!anchorNode) anchorNode = editor.getApi(BlockSelectionPlugin).blockSelection.getNodes({
+				selectionFallback: true,
+				sort: true
+			}).at(-1);
+			if (!anchorNode) return;
+			const block = editor.api.block({ at: anchorNode[1] });
+			if (block) setAnchorElement(editor.api.toDOMNode(block[0]));
+		}
+	}, [isLoading]);
+	if (isLoading && mode === "insert") return null;
+	if (toolName === "comment") return null;
+	if (toolName === "edit" && mode === "chat" && isLoading) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: { current: anchorElement } }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "border-none bg-transparent p-0 shadow-none",
+			style: { width: anchorElement?.offsetWidth },
+			onEscapeKeyDown: (e) => {
+				e.preventDefault();
+				api.aiChat.hide();
+			},
+			align: "center",
+			side: "bottom",
+			children: /* @__PURE__ */ jsxs(Command$1, {
+				className: "w-full rounded-lg border shadow-md",
+				value,
+				onValueChange: setValue,
+				children: [
+					mode === "chat" && isSelecting && content && toolName === "generate" && /* @__PURE__ */ jsx(AIChatEditor, { content }),
+					isLoading ? /* @__PURE__ */ jsxs("div", {
+						className: "flex grow select-none items-center gap-2 p-2 text-muted-foreground text-sm",
+						children: [/* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }), messages.length > 1 ? "Editing..." : "Thinking..."]
+					}) : /* @__PURE__ */ jsx(Command.Input, {
+						className: cn("flex h-9 w-full min-w-0 border-input bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] placeholder:text-muted-foreground md:text-sm dark:bg-input/30", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "border-b focus-visible:ring-transparent"),
+						value: input,
+						onKeyDown: (e) => {
+							if (isHotkey("backspace")(e) && input.length === 0) {
+								e.preventDefault();
+								api.aiChat.hide();
+							}
+							if (isHotkey("enter")(e) && !e.shiftKey && !value) {
+								e.preventDefault();
+								api.aiChat.submit(input);
+								setInput("");
+							}
+						},
+						onValueChange: setInput,
+						placeholder: "Ask AI anything...",
+						"data-plate-focus": true,
+						autoFocus: true
+					}),
+					!isLoading && /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(AIMenuItems, {
+						input,
+						setInput,
+						setValue
+					}) })
+				]
+			})
+		})]
+	});
+}
+const AICommentIcon = () => /* @__PURE__ */ jsxs("svg", {
+	fill: "none",
+	height: "24",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	viewBox: "0 0 24 24",
+	width: "24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M0 0h24v24H0z",
+			fill: "none",
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M8 9h8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 13h4.5" }),
+		/* @__PURE__ */ jsx("path", { d: "M10 19l-1 -1h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5" }),
+		/* @__PURE__ */ jsx("path", { d: "M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" })
+	]
+});
+const aiChatItems = {
+	accept: {
+		icon: /* @__PURE__ */ jsx(Check, {}),
+		label: "Accept",
+		value: "accept",
+		onSelect: ({ aiEditor, editor }) => {
+			const { mode, toolName } = editor.getOptions(AIChatPlugin);
+			if (mode === "chat" && toolName === "generate") return editor.getTransforms(AIChatPlugin).aiChat.replaceSelection(aiEditor);
+			editor.getTransforms(AIChatPlugin).aiChat.accept();
+			editor.tf.focus({ edge: "end" });
+		}
+	},
+	comment: {
+		icon: /* @__PURE__ */ jsx(AICommentIcon, {}),
+		label: "Comment",
+		value: "comment",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				mode: "insert",
+				prompt: "Please comment on the following content and provide reasonable and meaningful feedback.",
+				toolName: "comment"
+			});
+		}
+	},
+	continueWrite: {
+		icon: /* @__PURE__ */ jsx(PenLine, {}),
+		label: "Continue writing",
+		value: "continueWrite",
+		onSelect: ({ editor, input }) => {
+			const ancestorNode = editor.api.block({ highest: true });
+			if (!ancestorNode) return;
+			const isEmpty = NodeApi.string(ancestorNode[0]).trim().length === 0;
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				mode: "insert",
+				prompt: isEmpty ? `<Document>
+{editor}
+</Document>
+Start writing a new paragraph AFTER <Document> ONLY ONE SENTENCE` : "Continue writing AFTER <Block> ONLY ONE SENTENCE. DONT REPEAT THE TEXT.",
+				toolName: "generate"
+			});
+		}
+	},
+	discard: {
+		icon: /* @__PURE__ */ jsx(X, {}),
+		label: "Discard",
+		shortcut: "Escape",
+		value: "discard",
+		onSelect: ({ editor }) => {
+			editor.getTransforms(AIPlugin).ai.undo();
+			editor.getApi(AIChatPlugin).aiChat.hide();
+		}
+	},
+	emojify: {
+		icon: /* @__PURE__ */ jsx(SmileIcon, {}),
+		label: "Emojify",
+		value: "emojify",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Emojify",
+				toolName: "edit"
+			});
+		}
+	},
+	explain: {
+		icon: /* @__PURE__ */ jsx(BadgeHelp, {}),
+		label: "Explain",
+		value: "explain",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: {
+					default: "Explain {editor}",
+					selecting: "Explain"
+				},
+				toolName: "generate"
+			});
+		}
+	},
+	fixSpelling: {
+		icon: /* @__PURE__ */ jsx(Check, {}),
+		label: "Fix spelling & grammar",
+		value: "fixSpelling",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Fix spelling and grammar",
+				toolName: "edit"
+			});
+		}
+	},
+	generateMarkdownSample: {
+		icon: /* @__PURE__ */ jsx(BookOpenCheck, {}),
+		label: "Generate Markdown sample",
+		value: "generateMarkdownSample",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Generate a markdown sample",
+				toolName: "generate"
+			});
+		}
+	},
+	generateMdxSample: {
+		icon: /* @__PURE__ */ jsx(BookOpenCheck, {}),
+		label: "Generate MDX sample",
+		value: "generateMdxSample",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Generate a mdx sample",
+				toolName: "generate"
+			});
+		}
+	},
+	improveWriting: {
+		icon: /* @__PURE__ */ jsx(Wand, {}),
+		label: "Improve writing",
+		value: "improveWriting",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Improve the writing",
+				toolName: "edit"
+			});
+		}
+	},
+	insertBelow: {
+		icon: /* @__PURE__ */ jsx(ListEnd, {}),
+		label: "Insert below",
+		value: "insertBelow",
+		onSelect: ({ aiEditor, editor }) => {
+			/** Format: 'none' Fix insert table */
+			editor.getTransforms(AIChatPlugin).aiChat.insertBelow(aiEditor, { format: "none" });
+		}
+	},
+	makeLonger: {
+		icon: /* @__PURE__ */ jsx(ListPlus, {}),
+		label: "Make longer",
+		value: "makeLonger",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Make longer",
+				toolName: "edit"
+			});
+		}
+	},
+	makeShorter: {
+		icon: /* @__PURE__ */ jsx(ListMinus, {}),
+		label: "Make shorter",
+		value: "makeShorter",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Make shorter",
+				toolName: "edit"
+			});
+		}
+	},
+	replace: {
+		icon: /* @__PURE__ */ jsx(Check, {}),
+		label: "Replace selection",
+		value: "replace",
+		onSelect: ({ aiEditor, editor }) => {
+			editor.getTransforms(AIChatPlugin).aiChat.replaceSelection(aiEditor);
+		}
+	},
+	simplifyLanguage: {
+		icon: /* @__PURE__ */ jsx(FeatherIcon, {}),
+		label: "Simplify language",
+		value: "simplifyLanguage",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				prompt: "Simplify the language",
+				toolName: "edit"
+			});
+		}
+	},
+	summarize: {
+		icon: /* @__PURE__ */ jsx(Album, {}),
+		label: "Add a summary",
+		value: "summarize",
+		onSelect: ({ editor, input }) => {
+			editor.getApi(AIChatPlugin).aiChat.submit(input, {
+				mode: "insert",
+				prompt: {
+					default: "Summarize {editor}",
+					selecting: "Summarize"
+				},
+				toolName: "generate"
+			});
+		}
+	},
+	tryAgain: {
+		icon: /* @__PURE__ */ jsx(CornerUpLeft, {}),
+		label: "Try again",
+		value: "tryAgain",
+		onSelect: ({ editor }) => {
+			editor.getApi(AIChatPlugin).aiChat.reload();
+		}
+	}
+};
+const menuStateItems = {
+	cursorCommand: [{ items: [
+		aiChatItems.comment,
+		aiChatItems.generateMdxSample,
+		aiChatItems.generateMarkdownSample,
+		aiChatItems.continueWrite,
+		aiChatItems.summarize,
+		aiChatItems.explain
+	] }],
+	cursorSuggestion: [{ items: [
+		aiChatItems.accept,
+		aiChatItems.discard,
+		aiChatItems.tryAgain
+	] }],
+	selectionCommand: [{ items: [
+		aiChatItems.improveWriting,
+		aiChatItems.comment,
+		aiChatItems.emojify,
+		aiChatItems.makeLonger,
+		aiChatItems.makeShorter,
+		aiChatItems.fixSpelling,
+		aiChatItems.simplifyLanguage
+	] }],
+	selectionSuggestion: [{ items: [
+		aiChatItems.accept,
+		aiChatItems.discard,
+		aiChatItems.insertBelow,
+		aiChatItems.tryAgain
+	] }]
+};
+const AIMenuItems = ({ input, setInput, setValue }) => {
+	const editor = useEditorRef();
+	const { messages } = usePluginOption(AIChatPlugin, "chat");
+	const aiEditor = usePluginOption(AIChatPlugin, "aiEditor");
+	const isSelecting = useIsSelecting();
+	const menuState = React$1.useMemo(() => {
+		if (messages && messages.length > 0) return isSelecting ? "selectionSuggestion" : "cursorSuggestion";
+		return isSelecting ? "selectionCommand" : "cursorCommand";
+	}, [isSelecting, messages]);
+	const menuGroups = React$1.useMemo(() => {
+		return menuStateItems[menuState];
+	}, [menuState]);
+	React$1.useEffect(() => {
+		if (menuGroups.length > 0 && menuGroups[0].items.length > 0) setValue(menuGroups[0].items[0].value);
+	}, [menuGroups, setValue]);
+	return /* @__PURE__ */ jsx(Fragment, { children: menuGroups.map((group, index) => /* @__PURE__ */ jsx(CommandGroup, {
+		heading: group.heading,
+		children: group.items.map((menuItem) => /* @__PURE__ */ jsxs(CommandItem, {
+			className: "[&_svg]:text-muted-foreground",
+			value: menuItem.value,
+			onSelect: () => {
+				menuItem.onSelect?.({
+					aiEditor,
+					editor,
+					input
+				});
+				setInput("");
+			},
+			children: [menuItem.icon, /* @__PURE__ */ jsx("span", { children: menuItem.label })]
+		}, menuItem.value))
+	}, index)) });
+};
+function AILoadingBar() {
+	const editor = useEditorRef();
+	const toolName = usePluginOption(AIChatPlugin, "toolName");
+	const chat = usePluginOption(AIChatPlugin, "chat");
+	const mode = usePluginOption(AIChatPlugin, "mode");
+	const { status } = chat;
+	const { api } = useEditorPlugin(AIChatPlugin);
+	const isLoading = status === "streaming" || status === "submitted";
+	const handleComments = (type) => {
+		if (type === "accept") editor.tf.unsetNodes([getTransientCommentKey()], {
+			at: [],
+			match: (n) => TextApi.isText(n) && !!n[KEYS.comment]
+		});
+		if (type === "reject") editor.getTransforms(commentPlugin).comment.unsetMark({ transient: true });
+		api.aiChat.hide();
+	};
+	useHotkeys("esc", () => {
+		api.aiChat.stop();
+	});
+	if (isLoading && (mode === "insert" || toolName === "comment" || toolName === "edit" && mode === "chat")) return /* @__PURE__ */ jsxs("div", {
+		className: cn("-translate-x-1/2 absolute bottom-4 left-1/2 z-20 flex items-center gap-3 rounded-md border border-border bg-muted px-3 py-1.5 text-muted-foreground text-sm shadow-md transition-all duration-300"),
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" }),
+			/* @__PURE__ */ jsx("span", { children: status === "submitted" ? "Thinking..." : "Writing..." }),
+			/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "flex items-center gap-1 text-xs",
+				onClick: () => api.aiChat.stop(),
+				children: [
+					/* @__PURE__ */ jsx(PauseIcon, { className: "h-4 w-4" }),
+					"Stop",
+					/* @__PURE__ */ jsx("kbd", {
+						className: "ml-1 rounded bg-border px-1 font-mono text-[10px] text-muted-foreground shadow-sm",
+						children: "Esc"
+					})
+				]
+			})
+		]
+	});
+	if (toolName === "comment" && status === "ready") return /* @__PURE__ */ jsx("div", {
+		className: cn("-translate-x-1/2 absolute bottom-4 left-1/2 z-50 flex flex-col items-center gap-0 rounded-xl border border-border/50 bg-popover p-1 text-muted-foreground text-sm shadow-xl backdrop-blur-sm", "p-3"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex w-full items-center justify-between gap-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-5",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					disabled: isLoading,
+					onClick: () => handleComments("accept"),
+					children: "Accept"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					disabled: isLoading,
+					onClick: () => handleComments("reject"),
+					children: "Reject"
+				})]
+			})
+		})
+	});
+	return null;
+}
+
+//#endregion
+export { AILoadingBar, AIMenu };

package/dist/src/components/editor/ui/ai-node.mjs

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { PlateElement, PlateText, usePluginOption } from "platejs/react";
+import { AIChatPlugin } from "@platejs/ai/react";
+
+//#region src/components/editor/ui/ai-node.tsx
+function AILeaf(props) {
+	const streaming = usePluginOption(AIChatPlugin, "streaming");
+	return /* @__PURE__ */ jsx(PlateText, {
+		className: cn("border-b-2 border-b-purple-100 bg-purple-50 text-purple-800", "transition-all duration-200 ease-in-out", props.editor.getApi(AIChatPlugin).aiChat.node({ streaming: true })?.[0] === props.text && streaming && "after:ml-1.5 after:inline-block after:h-3 after:w-3 after:rounded-full after:bg-primary after:align-middle after:content-[\"\"]"),
+		...props
+	});
+}
+function AIAnchorElement(props) {
+	return /* @__PURE__ */ jsx(PlateElement, {
+		...props,
+		children: /* @__PURE__ */ jsx("div", { className: "h-[0.1px]" })
+	});
+}
+
+//#endregion
+export { AIAnchorElement, AILeaf };

package/dist/src/components/editor/ui/ai-toolbar-button.mjs

@@ -0,0 +1,23 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEditorPlugin } from "platejs/react";
+import { AIChatPlugin } from "@platejs/ai/react";
+
+//#region src/components/editor/ui/ai-toolbar-button.tsx
+function AIToolbarButton(props) {
+	const { api } = useEditorPlugin(AIChatPlugin);
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		onClick: () => {
+			api.aiChat.show();
+		},
+		onMouseDown: (e) => {
+			e.preventDefault();
+		}
+	});
+}
+
+//#endregion
+export { AIToolbarButton };

package/dist/src/components/editor/ui/align-toolbar-button.mjs

@@ -0,0 +1,71 @@
+"use client";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, useSelectionFragmentProp } from "platejs/react";
+import * as React$1 from "react";
+import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";
+import { TextAlignPlugin } from "@platejs/basic-styles/react";
+
+//#region src/components/editor/ui/align-toolbar-button.tsx
+const items = [
+	{
+		icon: AlignLeftIcon,
+		value: "left"
+	},
+	{
+		icon: AlignCenterIcon,
+		value: "center"
+	},
+	{
+		icon: AlignRightIcon,
+		value: "right"
+	},
+	{
+		icon: AlignJustifyIcon,
+		value: "justify"
+	}
+];
+function AlignToolbarButton(props) {
+	const { editor, tf } = useEditorPlugin(TextAlignPlugin);
+	const value = useSelectionFragmentProp({
+		defaultValue: "start",
+		getProp: (node) => node.align
+	}) ?? "left";
+	const [open, setOpen] = React$1.useState(false);
+	const IconValue = items.find((item) => item.value === value)?.icon ?? AlignLeftIcon;
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				pressed: open,
+				tooltip: "Align",
+				isDropdown: true,
+				children: /* @__PURE__ */ jsx(IconValue, {})
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "min-w-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value,
+				onValueChange: (value$1) => {
+					tf.textAlign.setNodes(value$1);
+					editor.tf.focus();
+				},
+				children: items.map(({ icon: Icon, value: itemValue }) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+					className: "pl-2 data-[state=checked]:bg-accent *:first:[span]:hidden",
+					value: itemValue,
+					children: /* @__PURE__ */ jsx(Icon, {})
+				}, itemValue))
+			})
+		})]
+	});
+}
+
+//#endregion
+export { AlignToolbarButton };