[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10,"_11":12},"actionData","errors","root",{"_229":-5,"_232":233,"_234":235},"routes/shell",{"_42":43,"_228":-5,"_229":-5,"_230":231},"routes/repo",{"_33":-7,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":31,"_45":31,"_46":31,"_47":31,"_48":31,"_49":31,"_50":51,"_52":51,"_53":31,"_54":-7,"_55":-7,"_56":57,"_58":59,"_60":61,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70},"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","f2b69c4d2bd94c817ad7f9e4678670a91af2a9f7","path","packages/editor/src/widgets/render-blocks.tsx","oid","9833f8cac0d8b07792e27f7f08acaf199208c612","size",35026,"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 { 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$getNodeByKey,\n\t$getRoot,\n\t$getSelection,\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\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 { $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 { 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\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\n/** Whether a block has a second reading of itself to show. */\nfunction renders(block: Block, html: string | undefined): boolean {\n\tif (!block.source.trim()) return false;\n\tif (block.kind === \"math\" || block.kind === \"mermaid\") return !!html;\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\n\tlet drawn = block.kind === \"math\" || block.kind === \"mermaid\";\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\treturn;\n\t\t}\n\t\tlet cancelled = false;\n\t\tlet timer: ReturnType | 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\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\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);\n\tlet swap = !collapsed && renders(block, html)\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);\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 }: { block: Block; html: string | undefined; error: string | undefined },\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) return

{error}

;\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\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/**\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. A collapsed\n * range at an empty line has no rectangle, so its line's element stands in.\n */\nfunction atEdge(element: HTMLElement, direction: Direction): boolean {\n\tlet selection = element.ownerDocument.getSelection();\n\tif (!selection?.rangeCount) return false;\n\tlet rects = selection.getRangeAt(0).getClientRects();\n\tlet rect: DOMRect | undefined = rects[direction === \"next\" ? rects.length - 1 : 0];\n\tlet node = selection.focusNode;\n\tlet line = node instanceof Element ? node : node?.parentElement;\n\tif (!rect || rect.height === 0) rect = line?.getBoundingClientRect();\n\tif (!rect || rect.height === 0 || !line) return false;\n\t// The caret's box is the font's, shorter than the line it sits on.\n\tlet height = Math.max(rect.height, parseFloat(getComputedStyle(line).lineHeight) || 0);\n\tlet box = element.getBoundingClientRect();\n\treturn direction === \"next\" ? box.bottom - rect.bottom < height : rect.top - box.top < height;\n}\n\n/** Something a reader can hold focus on in place of a caret. */\nconst FOCUSABLE_PREVIEW = \".plan-code-view, .plan-diagram\";\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\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\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$setSelection(null);\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 neighbor = direction === \"next\" ? node.getNextSibling() : node.getPreviousSibling();\n\t\t\tif (neighbor && folded(neighbor.getKey())) return $enter(neighbor.getKey(), direction);\n\t\t\troot()?.focus({ preventScroll: true });\n\t\t\tif (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\tlet selection = $getSelection();\n\t\t\t\t\tif (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;\n\t\t\t\t\t// Not `getTopLevelElement`, which stops at a table cell.\n\t\t\t\t\tlet top: LexicalNode = selection.focus.getNode();\n\t\t\t\t\tfor (\n\t\t\t\t\t\tlet parent = top.getParent();\n\t\t\t\t\t\tparent && !$isRootNode(parent);\n\t\t\t\t\t\tparent = top.getParent()\n\t\t\t\t\t) {\n\t\t\t\t\t\ttop = parent;\n\t\t\t\t\t}\n\t\t\t\t\tif ($isRootNode(top)) return false;\n\t\t\t\t\tlet neighbor = direction === \"next\" ? top.getNextSibling() : top.getPreviousSibling();\n\t\t\t\t\tif (!neighbor || !folded(neighbor.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.\n\t\t\t\t\tlet element = editor.getElementByKey(top.getKey());\n\t\t\t\t\tif (!element || !atEdge(element, direction)) return false;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t$enter(neighbor.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\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\tlet offset = pressed?.offset ?? block.source.length;\n\t\t\teditor.update(() => $open(block.key, offset));\n\t\t};\n\n\t\tlet attached: HTMLElement | null = null;\n\t\tlet detach = () => {\n\t\t\tattached?.removeEventListener(\"mousedown\", down);\n\t\t\tattached?.removeEventListener(\"click\", click);\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}),\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 (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\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\t() => {\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$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","organization",true,"site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[184,185,186,187,188,189,190,191,192,193,194,195,196],"navigation",{"_56":57,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150,"_151":152},"sources",[],"viewer","meta",{"_133":134,"_135":136,"_137":138,"_44":31,"_139":128,"_140":31,"_50":51,"_52":51},"branches",[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,131,132],"tags",[71,72,73,74],"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",[167,168,169],"documents",{"_162":163,"_164":165},"code",{"_158":159,"_160":161},"automations",{"_155":156,"_157":-5},"delivery",{"_153":51,"_154":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_166":165},"total",11,"issue",{"_170":160,"_172":182,"_15":160,"_174":183,"_54":41,"_176":31,"_177":41,"_178":161},{"_170":179,"_172":180,"_15":179,"_174":181,"_54":41,"_176":31,"_177":41,"_178":51},{"_170":171,"_172":173,"_15":171,"_174":175,"_54":41,"_176":31,"_177":41,"_178":165},"id","issues","name","Issues","filters",{},"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_170":160,"_172":182,"_15":160,"_174":227,"_54":41,"_176":31,"_177":41},{"_170":179,"_172":180,"_15":179,"_174":226,"_54":41,"_176":31,"_177":41},{"_170":171,"_172":173,"_15":171,"_174":225,"_54":41,"_176":31,"_177":41},{"_170":222,"_172":223,"_15":222,"_174":224,"_54":31,"_176":31,"_177":41},{"_170":219,"_172":220,"_15":219,"_174":221,"_54":31,"_176":31,"_177":41},{"_170":155,"_172":217,"_15":147,"_174":218,"_54":31,"_176":31,"_177":41},{"_170":157,"_172":214,"_15":215,"_174":216,"_54":31,"_176":31,"_177":41},{"_170":153,"_172":212,"_15":153,"_174":213,"_54":31,"_176":31,"_177":41},{"_170":208,"_172":209,"_15":210,"_174":211,"_54":31,"_176":31,"_177":41},{"_170":143,"_172":206,"_15":143,"_174":207,"_54":31,"_176":31,"_177":31},{"_170":203,"_172":204,"_15":203,"_174":205,"_54":31,"_176":31,"_177":31},{"_170":200,"_172":201,"_15":200,"_174":202,"_54":31,"_176":31,"_177":31},{"_170":197,"_172":198,"_15":197,"_174":199,"_54":31,"_176":31,"_177":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794738500936,"sidebar","expanded"]