# Custom Items

Throw a simple use case, this page describes how to add custom items (i.e., tools) to the toolbar.

## Use case

The use case is intend to create a MDE Rich Text with one toolbar group which contains two items. The first item encode the selected characters with Base64 encoder, and the second decode the selected characters

## Implementation

The first step is to declare the toolbar group with its two items encode64 and decode64 in the configuration of the editor

    	MDENebulaRichTextConfiguration configuration = new MDENebulaRichTextConfiguration();
    	configuration.initializeToolbarItem("EncodeToolbarGroup", "encode64", "decode64");

- EncodeToolbarGroup is the group
- encode64 is the item which encode the selected text
- decode64 is the item which decode the selected text

The second step is to add the buttons and their handlers to the widget.

This is Nebula specific feature which is an inheritance from CKEditor. Then, The widget must be casted to org.polarsys.kitalpha.richtext.nebula.widget.MDENebulaBasedRichTextWidget which provides the right services to do that.

Once the widget is casted, org.polarsys.kitalpha.richtext.nebula.widget.MDENebulaBasedRichTextWidget#addToolbarItem(String name, String command, String label, String toolbar, URL iconPath, MDERichTextToolbarItemHandler handler) service is used.

- name: refers to the name of the button
- command: refers to the name of the command which be called at receiving click-event
- label: refers to the tooltip of the item
- toolbar: refers to the toolbar group where the item will be appear
- URL: refers to the path of the icon of the item.
- handler: refers to the callback of the command at receiving click-event. This will call the execute(MDERichTextWidget) method. The parameter of the service is the instance of the widget where the event was triggered

For encoding here how to add the Encode item to the toolbar

    	...
    	((MDENebulaBasedRichTextWidget)richtextWidget).addToolbarItem("encode64", "encode64", "Encode64", "EncodeToolbarGroup", MDERichTextHelper.getURL("org.eclipse.emf.diffmerge.ui", "icons/full/lock_closed.gif"), new MDERichTextToolbarItemHandler() {
    			@Override
    			public void execute(MDERichTextWidget richText) {
    				String selectedText = richText.getSelectedText();
    				if (selectedText != null && !selectedText.isEmpty()){
    					byte[] encoded = Base64.getEncoder().encode(selectedText.getBytes());
    					String s = new String(encoded);
    					richText.insertText(s);
    				}
    			}
    	});
    	...

And for Decode item:

    	...
    	(MDENebulaBasedRichTextWidget)richtextWidget).addToolbarItem("decode64", "decode64", "Decode64", "EncodeToolbarGroup", MDERichTextHelper.getURL("org.eclipse.emf.diffmerge.ui", "icons/full/lock_open.gif"), new MDERichTextToolbarItemHandler() {
    			@Override
    			public void execute(MDERichTextWidget richText) {
    				String selectedText = richText.getSelectedText();
    				if (selectedText != null && !selectedText.isEmpty()){
    					byte[] decoded = Base64.getDecoder().decode(selectedText.getBytes());
    					String s = new String(decoded);
    					richText.insertText(s);
    				}
    			}
    		});
    		...

The result before encoding:

The result after enoding:

the result after decoding:

NB: Base64 class is available in Java 1.8