How to support formatting non-standard tag in eclipse html editor

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.