// title: Block editor toolbar with block type and inline marks "use client"; import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, QuoteIcon, UnderlineIcon, } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue, } from "@/registry/default/ui/select"; import { ToggleGroup, ToggleGroupItem, } from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const blockTypes = [ { label: "Paragraph", value: "p" }, { label: "Heading 1", value: "h1" }, { label: "Heading 2", value: "h2" }, { label: "Quote", value: "quote" }, { label: "Code block", value: "code" }, ]; const inlineFormats = [ { icon: BoldIcon, label: "Bold", value: "bold" }, { icon: ItalicIcon, label: "Italic", value: "italic" }, { icon: UnderlineIcon, label: "Underline", value: "underline" }, { icon: CodeIcon, label: "Inline code", value: "code" }, ] as const; const blockFormats = [ { icon: Heading1Icon, label: "Heading 1", value: "h1" }, { icon: Heading2Icon, label: "Heading 2", value: "h2" }, { icon: ListIcon, label: "Bullet list", value: "ul" }, { icon: ListOrderedIcon, label: "Numbered list", value: "ol" }, { icon: QuoteIcon, label: "Blockquote", value: "blockquote" }, ] as const; export function Pattern() { const [active, setActive] = useState(["bold"]); const toggle = (val: string) => setActive((prev) => prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val], ); return ( {inlineFormats.map(({ icon: Icon, label, value }) => ( toggle(value)} render={} > } /> {label} ))} {blockFormats.map(({ icon: Icon, label, value }) => ( } > } /> {label} ))} } > } /> Insert link ); }