HTML editor folds in .php file?

Hi there,

Without looking to deep into this .... any reason why you need custom permanent folding in HTML code?

I mean:

• Every HTML tag can be collapsed
• You can always select any random fragment (bunch of lines) and fold them (https://www.jetbrains.com/help/phpstorm/code-folding.html#folding_predefined)

P.S. My only guess why it's not offered for HTML directly ... is that HTML comments will remain in final HTML content and will be visible to the user while not having any useful info for him/her...

This comment seems to be the same what you are asking .. and it has no answer: https://youtrack.jetbrains.com/issue/WEB-21768#comment=27-1444413

Hey Andri!

TL;DR: I think you misunderstood what I meant to some extent. For half-solution that demands macro software, go to "I ended up with a temporary solution" in the text.

I'll answer point for point:

• Because editor-folds and regular folding is not the same. Every language I use at least ,have native folding. Native folding becomes the following:

HTML:

<div id="test" style="border:1px solid black; display:inline"...>

CSS:

.myclass {...}

JS:

function test() {...}
    } else if (testDisplayStyle.style.display === 'block') {...}
    }
}

Editor folds however, show up like this:

HTML:
    Input: 

<!--<editor-fold desc="> This is the content part of the page">-->
  <div id="test"></div>
<!--</editor-fold>-->

<!--<editor-fold desc="> All the annoying long ass SVG codes here">-->
  <svg>
    <path>
  </svg>
<!--</editor-fold>-->

<!--<editor-fold desc="> SVG SETTINGS">-->
<div id="test"></div>
<!--</editor-fold>-->

    Output:

<!--This is the content part of the page-->

<!--All the annoying long ass SVG codes here-->

<!--SVG SETTINGS-->

..where the "<!--" and "-->" is colored as comments but the description "pops" with separate styling accordingly to "editor-folds" in the theme settings.

CSS:
  Input:

/*<editor-fold desc="> Menu styling here">*/
.myclass {
    background: blue;
}
/*</editor-fold>*/

  Output:

> Menu styling here

..where the text will format accordingly to "editor-folds" in the theme settings.

..and it's the same as CSS for PHP and JS too. 

• As for the possibility to select any random line: I know. I came here to ask how to get it into the context menu.

ANY editor-folds will be visible in the final code, and who cares who sees it? They are always surrounded by each languages corresponding commenting syntax, and it doesn't affect any of the page really. PHPStorm has context menu editor-folds for PHP, CSS; JS and HTML at least, and as long as the extension of the file you are working in corresponds, then it will work. Since I never use .html or .htm files and instead .php (as I mix), PHP storm will only suggest editor-folds for PHP in the PHP file. I was looking for a way around that.

I ended up with a temporary solution as of now. It's not perfect in "any" situation for "any" content, but assuming the part you want to fold has a tag first, that's closed last (i.e: covers everything you want to fold), like this:

<div> <-- This covers all of these:
    <div> <-- I want the fold to cover this
        <div> <-- ..and this
            <div> <-- ..and this
                ..and this
            </div>
        </div>
    </div>
</div>

..then you can make a macro in software like Logitech Gaming Software if you have a device by them with macro buttons:

First macro, to insert the fold code itself:

IMPORTANT to select "Use Unicode playback (may not work in some games)" as the editor cannot understand the pace of the input and tends to skip characters. Also to use a short delay anyways, to be sure as some bugs can occur. In this example it would not repeat one character twice without the delay. So "<!--" would become "<!-"

And then this to separate the tags and insert the end tag after the desired code:

7x left arrow = Places the cursor before the </editor-fold> tag
SHIFT+END = Selects the </editor-fold> part
CTRL+X = Cuts the </editor-fold> part
HOME = Goes to the beginning of the line
DOWN = Places the cursor on the first "DIV"-tag
CTRL+SHIFT+M = Places the cursor in the "DIV"-tags closing tag ("</DIV>")
END = Places the cursor after the closing "DIV"-tag
ENTER = Creates new line
CTRL+V = Pastes the </editor-fold> part
HOME = Goes to the start of the </editor-fold> part
SHIFT+HOME = Selects tab inserted automatically by PHPStorm before the </editor-fold> part
DEL = Removes the tab inserted automatically by PHPStorm

NOTE: Note the delays after ENTER. Somehow, these are also necessary or there will be bugs because PHPStorm cannot keep up with the pace of input without delays. 

That's two key presses to get the following result:

<!--<editor-fold desc="">-->
<div> <-- This covers all of these:
    <div> <-- I want the fold to cover this
        <div> <-- ..and this
            <div> <-- ..and this
                ..and this
            </div>
        </div>
    </div>
</div>
<!--</editor-fold>-->

..now just enter the actual description.

Well .. if it's not offered by default ... you can always add your own solution via Live Template (of surround kind -- important). That's a native solution and better than any macro done with external app like you are tying to do.

https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm#LiveTemplates(Snippets)inPhpStorm-CreatingSurroundTemplates

>TL;DR: I think you misunderstood what I meant to some extent. For half-solution that demands macro software, go to "I ended up with a temporary solution" in the text.

So ... what do you want to do now (after my last comment)? Your comment was on pre-moderation or something as I saw your reply in email but not here on forum .. and now I'm not super sure what exactly you want to say...

I understand that you are not happy with "native" tag folding and want actual custom blocks .. which are not available for HTML (for whatever the reason). That's why I have offered to use Surround Live Template -- it will do the job for you (so no need for external macro).

Great! I didn't know about the live-templates, and they are surely the perfect solution for what I'm looking for. I made a blog post about it to make sure anyone else can find this precise issue/solution directly at: http://skriptkiddy.com/blog/ides/editor-fold-for-html-in-php-files-its-possible-and-this-is-how-you-do-it/ and credited you for the help!