); }; export ColorHighlightToolbarExample; `,__src__:"src/registry/toolbar-examples/color-and-highlight-toolbar-example.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ColorHighlightToolbar } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/color-and-highlight"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ToolbarProvider } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/toolbar-provider"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Color "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/extension-color"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Highlight "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/extension-highlight"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TextStyle "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/extension-text-style"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEditor } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" StarterKit "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/starter-kit"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" extensions"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" StarterKit."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"configure"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" orderedList: {"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"list-decimal"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" blockquote: {"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-accent-foreground p-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" bulletList: {"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"list-disc"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" heading: {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" levels: ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"3"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"4"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"tiptap-heading"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TextStyle,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Color,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Highlight."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"configure"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" multicolor: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ColorHighlightToolbarExample"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" editor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useEditor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" extensions,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" immediatelyRender: "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editor) {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-full p-3 flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ToolbarProvider"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" editor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{editor}>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ColorHighlightToolbar"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ColorHighlightToolbarExample;"})]})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(h,{defaultValue:"cli",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(a,{value:"cli",children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json `,__npmCommand__:`npx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json `,__yarnCommand__:`npx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json `,__pnpmCommand__:`pnpm dlx shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json `,__bunCommand__:`bunx --bun shadcn add https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" https://tiptap.niazmorshed.dev/r/color-and-highlight-toolbar.json"})]})})})})}),(0,n.jsx)(a,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsxs)(r,{children:["Install ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/button",children:"Button"}),", ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/tooltip",children:"Tooltip"}),", ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/popover",children:"Popover"}),", ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/scroll-area",children:"ScrollArea"}),", ",(0,n.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/separator",children:"Separator"})," components from @shadcn/ui"]}),(0,n.jsxs)(r,{children:["Copy & paste the following code under ",(0,n.jsx)(l.code,{children:"components/toolbars/color-and-highlight.tsx"}),"."]}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",__rawString__:`"use client"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Separator } from "@/components/ui/separator"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useToolbar } from "@/components/toolbars/toolbar-provider"; import type { Extension } from "@tiptap/core"; import type { ColorOptions } from "@tiptap/extension-color"; import type { HighlightOptions } from "@tiptap/extension-highlight"; import { Check, ChevronDown } from "lucide-react"; type TextStylingExtensions = | Extension | Extension; const TEXT_COLORS = [ { name: "Default", color: "var(--text-default)" }, { name: "Gray", color: "var(--text-gray)" }, { name: "Brown", color: "var(--text-brown)" }, { name: "Orange", color: "var(--text-orange)" }, { name: "Yellow", color: "var(--text-yellow)" }, { name: "Green", color: "var(--text-green)" }, { name: "Blue", color: "var(--text-blue)" }, { name: "Purple", color: "var(--text-purple)" }, { name: "Pink", color: "var(--text-pink)" }, { name: "Red", color: "var(--text-red)" }, ]; const HIGHLIGHT_COLORS = [ { name: "Default", color: "var(--highlight-default)" }, { name: "Gray", color: "var(--highlight-gray)" }, { name: "Brown", color: "var(--highlight-brown)" }, { name: "Orange", color: "var(--highlight-orange)" }, { name: "Yellow", color: "var(--highlight-yellow)" }, { name: "Green", color: "var(--highlight-green)" }, { name: "Blue", color: "var(--highlight-blue)" }, { name: "Purple", color: "var(--highlight-purple)" }, { name: "Pink", color: "var(--highlight-pink)" }, { name: "Red", color: "var(--highlight-red)" }, ]; interface ColorHighlightButtonProps { name: string; color: string; isActive: boolean; onClick: () => void; isHighlight?: boolean; } const ColorHighlightButton = ({ name, color, isActive, onClick, isHighlight, }: ColorHighlightButtonProps) => ( ); export const ColorHighlightToolbar = () => { const { editor } = useToolbar(); const currentColor = editor?.getAttributes("textStyle").color; const currentHighlight = editor?.getAttributes("highlight").color; const handleSetColor = (color: string) => { editor ?.chain() .focus() .setColor(color === currentColor ? "" : color) .run(); }; const handleSetHighlight = (color: string) => { editor ?.chain() .focus() .setHighlight(color === currentHighlight ? { color: "" } : { color }) .run(); }; const isDisabled = !editor?.can().chain().setHighlight().run() || !editor?.can().chain().setColor("").run(); return (

Text Color & Highlight

Color

{TEXT_COLORS.map(({ name, color }) => ( handleSetColor(color)} /> ))}

Background

{HIGHLIGHT_COLORS.map(({ name, color }) => ( handleSetHighlight(color)} isHighlight /> ))}

); }; `,children:(0,n.jsxs)(l.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Popover,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverContent,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/popover"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ScrollArea } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/scroll-area"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Separator } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/separator"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Tooltip,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TooltipContent,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TooltipTrigger,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tooltip"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useToolbar } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/toolbar-provider"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Extension } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/core"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ColorOptions } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/extension-color"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { HighlightOptions } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@tiptap/extension-highlight"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Check, ChevronDown } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" TextStylingExtensions"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Extension"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ColorOptions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Extension"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HighlightOptions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TEXT_COLORS"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Default"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-default)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Gray"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-gray)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Brown"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-brown)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Orange"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-orange)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Yellow"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-yellow)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Green"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-green)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Blue"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-blue)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Purple"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-purple)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Pink"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-pink)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Red"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--text-red)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" HIGHLIGHT_COLORS"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Default"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-default)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Gray"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-gray)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Brown"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-brown)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Orange"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-orange)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Yellow"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-yellow)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Green"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-green)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Blue"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-blue)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Purple"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-purple)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Pink"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-pink)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { name: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Red"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"var(--highlight-red)"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"];"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ColorHighlightButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" isActive"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" isHighlight"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ColorHighlightButton"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" name,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" color,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isActive,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" onClick,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" isHighlight,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ColorHighlightButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{onClick}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex w-full items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-gray-3"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"rounded-sm border px-1 py-px font-medium"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{isHighlight "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { backgroundColor: color } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { color }}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" A"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{name}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {isActive "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Check"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ColorHighlightToolbar"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"editor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useToolbar"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" currentColor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getAttributes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"textStyle"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").color;"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" currentHighlight"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getAttributes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"highlight"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").color;"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSetColor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"chain"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"focus"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setColor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(color "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" currentColor "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" color)"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"run"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSetHighlight"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"chain"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"focus"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setHighlight"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(color "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" currentHighlight "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { color: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { color })"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"run"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" isDisabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editor?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"can"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"chain"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setHighlight"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"run"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"||"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editor?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"can"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"chain"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setColor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"run"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Popover"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative h-full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Tooltip"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" asChild"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverTrigger"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{isDisabled} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"asChild"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"sm"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" color: currentColor,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"h-8 w-14 p-0 font-normal"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-md"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">A"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ChevronDown"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ml-2 h-4 w-4"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TooltipContent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Text Color & Highlight"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"PopoverContent"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" align"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-56 p-1 dark:bg-gray-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ScrollArea"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"max-h-80 overflow-y-auto pr-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mb-2.5 mt-2 px-2 text-xs text-gray-11"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Color"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TEXT_COLORS"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ColorHighlightButton"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{color}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" isActive"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{currentColor "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" color}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSetColor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(color)}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"my-3"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mb-2.5 w-full px-2 pr-3 text-xs text-gray-11"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Background"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"HIGHLIGHT_COLORS"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"name"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"color"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ColorHighlightButton"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" color"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{color}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" isActive"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{currentHighlight "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" color}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSetHighlight"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(color)}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" isHighlight"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "})]})})})]})})]})]})}function m(t={}){let{wrapper:l}=t.components||{};return l?(0,n.jsx)(l,{...t,children:(0,n.jsx)(g,{...t})}):g(t)}function o(t,l){throw new Error("Expected "+(l?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return H(k);})(); ;return Component;

Color and Highlight Toolbar

Installation