Fold everything under a comment in Atom


#1

So I’m having this “issue” with Atom: I’d like to fold every element which is under a comment. Take this HTML:

<section title="mytitle">
  <article title="mytitle">
    blablabla
  </article>
</section>

If I click on the arrow that appears over the gutter on the left I can fold and unfold section or article (depending on where I click) and I really like this feature BUT… I tend to comment my CSS for related stuff, take this example:

/*MY FIRST TRANSITION EXAMPLE*/
.trsDiv {
  padding: 5px;
  ... other properties
  border-radius: 5px;
}

.., other stuff related to it 

#trsdiv2 {
  transition: background-color 5s linear 0.5s, color 3s ease 2s;
}

In this case I’d like to fold everything under the comment but I don’t know how to do it (I’d like the arrow to appear on the comment, but I can only fold things that aren’t the comment, even if I indent everything below it).

Can someone help me?

NOTE: you can suggest me packages etc but keep in mind that I already know the existance of fold option for selection (CTRL+ALT+Shift+[) and of the fold option for things w/ a certain indentation (CTRL+k CTRL+2,4 etc.), It’s not what I actually need: I’d like to treat comments as a “parent element” of everthing that’s under it (like the body which folds the section which folds the article which folds its content)

Thank you in advance!


#2

Hello.

You could design your own code for it, if there is no other option.
It is not clear to me where the fold should end.

Maybe there are some hints you can get from an older post…
Non-indentation based text editor line folding?

Cheers.


#3

It’d be cool if I actually knew atom code, I’m starting to learn web development so I don’t really think I’ll be able to code something this complex. I’ll have a look at the discussion you’ve linked. Ideally, the fold should end when the code is no more indented (I realize now that I didn’t put indentation under the comment)

For now thanks :slight_smile:


#4

If you’re studying JavaScript, writing behavior changes for Atom is a great way to practice. Most changes you’ll make are small projects where you can see results immediately. I can tell you right now that you can arrive at something that works at least mostly like you want, but not entirely because of how folding behavior works in Atom.

Here’s how. You’re going to register a command in init.coffee (or init.js if you prefer; in any circumstance where Atom accepts CoffeeScript, it will also accept JavaScript). In that command, you’re going to obtain the cursor position and search backwards from that until you find a comment. If there’s no comment, return and do nothing. If a comment is found, the code will then search forward from the cursor position until it finds another comment or the buffer ends. Now you can pull the range of the required fold from each comment and/or buffer end position, create a selection across that part of the buffer and tell Atom to fold it.


#5

Thanks for the input, I’m currently studying JavaScript, I’ll take this occasion to practice with it. Hope to succeed :smiley:


#6

Did it work? It might be nice to post your code here.