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

{/* toolbar plugins */}

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

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

{/* toolbar plugins */}

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

) } `,__src__:"registry/default/examples/typing-pref-plugin-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { InitialConfigType, LexicalComposer } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalComposer"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { LexicalErrorBoundary } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalErrorBoundary"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { RichTextPlugin } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@lexical/react/LexicalRichTextPlugin"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { TooltipProvider } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/tooltip"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { editorTheme } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/themes/editor-theme"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ContentEditable } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/editor/editor-ui/content-editable"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { TypingPerfPlugin } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/plugins/typing-pref-plugin'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" editorConfig"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" InitialConfigType"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" namespace: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Editor'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" theme: editorTheme,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" nodes: [],"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onError"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"error"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Error"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"error"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(error)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" RichTextEditorDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-full overflow-hidden rounded-lg border bg-background shadow"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"LexicalComposer"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" initialConfig"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"editorConfig,"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"TooltipProvider"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Plugins"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Start typing...'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Plugins"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"floatingAnchorElem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setFloatingAnchorElem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"_floatingAnchorElem"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" HTMLDivElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (_floatingAnchorElem "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!=="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setFloatingAnchorElem"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(_floatingAnchorElem)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/* toolbar plugins */"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"RichTextPlugin"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" contentEditable"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{onRef}>"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ContentEditable"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{placeholder} "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.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)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ErrorBoundary"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{LexicalErrorBoundary}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"TypingPerfPlugin"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/* rest of the plugins */"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(E,{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)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/typing-pref-plugin.json `,__npmCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/typing-pref-plugin.json `,__yarnCommand__:`npx shadcn@latest add https://shadcn-editor.vercel.app/r/typing-pref-plugin.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://shadcn-editor.vercel.app/r/typing-pref-plugin.json `,__bunCommand__:`bunx --bun shadcn@latest add https://shadcn-editor.vercel.app/r/typing-pref-plugin.json `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" https://shadcn-editor.vercel.app/r/typing-pref-plugin.json"})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(o,{name:"typing-pref-plugin",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.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 { useEffect, JSX } from 'react' import { useReport } from '@/components/editor/editor-hooks/use-report' const validInputTypes = new Set([ 'insertText', 'insertCompositionText', 'insertFromComposition', 'insertLineBreak', 'insertParagraph', 'deleteCompositionText', 'deleteContentBackward', 'deleteByComposition', 'deleteContent', 'deleteContentForward', 'deleteWordBackward', 'deleteWordForward', 'deleteHardLineBackward', 'deleteSoftLineBackward', 'deleteHardLineForward', 'deleteSoftLineForward', ]) export function TypingPerfPlugin(): JSX.Element | null { const report = useReport() useEffect(() => { let start = 0 let timerId: ReturnType | null let keyPressTimerId: ReturnType | null let log: Array = [] let invalidatingEvent = false const measureEventEnd = function logKeyPress() { if (keyPressTimerId != null) { if (invalidatingEvent) { invalidatingEvent = false } else { log.push(performance.now() - start) } clearTimeout(keyPressTimerId) keyPressTimerId = null } } const measureEventStart = function measureEvent() { if (timerId != null) { clearTimeout(timerId) timerId = null } // We use a setTimeout(0) instead of requestAnimationFrame, due to // inconsistencies between the sequencing of rAF in different browsers. keyPressTimerId = setTimeout(measureEventEnd, 0) // Schedule a timer to report the results. timerId = setTimeout(() => { const total = log.reduce((a, b) => a + b, 0) const reportedText = 'Typing Perf: ' + Math.round((total / log.length) * 100) / 100 + 'ms' report(reportedText) log = [] }, 2000) // Make the time after we do the previous logic, so we don't measure the overhead // for it all. start = performance.now() } const beforeInputHandler = function beforeInputHandler(event: InputEvent) { if (!validInputTypes.has(event.inputType) || invalidatingEvent) { invalidatingEvent = false return } measureEventStart() } const keyDownHandler = function keyDownHandler(event: KeyboardEvent) { const key = event.key if (key === 'Backspace' || key === 'Enter') { measureEventStart() } } const pasteHandler = function pasteHandler() { invalidatingEvent = true } const cutHandler = function cutHandler() { invalidatingEvent = true } window.addEventListener('keydown', keyDownHandler, true) window.addEventListener('selectionchange', measureEventEnd, true) window.addEventListener('beforeinput', beforeInputHandler, true) window.addEventListener('paste', pasteHandler, true) window.addEventListener('cut', cutHandler, true) return () => { window.removeEventListener('keydown', keyDownHandler, true) window.removeEventListener('selectionchange', measureEventEnd, true) window.removeEventListener('beforeinput', beforeInputHandler, true) window.removeEventListener('paste', pasteHandler, true) window.removeEventListener('cut', cutHandler, true) } }, [report]) return null } `,__src__:"registry/new-york/editor/plugins/typing-pref-plugin.tsx",__style__:"new-york",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, JSX } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useReport } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/editor-hooks/use-report'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" validInputTypes"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(["})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertCompositionText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertFromComposition'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertLineBreak'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertParagraph'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteCompositionText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContentBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteByComposition'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContent'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContentForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteWordBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteWordForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteHardLineBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteSoftLineBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteHardLineForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteSoftLineForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"])"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" TypingPerfPlugin"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" report"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useReport"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ReturnType"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" setTimeout> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ReturnType"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" setTimeout> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"DOMHighResTimeStamp"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" []"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventEnd"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" logKeyPress"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (invalidatingEvent) {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"push"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(keyPressTimerId)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(timerId)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // We use a setTimeout(0) instead of requestAnimationFrame, due to"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // inconsistencies between the sequencing of rAF in different browsers."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Schedule a timer to report the results."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" total"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"reduce"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"b"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" a "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" b, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" reportedText"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Typing Perf: '"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Math."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"round"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"((total "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 100"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'ms'"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" report"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(reportedText)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" []"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"2000"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Make the time after we do the previous logic, so we don't measure the overhead"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // for it all."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" beforeInputHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" beforeInputHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" InputEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"validInputTypes."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"has"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(event.inputType) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent) {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" keyDownHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" keyDownHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" KeyboardEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" event.key"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (key "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Backspace'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" key "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Enter'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" pasteHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" pasteHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" cutHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" cutHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", keyDownHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'selectionchange'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'beforeinput'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", beforeInputHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", pasteHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'cut'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", cutHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", keyDownHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'selectionchange'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'beforeinput'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", beforeInputHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", pasteHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'cut'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", cutHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [report])"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.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 { useEffect, JSX } from 'react' import { useReport } from '@/components/editor/editor-hooks/use-report' const validInputTypes = new Set([ 'insertText', 'insertCompositionText', 'insertFromComposition', 'insertLineBreak', 'insertParagraph', 'deleteCompositionText', 'deleteContentBackward', 'deleteByComposition', 'deleteContent', 'deleteContentForward', 'deleteWordBackward', 'deleteWordForward', 'deleteHardLineBackward', 'deleteSoftLineBackward', 'deleteHardLineForward', 'deleteSoftLineForward', ]) export function TypingPerfPlugin(): JSX.Element | null { const report = useReport() useEffect(() => { let start = 0 let timerId: ReturnType | null let keyPressTimerId: ReturnType | null let log: Array = [] let invalidatingEvent = false const measureEventEnd = function logKeyPress() { if (keyPressTimerId != null) { if (invalidatingEvent) { invalidatingEvent = false } else { log.push(performance.now() - start) } clearTimeout(keyPressTimerId) keyPressTimerId = null } } const measureEventStart = function measureEvent() { if (timerId != null) { clearTimeout(timerId) timerId = null } // We use a setTimeout(0) instead of requestAnimationFrame, due to // inconsistencies between the sequencing of rAF in different browsers. keyPressTimerId = setTimeout(measureEventEnd, 0) // Schedule a timer to report the results. timerId = setTimeout(() => { const total = log.reduce((a, b) => a + b, 0) const reportedText = 'Typing Perf: ' + Math.round((total / log.length) * 100) / 100 + 'ms' report(reportedText) log = [] }, 2000) // Make the time after we do the previous logic, so we don't measure the overhead // for it all. start = performance.now() } const beforeInputHandler = function beforeInputHandler(event: InputEvent) { if (!validInputTypes.has(event.inputType) || invalidatingEvent) { invalidatingEvent = false return } measureEventStart() } const keyDownHandler = function keyDownHandler(event: KeyboardEvent) { const key = event.key if (key === 'Backspace' || key === 'Enter') { measureEventStart() } } const pasteHandler = function pasteHandler() { invalidatingEvent = true } const cutHandler = function cutHandler() { invalidatingEvent = true } window.addEventListener('keydown', keyDownHandler, true) window.addEventListener('selectionchange', measureEventEnd, true) window.addEventListener('beforeinput', beforeInputHandler, true) window.addEventListener('paste', pasteHandler, true) window.addEventListener('cut', cutHandler, true) return () => { window.removeEventListener('keydown', keyDownHandler, true) window.removeEventListener('selectionchange', measureEventEnd, true) window.removeEventListener('beforeinput', beforeInputHandler, true) window.removeEventListener('paste', pasteHandler, true) window.removeEventListener('cut', cutHandler, true) } }, [report]) return null } `,__src__:"registry/default/editor/plugins/typing-pref-plugin.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/**"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * Copyright (c) Meta Platforms, Inc. and affiliates."})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * This source code is licensed under the MIT license found in the"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" * LICENSE file in the root directory of this source tree."})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" *"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" */"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, JSX } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useReport } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@/components/editor/editor-hooks/use-report'"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" validInputTypes"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Set"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(["})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertCompositionText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertFromComposition'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertLineBreak'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'insertParagraph'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteCompositionText'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContentBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteByComposition'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContent'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteContentForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteWordBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteWordForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteHardLineBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteSoftLineBackward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteHardLineForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'deleteSoftLineForward'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"])"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" TypingPerfPlugin"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" JSX"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" report"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useReport"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ReturnType"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" setTimeout> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ReturnType"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" setTimeout> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"DOMHighResTimeStamp"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" []"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventEnd"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" logKeyPress"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (invalidatingEvent) {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"else"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"push"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start)"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(keyPressTimerId)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" clearTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(timerId)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // We use a setTimeout(0) instead of requestAnimationFrame, due to"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // inconsistencies between the sequencing of rAF in different browsers."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyPressTimerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Schedule a timer to report the results."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" timerId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" total"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"reduce"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"b"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" a "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" b, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" reportedText"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Typing Perf: '"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Math."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"round"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"((total "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 100"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'ms'"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" report"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(reportedText)"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" log "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" []"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"2000"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Make the time after we do the previous logic, so we don't measure the overhead"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // for it all."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" start "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" beforeInputHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" beforeInputHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" InputEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"validInputTypes."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"has"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(event.inputType) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent) {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" false"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" keyDownHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" keyDownHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"event"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" KeyboardEvent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" event.key"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (key "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Backspace'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ||"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" key "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'Enter'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" measureEventStart"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" pasteHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" pasteHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" cutHandler"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" cutHandler"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" invalidatingEvent "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", keyDownHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'selectionchange'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'beforeinput'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", beforeInputHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", pasteHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'cut'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", cutHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'keydown'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", keyDownHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'selectionchange'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", measureEventEnd, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'beforeinput'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", beforeInputHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'paste'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", pasteHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'cut'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", cutHandler, "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [report])"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" null"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(m,{...l})}):m(l)}function c(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(k);})(); ;return Component;

Typing Pref

Installation