); } ); Editor.displayName = 'Editor'; export { Editor }; `,__src__:"registry/default/plate-ui/editor.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" PlateContentProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" VariantProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'class-variance-authority'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/cn'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" PlateContent "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cva "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'class-variance-authority'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" editorVariants "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cva"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'relative overflow-x-auto whitespace-pre-wrap break-words'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'[&_[data-slate-placeholder]]:top-[auto_!important]'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'[&_strong]:font-bold'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" defaultVariants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focusRing"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"true,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'sm'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'outline'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" true"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'cursor-not-allowed opacity-50'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focusRing"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" false"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"''"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" true"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focused"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" true"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'ring-2 ring-ring ring-offset-2'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" md"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'text-base'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'text-sm'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ghost"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"''"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" outline"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'border border-input'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"PlateContentProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focusRing"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focused"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" readOnly"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative w-full"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"PlateContent"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" aria-disabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" editorVariants"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focusRing"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" focused"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disableDefaultStyles"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" readOnly"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"disabled "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" readOnly"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'Editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})]})]})})})}),(0,e.jsx)(t,{children:(0,e.jsx)(l.p,{children:"Update the import paths to match your project setup."})})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(l.h3,{id:"default",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#default",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Default"]}),` `,(0,e.jsx)(c,{name:"editor-default",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { createBasicElementsPlugin } from '@udecode/plate-basic-elements'; import { createBasicMarksPlugin } from '@udecode/plate-basic-marks'; import { Plate, createPlugins } from '@udecode/plate-common'; import { createPlateUI } from '@/plate/create-plate-ui'; import { Editor } from '@/components/plate-ui/editor'; import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; export function EditorDefault() { const plugins = createPlugins( [createBasicElementsPlugin(), createBasicMarksPlugin()], { components: createPlateUI() } ); return (

); } `,__src__:"registry/default/example/editor-default.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicElementsPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-elements'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-marks'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/plate/create-plate-ui'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbar "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar-buttons'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorDefault"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createBasicElementsPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" components"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbar"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"disabled",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#disabled",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Disabled"]}),` `,(0,e.jsx)(c,{name:"editor-disabled",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { Plate } from '@udecode/plate-common'; import { Editor } from '@/components/plate-ui/editor'; export function EditorDisabled() { return (

); } `,__src__:"registry/default/example/editor-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorDisabled"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor disabled placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"ghost",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#ghost",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Ghost"]}),` `,(0,e.jsx)(c,{name:"editor-ghost",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { createBasicElementsPlugin } from '@udecode/plate-basic-elements'; import { createBasicMarksPlugin } from '@udecode/plate-basic-marks'; import { Plate, createPlugins } from '@udecode/plate-common'; import { createPlateUI } from '@/plate/create-plate-ui'; import { Editor } from '@/components/plate-ui/editor'; import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; export function EditorGhost() { const plugins = createPlugins( [createBasicElementsPlugin(), createBasicMarksPlugin()], { components: createPlateUI() } ); return (

); } `,__src__:"registry/default/example/editor-ghost.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicElementsPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-elements'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-marks'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/plate/create-plate-ui'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbar "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar-buttons'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorGhost"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createBasicElementsPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" components"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"ghost"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbar"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"with-label",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#with-label",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Label"]}),` `,(0,e.jsx)(c,{name:"editor-label",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { createBasicElementsPlugin } from '@udecode/plate-basic-elements'; import { createBasicMarksPlugin } from '@udecode/plate-basic-marks'; import { Plate, createPlugins } from '@udecode/plate-common'; import { Label } from '@/components/ui/label'; import { createPlateUI } from '@/plate/create-plate-ui'; import { Editor } from '@/components/plate-ui/editor'; import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; export function EditorLabel() { const plugins = createPlugins( [createBasicElementsPlugin(), createBasicMarksPlugin()], { components: createPlateUI() } ); return (

Your message

); } `,__src__:"registry/default/example/editor-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicElementsPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-elements'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-marks'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Label "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/ui/label'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/plate/create-plate-ui'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbar "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar-buttons'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorLabel"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createBasicElementsPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" components"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] grid gap-1.5 p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Your message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbar"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"with-text",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#with-text",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Text"]}),` `,(0,e.jsx)(c,{name:"editor-text",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { createBasicElementsPlugin } from '@udecode/plate-basic-elements'; import { createBasicMarksPlugin } from '@udecode/plate-basic-marks'; import { Plate, createPlugins } from '@udecode/plate-common'; import { Label } from '@/components/ui/label'; import { createPlateUI } from '@/plate/create-plate-ui'; import { Editor } from '@/components/plate-ui/editor'; import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; export function EditorText() { const plugins = createPlugins( [createBasicElementsPlugin(), createBasicMarksPlugin()], { components: createPlateUI() } ); return (

Your Message

Your message will be copied to the support team.

); } `,__src__:"registry/default/example/editor-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicElementsPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-elements'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-marks'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Label "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/ui/label'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/plate/create-plate-ui'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbar "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar-buttons'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorText"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createBasicElementsPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" components"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] grid gap-1.5 p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Your Message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbar"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"p className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Your message will be copied to the support team."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"with-button",children:[(0,e.jsx)(l.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#with-button",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Button"]}),` `,(0,e.jsx)(c,{name:"editor-button",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import { createBasicElementsPlugin } from '@udecode/plate-basic-elements'; import { createBasicMarksPlugin } from '@udecode/plate-basic-marks'; import { Plate, createPlugins } from '@udecode/plate-common'; import { createPlateUI } from '@/plate/create-plate-ui'; import { Button } from '@/components/plate-ui/button'; import { Editor } from '@/components/plate-ui/editor'; import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar'; import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons'; export function EditorButton() { const plugins = createPlugins( [createBasicElementsPlugin(), createBasicMarksPlugin()], { components: createPlateUI() } ); return (

); } `,__src__:"registry/default/example/editor-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicElementsPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-elements'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-basic-marks'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/plate-common'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/plate/create-plate-ui'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/button'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Editor "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/editor'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbar "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@/components/plate-ui/floating-toolbar-buttons'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"EditorButton"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" plugins "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createBasicElementsPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createBasicMarksPlugin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" components"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" createPlateUI"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-[72px] grid w-full gap-2 p-10"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plate plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Editor placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbar"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FloatingToolbarButtons "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Send message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function B(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(u,n)})):u(n)}var k=B;function r(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(w);})(); ;return Component;

Editor

Installation

Examples

Default

Disabled

Ghost

With Label

With Text

With Button