[docs-infra] Add editable source projections - #1780
Conversation
brijeshb42
added
the
scope: docs-infra
Deploy previewBundle sizeTotal Size Change: 🔺+1.42KB(+0.04%) - Total Gzip Change: 🔺+586B(+0.07%) Show details for 71 more bundlesCodeEditor parsed: 🔺+549B(+14.55%) gzip: 🔺+218B(+12.86%) PerformanceTotal duration: 19.43 ms +2.35 ms(+13.7%) | Renders: 5 (+0) | Paint: 67.21 ms +3.29 ms(+5.1%)
6 tests within noise — details Check out the code infra dashboard for more information about this PR. |
2853dcd to
5859a27
Compare
A collapsed code block had to expand before it could be edited: the textarea holds plain text and has no notion of hidden rows. A projection names the contiguous slice the collapsed view shows, so the editor can hold that slice and patch each edit back into the complete source. `createEditableSourceProjection` resolves a preview the way Material UI's `Demo` does — strip the leading whitespace from every line of both sides, then find the fragment as a substring — so it accepts exactly the preview files Material accepts. Run over Material's corpus, all 392 `.tsx.preview` files with a `.tsx` sibling resolve to one region, none ambiguously, and every projection patches back byte-identical. Two differences, both because docs-infra displays the patched source rather than only compiling it: the projection records the indentation to restore, and a fragment matching more than once is refused instead of spliced into the first occurrence. `createFocusedSourceProjection` is the target producer, deriving the window from the parsed tree. Both it and `<Pre>`'s caret bounds now read one `getCollapsedFrameWindow` walk, so the region the editor edits and the region the caret is held inside cannot disagree. `setSource` grows a fifth argument carrying the projection an edit was made through, and the controlled file records it alongside the edited source.
dcf13d1 to
7e52522
Compare
5859a27 to
4c0bc69
Compare
1 participant
Sixth in the docs-infra migration stack, on top of #1779.
A collapsed code block had to expand before it could be edited: the textarea holds plain text and has no notion of hidden rows. A projection names the contiguous slice the collapsed view shows, so the editor holds that slice and patches each edit back into the complete source.
EditableSourceProjectiononTransforms[key],VariantExtraFiles[file],VariantCode,ControlledVariantCode, andTransformedFile.hasCollapse/hasCollapseInFocusare untouched.createEditableSourceProjection({ fullSource, previewSource })resolves a preview the way Material UI'sDemodoes — strip leading whitespace from every line of both sides, then match as a substring — so it accepts exactly the preview files Material accepts. Over Material's corpus, all 392.tsx.previewfiles with a.tsxsibling resolve to one region, none ambiguously, and every projection patches back byte-identical. Two deliberate differences: the projection records the indentation to restore, and a fragment matching more than once is refused rather than spliced into the first occurrence.createFocusedSourceProjection(source, root)is the target producer, deriving the window from the parsed tree. It and<Pre>'s caret bounds now share onegetCollapsedFrameWindowwalk, so the edited region and the caret bounds cannot disagree.setSourcegrows a fifth argument carrying the projection an edit was made through;useSourceEditingrecords it on the controlled file.PretakessourceProjectionand no longer expands on activation when it has one.Gate: 27 browser tests across chromium, firefox, and webkit — the new one edits a collapsed block through its projection and asserts it never expands — plus a clean typecheck and lint.