Hi all. I am trying to add the colorbutton to the AlloyEditor for Web Content. I have followed the instructions posted here: https://help.liferay.com/hc/en-us/articles/360029848551-Creating-the-OSGi-Module-and-Configuring-the-EditorConfigContributor-Class

Here is the class that I end up with:

@Component(
	immediate = true,
	property = {"editor.name=alloyeditor",
		"javax.portlet.name=com_liferay_journal_web_portlet_JournalPortlet",
		"service.ranking:Integer=101"},
	service = EditorConfigContributor.class
)
public class TextEditor extends BaseEditorConfigContributor implements EditorConfigContributor {

	@Override
	public void populateConfigJSONObject(
	    JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
	    ThemeDisplay themeDisplay,
	    RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
		
		JSONObject toolbars = jsonObject.getJSONObject("toolbars");
		String extraPlugins = jsonObject.getString("extraPlugins");
		System.out.println("toolbars:" + toolbars.toString());
		System.out.println("extraPlugins:" + extraPlugins);
		
		//add the extra plug-in
		//colorbutton seems to work 
		//ColorButton, colorButton and ae_colorbutton return 404s
		if (Validator.isNotNull(extraPlugins)) {
		  extraPlugins = extraPlugins + ",ae_uibridge,ae_autolink,ae_buttonbridge,ae_menubridge,ae_panelmenubuttonbridge,ae_placeholder,ae_richcombobridge,clipboard,colorbutton";
		}
		else {
		  extraPlugins = "ae_uibridge,ae_autolink,ae_buttonbridge,ae_menubridge,ae_panelmenubuttonbridge,ae_placeholder,ae_richcombobridge,clipboard,colorbutton";
		}
		jsonObject.put("extraPlugins", extraPlugins);
		System.out.println("extraPlugins2:" + extraPlugins);
		
		//add colorbutton to styles toolbar
		JSONObject stylesToolbar = toolbars.getJSONObject("styles");
		if (stylesToolbar == null) {
	        stylesToolbar = JSONFactoryUtil.createJSONObject();
		}
		JSONArray selections = stylesToolbar.getJSONArray("selections");
		for (int i = 0; i < selections.length(); i++) {
	        JSONObject selection = selections.getJSONObject(i);
	        if (Objects.equals(selection.get("name"), "text")) {
	                JSONArray buttons = selection.getJSONArray("buttons");
	                //this works
	                buttons.put("Copy");
	                //this does not work
	                //tried "colorbutton", "colorButton", "ColorButton" and none of them work
	                buttons.put("colorButton");
	        }
		}
		stylesToolbar.put("selections", selections);
		toolbars.put("styles", stylesToolbar);
		jsonObject.put("toolbars", toolbars);
		System.out.println("toolbars2:" + toolbars.toString());
	}

}

However, the colorbutton does not appear in the editor. As noted above, the "Copy" button does. I've tried several variations on the name: "colorbutton," "colorButton" and "ColorButton" but none of them work.

Here is the extraPlugins string I get after adding the colorbutton:

ae_autolink,ae_dragresize,ae_addimages,ae_imagealignment,ae_placeholder,ae_selectionregion,ae_tableresize,ae_tabletools,ae_uicore,itemselector,media,embedurl,ae_uibridge,ae_autolink,ae_buttonbridge,ae_menubridge,ae_panelmenubuttonbridge,ae_placeholder,ae_richcombobridge,clipboard,colorbutton

Here is the toolbar JSON I get after adding the colorbutton:

{"add":{"buttons":["image","embedVideo","table","hline"],"tabIndex":2},"styles":{"selections":[{"buttons":["imageLeft","imageCenter","imageRight"],"test":"AlloyEditor.SelectionTest.embedUrl","name":"embedurl"},{"buttons":["linkEditBrowse"],"test":"AlloyEditor.SelectionTest.link","name":"link"},{"buttons":["imageLeft","imageCenter","imageRight","linkBrowse","imageAlt"],"test":"AlloyEditor.SelectionTest.image","name":"image","setPosition":"AlloyEditor.SelectionSetPosition.image"},{"buttons":[{"cfg":{"styles":[{"name":"Normal","style":{"type":1,"element":"p"}},{"name":"Heading 1","style":{"type":1,"element":"h1"}},{"name":"Heading 2","style":{"type":1,"element":"h2"}},{"name":"Heading 3","style":{"type":1,"element":"h3"}},{"name":"Heading 4","style":{"type":1,"element":"h4"}},{"name":"Preformatted Text","style":{"type":1,"element":"pre"}},{"name":"Cited Work","style":{"type":2,"element":"cite"}},{"name":"Computer Code","style":{"type":2,"element":"code"}},{"name":"Info Message","style":{"attributes":{"class":"portlet-msg-info"},"type":1,"element":"div"}},{"name":"Alert Message","style":{"attributes":{"class":"portlet-msg-alert"},"type":1,"element":"div"}},{"name":"Error Message","style":{"attributes":{"class":"portlet-msg-error"},"type":1,"element":"div"}}]},"name":"styles"},"bold","italic","underline","ol","ul","linkBrowse","Copy","colorbutton"],"test":"AlloyEditor.SelectionTest.text","name":"text"},{"buttons":["tableHeading","tableRow","tableColumn","tableCell","tableRemove"],"test":"AlloyEditor.SelectionTest.table","getArrowBoxClasses":"AlloyEditor.SelectionGetArrowBoxClasses.table","name":"table","setPosition":"AlloyEditor.SelectionSetPosition.table"}],"tabIndex":1}}

As you can see, the colorbutton is there in both. There are no java or javascript errors.

Am I missing something? Has anyone successfully done this?