[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10,"_11":12},"actionData","errors","root",{"_228":-5,"_231":232,"_233":234},"routes/shell",{"_41":42,"_227":-5,"_228":-5,"_229":230},"routes/repo",{"_34":-7,"_35":36,"_37":38,"_39":40,"_41":42,"_43":32,"_44":32,"_45":32,"_46":32,"_47":32,"_48":32,"_49":50,"_51":50,"_52":32,"_53":-7,"_54":-7,"_55":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":-5,"_26":27,"_28":29,"_29":30,"_31":32,"_33":14},"ref","main","path","packages/editor/src/toolbar/link.tsx","oid","35dcd4e03d32008e29cc30f5293ca89b8529bad4","size",20236,"commit","2182c95de44a8f63fd86af1c5874ae0ca298f807","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * Links: a small preview while the caret is on one, and an editor to add,\n * change, or remove one.\n *\n * Both surfaces sit outside the contenteditable. The editor's field has to\n * take focus, which costs Lexical its DOM selection, so the target is kept on\n * opening and put back on every way out. It is kept as collaborative\n * positions, not node keys and offsets, because someone else may type into\n * the same paragraph while the field is open.\n */\n\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, $toggleLink } from \"@lexical/link\";\nimport { createDOMRange } from \"@lexical/selection\";\nimport { LINK_PROTOCOLS } from \"@chopin/dialect\";\nimport {\n\t$findMatchingParent,\n\t$getNearestNodeFromDOMNode,\n\t$getNodeByKey,\n\t$getSelection,\n\t$isRangeSelection,\n\t$setSelection,\n\tBLUR_COMMAND,\n\tCOMMAND_PRIORITY_LOW,\n\tcreateCommand,\n\tKEY_DOWN_COMMAND,\n\tSELECTION_CHANGE_COMMAND,\n} from \"lexical\";\n\nimport { registerLinkGuard } from \"./link-guard\";\nimport { placeSurface } from \"./placement\";\nimport { $relativePosition, $resolveRange } from \"./position\";\nimport { editorSurfaceViewport, listenToEditorGeometry } from \"./surface\";\nimport { checkUrl } from \"./url\";\n\nimport type { LinkNode } from \"@lexical/link\";\nimport type { Binding } from \"@lexical/yjs\";\nimport type {\n\tBaseSelection,\n\tLexicalCommand,\n\tLexicalEditor,\n\tNodeKey,\n\tRangeSelection,\n} from \"lexical\";\nimport type { FormEvent, KeyboardEvent as ReactKeyboardEvent, RefObject } from \"react\";\nimport type { RelativePosition } from \"yjs\";\nimport type { DOMRectLike, SurfacePlacement } from \"./placement\";\n\n/** Ask for the link editor over the current selection. */\nexport const OPEN_LINK_EDITOR_COMMAND: LexicalCommand = createCommand(\"OPEN_LINK_EDITOR\");\n\nconst RULES = { protocols: LINK_PROTOCOLS, relative: true };\n\nconst SURFACE = \"fixed z-50 rounded-lg bg-page ring-hairline shadow-overlay\";\n\nconst GONE = \"Someone else changed this text. Select it again to add the link.\";\n\n/** The one link the selection sits wholly inside, if there is one. Call inside a read. */\nexport function $linkAt(selection: BaseSelection | null): LinkNode | undefined {\n\tif (!$isRangeSelection(selection)) return;\n\tlet found: LinkNode | undefined;\n\tfor (let node of selection.getNodes()) {\n\t\tlet link = $isLinkNode(node) ? node : $findMatchingParent(node, $isLinkNode);\n\t\tif (!link || (found && !found.is(link))) return;\n\t\tfound = link;\n\t}\n\treturn found;\n}\n\n/** Point an existing link somewhere else, or unwrap it when `url` is null. */\nexport function $updateLink(key: NodeKey, url: string | null): void {\n\tlet link = $getNodeByKey(key);\n\tif (!$isLinkNode(link)) return;\n\tif (url !== null) {\n\t\tlink.setURL(url);\n\t\treturn;\n\t}\n\tfor (let child of link.getChildren()) link.insertBefore(child);\n\tlink.remove();\n}\n\n/** The passage a link editor opened over, as positions that survive remote edits. */\ntype Target = { anchor: RelativePosition; focus: RelativePosition; text: string };\n\ntype Preview = { mode: \"preview\"; key: NodeKey; url: string };\ntype Editing = {\n\tmode: \"edit\";\n\t/** The existing link, which its key identifies through any edit around it. */\n\tkey?: NodeKey;\n\turl: string;\n\t/** Where the selection was; only trusted when there is no binding to say better. */\n\tselection: RangeSelection;\n\ttarget?: Target;\n};\ntype Open = Preview | Editing;\n\n/** The kept selection as it stands now, or nothing if its text has gone. Call inside a read. */\nfunction $selectionFor(state: Editing, binding: Binding | undefined): RangeSelection | undefined {\n\tif (state.target && binding) {\n\t\tlet selection = $resolveRange(binding, state.target.anchor, state.target.focus);\n\t\treturn selection?.getTextContent() === state.target.text ? selection : undefined;\n\t}\n\tlet { anchor, focus } = state.selection;\n\tif (!$getNodeByKey(anchor.key)?.isAttached() || !$getNodeByKey(focus.key)?.isAttached()) return;\n\treturn state.selection.clone();\n}\n\nfunction follow(editor: LexicalEditor, key: NodeKey, url: string): void {\n\tlet href = editor.getElementByKey(key)?.closest(\"a\")?.href ?? url;\n\twindow.open(href, \"_blank\", \"noopener,noreferrer\");\n}\n\nexport function LinkSurface(\n\t{ binding, disabled, onEditing }: {\n\t\tbinding?: Binding;\n\t\tdisabled?: boolean;\n\t\tonEditing?: (editing: boolean) => void;\n\t},\n) {\n\tlet [editor] = useLexicalComposerContext();\n\tlet [open, setOpen] = useState();\n\t/** A link whose preview was dismissed stays quiet until the caret leaves it. */\n\tlet dismissed = useRef(undefined);\n\tlet editing = open?.mode === \"edit\";\n\n\tuseEffect(() => onEditing?.(editing), [editing, onEditing]);\n\tuseEffect(() => registerLinkGuard(editor), [editor]);\n\n\tlet edit = useCallback(() => {\n\t\tif (disabled) return false;\n\t\tlet next = editor.getEditorState().read((): Editing | undefined => {\n\t\t\tlet selection = $getSelection();\n\t\t\tif (!$isRangeSelection(selection)) return;\n\t\t\tlet link = $linkAt(selection);\n\t\t\tif (selection.isCollapsed() && !link) return;\n\t\t\tlet anchor = binding && $relativePosition(binding, selection.anchor);\n\t\t\tlet focus = binding && $relativePosition(binding, selection.focus);\n\t\t\treturn {\n\t\t\t\tmode: \"edit\",\n\t\t\t\tkey: link?.getKey(),\n\t\t\t\turl: link?.getURL() ?? \"\",\n\t\t\t\tselection: selection.clone(),\n\t\t\t\ttarget: anchor && focus ? { anchor, focus, text: selection.getTextContent() } : undefined,\n\t\t\t};\n\t\t});\n\t\tif (!next) return false;\n\t\tsetOpen(next);\n\t\treturn true;\n\t}, [editor, binding, disabled]);\n\n\tlet sync = useCallback(() => {\n\t\tif (disabled) return;\n\t\tlet link = editor.getEditorState().read(() => {\n\t\t\tlet selection = $getSelection();\n\t\t\tif (!$isRangeSelection(selection) || !selection.isCollapsed()) return;\n\t\t\tlet node = $linkAt(selection);\n\t\t\treturn node && { key: node.getKey(), url: node.getURL() };\n\t\t});\n\t\tif (link?.key !== dismissed.current) dismissed.current = undefined;\n\t\tsetOpen(current => {\n\t\t\tif (current?.mode === \"edit\") return current;\n\t\t\tif (!link || link.key === dismissed.current) return undefined;\n\t\t\tif (current?.key === link.key && current.url === link.url) return current;\n\t\t\treturn { mode: \"preview\", ...link };\n\t\t});\n\t}, [editor, disabled]);\n\n\tuseEffect(() => {\n\t\tif (disabled) {\n\t\t\tsetOpen(current => (current?.mode === \"edit\" ? undefined : current));\n\t\t\treturn;\n\t\t}\n\t\tlet stops = [\n\t\t\teditor.registerCommand(OPEN_LINK_EDITOR_COMMAND, edit, COMMAND_PRIORITY_LOW),\n\t\t\teditor.registerCommand(\n\t\t\t\tKEY_DOWN_COMMAND,\n\t\t\t\t(event: KeyboardEvent) => {\n\t\t\t\t\tif (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey) return false;\n\t\t\t\t\tif (event.key.toLowerCase() === \"k\") {\n\t\t\t\t\t\tif (!edit()) return false;\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\tif (event.key !== \"Enter\") return false;\n\t\t\t\t\t// ⌘↵ follows the link under the caret: the keyboard's way to Open.\n\t\t\t\t\tlet link = editor.getEditorState().read(() => {\n\t\t\t\t\t\tlet selection = $getSelection();\n\t\t\t\t\t\tif (!$isRangeSelection(selection) || !selection.isCollapsed()) return;\n\t\t\t\t\t\tlet node = $linkAt(selection);\n\t\t\t\t\t\treturn node && { key: node.getKey(), url: node.getURL() };\n\t\t\t\t\t});\n\t\t\t\t\tif (!link) return false;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tfollow(editor, link.key, link.url);\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t\tCOMMAND_PRIORITY_LOW,\n\t\t\t),\n\t\t\teditor.registerCommand(\n\t\t\t\tSELECTION_CHANGE_COMMAND,\n\t\t\t\t() => {\n\t\t\t\t\tsync();\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t\tCOMMAND_PRIORITY_LOW,\n\t\t\t),\n\t\t\teditor.registerCommand(\n\t\t\t\tBLUR_COMMAND,\n\t\t\t\t() => {\n\t\t\t\t\tsetOpen(current => (current?.mode === \"preview\" ? undefined : current));\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t\tCOMMAND_PRIORITY_LOW,\n\t\t\t),\n\t\t\teditor.registerUpdateListener(sync),\n\t\t];\n\t\treturn () => stops.forEach(stop => stop());\n\t}, [editor, disabled, edit, sync]);\n\n\t/*\n\t * Clicks on links.\n\t *\n\t * Inside the contenteditable a plain click only places the caret, which is\n\t * what brings up the preview. A read-only document has no caret, so the\n\t * click opens the preview itself. A modified or middle click still follows\n\t * the link at once, and a link this editor cannot resolve (one inside a\n\t * nested editor) keeps the old behaviour of opening in a new tab.\n\t */\n\tuseEffect(() => {\n\t\tlet click = (event: MouseEvent) => {\n\t\t\tif (event.defaultPrevented || (event.button !== 0 && event.button !== 1)) return;\n\t\t\tif (!(event.target instanceof Element)) return;\n\t\t\tlet anchor = event.target.closest(\"a[href]\");\n\t\t\tif (!anchor || anchor.hasAttribute(\"download\")) return;\n\t\t\tevent.preventDefault();\n\t\t\tlet selecting = editor.read(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\treturn $isRangeSelection(selection) && !selection.isCollapsed();\n\t\t\t});\n\t\t\tif (selecting) return;\n\t\t\tlet link = editor.read(() => {\n\t\t\t\tlet node = $getNearestNodeFromDOMNode(anchor);\n\t\t\t\tlet found = node && ($isLinkNode(node) ? node : $findMatchingParent(node, $isLinkNode));\n\t\t\t\treturn found ? { key: found.getKey(), url: found.getURL() } : undefined;\n\t\t\t});\n\t\t\tif (event.button === 1 || event.metaKey || event.ctrlKey || !link) {\n\t\t\t\tevent.stopPropagation();\n\t\t\t\twindow.open(anchor.href, \"_blank\", \"noopener,noreferrer\");\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tdismissed.current = undefined;\n\t\t\tif (editor.isEditable()) sync();\n\t\t\telse setOpen({ mode: \"preview\", ...link });\n\t\t};\n\t\tlet middle = (event: MouseEvent) => {\n\t\t\tif (event.button === 1) click(event);\n\t\t};\n\t\treturn editor.registerRootListener((current, previous) => {\n\t\t\tprevious?.removeEventListener(\"click\", click);\n\t\t\tprevious?.removeEventListener(\"mouseup\", middle);\n\t\t\tcurrent?.addEventListener(\"click\", click);\n\t\t\tcurrent?.addEventListener(\"mouseup\", middle);\n\t\t});\n\t}, [editor, sync]);\n\n\tlet close = useCallback(() => {\n\t\tsetOpen(current => {\n\t\t\tif (current?.mode === \"preview\") dismissed.current = current.key;\n\t\t\treturn undefined;\n\t\t});\n\t}, []);\n\n\t/**\n\t * Put the target back, apply any change to it, and hand focus to the\n\t * editor. Returns false, changing nothing, when the text a new link was\n\t * meant for has gone: a link on whatever now sits there would be wrong.\n\t */\n\tlet finish = useCallback((state: Editing, url: string | null | undefined): boolean => {\n\t\tlet applied = false;\n\t\teditor.update(() => {\n\t\t\tlet selection = $selectionFor(state, binding);\n\t\t\tif (state.key) {\n\t\t\t\tlet link = $getNodeByKey(state.key);\n\t\t\t\tif (!$isLinkNode(link) || !link.isAttached()) return;\n\t\t\t\tif (selection) $setSelection(selection);\n\t\t\t\telse link.selectEnd();\n\t\t\t\tif (url !== undefined) $updateLink(state.key, url);\n\t\t\t\tapplied = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!selection) return;\n\t\t\t$setSelection(selection);\n\t\t\tif (url) $toggleLink(url);\n\t\t\tapplied = true;\n\t\t}, { discrete: true });\n\t\tif (!applied && url !== undefined) return false;\n\t\tsetOpen(undefined);\n\t\teditor.focus();\n\t\treturn true;\n\t}, [editor, binding]);\n\n\tif (!open) return null;\n\tif (open.mode === \"edit\") {\n\t\treturn (\n\t\t\t setOpen(undefined)}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t\n\t);\n}\n\nfunction LinkEditor(\n\t{ binding, editor, onFinish, onLeave, state }: {\n\t\tbinding?: Binding;\n\t\teditor: LexicalEditor;\n\t\tonFinish: (state: Editing, url: string | null | undefined) => boolean;\n\t\t/** Clicked or tabbed elsewhere: close without pulling focus back. */\n\t\tonLeave: () => void;\n\t\tstate: Editing;\n\t},\n) {\n\tlet [value, setValue] = useState(state.url);\n\tlet [problem, setProblem] = useState();\n\tlet [gone, setGone] = useState(false);\n\tlet field = useRef(null);\n\tlet ref = useRef(null);\n\tlet problemId = useId();\n\tlet existing = state.key !== undefined;\n\n\t/** The target's live DOM range, re-read so remote edits move it with the text. */\n\tlet measure = useCallback((): Range | undefined => {\n\t\tif (state.key) {\n\t\t\tlet element = editor.getElementByKey(state.key);\n\t\t\tlet range = element?.ownerDocument.createRange();\n\t\t\trange?.selectNodeContents(element!);\n\t\t\treturn range;\n\t\t}\n\t\treturn editor.getEditorState().read(() => {\n\t\t\tlet selection = $selectionFor(state, binding);\n\t\t\tif (!selection) return;\n\t\t\treturn createDOMRange(\n\t\t\t\teditor,\n\t\t\t\tselection.anchor.getNode(),\n\t\t\t\tselection.anchor.offset,\n\t\t\t\tselection.focus.getNode(),\n\t\t\t\tselection.focus.offset,\n\t\t\t) ?? undefined;\n\t\t});\n\t}, [editor, binding, state]);\n\n\tlet locate = useCallback(() => {\n\t\tlet range = measure();\n\t\treturn range && startOf(range.getClientRects(), range.getBoundingClientRect());\n\t}, [measure]);\n\tlet position = usePlacement(editor, ref, locate);\n\n\t// The field takes the native selection, so mark the passage it will link.\n\tuseEffect(() => {\n\t\tif (typeof Highlight === \"undefined\" || !CSS.highlights) return;\n\t\tlet mark = () => {\n\t\t\tlet range = measure();\n\t\t\tif (range) CSS.highlights.set(\"plan-link-target\", new Highlight(range));\n\t\t\telse CSS.highlights.delete(\"plan-link-target\");\n\t\t};\n\t\tmark();\n\t\tlet stop = editor.registerUpdateListener(mark);\n\t\treturn () => {\n\t\t\tstop();\n\t\t\tCSS.highlights.delete(\"plan-link-target\");\n\t\t};\n\t}, [editor, measure]);\n\n\t// Only once placed: the first render is hidden while it measures, and a\n\t// hidden field refuses focus.\n\tlet placed = position !== undefined;\n\tuseLayoutEffect(() => {\n\t\tif (!placed) return;\n\t\tfield.current?.focus({ preventScroll: true });\n\t\tfield.current?.select();\n\t}, [placed]);\n\n\tuseEffect(() => {\n\t\tlet outside = (event: PointerEvent) => {\n\t\t\tif (event.target instanceof Node && !ref.current?.contains(event.target)) onLeave();\n\t\t};\n\t\tdocument.addEventListener(\"pointerdown\", outside, true);\n\t\treturn () => document.removeEventListener(\"pointerdown\", outside, true);\n\t}, [onLeave]);\n\n\tlet submit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tif (gone) return onFinish(state, undefined);\n\t\tlet checked = checkUrl(value, RULES);\n\t\tif (checked.problem !== undefined) {\n\t\t\tsetProblem(checked.problem);\n\t\t\tfield.current?.focus();\n\t\t\treturn;\n\t\t}\n\t\tif (!onFinish(state, checked.url)) setGone(true);\n\t};\n\n\tlet key = (event: ReactKeyboardEvent) => {\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\tonFinish(state, undefined);\n\t\t\treturn;\n\t\t}\n\t\t// Tab cycles inside the popover rather than wandering off and leaving it open.\n\t\tif (event.key !== \"Tab\") return;\n\t\tlet stops = [...event.currentTarget.querySelectorAll(\"input, button\")]\n\t\t\t.filter(element => !(element as HTMLInputElement).disabled);\n\t\tlet index = stops.indexOf(document.activeElement as HTMLElement);\n\t\tlet next = stops[(index + (event.shiftKey ? -1 : 1) + stops.length) % stops.length];\n\t\tevent.preventDefault();\n\t\tnext?.focus();\n\t};\n\n\treturn (\n\t\t\n\t\t\t {\n\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\tsetProblem(undefined);\n\t\t\t\t}}\n\t\t\t\tplaceholder=\"Paste or type a link\"\n\t\t\t\tspellCheck={false}\n\t\t\t\ttype=\"text\"\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t\t{problem && (\n\t\t\t\t

\n\t\t\t\t\t{problem}\n\t\t\t\t

\n\t\t\t)}\n\t\t\t{gone && (\n\t\t\t\t

\n\t\t\t\t\t{GONE}\n\t\t\t\t

\n\t\t\t)}\n\t\t\t

\n\t\t\t\t{existing && !gone && (\n\t\t\t\t\t {\n\t\t\t\t\t\t\tif (!onFinish(state, null)) setGone(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t>\n\t\t\t\t\t\tRemove\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{gone\n\t\t\t\t\t? (\n\t\t\t\t\t\t button?.focus()}\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\n\t\t\t\t\t)\n\t\t\t\t\t: (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t

\n\t\t\n\t);\n}\n\nfunction LinkPreview(\n\t{ editor, onClose, onEdit, preview, readOnly }: {\n\t\teditor: LexicalEditor;\n\t\tonClose: () => void;\n\t\tonEdit: () => void;\n\t\tpreview: Preview;\n\t\treadOnly: boolean;\n\t},\n) {\n\tlet ref = useRef(null);\n\tlet locate = useCallback(() => {\n\t\tlet element = editor.getElementByKey(preview.key);\n\t\treturn element ? startOf(element.getClientRects(), element.getBoundingClientRect()) : undefined;\n\t}, [editor, preview.key]);\n\tlet position = usePlacement(editor, ref, locate);\n\n\t// Without a caret to move away, a read-only preview needs its own ways out.\n\tuseEffect(() => {\n\t\tlet escape = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== \"Escape\" || event.defaultPrevented) return;\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t};\n\t\tlet outside = (event: PointerEvent) => {\n\t\t\tif (!(event.target instanceof Node)) return;\n\t\t\tif (ref.current?.contains(event.target)) return;\n\t\t\tif (editor.getElementByKey(preview.key)?.contains(event.target)) return;\n\t\t\tonClose();\n\t\t};\n\t\twindow.addEventListener(\"keydown\", escape, true);\n\t\tdocument.addEventListener(\"pointerdown\", outside, true);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", escape, true);\n\t\t\tdocument.removeEventListener(\"pointerdown\", outside, true);\n\t\t};\n\t}, [editor, onClose, preview.key]);\n\n\treturn (\n\t\t event.preventDefault()}\n\t\t\tstyle={position\n\t\t\t\t? { top: position.top, left: position.left }\n\t\t\t\t: { top: 0, left: 0, visibility: \"hidden\" }}\n\t\t>\n\t\t\t\n\t\t\t\t{preview.url}\n\t\t\t\n\t\t\t follow(editor, preview.key, preview.url)}\n\t\t\t\ttitle={readOnly ? \"Open in a new tab\" : \"Open in a new tab (⌘↵)\"}\n\t\t\t\ttype=\"button\"\n\t\t\t>\n\t\t\t\tOpen\n\t\t\t\n\t\t\t{!readOnly && (\n\t\t\t\t\n\t\t\t\t\tEdit\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n}\n\n/**\n * The first line's left edge, over the whole passage's height.\n *\n * Both popovers start where the link starts, so a link that wraps does not\n * pull them to the middle of the column, and Edit opens where the preview was.\n */\nfunction startOf(lines: DOMRectList, whole: DOMRect): DOMRectLike {\n\tlet first = lines[0] ?? whole;\n\treturn {\n\t\ttop: whole.top,\n\t\tbottom: whole.bottom,\n\t\theight: whole.height,\n\t\tleft: first.left,\n\t\tright: first.right,\n\t\twidth: first.width,\n\t};\n}\n\n/** Keep a fixed surface under the live document, as the selection toolbar does. */\nfunction usePlacement(\n\teditor: LexicalEditor,\n\tref: RefObject,\n\tlocate: () => DOMRectLike | undefined,\n): SurfacePlacement | undefined {\n\tlet [position, setPosition] = useState();\n\n\tlet place = useCallback(() => {\n\t\tlet element = ref.current;\n\t\tlet anchor = locate();\n\t\tif (!element || !anchor) return;\n\t\tlet width = element.offsetWidth;\n\t\tlet next = placeSurface(\n\t\t\t{ ...anchor, right: anchor.left + width },\n\t\t\t{ width, height: element.offsetHeight },\n\t\t\teditorSurfaceViewport(editor),\n\t\t);\n\t\tsetPosition(current =>\n\t\t\tcurrent?.left === next.left && current.top === next.top ? current : next\n\t\t);\n\t}, [editor, ref, locate]);\n\n\tuseLayoutEffect(place, [place]);\n\tuseEffect(() => listenToEditorGeometry(editor, place), [editor, place]);\n\t// Other people's edits move the text without moving the page.\n\tuseEffect(() => editor.registerUpdateListener(place), [editor, place]);\n\n\treturn position;\n}\n","editable",false,"branch","documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[183,184,185,186,187,188,189,190,191,192,193,194,195],"navigation",{"_55":56,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_43":32,"_137":14,"_138":32,"_49":50,"_51":50},"branches",[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,14,127,128,129,130],"tags",[70,71,72,73],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","","head","empty","pins",[165,166,167],"documents",{"_160":161,"_162":163},"code",{"_156":157,"_158":159},"automations",{"_153":154,"_155":-5},"delivery",{"_151":50,"_152":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_164":163},"total",11,"issue",{"_168":158,"_170":181,"_15":158,"_172":182,"_53":174,"_175":32,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_53":174,"_175":32,"_176":174,"_177":50},{"_168":169,"_170":171,"_15":169,"_172":173,"_53":174,"_175":32,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_53":174,"_175":32,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_53":174,"_175":32,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_53":174,"_175":32,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_53":32,"_175":32,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_53":32,"_175":32,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_53":32,"_175":32,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_53":32,"_175":32,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_53":32,"_175":32,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_53":32,"_175":32,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_53":32,"_175":32,"_176":32},{"_168":202,"_170":203,"_15":202,"_172":204,"_53":32,"_175":32,"_176":32},{"_168":199,"_170":200,"_15":199,"_172":201,"_53":32,"_175":32,"_176":32},{"_168":196,"_170":197,"_15":196,"_172":198,"_53":32,"_175":32,"_176":32},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794436617983,"sidebar","expanded"]