); }; export ImagePlaceholderToolbarExample; `,__src__:"src/registry/toolbar-examples/image-placeholder-toolbar-example.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ImageExtension } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/extensions/image"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ImagePlaceholder } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/extensions/image-placeholder"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ImagePlaceholderToolbar } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/image-placeholder-toolbar"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ToolbarProvider } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/toolbar-provider"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useEditor } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@tiptap/react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" StarterKit "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@tiptap/starter-kit"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" extensions"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" StarterKit."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"configure"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" orderedList: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"list-decimal"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" blockquote: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-accent-foreground p-2"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" bulletList: {"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"list-disc"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" heading: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" levels: ["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"3"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"4"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" HTMLAttributes: {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" class: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"tiptap-heading"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ImageExtension,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ImagePlaceholder,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"];"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ImagePlaceholderToolbarExample"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" editor"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useEditor"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" extensions,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" immediatelyRender: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"editor) {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"w-full p-3 flex items-center justify-center"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ToolbarProvider"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" editor"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{editor}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ImagePlaceholderToolbar"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ImagePlaceholderToolbarExample;"})]})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(c,{value:"cli",children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json `,__npmCommand__:`npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json `,__yarnCommand__:`npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json `,__pnpmCommand__:`pnpm dlx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json `,__bunCommand__:`bunx --bun shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" shadcn"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" https://tiptap.niazmorshed.dev/r/image-placeholder-toolbar.json"})]})})})})}),(0,l.jsx)(c,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsxs)(r,{children:["Install ",(0,l.jsx)(n.a,{href:"https://ui.shadcn.com/docs/components/button",children:"Button"}),", ",(0,l.jsx)(n.a,{href:"https://ui.shadcn.com/docs/components/tooltip",children:"Tooltip"})," components from @shadcn/ui"]}),(0,l.jsxs)(r,{children:["Copy & paste the following code under ",(0,l.jsx)(n.code,{children:"components/toolbars/image-placeholder-toolbar.tsx"}),"."]}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"jsx","data-theme":"github-dark",__rawString__:`"use client"; import { Image } from "lucide-react"; import React from "react"; import { Button, type ButtonProps } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useToolbar } from "@/components/toolbars/toolbar-provider"; const ImagePlaceholderToolbar = React.forwardRef< HTMLButtonElement, ButtonProps >(({ className, onClick, children, ...props }, ref) => { const { editor } = useToolbar(); return ( Image ); }); ImagePlaceholderToolbar.displayName = "ImagePlaceholderToolbar"; export { ImagePlaceholderToolbar }; `,children:(0,l.jsxs)(n.code,{"data-language":"jsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Image } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Button, "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ButtonProps } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Tooltip,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" TooltipContent,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" TooltipTrigger,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tooltip"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useToolbar } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/toolbars/toolbar-provider"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" ImagePlaceholderToolbar"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" HTMLButtonElement,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ButtonProps"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"editor"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useToolbar"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TooltipTrigger"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"icon"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "h-8 w-8"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"isActive"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"image-placeholder"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "bg-accent"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"e"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"chain"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"focus"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"insertImagePlaceholder"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"run"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"?.(e);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {children "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Image"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"h-4 w-4"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TooltipContent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Image"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"});"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"ImagePlaceholderToolbar.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "ImagePlaceholderToolbar"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ImagePlaceholderToolbar };"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "})]})})})]})})]})]})}function g(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(F,{...e})}):F(e)}function o(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return I(v);})(); ;return Component;

Image placeholder toolbar

Installation