[{"_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","88add35cbcbc5c6e2fc2ccf5cf3de9aced8ea77f","path","packages/editor/src/toolbar/bubble.tsx","oid","8ec978f7f13ce502ea003644cb0046dff698c1e5","size",13951,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * Inline formatting, shown over the selection.\n *\n * Marks are text formats rather than nodes, so applying one is local and\n * immediate — no identifier to obtain, nothing for the server to arbitrate.\n * That is what lets this stay a plain toolbar rather than a request.\n */\n\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LinkPlusIcon, MessagePlusIcon } from \"@chopin/icons\";\n\nimport { $linkAt, OPEN_LINK_EDITOR_COMMAND } from \"./link\";\nimport { placeSurface } from \"./placement\";\nimport {\n\tCELL,\n\tCELL_OFF,\n\tCELL_ON,\n\teditorSurfaceViewport,\n\tlistenToEditorGeometry,\n\tnativeSelectionRect,\n\tSEAM,\n\tSHELL,\n} from \"./surface\";\nimport {\n\t$isListItemNode,\n\t$isListNode,\n\tINSERT_ORDERED_LIST_COMMAND,\n\tINSERT_UNORDERED_LIST_COMMAND,\n\tREMOVE_LIST_COMMAND,\n} from \"@lexical/list\";\nimport {\n\t$createHeadingNode,\n\t$createQuoteNode,\n\t$isHeadingNode,\n\t$isQuoteNode,\n} from \"@lexical/rich-text\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport {\n\t$createParagraphNode,\n\t$getSelection,\n\t$isElementNode,\n\t$isParagraphNode,\n\t$isRangeSelection,\n\tCOMMAND_PRIORITY_HIGH,\n\tCOMMAND_PRIORITY_LOW,\n\tFORMAT_TEXT_COMMAND,\n\tKEY_ESCAPE_COMMAND,\n\tSELECTION_CHANGE_COMMAND,\n} from \"lexical\";\n\nimport type { HeadingTagType } from \"@lexical/rich-text\";\nimport type { ElementNode, LexicalNode, TextFormatType } from \"lexical\";\nimport type { DOMRectLike, SurfacePlacement } from \"./placement\";\n\n/** Block shapes the bubble can switch between. */\nexport type Block = \"paragraph\" | \"quote\" | \"bullet\" | \"number\" | HeadingTagType;\n\n/** `glyph` is what shows; `label` is what it means, for hover and assistive tech. */\nconst BLOCKS: Array<{ id: Block; glyph: string; label: string }> = [\n\t{ id: \"paragraph\", glyph: \"T\", label: \"Text\" },\n\t{ id: \"h1\", glyph: \"H1\", label: \"Heading 1\" },\n\t{ id: \"h2\", glyph: \"H2\", label: \"Heading 2\" },\n\t{ id: \"h3\", glyph: \"H3\", label: \"Heading 3\" },\n\t{ id: \"quote\", glyph: \">\", label: \"Blockquote\" },\n\t{ id: \"bullet\", glyph: \"UL\", label: \"Bulleted list\" },\n\t{ id: \"number\", glyph: \"OL\", label: \"Numbered list\" },\n];\n\n/**\n * How to show a block the menu does not offer.\n *\n * Headings run to six and only three are worth a button, but a plan written by\n * an agent may hold any of them, and the trigger has to say so rather than\n * claim the selection is something it is not.\n */\nfunction describe(block: Block): { glyph: string; label: string } {\n\tlet known = BLOCKS.find(item => item.id === block);\n\tif (known) return known;\n\treturn { glyph: block.toUpperCase(), label: `Heading ${block.slice(1)}` };\n}\n\n/**\n * The block a change of type would act on.\n *\n * The nearest element that is not inline, which is the same block\n * `$setBlocksType` collects. Deliberately not the top-level one: a paragraph\n * inside a callout is its own block, and resolving to the callout would report\n * a type nothing here can apply.\n */\nfunction owner(node: LexicalNode | null): ElementNode | undefined {\n\tlet cursor = node;\n\twhile (cursor) {\n\t\tif ($isElementNode(cursor) && !cursor.isInline()) return cursor;\n\t\tcursor = cursor.getParent();\n\t}\n\treturn undefined;\n}\n\n/**\n * The quote wrapped around this block, if it is the block's whole reason for\n * being a quote.\n *\n * Quotes arrive in two shapes. Imported markdown gives `quote > paragraph`,\n * while `$setBlocksType` moves the old block's children straight in and gives\n * `quote > text`. Both write out as `> …`, so neither is wrong, but anything\n * acting on a quote has to recognise the pair.\n */\nfunction quoted(block: ElementNode | undefined): ElementNode | undefined {\n\tif (!block) return undefined;\n\tif ($isQuoteNode(block)) return block;\n\tlet parent = block.getParent();\n\treturn $isParagraphNode(block) && $isQuoteNode(parent) ? parent : undefined;\n}\n\n/** What the selection is sitting in. Call inside a read. */\nexport function $block(node: LexicalNode | null): Block {\n\tlet block = owner(node);\n\tif (!block) return \"paragraph\";\n\n\t// A list item's shape belongs to the list around it, not the item.\n\tif ($isListItemNode(block)) {\n\t\tlet list = block.getParent();\n\t\tif ($isListNode(list)) return list.getListType() === \"number\" ? \"number\" : \"bullet\";\n\t}\n\tif ($isHeadingNode(block)) return block.getTag();\n\tif (quoted(block)) return \"quote\";\n\treturn \"paragraph\";\n}\n\ntype Mark = { format: TextFormatType; label: string; glyph: string; shortcut: string };\n\nconst MARKS: Mark[] = [\n\t{ format: \"bold\", label: \"Bold\", glyph: \"B\", shortcut: \"⌘B\" },\n\t{ format: \"italic\", label: \"Italic\", glyph: \"I\", shortcut: \"⌘I\" },\n\t{ format: \"strikethrough\", label: \"Strikethrough\", glyph: \"S\", shortcut: \"⌘⇧X\" },\n\t{ format: \"underline\", label: \"Underline\", glyph: \"U\", shortcut: \"⌘U\" },\n\t{ format: \"code\", label: \"Inline code\", glyph: \"<>\", shortcut: \"⌘E\" },\n];\n\nexport function SelectionBubble(\n\t{ disabled, hidden, onComment }: {\n\t\tdisabled?: boolean;\n\t\t/** Another surface has taken the bubble's place for now. */\n\t\thidden?: boolean;\n\t\tonComment?: () => void;\n\t},\n) {\n\tlet [editor] = useLexicalComposerContext();\n\tlet [anchor, setAnchor] = useState();\n\tlet [position, setPosition] = useState();\n\tlet [active, setActive] = useState>(new Set());\n\tlet [block, setBlock] = useState(\"paragraph\");\n\tlet [linked, setLinked] = useState(false);\n\t/** Whether the bubble is showing block types instead of its marks. */\n\tlet [choosing, setChoosing] = useState(false);\n\tlet ref = useRef(null);\n\n\tlet sync = useCallback(() => {\n\t\teditor.getEditorState().read(() => {\n\t\t\tlet selection = $getSelection();\n\n\t\t\tif (!$isRangeSelection(selection) || selection.isCollapsed() || disabled) {\n\t\t\t\tsetAnchor(undefined);\n\t\t\t\tsetPosition(undefined);\n\t\t\t\t// Losing the selection dismisses the bubble, so the menu must\n\t\t\t\t// not be left open to reappear over the next one.\n\t\t\t\tsetChoosing(false);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet marks = new Set();\n\t\t\tfor (let mark of MARKS) {\n\t\t\t\tif (selection.hasFormat(mark.format)) marks.add(mark.format);\n\t\t\t}\n\t\t\tsetActive(marks);\n\t\t\tsetBlock($block(selection.anchor.getNode()));\n\t\t\tsetLinked(!!$linkAt(selection));\n\n\t\t\t// Position against the live DOM selection: Lexical offsets do not\n\t\t\t// map to screen coordinates, and the caret may span nodes.\n\t\t\tlet rect = nativeSelectionRect();\n\t\t\tif (!rect) return setPosition(undefined);\n\t\t\tif (rect.width === 0 && rect.height === 0) return setPosition(undefined);\n\n\t\t\tsetAnchor(rect);\n\t\t});\n\t}, [editor, disabled]);\n\n\tuseEffect(() => {\n\t\tlet stop = editor.registerCommand(\n\t\t\tSELECTION_CHANGE_COMMAND,\n\t\t\t() => {\n\t\t\t\tsync();\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tCOMMAND_PRIORITY_LOW,\n\t\t);\n\t\tlet off = editor.registerUpdateListener(sync);\n\t\treturn () => {\n\t\t\tstop();\n\t\t\toff();\n\t\t};\n\t}, [editor, sync]);\n\n\tlet convert = useCallback((next: Block) => {\n\t\tsetChoosing(false);\n\t\t// Already a quote: converting again would nest one inside the other.\n\t\tif (next === block) return;\n\n\t\tif (next === \"bullet\") {\n\t\t\treturn editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n\t\t}\n\t\tif (next === \"number\") {\n\t\t\treturn editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n\t\t}\n\t\t// Containers are unwrapped, not swapped: `$setBlocksType` converts the\n\t\t// block it finds and leaves the list or quote standing around it.\n\t\tif (block === \"bullet\" || block === \"number\") {\n\t\t\teditor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n\t\t}\n\t\tif (block === \"quote\") {\n\t\t\teditor.update(() => {\n\t\t\t\tlet selection = $getSelection();\n\t\t\t\tif (!$isRangeSelection(selection)) return;\n\t\t\t\tlet inner = owner(selection.anchor.getNode());\n\t\t\t\t// Only the wrapping shape needs lifting. Where the quote is\n\t\t\t\t// itself the block, `$setBlocksType` below replaces it.\n\t\t\t\tif ($isQuoteNode(inner)) return;\n\t\t\t\tlet quote = quoted(inner);\n\t\t\t\tif (!quote) return;\n\t\t\t\tfor (let child of quote.getChildren()) quote.insertBefore(child);\n\t\t\t\tquote.remove();\n\t\t\t});\n\t\t}\n\n\t\tlet build: () => ElementNode = next === \"quote\"\n\t\t\t? $createQuoteNode\n\t\t\t: next === \"paragraph\"\n\t\t\t? $createParagraphNode\n\t\t\t: () => $createHeadingNode(next);\n\n\t\teditor.update(() => {\n\t\t\tlet selection = $getSelection();\n\t\t\tif ($isRangeSelection(selection)) $setBlocksType(selection, build);\n\t\t});\n\t}, [editor, block]);\n\n\t/*\n\t * Escape closes the block menu, or else lets go of the selection: it\n\t * collapses to where the caret was heading, and focus stays in the editor.\n\t *\n\t * Registered on the editor, not the bubble: nothing in the bubble can take\n\t * focus — that is the whole point of cancelling mousedown — so a handler\n\t * there would never see a key.\n\t */\n\tuseEffect(() => {\n\t\tif (!anchor || disabled || hidden) return;\n\t\treturn editor.registerCommand(\n\t\t\tKEY_ESCAPE_COMMAND,\n\t\t\t(event: KeyboardEvent) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tif (choosing) {\n\t\t\t\t\tsetChoosing(false);\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\teditor.update(() => {\n\t\t\t\t\tlet selection = $getSelection();\n\t\t\t\t\tif (!$isRangeSelection(selection)) return;\n\t\t\t\t\tlet { key, offset, type } = selection.focus;\n\t\t\t\t\tselection.anchor.set(key, offset, type);\n\t\t\t\t});\n\t\t\t\treturn true;\n\t\t\t},\n\t\t\tCOMMAND_PRIORITY_HIGH,\n\t\t);\n\t}, [editor, anchor, disabled, hidden, choosing]);\n\n\tlet place = useCallback(() => {\n\t\tlet element = ref.current;\n\t\tif (!element || !anchor) return;\n\t\tlet liveAnchor = nativeSelectionRect();\n\t\tif (!liveAnchor || (liveAnchor.width === 0 && liveAnchor.height === 0)) {\n\t\t\tsetPosition(undefined);\n\t\t\treturn;\n\t\t}\n\t\tlet viewport = editorSurfaceViewport(editor);\n\t\telement.style.maxWidth = `${Math.max(0, viewport.width - 16)}px`;\n\t\tlet width = element.offsetWidth;\n\t\tlet centre = liveAnchor.left + liveAnchor.width / 2;\n\t\tlet next = placeSurface(\n\t\t\t{\n\t\t\t\tbottom: liveAnchor.bottom,\n\t\t\t\theight: liveAnchor.height,\n\t\t\t\tleft: centre - width / 2,\n\t\t\t\tright: centre + width / 2,\n\t\t\t\ttop: liveAnchor.top,\n\t\t\t\twidth: liveAnchor.width,\n\t\t\t},\n\t\t\t{ width, height: element.offsetHeight },\n\t\t\tviewport,\n\t\t);\n\t\tsetPosition(current =>\n\t\t\tcurrent?.left === next.left && current.top === next.top\n\t\t\t\t&& current.maxHeight === next.maxHeight\n\t\t\t\t? current\n\t\t\t\t: next\n\t\t);\n\t}, [anchor]);\n\tuseLayoutEffect(place, [place, choosing]);\n\n\tuseEffect(() => {\n\t\tif (!anchor) return;\n\t\treturn listenToEditorGeometry(editor, place);\n\t}, [anchor, editor, place]);\n\n\tif (!anchor || disabled || hidden) return null;\n\n\treturn (\n\t\t event.preventDefault()}\n\t\t>\n\t\t\t{choosing\n\t\t\t\t? BLOCKS.map(item => (\n\t\t\t\t\t convert(item.id)}\n\t\t\t\t\t\tclassName={`${CELL} ${item.id === block ? CELL_ON : CELL_OFF}`}\n\t\t\t\t\t\tdata-press=\"small\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.glyph}\n\t\t\t\t\t\n\t\t\t\t))\n\t\t\t\t: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t setChoosing(true)}\n\t\t\t\t\t\t\tclassName={`${CELL} ${CELL_OFF}`}\n\t\t\t\t\t\t\tdata-press=\"small\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{describe(block).glyph}\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t{MARKS.map(mark => (\n\t\t\t\t\t\t\t editor.dispatchCommand(FORMAT_TEXT_COMMAND, mark.format)}\n\t\t\t\t\t\t\t\tclassName={`${CELL} ${active.has(mark.format) ? CELL_ON : CELL_OFF}`}\n\t\t\t\t\t\t\t\tdata-press=\"small\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{mark.glyph}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t editor.dispatchCommand(OPEN_LINK_EDITOR_COMMAND, undefined)}\n\t\t\t\t\t\t\tclassName={`${CELL} ${CELL_OFF}`}\n\t\t\t\t\t\t\tdata-press=\"small\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t{onComment && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t {\n\t\t\t\t\t\t\t\t\t\tonComment();\n\t\t\t\t\t\t\t\t\t\tsetAnchor(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPosition(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName={`${CELL} ${CELL_OFF}`}\n\t\t\t\t\t\t\t\t\tdata-press=\"small\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\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)}\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",1794515559719,"sidebar","expanded"]