How to support formatting non-st

You might found that your eclipse html editor does not support formatting some customized tags, such as tabset and tab which are introduced by Angular JS.

For example:

<tabset><tab heading="Apples"></tab><tab heading="Oranges"></tab></tabset>

When you click "format" in menu, or press "Ctrl + Shift + F", you must want the following result:

<tabset>
        <tab heading="Apples"></tab>
        <tab heading="Oranges"></tab>
</tabset>

Unfortunately, it doe's not give a formatted result at all.

---

Now I found that we can add some customized tags into HTML pluging jar file, then the formatter will take effect.

1. find the jar location

# if your eclipse is installed with P2 pool
C:\Users\<USERNAME>\.p2\pool\plugins

# if your eclipse is not with P2 pool
eclipse\plugins

2. find the jar file

org.eclipse.wst.html.core_1.1.802.vYYYYMMDDxxx.jar

Take my Mars (eclipse version) as Example:

org.eclipse.wst.html.core_1.1.802.v201501312139.jar

3. Use Java Decompiler to locate the following class

org.eclipse.wst.html.core.internal.contentmodel.HTML5ElementCollection

4. Create a new Java project to do this hack

It will need another jar file as lib:
org.eclipse.wst.xml.core_xxxxxxxxxxxxxx.jar

screen capture of the eclipse project

5. Edit part 1)

# Before change
private static final String[] SECTIONING = { "article", "aside", "nav", "section"};

# After change
private static final String[] SECTIONING = { "article", "aside", "nav", "section", "tabset", "tab" };

6. Edit part 2)

protected CMNode create(String elementName) {
        CMNode edec = null;
        if (elementName.equalsIgnoreCase("ACRONYM")) {
        //......
        } else if (elementName.equalsIgnoreCase("tabset")) {
                edec = new HedSectioning("tabset", this);
        } else if (elementName.equalsIgnoreCase("tab")) {
                edec = new HedSectioning("tab", this);
        }

6. Edit part 3)

        private static String[] getNames() {
                if (fNames == null) {
                        fNames = new String[Ids50.getNumOfIds()];
                        fNames[0] = "A";
                        //......
                        fNames[133] = "video";
                        fNames[134] = "tabset";
                        fNames[135] = "tab";
                }
                return fNames;
        }

7. Edit part 4)

private static class Ids50 extends ElementCollection.Ids {
        //........
        public static final int ID_VIDEO = 133;
        public static final int ID_TABSET = 134;
        public static final int ID_TAB = 135;
}

8. Update the jar with new class

jar uf org.eclipse.wst.html.core_1.1.802.v201501312139.jar  org/eclipse/wst/html/core/internal/contentmodel/HTML5ElementCollection.class
 org/eclipse/wst/html/core/internal/contentmodel/HTML5ElementCollection$Ids50.class

Finally

Now you can replace the plugin jar with your new jar, then the format for tabset and tab will be supported.