[{"_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",{"_40":41,"_227":-5,"_228":-5,"_229":230},"routes/repo",{"_33":-7,"_34":35,"_36":37,"_38":39,"_40":41,"_42":31,"_43":31,"_44":31,"_45":31,"_46":31,"_47":31,"_48":49,"_50":49,"_51":31,"_52":-7,"_53":-7,"_54":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":14,"_22":23,"_24":-5,"_25":26,"_27":28,"_28":29,"_30":31,"_32":14},"ref","584e50fc45fc5defbf392fb39e1ca3d9edd8a421","path","packages/editor/src/widgets/render-blocks.tsx","oid","7f78739bda24a07e8f88975886e407b71ee6166b","size",42203,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * Rendered previews for code, math and diagrams.\n *\n * These blocks keep their source as collaborative text children, so the source\n * stays editable and merges per character. Rendering is layered over that model\n * rather than replacing it: a preview is attached beside the source, never in\n * place of the nodes Yjs is synchronising.\n *\n * KaTeX, Mermaid and the code renderer are loaded on demand — most plans\n * contain none of them, and each is large enough that paying for it up front is\n * not justified.\n *\n * Everything in the preview slot is put there by React, including the markup\n * KaTeX and Mermaid produce as strings. Two writers in one element is the\n * trap: a block whose language changes keeps its element, and an effect that\n * cleared the slot on the way out would run *after* React had already\n * committed the next renderer's nodes into it, taking them with it. One owner\n * means switching from a diagram to a fence is a reconciliation rather than a\n * race.\n */\n\nimport { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal, flushSync } from \"react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { readOnly$ } from \"@mdxeditor/editor\";\nimport { useCellValue } from \"@mdxeditor/gurx\";\nimport {\n\t$getNearestNodeFromDOMNode,\n\t$getNodeByKey,\n\t$getRoot,\n\t$getSelection,\n\t$isDecoratorNode,\n\t$isElementNode,\n\t$isRangeSelection,\n\t$isRootNode,\n\t$isTextNode,\n\t$setSelection,\n\tBLUR_COMMAND,\n\tCOLLABORATION_TAG,\n\tCOMMAND_PRIORITY_CRITICAL,\n\tCOMMAND_PRIORITY_LOW,\n\tCOMMAND_PRIORITY_NORMAL,\n\tCOPY_COMMAND,\n\tFOCUS_COMMAND,\n\tHISTORIC_TAG,\n\tKEY_ARROW_DOWN_COMMAND,\n\tKEY_ARROW_UP_COMMAND,\n\tKEY_DOWN_COMMAND,\n\tKEY_ESCAPE_COMMAND,\n\tmergeRegister,\n} from \"lexical\";\nimport { $isTableCellNode, $isTableRowNode } from \"@lexical/table\";\nimport { $isCodeBlockNode, $isMathNode } from \"@chopin/dialect\";\n\nimport { enclosing, remember } from \"../collapse\";\nimport { describeDiagramError, kindOf, languageOptions, titleOf } from \"./code\";\nimport { CodeView } from \"./code-view\";\nimport { LanguageMenu } from \"./language-menu\";\nimport { registerPreviewSelection } from \"./preview-selection\";\nimport { diffSourceLine, lastLineStart, offsetOfLine } from \"./source-offset\";\nimport { CodeIcon, WarningIcon } from \"@chopin/icons\";\n\nimport type { ElementNode, LexicalCommand, LexicalEditor, LexicalNode } from \"lexical\";\nimport type { Kind } from \"./code\";\n\nconst OpenUIOptionsPreview = lazy(async () => ({\n\tdefault: (await import(\"./openui-options\")).OpenUIOptionsPreview,\n}));\n\n/** How long the source must sit still before a failed drawing is reported. */\nconst ERROR_DELAY = 600;\n\n/** Below this, a scaled-down diagram's labels stop being comfortably legible. */\nconst MIN_DIAGRAM_SCALE = 0.75;\n\ntype Block = {\n\tkey: string;\n\tkind: Kind | \"math\";\n\tinline: boolean;\n\tsource: string;\n\t/** Empty for math, and for a fence nobody has named. */\n\tlanguage: string;\n\tmeta: string;\n};\n\nconst SeeCodeDiagram = lazy(() =>\n\timport(\"@chopin/diagrams/react\").then(({ Diagram }) => ({ default: Diagram }))\n);\n\n/** Whether a block has a second reading of itself to show. */\nfunction renders(block: Block, html: string | undefined, spec: unknown): boolean {\n\tif (!block.source.trim()) return false;\n\tif (block.kind === \"seecode\") return spec !== undefined;\n\tif (block.kind === \"math\" || block.kind === \"mermaid\") return !!html;\n\tif (block.kind === \"openui-options\") return true;\n\treturn block.kind === \"code\" || block.kind === \"diff\";\n}\n\nfunction collect(editor: LexicalEditor): Block[] {\n\tlet blocks: Block[] = [];\n\n\teditor.getEditorState().read(() => {\n\t\tlet walk = (node: ElementNode) => {\n\t\t\tfor (let child of node.getChildren()) {\n\t\t\t\tif ($isMathNode(child)) {\n\t\t\t\t\tblocks.push({\n\t\t\t\t\t\tkey: child.getKey(),\n\t\t\t\t\t\tkind: \"math\",\n\t\t\t\t\t\tinline: child.isInlineMath(),\n\t\t\t\t\t\tsource: child.getTextContent(),\n\t\t\t\t\t\tlanguage: \"\",\n\t\t\t\t\t\tmeta: child.getMeta(),\n\t\t\t\t\t});\n\t\t\t\t} else if ($isCodeBlockNode(child)) {\n\t\t\t\t\tlet language = child.getLanguage();\n\t\t\t\t\tblocks.push({\n\t\t\t\t\t\tkey: child.getKey(),\n\t\t\t\t\t\tkind: kindOf(language),\n\t\t\t\t\t\tinline: false,\n\t\t\t\t\t\tsource: child.getTextContent(),\n\t\t\t\t\t\tlanguage,\n\t\t\t\t\t\tmeta: child.getMeta(),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tif ($isElementNode(child)) walk(child);\n\t\t\t}\n\t\t};\n\t\twalk($getRoot());\n\t});\n\n\treturn blocks;\n}\n\nasync function renderMath(source: string, inline: boolean): Promise {\n\t// The stylesheet is not decoration: KaTeX emits bare spans and leaves every\n\t// fraction bar, radical and glyph to CSS, so without it a formula renders as\n\t// scrambled text. Loaded beside the library rather than up front, and the\n\t// bundler resolves its fonts on the way.\n\tlet [katex] = await Promise.all([import(\"katex\"), import(\"katex/dist/katex.min.css\")]);\n\treturn katex.default.renderToString(source, {\n\t\tdisplayMode: !inline,\n\t\t// Untrusted input: never let a formula emit markup or navigate.\n\t\ttrust: false,\n\t\tstrict: false,\n\t\tthrowOnError: false,\n\t\toutput: \"html\",\n\t});\n}\n\nasync function renderMermaid(key: string, source: string): Promise {\n\tlet [mermaid, { mermaidConfig, refineDiagram }] = await Promise.all([\n\t\timport(\"mermaid\"),\n\t\timport(\"./mermaid-theme\"),\n\t]);\n\tmermaid.default.initialize(mermaidConfig());\n\tlet { svg } = await mermaid.default.render(`ace-mermaid-${key}`, source);\n\n\t/*\n\t * The theme's last touches measure the drawing, which only works in a\n\t * laid-out document. Stage a hidden copy, refine it, and keep the result\n\t * as a string: the preview slot has a single owner, and it takes markup.\n\t */\n\tlet stage = document.createElement(\"div\");\n\tstage.setAttribute(\"aria-hidden\", \"true\");\n\tstage.style.position = \"fixed\";\n\tstage.style.visibility = \"hidden\";\n\tstage.style.pointerEvents = \"none\";\n\tstage.innerHTML = svg;\n\tdocument.body.append(stage);\n\tlet root = stage.querySelector(\"svg\");\n\ttry {\n\t\tif (!root) return svg;\n\t\trefineDiagram(root);\n\t} finally {\n\t\tstage.remove();\n\t}\n\n\tlet viewBox = root.getAttribute(\"viewBox\")?.trim().split(/[\\s,]+/).map(Number);\n\tif (viewBox?.length !== 4) return root.outerHTML;\n\tlet width = viewBox[2]!;\n\tlet height = viewBox[3]!;\n\tif (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {\n\t\treturn root.outerHTML;\n\t}\n\n\t/*\n\t * Mermaid writes `width=\"100%\"` and an inline maximum from this viewBox.\n\t * In prose that makes a wide diagram shrink until its labels are unreadable.\n\t * Give the SVG its authored drawing size instead; the preview owns overflow\n\t * and normal document flow owns height after every render and resize.\n\t */\n\troot.setAttribute(\"width\", String(width));\n\troot.setAttribute(\"height\", String(height));\n\troot.style.removeProperty(\"max-width\");\n\tif (!root.getAttribute(\"style\")) root.removeAttribute(\"style\");\n\treturn root.outerHTML;\n}\n\n/**\n * What a fence is, changed from the block itself.\n *\n * The language is an attribute rather than content, so it is edited through a\n * control rather than by typing — the same arrangement a callout's type has,\n * and for the same reason: the fence markers are not in the document, so there\n * is nowhere to type it. A language the list does not offer is kept and shown,\n * because the agent may well have written one and losing it on the first\n * glance at the menu would be an edit nobody asked for.\n */\nfunction Language(\n\t{ block, editor, disabled }: { block: Block; editor: LexicalEditor; disabled?: boolean },\n) {\n\tlet set = useCallback((language: string) => {\n\t\teditor.update(() => {\n\t\t\tlet node = $getNodeByKey(block.key);\n\t\t\tif (!$isCodeBlockNode(node)) return;\n\t\t\tnode.setLanguage(language);\n\t\t\t// Markdown writes an info string after a language, so meta cannot\n\t\t\t// outlive one. The node enforces this on creation; changing the\n\t\t\t// language later reaches the same rule from the other side.\n\t\t\tif (!language) node.setMeta(\"\");\n\t\t});\n\t}, [editor, block.key]);\n\n\tlet options = languageOptions(block.language);\n\n\t// A reader cannot change it, so it is a label rather than a disabled control.\n\tif (disabled) {\n\t\tlet label = options.find(([id]) => id === block.language)?.[1] ?? block.language;\n\t\treturn {label};\n\t}\n\n\treturn ;\n}\n\nfunction Toggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {\n\treturn (\n\t\t event.preventDefault()}\n\t\t\taria-label={collapsed ? \"Show source\" : \"Hide source\"}\n\t\t\tclassName=\"plan-code-toggle btn btn-icon btn-ghost\"\n\t\t\tdata-tooltip={collapsed ? \"Show source\" : \"Hide source\"}\n\t\t>\n\t\t\t\n\t\t\n\t);\n}\n\n/** Attaches a preview element beside a block's source, keyed to its content. */\nfunction Preview(\n\t{ block, editor, collapsed, disabled, editing, onToggle, onHidable }: {\n\t\tblock: Block;\n\t\teditor: LexicalEditor;\n\t\tcollapsed: boolean;\n\t\tdisabled?: boolean;\n\t\t/** The caret is in this block's source and the editor has focus. */\n\t\tediting: boolean;\n\t\tonToggle: () => void;\n\t\tonHidable: (key: string, hidable: boolean) => void;\n\t},\n) {\n\tlet [html, setHtml] = useState();\n\tlet [error, setError] = useState();\n\tlet [spec, setSpec] = useState();\n\n\tlet drawn = block.kind === \"math\" || block.kind === \"mermaid\" || block.kind === \"seecode\";\n\n\tuseEffect(() => {\n\t\t// A block that stopped being a diagram must stop showing one. Its\n\t\t// element survives the change of language, and so would the last\n\t\t// drawing made from it — beside, or instead of, whatever the new\n\t\t// language renders.\n\t\tif (!drawn) {\n\t\t\tsetHtml(undefined);\n\t\t\tsetError(undefined);\n\t\t\tsetSpec(undefined);\n\t\t\treturn;\n\t\t}\n\t\tlet cancelled = false;\n\t\tlet timer: ReturnType | undefined;\n\t\tif (block.kind === \"seecode\") setSpec(undefined);\n\n\t\tlet run = async () => {\n\t\t\tif (!block.source.trim()) {\n\t\t\t\tsetHtml(undefined);\n\t\t\t\tsetError(undefined);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tif (block.kind === \"seecode\") {\n\t\t\t\t\tlet { parseDiagramSource, renderDiagram } = await import(\"@chopin/diagrams\");\n\t\t\t\t\tlet parsed = parseDiagramSource(block.source);\n\t\t\t\t\tif (!parsed.ok) throw new Error(parsed.message);\n\t\t\t\t\tlet rendered = renderDiagram(parsed.spec);\n\t\t\t\t\tif (!rendered.ok) {\n\t\t\t\t\t\tlet problem = rendered.problems[0];\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\tproblem\n\t\t\t\t\t\t\t\t? `${problem.at === \"(root)\" ? \"\" : `${problem.at}: `}${problem.msg}`.slice(0, 240)\n\t\t\t\t\t\t\t\t: \"Diagram specification is invalid.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (cancelled) return;\n\t\t\t\t\tsetSpec(parsed.spec);\n\t\t\t\t\tsetError(undefined);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlet out = block.kind === \"math\"\n\t\t\t\t\t? await renderMath(block.source, block.inline)\n\t\t\t\t\t: await renderMermaid(block.key, block.source);\n\t\t\t\tif (cancelled) return;\n\t\t\t\tsetHtml(out);\n\t\t\t\tsetError(undefined);\n\t\t\t} catch (err) {\n\t\t\t\tif (cancelled) return;\n\t\t\t\t// Half-typed source fails on nearly every keystroke. Keep the last\n\t\t\t\t// drawing and only say what is wrong once the author pauses.\n\t\t\t\tlet message = err instanceof Error ? err.message : \"could not be rendered\";\n\t\t\t\tif (block.kind === \"seecode\") setSpec(undefined);\n\t\t\t\telse if (block.kind === \"math\") setHtml(undefined);\n\t\t\t\ttimer = setTimeout(() => setError(message), ERROR_DELAY);\n\t\t\t}\n\t\t};\n\n\t\tvoid run();\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tclearTimeout(timer);\n\t\t};\n\t}, [drawn, block.key, block.kind, block.inline, block.source]);\n\n\t/*\n\t * Hiding is applied to the DOM, never to the document: the source is still\n\t * there, still synchronised, still someone else's to edit.\n\t *\n\t * Rewritten on every commit rather than only when it changes. Lexical\n\t * replaces the element whenever `updateDOM` returns true — a code block\n\t * changing language, math flipping inline — which would drop the attribute\n\t * while this still believed it had been set.\n\t *\n\t * A layout effect, because opening a block and putting the caret in its\n\t * source happen in one gesture, and a caret cannot land in a hidden box.\n\t *\n\t * Code and diffs swap: their preview is the same text, coloured, so\n\t * showing both would put every line on screen twice. A drawing is a\n\t * different reading of its source, and stays above it while it is edited.\n\t */\n\tlet hide = collapsed && renders(block, html, spec);\n\tlet swap = !collapsed && renders(block, html, spec)\n\t\t&& (block.kind === \"code\" || block.kind === \"diff\");\n\tuseLayoutEffect(() => {\n\t\tlet element = editor.getElementByKey(block.key);\n\t\tif (!element) return;\n\t\tif (hide) element.dataset.planCollapsed = \"\";\n\t\telse delete element.dataset.planCollapsed;\n\t\tif (swap) element.dataset.planSwapped = \"\";\n\t\telse delete element.dataset.planSwapped;\n\t});\n\n\tlet element = editor.getElementByKey(block.key);\n\tlet host = element?.querySelector(\"[data-plan-preview]\");\n\tlet chrome = element?.querySelector(\"[data-plan-chrome='block']\");\n\n\t// A block with nothing rendered has nothing to fall back to, so there is\n\t// nothing to offer: hiding a plain fence would leave an empty box. A\n\t// formula has no language either, so its row can be empty of both.\n\tlet hidable = renders(block, html, spec);\n\tlet named = block.kind !== \"math\";\n\n\tuseEffect(() => {\n\t\tonHidable(block.key, hidable);\n\t\treturn () => onHidable(block.key, false);\n\t}, [block.key, hidable, onHidable]);\n\n\tlet title = block.kind !== \"diff\" ? titleOf(block.meta) : undefined;\n\n\t// These portals are siblings, so their stable keys also need distinct roles.\n\treturn (\n\t\t<>\n\t\t\t{host\n\t\t\t\t&& createPortal(\n\t\t\t\t\t,\n\t\t\t\t\thost,\n\t\t\t\t\t`${block.key}:preview`,\n\t\t\t\t)}\n\t\t\t{chrome && (hidable || named) && createPortal(\n\t\t\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\t// Tab indents code, so the way out has to be said\n\t\t\t\t\t\t// where someone is typing it. A block with a preview\n\t\t\t\t\t\t// returns to it on Escape, and Tab leaves from there.\n\t\t\t\t\t\tediting && !disabled && block.kind !== \"math\" && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{hidable ? \"Esc to preview\" : \"Esc then Tab to leave\"}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\t{hidable && }\n\t\t\t\t\t{title && {title}}\n\t\t\t\t\t{named && }\n\t\t\t\t,\n\t\t\t\tchrome,\n\t\t\t\t`${block.key}:chrome`,\n\t\t\t)}\n\t\t\n\t);\n}\n\n/**\n * Not a live region: the diagram re-renders on every keystroke, and each\n * intermediate error would be announced.\n *\n * The parser's list of expected tokens is left out: the excerpt already points\n * at the place, and the token names mean nothing to someone drawing a chart.\n */\nfunction DiagramError({ message }: { message: string }) {\n\tlet { summary, excerpt } = describeDiagramError(message);\n\treturn (\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t

\n\t\t\t\tThis diagram could not be drawn\n\t\t\t\t

{summary}

\n\t\t\t\t{excerpt &&

{excerpt}

}\n\t\t\t

\n\t\t

\n\t);\n}\n\n/** Which sides of a scroller still hide some of the drawing. */\nfunction hiddenSides(element: HTMLElement): \"start\" | \"end\" | \"both\" | undefined {\n\tlet start = element.scrollLeft > 1;\n\tlet end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;\n\tif (start && end) return \"both\";\n\treturn start ? \"start\" : end ? \"end\" : undefined;\n}\n\n/**\n * A drawn diagram in its own horizontal scroller.\n *\n * Mermaid lays text out at its authored size, so shrinking a wide chart to the\n * measure makes its labels unreadable. A modest overshoot is scaled to fit;\n * anything wider keeps its size and scrolls, fading the side with more to see.\n */\nfunction Diagram({ html, stale }: { html: string; stale: boolean }) {\n\tlet region = useRef(null);\n\tlet [fit, setFit] = useState(false);\n\tlet [more, setMore] = useState>();\n\n\tuseEffect(() => {\n\t\tlet element = region.current;\n\t\tlet svg = element?.querySelector(\"svg\");\n\t\tif (!element || !svg) return;\n\t\tlet authored = Number(svg.getAttribute(\"width\"));\n\t\tlet measure = () => {\n\t\t\tlet style = getComputedStyle(element);\n\t\t\tlet room = element.clientWidth - parseFloat(style.paddingInlineStart)\n\t\t\t\t- parseFloat(style.paddingInlineEnd);\n\t\t\tsetFit(!(authored > 0) || room >= authored * MIN_DIAGRAM_SCALE);\n\t\t\tsetMore(hiddenSides(element));\n\t\t};\n\t\tlet scrolled = () => setMore(hiddenSides(element));\n\t\tmeasure();\n\t\tlet observer = new ResizeObserver(measure);\n\t\tobserver.observe(element);\n\t\telement.addEventListener(\"scroll\", scrolled, { passive: true });\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", scrolled);\n\t\t};\n\t}, [html]);\n\n\t// Fitting changes the drawing's width, so whether anything is hidden is\n\t// only known after that has been laid out.\n\tuseEffect(() => {\n\t\tif (region.current) setMore(hiddenSides(region.current));\n\t}, [fit, html]);\n\n\treturn (\n\t\t\n\t);\n}\n\nfunction Rendered(\n\t{ block, html, error, spec }: {\n\t\tblock: Block;\n\t\thtml: string | undefined;\n\t\terror: string | undefined;\n\t\tspec: unknown;\n\t},\n) {\n\tif (block.kind === \"mermaid\" && (html || error)) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{html && }\n\t\t\t\t{error && }\n\t\t\t\n\t\t);\n\t}\n\tif (error && block.kind === \"seecode\") return ;\n\tif (error) return

{error}

;\n\tif (block.kind === \"openui-options\") {\n\t\treturn (\n\t\t\tLoading options…}>\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n\tif (!block.source.trim()) return null;\n\n\tif (block.kind === \"code\" || block.kind === \"diff\") {\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n\tif (block.kind === \"seecode\") {\n\t\tif (spec === undefined) return null;\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n\n\tif (!html) return null;\n\n\t// Produced by KaTeX from validated source under its strict mode, not by\n\t// anything the author wrote.\n\t//\n\t// Inline math is a span inside a sentence, so what wraps it has to be one\n\t// too: a block element here would put a formula somebody wrote mid-clause\n\t// on a line of its own, and the rest of the sentence after it.\n\tif (block.inline) return ;\n\treturn

;\n}\n\n/** Asked for with the toggle, or opened by going into the block. */\ntype Shown = \"pinned\" | \"editing\";\n\ntype Direction = \"next\" | \"previous\";\n\n/** A collapsed caret at a text offset inside a block's source. */\nfunction $caretAt(block: ElementNode, offset: number): void {\n\tlet start = 0;\n\tfor (let child of block.getChildren()) {\n\t\tlet size = child.getTextContentSize();\n\t\tif ($isTextNode(child) && offset <= start + size) {\n\t\t\tchild.select(offset - start, offset - start);\n\t\t\treturn;\n\t\t}\n\t\tif (offset <= start) {\n\t\t\tlet index = child.getIndexWithinParent();\n\t\t\tblock.select(index, index);\n\t\t\treturn;\n\t\t}\n\t\tstart += size;\n\t}\n\tblock.selectEnd();\n}\n\ntype CaretPositionAt = (\n\tx: number,\n\ty: number,\n\toptions?: { shadowRoots?: ShadowRoot[] },\n) => { offsetNode: Node; offset: number } | null;\n\n/** The character offset of a point inside one drawn line, if the browser can say. */\nfunction columnAt(line: HTMLElement, x: number, y: number): number | undefined {\n\tlet root = line.getRootNode();\n\tlet at = (document as unknown as { caretPositionFromPoint?: CaretPositionAt })\n\t\t.caretPositionFromPoint?.(x, y, root instanceof ShadowRoot ? { shadowRoots: [root] } : {});\n\tif (!at || !line.contains(at.offsetNode)) return undefined;\n\tlet column = 0;\n\tlet walker = document.createTreeWalker(line, NodeFilter.SHOW_TEXT);\n\tfor (let node = walker.nextNode(); node; node = walker.nextNode()) {\n\t\tif (node === at.offsetNode) return column + at.offset;\n\t\tcolumn += node.textContent?.length ?? 0;\n\t}\n\treturn undefined;\n}\n\n/**\n * Where a click on drawn code lands in its source.\n *\n * The renderer paints into shadow roots and marks each line, so the event's\n * composed path names the line. A file keeps the source's lines one for one; a\n * patch is matched line by line. Diagrams and formulas have no lines to map.\n */\nfunction clickedOffset(block: Block, event: MouseEvent): number | undefined {\n\tif (block.kind !== \"code\" && block.kind !== \"diff\") return undefined;\n\tlet path = event.composedPath();\n\tlet marked = path.find((target): target is HTMLElement =>\n\t\ttarget instanceof HTMLElement\n\t\t&& (target.hasAttribute(\"data-line\") || target.hasAttribute(\"data-column-number\"))\n\t);\n\tlet view = path.find((target): target is HTMLElement =>\n\t\ttarget instanceof HTMLElement && target.classList.contains(\"plan-code-view\")\n\t);\n\tif (!marked || !view) return undefined;\n\t// A line number in a diff's gutter stands for the start of its line.\n\tlet line = marked.hasAttribute(\"data-line\")\n\t\t? marked\n\t\t: (marked.getRootNode() as ParentNode).querySelector(\n\t\t\t`[data-line][data-line-index=\"${marked.dataset.lineIndex}\"]`,\n\t\t);\n\tif (!line) return undefined;\n\tlet column = line === marked ? columnAt(line, event.clientX, event.clientY) ?? Infinity : 0;\n\tif (view.dataset.view !== \"diff\") {\n\t\treturn offsetOfLine(block.source, Number(line.dataset.line) - 1, column);\n\t}\n\n\tlet type = line.dataset.lineType ?? \"\";\n\tlet text = line.textContent ?? \"\";\n\tlet drawn = [...view.querySelectorAll(\"diffs-container\")].flatMap(container => [\n\t\t...(container.shadowRoot?.querySelectorAll(\"[data-line]\") ?? []),\n\t]);\n\tlet before = drawn.slice(0, Math.max(0, drawn.indexOf(line)));\n\tlet occurrence =\n\t\tbefore.filter(other => other.dataset.lineType === type && other.textContent === text).length;\n\tlet index = diffSourceLine(block.source, type, text, occurrence);\n\treturn index === undefined ? undefined : offsetOfLine(block.source, index, column + 1);\n}\n\n/** The caret's rectangle, and the height of the line it sits on. */\nfunction caretLine(document: Document): { rect: DOMRect; height: number } | undefined {\n\tlet selection = document.getSelection();\n\tif (!selection?.rangeCount) return undefined;\n\tlet rects = selection.getRangeAt(0).getClientRects();\n\tlet rect: DOMRect | undefined = rects[rects.length - 1];\n\tlet node = selection.focusNode;\n\tlet line = node instanceof Element ? node : node?.parentElement;\n\t// A collapsed range at an empty line has no rectangle; its line stands in.\n\tif (!rect || rect.height === 0) rect = line?.getBoundingClientRect();\n\tif (!rect || rect.height === 0 || !line) return undefined;\n\t// The caret's box is the font's, shorter than the line it sits on.\n\treturn {\n\t\trect,\n\t\theight: Math.max(rect.height, parseFloat(getComputedStyle(line).lineHeight) || 0),\n\t};\n}\n\n/**\n * Whether the caret is on the first or last line of a block.\n *\n * Measured, because only layout knows where a wrapped line ends.\n */\nfunction atEdge(element: HTMLElement, direction: Direction): boolean {\n\tlet caret = caretLine(element.ownerDocument);\n\tif (!caret) return false;\n\tlet { rect, height } = caret;\n\tlet box = element.getBoundingClientRect();\n\treturn direction === \"next\" ? box.bottom - rect.bottom < height : rect.top - box.top < height;\n}\n\n/**\n * Whether no other line sits between the caret and a block it shares a parent\n * with, such as the text of a list item and the code under it.\n */\nfunction besideBlock(element: HTMLElement, direction: Direction): boolean {\n\tlet caret = caretLine(element.ownerDocument);\n\tif (!caret) return false;\n\tlet { rect, height } = caret;\n\tlet box = element.getBoundingClientRect();\n\tlet style = getComputedStyle(element);\n\treturn direction === \"next\"\n\t\t? box.top - rect.bottom < height + parseFloat(style.marginBlockStart)\n\t\t: rect.top - box.bottom < height + parseFloat(style.marginBlockEnd);\n}\n\nfunction $isInlineNode(node: LexicalNode): boolean {\n\treturn ($isElementNode(node) || $isDecoratorNode(node)) ? node.isInline() : true;\n}\n\n/** Rows and cells are a table's layout, not blocks read one after another. */\nfunction $isTablePart(node: LexicalNode): boolean {\n\treturn $isTableRowNode(node) || $isTableCellNode(node);\n}\n\n/**\n * The block an arrow key reads next, across the containers that callouts and\n * list items make: the nearest sibling of the caret's line or of one of its\n * ancestors. `level` is the node that sibling sits beside.\n */\nfunction $following(\n\tfrom: LexicalNode,\n\tdirection: Direction,\n\tskipInline: boolean,\n): { level: LexicalNode; node: LexicalNode } | undefined {\n\tlet step = (node: LexicalNode) =>\n\t\tdirection === \"next\" ? node.getNextSibling() : node.getPreviousSibling();\n\tfor (\n\t\tlet level: LexicalNode | null = from;\n\t\tlevel && !$isRootNode(level);\n\t\tlevel = level.getParent()\n\t) {\n\t\tif ($isTablePart(level)) continue;\n\t\tlet node = step(level);\n\t\tif (skipInline) { while (node && $isInlineNode(node)) node = step(node); }\n\t\tif (node) return { level, node };\n\t}\n\treturn undefined;\n}\n\n/** The first (or last) block inside a container, down to one that holds text. */\nfunction $edgeBlock(\n\tnode: LexicalNode,\n\tdirection: Direction,\n\tfolded: (key: string) => boolean,\n): LexicalNode {\n\tlet at = node;\n\twhile ($isElementNode(at) && !folded(at.getKey())) {\n\t\tlet child = direction === \"next\" ? at.getFirstChild() : at.getLastChild();\n\t\tif (!child || $isInlineNode(child)) break;\n\t\tat = child;\n\t}\n\treturn at;\n}\n\n/** Something a reader can hold focus on in place of a caret. */\nconst FOCUSABLE_PREVIEW = \".plan-code-view, .plan-diagram, .plan-seecode\";\n\nexport function PreviewPlugin() {\n\tlet [editor] = useLexicalComposerContext();\n\tlet disabled = useCellValue(readOnly$);\n\tlet [blocks, setBlocks] = useState([]);\n\t/** Blocks whose source this viewer is looking at, and why. */\n\tlet [shown, setShown] = useState>({});\n\t/** Blocks that currently have a rendered preview. */\n\tlet [hidable, setHidable] = useState>(() => new Set());\n\n\t/** The code block holding the caret while the editor has focus. */\n\tlet [editing, setEditing] = useState();\n\t/** Read by listeners that must not re-register whenever one is toggled. */\n\tlet current = useRef(shown);\n\tcurrent.current = shown;\n\t/** A press that began on a preview, until its click has decided what it was. */\n\tlet pressing = useRef(false);\n\tlet latest = useRef({ blocks, hidable, disabled });\n\tlatest.current = { blocks, hidable, disabled };\n\n\tlet reportHidable = useCallback((key: string, value: boolean) => {\n\t\tsetHidable(previous => {\n\t\t\tif (previous.has(key) === value) return previous;\n\t\t\tlet next = new Set(previous);\n\t\t\tif (value) next.add(key);\n\t\t\telse next.delete(key);\n\t\t\treturn next;\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlet update = () => setBlocks(collect(editor));\n\t\tupdate();\n\t\treturn editor.registerUpdateListener(update);\n\t}, [editor]);\n\n\t// The painter of remote cursors cannot see React state, and needs this.\n\tuseEffect(() => {\n\t\tremember(\n\t\t\teditor,\n\t\t\tnew Set([...hidable].filter(key => !shown[key])),\n\t\t);\n\t}, [editor, hidable, shown]);\n\n\t/*\n\t * The caret going into a hidden block opens it, and leaving closes it again.\n\t *\n\t * The source is the block's only editable region, so leaving it hidden with\n\t * the caret inside would mean typing into somewhere invisible. A tab strip\n\t * never has to deal with this — a hidden panel is never the selection.\n\t *\n\t * Only what the caret opened closes behind it. A source somebody asked to\n\t * see with the toggle stays until they hide it.\n\t */\n\tuseEffect(() => {\n\t\treturn editor.registerUpdateListener(({ tags }) => {\n\t\t\t// Someone else's edit is not this reader navigating. Remote changes\n\t\t\t// can recover the local selection into a block, and that should not\n\t\t\t// reopen one they chose to close.\n\t\t\tif (tags.has(COLLABORATION_TAG) || tags.has(HISTORIC_TAG)) return;\n\t\t\t// Pressing on a preview resolves to its block, but is a click or a\n\t\t\t// copy, not the caret arriving; the click decides what that opens.\n\t\t\t// While the press lasts the browser may report the selection in the\n\t\t\t// hidden source, so the press itself is what is checked first.\n\t\t\tif (pressing.current) return;\n\t\t\tlet anchor = editor.getRootElement()?.ownerDocument.getSelection()?.anchorNode;\n\t\t\tlet at = anchor instanceof Element ? anchor : anchor?.parentElement;\n\t\t\tif (at?.closest(\"[data-plan-preview]\")) return;\n\t\t\tlet key = editor.getEditorState().read(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\tif (!$isRangeSelection(selection)) return undefined;\n\t\t\t\treturn enclosing(selection.anchor.getNode()) ?? \"\";\n\t\t\t});\n\t\t\t// No caret is not somewhere else: the reader may be on a preview\n\t\t\t// or a control of the block they were editing.\n\t\t\tif (key === undefined) return;\n\t\t\tsetShown(prev => {\n\t\t\t\tlet next = { ...prev };\n\t\t\t\tlet changed = false;\n\t\t\t\tfor (let [other, why] of Object.entries(prev)) {\n\t\t\t\t\tif (why !== \"editing\" || other === key) continue;\n\t\t\t\t\tdelete next[other];\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t\tif (key && !prev[key]) {\n\t\t\t\t\tnext[key] = \"editing\";\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t\treturn changed ? next : prev;\n\t\t\t});\n\t\t});\n\t}, [editor]);\n\n\t/*\n\t * Getting into a rendered block, and back out, without hunting for its\n\t * toggle.\n\t *\n\t * A click on a preview opens the source with the caret where the click\n\t * was, as near as the drawing can say. Arrowing up or down into a block\n\t * puts the caret in code, and focus on a drawing, which takes Enter (or any\n\t * typing) to edit and another arrow to move on. Escape from a source goes\n\t * back to the preview, holding focus there.\n\t *\n\t * A focused preview is not an editable position, so Lexical's own handling\n\t * of a key there would act on the caret it left behind somewhere else. Every\n\t * key aimed at a preview stops here.\n\t */\n\tuseEffect(() => {\n\t\tlet blockAt = (element: Element | null | undefined) =>\n\t\t\telement\n\t\t\t\t? latest.current.blocks.find(block =>\n\t\t\t\t\t!block.inline && editor.getElementByKey(block.key) === element\n\t\t\t\t)\n\t\t\t\t: undefined;\n\t\tlet folded = (key: string) => latest.current.hidable.has(key) && !current.current[key];\n\t\tlet root = () => editor.getRootElement();\n\n\t\t/** Show a source and put the caret in it. Runs inside an update. */\n\t\tlet $open = (key: string, offset: number, typed?: string) => {\n\t\t\t// Synchronously, so the source is laid out before Lexical puts the\n\t\t\t// DOM selection in it at the end of this update.\n\t\t\tflushSync(() => setShown(prev => (prev[key] ? prev : { ...prev, [key]: \"editing\" })));\n\t\t\troot()?.focus({ preventScroll: true });\n\t\t\tlet node = $getNodeByKey(key);\n\t\t\tif (!$isElementNode(node)) return;\n\t\t\t$caretAt(node, offset);\n\t\t\tlet selection = $getSelection();\n\t\t\tif (typed && $isRangeSelection(selection)) selection.insertText(typed);\n\t\t};\n\n\t\tlet $enter = (key: string, direction: Direction) => {\n\t\t\tlet block = latest.current.blocks.find(candidate => candidate.key === key);\n\t\t\tif (!block) return;\n\t\t\tif (block.kind === \"mermaid\") {\n\t\t\t\tlet preview = editor.getElementByKey(key)?.querySelector(\".plan-diagram\");\n\t\t\t\tif (preview) {\n\t\t\t\t\t// No caret is left to close what it opened on the way here.\n\t\t\t\t\t$setSelection(null);\n\t\t\t\t\tflushSync(() =>\n\t\t\t\t\t\tsetShown(prev => {\n\t\t\t\t\t\t\tlet next = Object.fromEntries(\n\t\t\t\t\t\t\t\tObject.entries(prev).filter(([, why]) => why !== \"editing\"),\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn Object.keys(next).length === Object.keys(prev).length ? prev : next;\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t\t\tpreview.focus();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\t$open(key, direction === \"next\" ? 0 : lastLineStart(block.source));\n\t\t};\n\n\t\tlet $leave = (key: string, direction: Direction) => {\n\t\t\tlet node = $getNodeByKey(key);\n\t\t\tif (!node) return;\n\t\t\tlet found = $following(node, direction, false);\n\t\t\tlet land = found && $edgeBlock(found.node, direction, folded);\n\t\t\tif (land && folded(land.getKey())) return $enter(land.getKey(), direction);\n\t\t\troot()?.focus({ preventScroll: true });\n\t\t\tif ($isTextNode(land)) {\n\t\t\t\tif (direction === \"next\") land.select(0, 0);\n\t\t\t\telse land.select();\n\t\t\t} else if ($isElementNode(land)) {\n\t\t\t\tif (direction === \"next\") land.selectStart();\n\t\t\t\telse land.selectEnd();\n\t\t\t} else if (direction === \"next\") node.selectNext(0, 0);\n\t\t\telse node.selectPrevious();\n\t\t};\n\n\t\tlet $close = (block: Block) => {\n\t\t\tlet node = $getNodeByKey(block.key);\n\t\t\tlet preview = editor.getElementByKey(block.key);\n\t\t\tif (block.kind === \"math\") node?.selectNext(0, 0);\n\t\t\telse $setSelection(null);\n\t\t\tflushSync(() =>\n\t\t\t\tsetShown(prev => {\n\t\t\t\t\tlet next = { ...prev };\n\t\t\t\t\tdelete next[block.key];\n\t\t\t\t\treturn next;\n\t\t\t\t})\n\t\t\t);\n\t\t\tpreview?.querySelector(FOCUSABLE_PREVIEW)?.focus({ preventScroll: true });\n\t\t};\n\n\t\tlet arrow = (command: LexicalCommand, direction: Direction) =>\n\t\t\teditor.registerCommand(\n\t\t\t\tcommand,\n\t\t\t\tevent => {\n\t\t\t\t\tif (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return false;\n\t\t\t\t\tif (latest.current.disabled) return false;\n\t\t\t\t\t// The DOM's selection rather than Lexical's, which trails a\n\t\t\t\t\t// click by a task: an arrow pressed straight after one would\n\t\t\t\t\t// otherwise be measured from where the caret used to be.\n\t\t\t\t\tlet dom = editor.getRootElement()?.ownerDocument.getSelection();\n\t\t\t\t\tif (!dom?.isCollapsed || !dom.focusNode) return false;\n\t\t\t\t\tlet from = $getNearestNodeFromDOMNode(dom.focusNode);\n\t\t\t\t\tif (!from) return false;\n\t\t\t\t\tlet found = $following(from, direction, true);\n\t\t\t\t\tif (!found) return false;\n\t\t\t\t\tlet target = $edgeBlock(found.node, direction, folded);\n\t\t\t\t\tif (!folded(target.getKey())) return false;\n\t\t\t\t\t// A hidden source has no layout, so the browser's own move\n\t\t\t\t\t// would step right over the block. Only the caret's last\n\t\t\t\t\t// (or first) line may step into it.\n\t\t\t\t\tlet level = editor.getElementByKey(found.level.getKey());\n\t\t\t\t\tlet block = editor.getElementByKey(target.getKey());\n\t\t\t\t\tlet edge = $isInlineNode(found.level)\n\t\t\t\t\t\t? block && besideBlock(block, direction)\n\t\t\t\t\t\t: level && atEdge(level, direction);\n\t\t\t\t\tif (!edge) return false;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t$enter(target.getKey(), direction);\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t\t// Ahead of the table's own arrows, which select the end of\n\t\t\t\t// whatever precedes a table: a hidden source.\n\t\t\t\tCOMMAND_PRIORITY_CRITICAL,\n\t\t\t);\n\n\t\t/** Measured on the way down, while the preview is still the one on screen. */\n\t\tlet pressed: { x: number; y: number; offset: number | undefined } | undefined;\n\t\tlet down = (event: MouseEvent) => {\n\t\t\tlet target = event.target instanceof Element ? event.target : null;\n\t\t\tlet block = blockAt(target?.closest(\"[data-plan-preview]\")?.parentElement);\n\t\t\tif (block) pressing.current = true;\n\t\t\tpressed = {\n\t\t\t\tx: event.clientX,\n\t\t\t\ty: event.clientY,\n\t\t\t\toffset: block && clickedOffset(block, event),\n\t\t\t};\n\t\t};\n\t\tlet click = (event: MouseEvent) => {\n\t\t\tif (event.button !== 0 || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (latest.current.disabled || !editor.isEditable()) return;\n\t\t\t// A drag or a double click is someone selecting text to copy.\n\t\t\tlet moved = pressed\n\t\t\t\t&& Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y) > 4;\n\t\t\tif (moved || event.detail > 1) return;\n\t\t\tif (!(event.target instanceof Element) || event.target.closest(\"[data-plan-chrome]\")) return;\n\t\t\tlet block = blockAt(event.target.closest(\"[data-plan-preview]\")?.parentElement);\n\t\t\tif (!block || !latest.current.hidable.has(block.key)) return;\n\t\t\t// SeeCode has its own interactive diagram controls; the source toggle\n\t\t\t// is the explicit way to edit the diagram's specification.\n\t\t\tif (block.kind === \"seecode\") return;\n\t\t\tlet offset = pressed?.offset ?? block.source.length;\n\t\t\teditor.update(() => $open(block.key, offset));\n\t\t};\n\n\t\t// After the click that follows, which may not land on the editor at all.\n\t\tlet up = () => setTimeout(() => (pressing.current = false));\n\n\t\tlet attached: HTMLElement | null = null;\n\t\tlet unselect: (() => void) | undefined;\n\t\tlet detach = () => {\n\t\t\tunselect?.();\n\t\t\tunselect = undefined;\n\t\t\tattached?.removeEventListener(\"mousedown\", down);\n\t\t\tattached?.removeEventListener(\"click\", click);\n\t\t\tattached?.ownerDocument.removeEventListener(\"mouseup\", up);\n\t\t\tattached = null;\n\t\t};\n\n\t\treturn mergeRegister(\n\t\t\teditor.registerRootListener(next => {\n\t\t\t\tdetach();\n\t\t\t\tattached = next;\n\t\t\t\tnext?.addEventListener(\"mousedown\", down);\n\t\t\t\tnext?.addEventListener(\"click\", click);\n\t\t\t\tnext?.ownerDocument.addEventListener(\"mouseup\", up);\n\t\t\t\tif (next) {\n\t\t\t\t\tunselect = registerPreviewSelection(\n\t\t\t\t\t\tnext,\n\t\t\t\t\t\ttarget => {\n\t\t\t\t\t\t\tlet block = blockAt(target.closest(\"[data-plan-preview]\")?.parentElement);\n\t\t\t\t\t\t\treturn block && block.kind !== \"seecode\"\n\t\t\t\t\t\t\t\t? target.closest(FOCUSABLE_PREVIEW)\n\t\t\t\t\t\t\t\t: null;\n\t\t\t\t\t\t},\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}),\n\t\t\tdetach,\n\t\t\teditor.registerCommand(\n\t\t\t\tKEY_DOWN_COMMAND,\n\t\t\t\tevent => {\n\t\t\t\t\tif (!(event.target instanceof Element)) return false;\n\t\t\t\t\tlet preview = event.target.closest(FOCUSABLE_PREVIEW);\n\t\t\t\t\tlet block = blockAt(preview?.closest(\"[data-plan-preview]\")?.parentElement);\n\t\t\t\t\tif (!block) return false;\n\t\t\t\t\tif (block.kind === \"seecode\" && event.target !== preview) return false;\n\t\t\t\t\tif (event.metaKey || event.ctrlKey || event.altKey) return true;\n\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t$leave(block.key, event.key === \"ArrowDown\" ? \"next\" : \"previous\");\n\t\t\t\t\t} else if (event.key === \"Enter\" || event.key === \" \") {\n\t\t\t\t\t\t// Space too: on a focused box it would scroll the page.\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t$open(block.key, block.source.length);\n\t\t\t\t\t} else if (event.key.length === 1) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t$open(block.key, block.source.length, event.key);\n\t\t\t\t\t}\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t\tCOMMAND_PRIORITY_CRITICAL,\n\t\t\t),\n\t\t\t// Text selected in a preview is the browser's to copy; Lexical would\n\t\t\t// copy its own selection, left somewhere else in the document.\n\t\t\teditor.registerCommand(\n\t\t\t\tCOPY_COMMAND,\n\t\t\t\tevent =>\n\t\t\t\t\tevent instanceof ClipboardEvent && event.target instanceof Element\n\t\t\t\t\t&& !!event.target.closest(FOCUSABLE_PREVIEW),\n\t\t\t\tCOMMAND_PRIORITY_CRITICAL,\n\t\t\t),\n\t\t\tarrow(KEY_ARROW_DOWN_COMMAND, \"next\"),\n\t\t\tarrow(KEY_ARROW_UP_COMMAND, \"previous\"),\n\t\t\teditor.registerCommand(\n\t\t\t\tKEY_ESCAPE_COMMAND,\n\t\t\t\tevent => {\n\t\t\t\t\tif (latest.current.disabled) return false;\n\t\t\t\t\tlet selection = $getSelection();\n\t\t\t\t\tif (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;\n\t\t\t\t\tlet key = enclosing(selection.anchor.getNode());\n\t\t\t\t\tlet block = key ? blockAt(editor.getElementByKey(key)) : undefined;\n\t\t\t\t\tif (!block || !latest.current.hidable.has(block.key)) return false;\n\t\t\t\t\t// Spent here: a comment preview open on the same passage would\n\t\t\t\t\t// otherwise also close, and send focus back to its marker.\n\t\t\t\t\tevent?.preventDefault();\n\t\t\t\t\tevent?.stopPropagation();\n\t\t\t\t\t$close(block);\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t\tCOMMAND_PRIORITY_NORMAL,\n\t\t\t),\n\t\t);\n\t}, [editor]);\n\n\tuseEffect(() => {\n\t\tlet refresh = () => {\n\t\t\tlet root = editor.getRootElement();\n\t\t\tif (!root || root.ownerDocument.activeElement !== root) return setEditing(undefined);\n\t\t\tsetEditing(\n\t\t\t\teditor.getEditorState().read(() => {\n\t\t\t\t\tlet selection = $getSelection();\n\t\t\t\t\tif (!$isRangeSelection(selection)) return undefined;\n\t\t\t\t\tfor (let at: LexicalNode | null = selection.anchor.getNode(); at; at = at.getParent()) {\n\t\t\t\t\t\tif ($isCodeBlockNode(at)) return at.getKey();\n\t\t\t\t\t}\n\t\t\t\t\treturn undefined;\n\t\t\t\t}),\n\t\t\t);\n\t\t};\n\t\trefresh();\n\t\treturn mergeRegister(\n\t\t\teditor.registerUpdateListener(refresh),\n\t\t\teditor.registerCommand(FOCUS_COMMAND, () => {\n\t\t\t\trefresh();\n\t\t\t\treturn false;\n\t\t\t}, COMMAND_PRIORITY_LOW),\n\t\t\teditor.registerCommand(BLUR_COMMAND, () => {\n\t\t\t\tsetEditing(undefined);\n\t\t\t\treturn false;\n\t\t\t}, COMMAND_PRIORITY_LOW),\n\t\t);\n\t}, [editor]);\n\n\tlet toggle = useCallback((key: string) => {\n\t\t// Collapsing with the caret inside would strand it in a hidden box, so\n\t\t// it is moved past the block first.\n\t\tlet collapsed = !current.current[key];\n\t\tif (!collapsed) {\n\t\t\teditor.update(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\tif (!$isRangeSelection(selection)) return;\n\t\t\t\tif (enclosing(selection.anchor.getNode()) !== key) return;\n\t\t\t\t$getNodeByKey(key)?.selectNext(0, 0);\n\t\t\t});\n\t\t}\n\t\tsetShown(prev => {\n\t\t\tlet next = { ...prev };\n\t\t\tif (collapsed) next[key] = \"pinned\";\n\t\t\telse delete next[key];\n\t\t\treturn next;\n\t\t});\n\t}, [editor]);\n\n\treturn (\n\t\t<>\n\t\t\t{blocks.map(block => (\n\t\t\t\t toggle(block.key)}\n\t\t\t\t\tonHidable={reportHidable}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\n\t);\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",{"_54":55,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_42":31,"_137":126,"_138":31,"_48":49,"_50":49},"branches",[73,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,127,128,129,130],"tags",[69,70,71,72],"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","main","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":49,"_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,"_52":174,"_175":31,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_52":174,"_175":31,"_176":174,"_177":49},{"_168":169,"_170":171,"_15":169,"_172":173,"_52":174,"_175":31,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_52":174,"_175":31,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_52":174,"_175":31,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_52":174,"_175":31,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_52":31,"_175":31,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_52":31,"_175":31,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_52":31,"_175":31,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_52":31,"_175":31,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_52":31,"_175":31,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_52":31,"_175":31,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_52":31,"_175":31,"_176":31},{"_168":202,"_170":203,"_15":202,"_172":204,"_52":31,"_175":31,"_176":31},{"_168":199,"_170":200,"_15":199,"_172":201,"_52":31,"_175":31,"_176":31},{"_168":196,"_170":197,"_15":196,"_172":198,"_52":31,"_175":31,"_176":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794502760301,"sidebar","expanded"]