) } const placeholder = 'Start typing...' export function Plugins() { const [floatingAnchorElem, setFloatingAnchorElem] = useState(null) const onRef = (_floatingAnchorElem: HTMLDivElement) => { if (_floatingAnchorElem !== null) { setFloatingAnchorElem(_floatingAnchorElem) } } return (

{/* toolbar plugins */}

} ErrorBoundary={LexicalErrorBoundary} /> {/* rest of the plugins */}

) } `,__src__:"registry/new-york/examples/context-menu-plugin-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { InitialConfigType, LexicalComposer } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalComposer"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { LexicalErrorBoundary } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalErrorBoundary"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { RichTextPlugin } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalRichTextPlugin"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { TooltipProvider } "}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { editorTheme } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/themes/editor-theme"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ContentEditable } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/editor-ui/content-editable"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ContextMenuPlugin } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/context-menu-plugin"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" editorConfig"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" InitialConfigType"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" namespace: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Editor'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" theme: editorTheme,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" nodes: [],"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onError"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Error"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" console."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(error)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" RichTextEditorDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"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 overflow-hidden rounded-lg border bg-background shadow"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"LexicalComposer"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initialConfig"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"editorConfig,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TooltipProvider"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Plugins"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'Start typing...'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Plugins"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"floatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setFloatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onRef"}),(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:"_floatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" HTMLDivElement"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (_floatingAnchorElem "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"!=="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setFloatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(_floatingAnchorElem)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"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:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/* toolbar plugins */"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"RichTextPlugin"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" contentEditable"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{className:"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:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"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:'""'}),(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:"{onRef}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ContentEditable"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{placeholder} "}),(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:'"ContentEditable__root relative block min-h-72 overflow-auto min-h-full px-8 py-4 focus:outline-none h-72"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{LexicalErrorBoundary}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ContextMenuPlugin"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/* rest of the plugins */"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import { useState } from "react" import { InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer" import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary" import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin" import { TooltipProvider } from "@/components/ui/tooltip" import { editorTheme } from "@/components/editor/themes/editor-theme" import { ContentEditable } from "@/components/editor/editor-ui/content-editable" import { ContextMenuPlugin } from "@/components/editor/plugins/context-menu-plugin" const editorConfig: InitialConfigType = { namespace: 'Editor', theme: editorTheme, nodes: [], onError: (error: Error) => { console.error(error) }, } export function RichTextEditorDemo() { return (

{/* toolbar plugins */}

} ErrorBoundary={LexicalErrorBoundary} /> {/* rest of the plugins */}

) } `,__src__:"registry/default/examples/context-menu-plugin-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { InitialConfigType, LexicalComposer } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalComposer"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { LexicalErrorBoundary } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalErrorBoundary"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { RichTextPlugin } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalRichTextPlugin"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { TooltipProvider } "}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { editorTheme } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/themes/editor-theme"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ContentEditable } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/editor-ui/content-editable"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ContextMenuPlugin } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/context-menu-plugin"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" editorConfig"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" InitialConfigType"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" namespace: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Editor'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" theme: editorTheme,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" nodes: [],"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onError"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Error"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" console."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"error"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(error)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" RichTextEditorDemo"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"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 overflow-hidden rounded-lg border bg-background shadow"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"LexicalComposer"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" initialConfig"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"editorConfig,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TooltipProvider"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Plugins"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'Start typing...'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Plugins"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"floatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setFloatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onRef"}),(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:"_floatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" HTMLDivElement"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (_floatingAnchorElem "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"!=="}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setFloatingAnchorElem"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(_floatingAnchorElem)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"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:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/* toolbar plugins */"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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:'"relative"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"RichTextPlugin"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" contentEditable"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{className:"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:'""'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"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:'""'}),(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:"{onRef}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ContentEditable"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{placeholder} "}),(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:'"ContentEditable__root relative block min-h-72 overflow-auto min-h-full px-8 py-4 focus:outline-none h-72"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ErrorBoundary"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{LexicalErrorBoundary}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"ContextMenuPlugin"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/* rest of the plugins */"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(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)(E,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/context-menu-plugin.json `,__npmCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/context-menu-plugin.json `,__yarnCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/context-menu-plugin.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://shadcn-editor.vercel.app/r/context-menu-plugin.json `,__bunCommand__:`bunx --bun shadcn@latest add https://shadcn-editor.vercel.app/r/context-menu-plugin.json `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" https://shadcn-editor.vercel.app/r/context-menu-plugin.json"})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(c,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @lexical/link `,__npmCommand__:`npm install @lexical/link `,__yarnCommand__:`yarn add @lexical/link `,__pnpmCommand__:`pnpm add @lexical/link `,__bunCommand__:`bun add @lexical/link `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" @lexical/link"})]})})})}),(0,l.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(r,{name:"context-menu-plugin",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' /** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import { useCallback, useMemo, JSX } from 'react' import * as React from 'react' import dynamic from 'next/dynamic' import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { MenuOption } from '@lexical/react/LexicalContextMenuPlugin' import { PopoverPortal } from '@radix-ui/react-popover' import { $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection, COPY_COMMAND, CUT_COMMAND, type LexicalNode, PASTE_COMMAND, } from 'lexical' import { Command, CommandItem, CommandList } from '@/components/ui/command' import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover' const LexicalContextMenuPlugin = dynamic( () => import('./default/lexical-context-menu-plugin'), { ssr: false } ) export class ContextMenuOption extends MenuOption { title: string onSelect: (targetNode: LexicalNode | null) => void constructor( title: string, options: { onSelect: (targetNode: LexicalNode | null) => void } ) { super(title) this.title = title this.onSelect = options.onSelect.bind(this) } } export function ContextMenuPlugin(): JSX.Element { const [editor] = useLexicalComposerContext() const [isOpen, setIsOpen] = React.useState(false) const defaultOptions = useMemo(() => { return [ new ContextMenuOption(\`Copy\`, { onSelect: (_node) => { editor.dispatchCommand(COPY_COMMAND, null) }, }), new ContextMenuOption(\`Cut\`, { onSelect: (_node) => { editor.dispatchCommand(CUT_COMMAND, null) }, }), new ContextMenuOption(\`Paste\`, { onSelect: (_node) => { navigator.clipboard.read().then(async function (...args) { const data = new DataTransfer() const items = await navigator.clipboard.read() const item = items[0] const permission = await navigator.permissions.query({ // @ts-expect-error These types are incorrect. name: 'clipboard-read', }) if (permission.state === 'denied') { alert('Not allowed to paste from clipboard.') return } for (const type of item.types) { const dataString = await (await item.getType(type)).text() data.setData(type, dataString) } const event = new ClipboardEvent('paste', { clipboardData: data, }) editor.dispatchCommand(PASTE_COMMAND, event) }) }, }), new ContextMenuOption(\`Paste as Plain Text\`, { onSelect: (_node) => { navigator.clipboard.read().then(async function (...args) { const permission = await navigator.permissions.query({ // @ts-expect-error These types are incorrect. name: 'clipboard-read', }) if (permission.state === 'denied') { alert('Not allowed to paste from clipboard.') return } const data = new DataTransfer() const items = await navigator.clipboard.readText() data.setData('text/plain', items) const event = new ClipboardEvent('paste', { clipboardData: data, }) editor.dispatchCommand(PASTE_COMMAND, event) }) }, }), new ContextMenuOption(\`Delete Node\`, { onSelect: (_node) => { const selection = $getSelection() if ($isRangeSelection(selection)) { const currentNode = selection.anchor.getNode() const ancestorNodeWithRootAsParent = currentNode.getParents().at(-2) ancestorNodeWithRootAsParent?.remove() } }, }), ] }, [editor]) const [options, setOptions] = React.useState(defaultOptions) const onSelectOption = useCallback( ( selectedOption: ContextMenuOption, targetNode: LexicalNode | null, closeMenu: () => void ) => { editor.update(() => { selectedOption.onSelect(targetNode) closeMenu() }) }, [editor] ) const onWillOpen = (event: MouseEvent) => { let newOptions = defaultOptions setIsOpen(true) editor.update(() => { const node = $getNearestNodeFromDOMNode(event.target as Element) if (node) { const parent = node.getParent() if ($isLinkNode(parent)) { newOptions = [ new ContextMenuOption(\`Remove Link\`, { onSelect: (_node) => { editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) }, }), ...defaultOptions, ] } } }) setOptions(newOptions) } return ( { onSelectOption(option as ContextMenuOption, targetNode, () => { setIsOpen(false) }) }} onWillOpen={onWillOpen} onOpen={() => { setIsOpen(true) }} onClose={() => { setIsOpen(false) }} menuRenderFn={( anchorElementRef, { options: _options, selectOptionAndCleanUp }, { setMenuRef } ) => { return anchorElementRef.current ? (

{options.map((option) => ( { selectOptionAndCleanUp(option) }} > {option.title} ))}

) : null }} /> ) } `,__src__:"registry/new-york/editor/plugins/context-menu-plugin.tsx",__style__:"new-york",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useCallback, useMemo, JSX } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" dynamic "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'next/dynamic'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { $isLinkNode, TOGGLE_LINK_COMMAND } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/link'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useLexicalComposerContext } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalComposerContext'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { MenuOption } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalContextMenuPlugin'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { PopoverPortal } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-popover'"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $getNearestNodeFromDOMNode,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $getSelection,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $isRangeSelection,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" COPY_COMMAND,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" CUT_COMMAND,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" LexicalNode,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PASTE_COMMAND,"})}),` `,(0,l.jsxs)(n.span,{className:"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:" 'lexical'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Command, CommandItem, CommandList } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/command'"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Popover,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PopoverContent,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PopoverTrigger,"})}),` `,(0,l.jsxs)(n.span,{className:"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/popover'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" LexicalContextMenuPlugin"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" dynamic"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#F97583"},children:" import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'./default/lexical-context-menu-plugin'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ssr: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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:"targetNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" LexicalNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(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:"#79B8FF"},children:" void"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" constructor"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" options"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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:"targetNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" LexicalNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(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:"#79B8FF"},children:" void"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" super"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(title)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".title "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" title"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".onSelect "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" options.onSelect."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"bind"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuPlugin"}),(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:" JSX"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"Element"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"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:" useLexicalComposerContext"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"isOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIsOpen"}),(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:" React."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" defaultOptions"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(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,{className:"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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Copy`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"COPY_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Cut`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CUT_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Paste`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(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:"args"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" DataTransfer"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" items"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" item"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" items["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" permission"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.permissions."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"query"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" // @ts-expect-error These types are incorrect."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'clipboard-read'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (permission.state "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'denied'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" alert"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Not allowed to paste from clipboard.'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" for"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" of"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" item.types) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" dataString"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" item."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getType"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(type))."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" data."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setData"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(type, dataString)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ClipboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" clipboardData: data,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PASTE_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", event)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Paste as Plain Text`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(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:"args"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" permission"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.permissions."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"query"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" // @ts-expect-error These types are incorrect."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'clipboard-read'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (permission.state "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'denied'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" alert"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Not allowed to paste from clipboard.'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" DataTransfer"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" items"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"readText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" data."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setData"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'text/plain'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", items)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ClipboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" clipboardData: data,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PASTE_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", event)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Delete Node`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" selection"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" $getSelection"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#B392F0"},children:"$isRangeSelection"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(selection)) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" currentNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selection.anchor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" ancestorNodeWithRootAsParent"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentNode."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getParents"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"at"}),(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:"#79B8FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ancestorNodeWithRootAsParent?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"remove"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [editor])"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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:"options"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setOptions"}),(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:" React."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(defaultOptions)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" onSelectOption"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useCallback"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selectedOption: ContextMenuOption,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" targetNode: LexicalNode "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"|"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" closeMenu: () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" void"})]}),` `,(0,l.jsxs)(n.span,{className:"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:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"update"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selectedOption."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(targetNode)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" closeMenu"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [editor]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onWillOpen"}),(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:"event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MouseEvent"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" newOptions "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" defaultOptions"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"update"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" node"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" $getNearestNodeFromDOMNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(event.target "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Element"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (node) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" parent"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" node."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getParent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#B392F0"},children:"$isLinkNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(parent)) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" newOptions "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Remove Link`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TOGGLE_LINK_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"defaultOptions,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setOptions"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(newOptions)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"LexicalContextMenuPlugin"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" options"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{options}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelectOption"}),(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:"option"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"targetNode"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelectOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(option "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", targetNode, () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onWillOpen"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{onWillOpen}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onOpen"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClose"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" menuRenderFn"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" anchorElementRef,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { options: _options, selectOptionAndCleanUp },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { setMenuRef }"})}),` `,(0,l.jsxs)(n.span,{className:"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:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" anchorElementRef.current "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Popover"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" open"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isOpen} "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"onOpenChange"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{setIsOpen}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverPortal"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{anchorElementRef.current}>"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverTrigger"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"{setMenuRef}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" marginLeft: anchorElementRef.current?.style.width,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" userSelect: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'none'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverContent"}),(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-[200px] p-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Command"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CommandList"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {options."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"option"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CommandItem"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{option.key}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" selectOptionAndCleanUp"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(option)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {option.title}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#79B8FF"},children:" null"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' /** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import { useCallback, useMemo, JSX } from 'react' import * as React from 'react' import dynamic from 'next/dynamic' import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { MenuOption } from '@lexical/react/LexicalContextMenuPlugin' import { PopoverPortal } from '@radix-ui/react-popover' import { $getNearestNodeFromDOMNode, $getSelection, $isRangeSelection, COPY_COMMAND, CUT_COMMAND, type LexicalNode, PASTE_COMMAND, } from 'lexical' import { Command, CommandItem, CommandList } from '@/components/ui/command' import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover' const LexicalContextMenuPlugin = dynamic( () => import('./default/lexical-context-menu-plugin'), { ssr: false } ) export class ContextMenuOption extends MenuOption { title: string onSelect: (targetNode: LexicalNode | null) => void constructor( title: string, options: { onSelect: (targetNode: LexicalNode | null) => void } ) { super(title) this.title = title this.onSelect = options.onSelect.bind(this) } } export function ContextMenuPlugin(): JSX.Element { const [editor] = useLexicalComposerContext() const [isOpen, setIsOpen] = React.useState(false) const defaultOptions = useMemo(() => { return [ new ContextMenuOption(\`Copy\`, { onSelect: (_node) => { editor.dispatchCommand(COPY_COMMAND, null) }, }), new ContextMenuOption(\`Cut\`, { onSelect: (_node) => { editor.dispatchCommand(CUT_COMMAND, null) }, }), new ContextMenuOption(\`Paste\`, { onSelect: (_node) => { navigator.clipboard.read().then(async function (...args) { const data = new DataTransfer() const items = await navigator.clipboard.read() const item = items[0] const permission = await navigator.permissions.query({ // @ts-expect-error These types are incorrect. name: 'clipboard-read', }) if (permission.state === 'denied') { alert('Not allowed to paste from clipboard.') return } for (const type of item.types) { const dataString = await (await item.getType(type)).text() data.setData(type, dataString) } const event = new ClipboardEvent('paste', { clipboardData: data, }) editor.dispatchCommand(PASTE_COMMAND, event) }) }, }), new ContextMenuOption(\`Paste as Plain Text\`, { onSelect: (_node) => { navigator.clipboard.read().then(async function (...args) { const permission = await navigator.permissions.query({ // @ts-expect-error These types are incorrect. name: 'clipboard-read', }) if (permission.state === 'denied') { alert('Not allowed to paste from clipboard.') return } const data = new DataTransfer() const items = await navigator.clipboard.readText() data.setData('text/plain', items) const event = new ClipboardEvent('paste', { clipboardData: data, }) editor.dispatchCommand(PASTE_COMMAND, event) }) }, }), new ContextMenuOption(\`Delete Node\`, { onSelect: (_node) => { const selection = $getSelection() if ($isRangeSelection(selection)) { const currentNode = selection.anchor.getNode() const ancestorNodeWithRootAsParent = currentNode.getParents().at(-2) ancestorNodeWithRootAsParent?.remove() } }, }), ] }, [editor]) const [options, setOptions] = React.useState(defaultOptions) const onSelectOption = useCallback( ( selectedOption: ContextMenuOption, targetNode: LexicalNode | null, closeMenu: () => void ) => { editor.update(() => { selectedOption.onSelect(targetNode) closeMenu() }) }, [editor] ) const onWillOpen = (event: MouseEvent) => { let newOptions = defaultOptions setIsOpen(true) editor.update(() => { const node = $getNearestNodeFromDOMNode(event.target as Element) if (node) { const parent = node.getParent() if ($isLinkNode(parent)) { newOptions = [ new ContextMenuOption(\`Remove Link\`, { onSelect: (_node) => { editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) }, }), ...defaultOptions, ] } } }) setOptions(newOptions) } return ( { onSelectOption(option as ContextMenuOption, targetNode, () => { setIsOpen(false) }) }} onWillOpen={onWillOpen} onOpen={() => { setIsOpen(true) }} onClose={() => { setIsOpen(false) }} menuRenderFn={( anchorElementRef, { options: _options, selectOptionAndCleanUp }, { setMenuRef } ) => { return anchorElementRef.current ? (

{options.map((option) => ( { selectOptionAndCleanUp(option) }} > {option.title} ))}

) : null }} /> ) } `,__src__:"registry/default/editor/plugins/context-menu-plugin.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useCallback, useMemo, JSX } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(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,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" dynamic "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'next/dynamic'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { $isLinkNode, TOGGLE_LINK_COMMAND } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/link'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useLexicalComposerContext } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalComposerContext'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { MenuOption } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalContextMenuPlugin'"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { PopoverPortal } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-popover'"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $getNearestNodeFromDOMNode,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $getSelection,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" $isRangeSelection,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" COPY_COMMAND,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" CUT_COMMAND,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" LexicalNode,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PASTE_COMMAND,"})}),` `,(0,l.jsxs)(n.span,{className:"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:" 'lexical'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Command, CommandItem, CommandList } "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/command'"})]}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Popover,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PopoverContent,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" PopoverTrigger,"})}),` `,(0,l.jsxs)(n.span,{className:"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/popover'"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" LexicalContextMenuPlugin"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" dynamic"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#F97583"},children:" import"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'./default/lexical-context-menu-plugin'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ssr: "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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:"targetNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" LexicalNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(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:"#79B8FF"},children:" void"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" constructor"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:" options"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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:"targetNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" LexicalNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(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:"#79B8FF"},children:" void"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ) {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" super"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(title)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".title "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" title"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:".onSelect "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" options.onSelect."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"bind"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"this"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuPlugin"}),(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:" JSX"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"Element"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"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:" useLexicalComposerContext"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"isOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIsOpen"}),(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:" React."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" defaultOptions"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useMemo"}),(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,{className:"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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Copy`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"COPY_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Cut`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CUT_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Paste`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(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:"args"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" DataTransfer"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" items"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" item"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" items["}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" permission"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.permissions."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"query"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" // @ts-expect-error These types are incorrect."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'clipboard-read'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (permission.state "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'denied'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" alert"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Not allowed to paste from clipboard.'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" for"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" of"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" item.types) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" dataString"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" item."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getType"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(type))."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"text"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" data."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setData"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(type, dataString)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ClipboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" clipboardData: data,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PASTE_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", event)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Paste as Plain Text`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"read"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(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:"args"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" permission"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.permissions."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"query"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#6A737D"},children:" // @ts-expect-error These types are incorrect."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'clipboard-read'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (permission.state "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'denied'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" alert"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Not allowed to paste from clipboard.'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" data"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" DataTransfer"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" items"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" await"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"readText"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" data."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"setData"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'text/plain'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", items)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ClipboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" clipboardData: data,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PASTE_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", event)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Delete Node`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" selection"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" $getSelection"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#B392F0"},children:"$isRangeSelection"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(selection)) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" currentNode"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selection.anchor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" ancestorNodeWithRootAsParent"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" currentNode."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getParents"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"at"}),(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:"#79B8FF"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ancestorNodeWithRootAsParent?."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"remove"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, [editor])"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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:"options"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"setOptions"}),(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:" React."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(defaultOptions)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" onSelectOption"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" useCallback"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selectedOption: ContextMenuOption,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" targetNode: LexicalNode "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"|"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" closeMenu: () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" void"})]}),` `,(0,l.jsxs)(n.span,{className:"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:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"update"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" selectedOption."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(targetNode)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" closeMenu"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" [editor]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onWillOpen"}),(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:"event"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" MouseEvent"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" let"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" newOptions "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" defaultOptions"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"update"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" node"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" $getNearestNodeFromDOMNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(event.target "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" Element"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" (node) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:" parent"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" node."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"getParent"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#B392F0"},children:"$isLinkNode"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(parent)) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" newOptions "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"`Remove Link`"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"_node"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"TOGGLE_LINK_COMMAND"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"defaultOptions,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ]"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setOptions"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(newOptions)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"LexicalContextMenuPlugin"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" options"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{options}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelectOption"}),(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:"option"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"targetNode"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelectOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(option "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" ContextMenuOption"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:", targetNode, () "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onWillOpen"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{onWillOpen}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onOpen"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onClose"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsOpen"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" menuRenderFn"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" anchorElementRef,"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { options: _options, selectOptionAndCleanUp },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { setMenuRef }"})}),` `,(0,l.jsxs)(n.span,{className:"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:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" anchorElementRef.current "}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Popover"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" open"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{isOpen} "}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"onOpenChange"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{setIsOpen}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverPortal"}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{anchorElementRef.current}>"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverTrigger"})]}),` `,(0,l.jsxs)(n.span,{className:"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:"{setMenuRef}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" marginLeft: anchorElementRef.current?.style.width,"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" userSelect: "}),(0,l.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'none'"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"PopoverContent"}),(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-[200px] p-1"'}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"Command"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CommandList"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {options."}),(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFAB70"},children:"option"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#79B8FF"},children:"CommandItem"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{option.key}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" onSelect"}),(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,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#B392F0"},children:" selectOptionAndCleanUp"}),(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(option)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {option.title}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"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:"#79B8FF"},children:" null"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,l.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]})]})}function N(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(m,{...e})}):m(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 M(P);})(); ;return Component;

Context Menu

Installation