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

{/* toolbar plugins */} {({ blockType }) => (

)}

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

) } `,__src__:"registry/new-york/examples/inline-image-plugin-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ParagraphNode, TextNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lexical"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { HeadingNode, QuoteNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/rich-text"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InitialConfigType, LexicalComposer } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalComposer"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { LexicalErrorBoundary } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalErrorBoundary"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RichTextPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalRichTextPlugin"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { TooltipProvider } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tooltip"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { editorTheme } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/themes/editor-theme"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ContentEditable } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/editor-ui/content-editable"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ToolbarPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/toolbar-plugin"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { BlockInsertPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/block-insert-plugin"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InsertInlineImage } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/block-insert/insert-inline-image"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InlineImageNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/nodes/inline-image-node"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InlineImagePlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/inline-image-plugin"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" editorConfig"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InitialConfigType"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" namespace: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Editor'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme: editorTheme,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" nodes: ["})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HeadingNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ParagraphNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TextNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" QuoteNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImageNode"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ],"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(error)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" RichTextEditorDemo"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-full overflow-hidden rounded-lg border bg-background shadow"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"LexicalComposer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" initialConfig"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editorConfig,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TooltipProvider"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Plugins"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'Start typing...'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Plugins"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"floatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setFloatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"_floatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (_floatingAnchorElem "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setFloatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(_floatingAnchorElem)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/* toolbar plugins */"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ToolbarPlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"blockType"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto border-b p-1"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"BlockInsertPlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"InsertInlineImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"RichTextPlugin"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" contentEditable"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{onRef}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ContentEditable"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{placeholder} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ContentEditable__root relative block min-h-72 overflow-auto min-h-full px-8 py-4 focus:outline-none h-72"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ErrorBoundary"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{LexicalErrorBoundary}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"InlineImagePlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/* rest of the plugins */"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client' import { useState } from "react" import { Plus } from "lucide-react" import { ParagraphNode, TextNode } from "lexical" import { HeadingNode, QuoteNode } from "@lexical/rich-text" import { InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer" import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary" import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin" import { Button } from "@/components/ui/button" import { TooltipProvider } from "@/components/ui/tooltip" import { editorTheme } from "@/components/editor/themes/editor-theme" import { ContentEditable } from "@/components/editor/editor-ui/content-editable" import { ToolbarPlugin } from "@/components/editor/plugins/toolbar/toolbar-plugin" import { BlockInsertPlugin } from "@/components/editor/plugins/toolbar/block-insert-plugin" import { InsertInlineImage } from "@/components/editor/plugins/toolbar/block-insert/insert-inline-image" import { InlineImageNode } from "@/components/editor/nodes/inline-image-node" import { InlineImagePlugin } from "@/components/editor/plugins/inline-image-plugin" const editorConfig: InitialConfigType = { namespace: 'Editor', theme: editorTheme, nodes: [ HeadingNode, ParagraphNode, TextNode, QuoteNode, InlineImageNode ], onError: (error: Error) => { console.error(error) }, } export function RichTextEditorDemo() { return (

{/* toolbar plugins */} {({ blockType }) => (

)}

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

) } `,__src__:"registry/default/examples/inline-image-plugin-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Plus } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ParagraphNode, TextNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "lexical"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { HeadingNode, QuoteNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/rich-text"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InitialConfigType, LexicalComposer } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalComposer"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { LexicalErrorBoundary } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalErrorBoundary"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RichTextPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalRichTextPlugin"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { TooltipProvider } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tooltip"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { editorTheme } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/themes/editor-theme"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ContentEditable } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/editor-ui/content-editable"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ToolbarPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/toolbar-plugin"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { BlockInsertPlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/block-insert-plugin"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InsertInlineImage } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/toolbar/block-insert/insert-inline-image"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InlineImageNode } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/nodes/inline-image-node"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { InlineImagePlugin } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/plugins/inline-image-plugin"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" editorConfig"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InitialConfigType"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" namespace: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Editor'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" theme: editorTheme,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" nodes: ["})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" HeadingNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ParagraphNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" TextNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" QuoteNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImageNode"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ],"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(error)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" RichTextEditorDemo"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-full overflow-hidden rounded-lg border bg-background shadow"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"LexicalComposer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" initialConfig"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editorConfig,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"TooltipProvider"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Plugins"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'Start typing...'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Plugins"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"floatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setFloatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"_floatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (_floatingAnchorElem "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setFloatingAnchorElem"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(_floatingAnchorElem)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/* toolbar plugins */"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ToolbarPlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {({ "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"blockType"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto border-b p-1"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"BlockInsertPlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"InsertInlineImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"RichTextPlugin"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" contentEditable"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{onRef}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ContentEditable"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{placeholder} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"ContentEditable__root relative block min-h-72 overflow-auto min-h-full px-8 py-4 focus:outline-none h-72"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ErrorBoundary"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{LexicalErrorBoundary}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"InlineImagePlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/* rest of the plugins */"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(t,{value:"cli",children:"CLI"}),(0,n.jsx)(t,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/inline-image-plugin.json `,__npmCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/inline-image-plugin.json `,__yarnCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/inline-image-plugin.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://shadcn-editor.vercel.app/r/inline-image-plugin.json `,__bunCommand__:`bunx --bun shadcn@latest add https://shadcn-editor.vercel.app/r/inline-image-plugin.json `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" https://shadcn-editor.vercel.app/r/inline-image-plugin.json"})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(c,{children:"Install the following dependencies:"}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @lexical/utils `,__npmCommand__:`npm install @lexical/utils `,__yarnCommand__:`yarn add @lexical/utils `,__pnpmCommand__:`pnpm add @lexical/utils `,__bunCommand__:`bun add @lexical/utils `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" @lexical/utils"})]})})})}),(0,n.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(o,{name:"inline-image-plugin",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.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 * as React from 'react' import { useEffect, useRef, useState, JSX } from 'react' // import '../nodes/inline-image-node.css'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { $wrapNodeInElement, mergeRegister } from '@lexical/utils' import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, LexicalCommand, LexicalEditor, createCommand, } from 'lexical' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' import type { Position } from '@/components/editor/nodes/inline-image-node' import { $createInlineImageNode, $isInlineImageNode, InlineImageNode, InlineImagePayload, } from '@/components/editor/nodes/inline-image-node' import { CAN_USE_DOM } from '@/components/editor/shared/can-use-dom' export type InsertInlineImagePayload = Readonly const getDOMSelection = (targetWindow: Window | null): Selection | null => CAN_USE_DOM ? (targetWindow || window).getSelection() : null export const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand = createCommand('INSERT_INLINE_IMAGE_COMMAND') export function InsertInlineImageDialog({ activeEditor, onClose, }: { activeEditor: LexicalEditor onClose: () => void }): JSX.Element { const hasModifier = useRef(false) const [src, setSrc] = useState('') const [altText, setAltText] = useState('') const [showCaption, setShowCaption] = useState(false) const [position, setPosition] = useState('left') const isDisabled = src === '' const handleShowCaptionChange = (e: React.ChangeEvent) => { setShowCaption(e.target.checked) } const handlePositionChange = (e: React.ChangeEvent) => { setPosition(e.target.value as Position) } const loadImage = (files: FileList | null) => { const reader = new FileReader() reader.onload = function () { if (typeof reader.result === 'string') { setSrc(reader.result) } return '' } if (files !== null) { reader.readAsDataURL(files[0]) } } useEffect(() => { hasModifier.current = false const handler = (e: KeyboardEvent) => { hasModifier.current = e.altKey } document.addEventListener('keydown', handler) return () => { document.removeEventListener('keydown', handler) } }, [activeEditor]) const handleOnClick = () => { const payload = { altText, position, showCaption, src } activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload) onClose() } return (

Image Upload loadImage(e.target.files)} accept="image/*" data-test-id="image-modal-file-upload" />

Alt Text setAltText(e.target.value)} value={altText} data-test-id="image-modal-alt-text-input" />

Position

setShowCaption(checked as boolean)} /> Show Caption

) } export function InlineImagePlugin(): JSX.Element | null { const [editor] = useLexicalComposerContext() useEffect(() => { if (!editor.hasNodes([InlineImageNode])) { throw new Error('ImagesPlugin: ImageNode not registered on editor') } return mergeRegister( editor.registerCommand( INSERT_INLINE_IMAGE_COMMAND, (payload) => { const imageNode = $createInlineImageNode(payload) $insertNodes([imageNode]) if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) { $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd() } return true }, COMMAND_PRIORITY_EDITOR ), editor.registerCommand( DRAGSTART_COMMAND, (event) => { return $onDragStart(event) }, COMMAND_PRIORITY_HIGH ), editor.registerCommand( DRAGOVER_COMMAND, (event) => { return $onDragover(event) }, COMMAND_PRIORITY_LOW ), editor.registerCommand( DROP_COMMAND, (event) => { return $onDrop(event, editor) }, COMMAND_PRIORITY_HIGH ) ) }, [editor]) return null } function $onDragStart(event: DragEvent): boolean { const node = $getImageNodeInSelection() if (!node) { return false } const dataTransfer = event.dataTransfer if (!dataTransfer) { return false } const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' const img = document.createElement('img') img.src = TRANSPARENT_IMAGE dataTransfer.setData('text/plain', '_') dataTransfer.setDragImage(img, 0, 0) dataTransfer.setData( 'application/x-lexical-drag', JSON.stringify({ data: { altText: node.__altText, caption: node.__caption, height: node.__height, key: node.getKey(), showCaption: node.__showCaption, src: node.__src, width: node.__width, }, type: 'image', }) ) return true } function $onDragover(event: DragEvent): boolean { const node = $getImageNodeInSelection() if (!node) { return false } if (!canDropImage(event)) { event.preventDefault() } return true } function $onDrop(event: DragEvent, editor: LexicalEditor): boolean { const node = $getImageNodeInSelection() if (!node) { return false } const data = getDragImageData(event) if (!data) { return false } event.preventDefault() if (canDropImage(event)) { const range = getDragSelection(event) node.remove() const rangeSelection = $createRangeSelection() if (range !== null && range !== undefined) { rangeSelection.applyDOMRange(range) } $setSelection(rangeSelection) editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data) } return true } function $getImageNodeInSelection(): InlineImageNode | null { const selection = $getSelection() if (!$isNodeSelection(selection)) { return null } const nodes = selection.getNodes() const node = nodes[0] return $isInlineImageNode(node) ? node : null } function getDragImageData(event: DragEvent): null | InsertInlineImagePayload { const dragData = event.dataTransfer?.getData('application/x-lexical-drag') if (!dragData) { return null } const { type, data } = JSON.parse(dragData) if (type !== 'image') { return null } return data } declare global { interface DragEvent { rangeOffset?: number rangeParent?: Node } } function canDropImage(event: DragEvent): boolean { const target = event.target return !!( target && target instanceof HTMLElement && !target.closest('code, span.editor-image') && target.parentElement && target.parentElement.closest('div.ContentEditable__root') ) } function getDragSelection(event: DragEvent): Range | null | undefined { let range const target = event.target as null | Element | Document const targetWindow = target == null ? null : target.nodeType === 9 ? (target as Document).defaultView : (target as Element).ownerDocument.defaultView const domSelection = getDOMSelection(targetWindow) if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(event.clientX, event.clientY) } else if (event.rangeParent && domSelection !== null) { domSelection.collapse(event.rangeParent, event.rangeOffset || 0) range = domSelection.getRangeAt(0) } else { throw Error('Cannot get the selection when dragging') } return range } `,__src__:"registry/new-york/editor/plugins/inline-image-plugin.tsx",__style__:"new-york",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEffect, useRef, useState, JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"// import '../nodes/inline-image-node.css';"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useLexicalComposerContext } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalComposerContext'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { $wrapNodeInElement, mergeRegister } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@lexical/utils'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createParagraphNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createRangeSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $getSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $insertNodes,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isNodeSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isRootOrShadowRoot,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $setSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_EDITOR,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_HIGH,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_LOW,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DRAGOVER_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DRAGSTART_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DROP_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" LexicalCommand,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" LexicalEditor,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" createCommand,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'lexical'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/checkbox'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/input'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/label'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/select'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Position } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/nodes/inline-image-node'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createInlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isInlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImagePayload,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/nodes/inline-image-node'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { CAN_USE_DOM } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/shared/can-use-dom'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Readonly"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDOMSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"targetWindow"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Window"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Selection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" CAN_USE_DOM"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (targetWindow "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" window)."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" createCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'INSERT_INLINE_IMAGE_COMMAND'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImageDialog"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" activeEditor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" activeEditor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalEditor"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" hasModifier"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSrc"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"''"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"altText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setAltText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"''"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"showCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'left'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" isDisabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" ''"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleShowCaptionChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ChangeEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.checked)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handlePositionChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ChangeEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLSelectElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" loadImage"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"files"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" FileList"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" reader"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" FileReader"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader.result "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'string'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setSrc"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(reader.result)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" ''"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (files "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"readAsDataURL"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(files["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" hasModifier.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handler"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" hasModifier.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" e.altKey"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handler)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handler)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [activeEditor])"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleOnClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" payload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { altText, position, showCaption, src }"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" activeEditor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", payload)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-4 py-4"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Image Upload"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"file"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" loadImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.files)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" accept"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image/*"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-file-upload"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"alt-text"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Alt Text"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"alt-text"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Descriptive alternative text"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setAltText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.value)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{altText}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-alt-text-input"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Position"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Select"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"left"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onValueChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectTrigger"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectValue"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Select position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"left"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Left"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"right"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Right"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Full Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"caption"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" checked"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{showCaption}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onCheckedChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"checked"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(checked "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"caption"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Show Caption"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-file-upload-btn"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{isDisabled}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleOnClick"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Confirm"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InlineImagePlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"editor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useLexicalComposerContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"hasNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"([InlineImageNode])) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" throw"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'ImagesPlugin: ImageNode not registered on editor'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" mergeRegister"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"payload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" imageNode"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $createInlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(payload)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $insertNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"([imageNode])"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"$isRootOrShadowRoot"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(imageNode."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getParentOrThrow"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"())) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $wrapNodeInElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(imageNode, $createParagraphNode)."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"selectEnd"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_EDITOR"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DRAGSTART_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_HIGH"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DRAGOVER_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragover"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_LOW"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DROP_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDrop"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event, editor)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_HIGH"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [editor])"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" dataTransfer"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.dataTransfer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"dataTransfer) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TRANSPARENT_IMAGE"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" img"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'img'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" img.src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TRANSPARENT_IMAGE"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'text/plain'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'_'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setDragImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(img, "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'application/x-lexical-drag'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" JSON"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" data: {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" altText: node.__altText,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" caption: node.__caption,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" height: node.__height,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" key: node."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getKey"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" showCaption: node.__showCaption,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" src: node.__src,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" width: node.__width,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragover"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDrop"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"editor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalEditor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" data"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragImageData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"data) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" range"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" rangeSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $createRangeSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" rangeSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"applyDOMRange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(range)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $setSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(rangeSelection)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", data)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" selection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"$isNodeSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selection)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" nodes"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" nodes["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $isInlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(node) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragImageData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" dragData"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.dataTransfer?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'application/x-lexical-drag'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"dragData) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"data"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" JSON"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"parse"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(dragData)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (type "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" data"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"declare"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" global {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" rangeOffset"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" rangeParent"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Node"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" target"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.target"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"instanceof"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" HTMLElement"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"target."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"closest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'code, span.editor-image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.parentElement "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.parentElement."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"closest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'div.ContentEditable__root'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Range"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" target"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Element"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Document"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" targetWindow"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.nodeType "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 9"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Document"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").defaultView"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").ownerDocument.defaultView"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" domSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDOMSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(targetWindow)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (document.caretRangeFromPoint) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"caretRangeFromPoint"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.clientX, event.clientY)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (event.rangeParent "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"collapse"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.rangeParent, event.rangeOffset "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getRangeAt"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" throw"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Cannot get the selection when dragging'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.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 * as React from 'react' import { useEffect, useRef, useState, JSX } from 'react' // import '../nodes/inline-image-node.css'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { $wrapNodeInElement, mergeRegister } from '@lexical/utils' import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, LexicalCommand, LexicalEditor, createCommand, } from 'lexical' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' import type { Position } from '@/components/editor/nodes/inline-image-node' import { $createInlineImageNode, $isInlineImageNode, InlineImageNode, InlineImagePayload, } from '@/components/editor/nodes/inline-image-node' import { CAN_USE_DOM } from '@/components/editor/shared/can-use-dom' export type InsertInlineImagePayload = Readonly const getDOMSelection = (targetWindow: Window | null): Selection | null => CAN_USE_DOM ? (targetWindow || window).getSelection() : null export const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand = createCommand('INSERT_INLINE_IMAGE_COMMAND') export function InsertInlineImageDialog({ activeEditor, onClose, }: { activeEditor: LexicalEditor onClose: () => void }): JSX.Element { const hasModifier = useRef(false) const [src, setSrc] = useState('') const [altText, setAltText] = useState('') const [showCaption, setShowCaption] = useState(false) const [position, setPosition] = useState('left') const isDisabled = src === '' const handleShowCaptionChange = (e: React.ChangeEvent) => { setShowCaption(e.target.checked) } const handlePositionChange = (e: React.ChangeEvent) => { setPosition(e.target.value as Position) } const loadImage = (files: FileList | null) => { const reader = new FileReader() reader.onload = function () { if (typeof reader.result === 'string') { setSrc(reader.result) } return '' } if (files !== null) { reader.readAsDataURL(files[0]) } } useEffect(() => { hasModifier.current = false const handler = (e: KeyboardEvent) => { hasModifier.current = e.altKey } document.addEventListener('keydown', handler) return () => { document.removeEventListener('keydown', handler) } }, [activeEditor]) const handleOnClick = () => { const payload = { altText, position, showCaption, src } activeEditor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, payload) onClose() } return (

Image Upload loadImage(e.target.files)} accept="image/*" data-test-id="image-modal-file-upload" />

Alt Text setAltText(e.target.value)} value={altText} data-test-id="image-modal-alt-text-input" />

Position

setShowCaption(checked as boolean)} /> Show Caption

) } export function InlineImagePlugin(): JSX.Element | null { const [editor] = useLexicalComposerContext() useEffect(() => { if (!editor.hasNodes([InlineImageNode])) { throw new Error('ImagesPlugin: ImageNode not registered on editor') } return mergeRegister( editor.registerCommand( INSERT_INLINE_IMAGE_COMMAND, (payload) => { const imageNode = $createInlineImageNode(payload) $insertNodes([imageNode]) if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) { $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd() } return true }, COMMAND_PRIORITY_EDITOR ), editor.registerCommand( DRAGSTART_COMMAND, (event) => { return $onDragStart(event) }, COMMAND_PRIORITY_HIGH ), editor.registerCommand( DRAGOVER_COMMAND, (event) => { return $onDragover(event) }, COMMAND_PRIORITY_LOW ), editor.registerCommand( DROP_COMMAND, (event) => { return $onDrop(event, editor) }, COMMAND_PRIORITY_HIGH ) ) }, [editor]) return null } function $onDragStart(event: DragEvent): boolean { const node = $getImageNodeInSelection() if (!node) { return false } const dataTransfer = event.dataTransfer if (!dataTransfer) { return false } const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' const img = document.createElement('img') img.src = TRANSPARENT_IMAGE dataTransfer.setData('text/plain', '_') dataTransfer.setDragImage(img, 0, 0) dataTransfer.setData( 'application/x-lexical-drag', JSON.stringify({ data: { altText: node.__altText, caption: node.__caption, height: node.__height, key: node.getKey(), showCaption: node.__showCaption, src: node.__src, width: node.__width, }, type: 'image', }) ) return true } function $onDragover(event: DragEvent): boolean { const node = $getImageNodeInSelection() if (!node) { return false } if (!canDropImage(event)) { event.preventDefault() } return true } function $onDrop(event: DragEvent, editor: LexicalEditor): boolean { const node = $getImageNodeInSelection() if (!node) { return false } const data = getDragImageData(event) if (!data) { return false } event.preventDefault() if (canDropImage(event)) { const range = getDragSelection(event) node.remove() const rangeSelection = $createRangeSelection() if (range !== null && range !== undefined) { rangeSelection.applyDOMRange(range) } $setSelection(rangeSelection) editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, data) } return true } function $getImageNodeInSelection(): InlineImageNode | null { const selection = $getSelection() if (!$isNodeSelection(selection)) { return null } const nodes = selection.getNodes() const node = nodes[0] return $isInlineImageNode(node) ? node : null } function getDragImageData(event: DragEvent): null | InsertInlineImagePayload { const dragData = event.dataTransfer?.getData('application/x-lexical-drag') if (!dragData) { return null } const { type, data } = JSON.parse(dragData) if (type !== 'image') { return null } return data } declare global { interface DragEvent { rangeOffset?: number rangeParent?: Node } } function canDropImage(event: DragEvent): boolean { const target = event.target return !!( target && target instanceof HTMLElement && !target.closest('code, span.editor-image') && target.parentElement && target.parentElement.closest('div.ContentEditable__root') ) } function getDragSelection(event: DragEvent): Range | null | undefined { let range const target = event.target as null | Element | Document const targetWindow = target == null ? null : target.nodeType === 9 ? (target as Document).defaultView : (target as Element).ownerDocument.defaultView const domSelection = getDOMSelection(targetWindow) if (document.caretRangeFromPoint) { range = document.caretRangeFromPoint(event.clientX, event.clientY) } else if (event.rangeParent && domSelection !== null) { domSelection.collapse(event.rangeParent, event.rangeOffset || 0) range = domSelection.getRangeAt(0) } else { throw Error('Cannot get the selection when dragging') } return range } `,__src__:"registry/default/editor/plugins/inline-image-plugin.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useEffect, useRef, useState, JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#6A737D"},children:"// import '../nodes/inline-image-node.css';"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useLexicalComposerContext } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@lexical/react/LexicalComposerContext'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { $wrapNodeInElement, mergeRegister } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@lexical/utils'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createParagraphNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createRangeSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $getSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $insertNodes,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isNodeSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isRootOrShadowRoot,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $setSelection,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_EDITOR,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_HIGH,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" COMMAND_PRIORITY_LOW,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DRAGOVER_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DRAGSTART_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" DROP_COMMAND,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" LexicalCommand,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" LexicalEditor,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" createCommand,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'lexical'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/button'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/checkbox'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Input } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/input'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/label'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/ui/select'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Position } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/nodes/inline-image-node'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $createInlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" $isInlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImageNode,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" InlineImagePayload,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/nodes/inline-image-node'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { CAN_USE_DOM } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/shared/can-use-dom'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Readonly"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDOMSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"targetWindow"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Window"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Selection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" CAN_USE_DOM"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (targetWindow "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" window)."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" createCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'INSERT_INLINE_IMAGE_COMMAND'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImageDialog"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" activeEditor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" activeEditor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalEditor"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" void"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" hasModifier"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"src"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setSrc"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"''"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"altText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setAltText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"''"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"showCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'left'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" isDisabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" ''"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleShowCaptionChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ChangeEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLInputElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.checked)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handlePositionChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ChangeEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLSelectElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" loadImage"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"files"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" FileList"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" reader"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" FileReader"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader.result "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'string'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setSrc"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(reader.result)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" ''"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (files "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" reader."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"readAsDataURL"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(files["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"])"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" hasModifier.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handler"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" KeyboardEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" hasModifier.current "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" e.altKey"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handler)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", handler)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [activeEditor])"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleOnClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" payload"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { altText, position, showCaption, src }"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" activeEditor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", payload)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClose"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-4 py-4"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Image Upload"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"file"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" loadImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.files)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" accept"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image/*"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-file-upload"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"alt-text"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Alt Text"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Input"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"alt-text"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Descriptive alternative text"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setAltText"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(e.target.value)}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{altText}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-alt-text-input"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Position"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Select"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValue"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"left"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onValueChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"value"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setPosition"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(value "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Position"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectTrigger"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectValue"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Select position"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"left"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Left"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"right"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Right"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"SelectItem"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"full"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Full Width"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-2"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"caption"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" checked"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{showCaption}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onCheckedChange"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"checked"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" setShowCaption"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(checked "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"caption"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Show Caption"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-test-id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"image-modal-file-upload-btn"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{isDisabled}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" handleOnClick"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Confirm"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InlineImagePlugin"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"editor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useLexicalComposerContext"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"hasNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"([InlineImageNode])) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" throw"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'ImagesPlugin: ImageNode not registered on editor'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" mergeRegister"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"payload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" imageNode"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $createInlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(payload)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $insertNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"([imageNode])"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"$isRootOrShadowRoot"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(imageNode."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getParentOrThrow"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"())) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $wrapNodeInElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(imageNode, $createParagraphNode)."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"selectEnd"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_EDITOR"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DRAGSTART_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_HIGH"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DRAGOVER_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragover"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_LOW"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"registerCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" DROP_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDrop"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event, editor)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" COMMAND_PRIORITY_HIGH"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, [editor])"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragStart"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" dataTransfer"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.dataTransfer"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"dataTransfer) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TRANSPARENT_IMAGE"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" img"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'img'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" img.src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" TRANSPARENT_IMAGE"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'text/plain'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'_'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setDragImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(img, "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" dataTransfer."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'application/x-lexical-drag'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" JSON"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" data: {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" altText: node.__altText,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" caption: node.__caption,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" height: node.__height,"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" key: node."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getKey"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" showCaption: node.__showCaption,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" src: node.__src,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" width: node.__width,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDragover"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $onDrop"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"editor"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" LexicalEditor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"node) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" data"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragImageData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"data) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" range"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"remove"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" rangeSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $createRangeSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" rangeSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"applyDOMRange"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(range)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $setSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(rangeSelection)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" editor."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"dispatchCommand"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"INSERT_INLINE_IMAGE_COMMAND"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", data)"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getImageNodeInSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" selection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $getSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"$isNodeSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(selection)) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" nodes"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" selection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getNodes"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" node"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" nodes["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" $isInlineImageNode"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(node) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" node "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragImageData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" InsertInlineImagePayload"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" dragData"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.dataTransfer?."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getData"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'application/x-lexical-drag'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"dragData) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"data"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" JSON"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"parse"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(dragData)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (type "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" 'image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" data"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"declare"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" global {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" rangeOffset"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" rangeParent"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Node"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" canDropImage"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" boolean"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" target"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.target"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !!"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"instanceof"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" HTMLElement"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" &&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" !"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"target."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"closest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'code, span.editor-image'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.parentElement "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.parentElement."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"closest"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'div.ContentEditable__root'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDragSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" DragEvent"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Range"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" target"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" event.target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Element"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Document"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" targetWindow"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" target.nodeType "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 9"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Document"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").defaultView"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (target "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:").ownerDocument.defaultView"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" domSelection"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" getDOMSelection"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(targetWindow)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (document.caretRangeFromPoint) {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" document."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"caretRangeFromPoint"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.clientX, event.clientY)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" (event.rangeParent "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"collapse"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(event.rangeParent, event.rangeOffset "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" domSelection."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"getRangeAt"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" throw"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Cannot get the selection when dragging'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" range"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,n.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]})]})}function N(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(_);})(); ;return Component;

Inline Image

Installation