Add code folding to the editor - #2468
Conversation
| require("codemirror/addon/search/searchcursor"); | ||
| require("codemirror/addon/fold/foldcode"); | ||
| require("codemirror/addon/fold/brace-fold"); | ||
| require("codemirror/addon/fold/indent-fold"); |
There was a problem hiding this comment.
I can add xml-fold as well that may be a nice touch for HTML files (and maybe JSX? haven't tested this though), can also add comment-fold too.
There was a problem hiding this comment.
This looks like a good set for now
Codecov Report
@@ Coverage Diff @@
## master #2468 +/- ##
==========================================
+ Coverage 57.7% 57.72% +0.01%
==========================================
Files 51 51
Lines 1986 1994 +8
Branches 398 399 +1
==========================================
+ Hits 1146 1151 +5
- Misses 840 843 +3
Continue to review full report at Codecov.
|
jasonLaster
left a comment
There was a problem hiding this comment.
This is pretty cool. And it's another reason why using codemirror is so great
I'll add some thoughts on the general UX/UI below
| function createEditor() { | ||
| return new SourceEditor({ | ||
| mode: "javascript", | ||
| foldGutter: true, |
There was a problem hiding this comment.
Feel free to feature flag this while we work on the UX/UI
|
There are a couple style regressions:
Here's atom's fold gutter. Some points I like about it are:
I'd like to iterate once we address some of the regressions |
Extend breakpoint marker past code folding marker
f05508b to
596a5d7
Compare
|
@jasonLaster I'm pushing some changes that fix the regressions now. Some notes on the enhancements though...
I'm not sure this is easily doable, the gutter in CodeMirror is weird in that the background is one element
I like the idea of some kind of highlight for the active marker. 👍
I do like their badge, it is pretty nice looking compared to the one we inherited from |
jasonLaster
left a comment
There was a problem hiding this comment.
So cool.
Small nit, then lets do it
| position: absolute; | ||
| top: 0px; | ||
| right: -4px; | ||
| right: -16px; |
There was a problem hiding this comment.
can we feature flag this CSS...
.has-code-folding.editor.new-breakpoint {
right: -16px;
}| /* move the breakpoint below the linenumber */ | ||
| .new-breakpoint .CodeMirror-gutter-elt:last-child { | ||
| /* move the breakpoint below the other gutter elements */ | ||
| .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) { |
…ng disabled. Signed-off-by: Wellington Cordeiro <wellington@wellingtoncordeiro.com>
|
Thanks @wldcordeiro! this is really cool. Lets write up some smaller issues |
* Add code folding to the editor * Fix line number hiding under breakpoint marker regression Extend breakpoint marker past code folding marker * Feature flag code folding * Feature flag some of the CSS to render the gutter properly with folding disabled.
Associated Issue: #2465
Summary of Changes
Test Plan
Screenshots/Videos