Developed a plugin to group toolbar items

packages/ckeditor5-toolbar-group/README.md

@@ -0,0 +1,34 @@
+## Documentation
+```html
+This package contains CKEditor 5 features allowing to group multiple toolbar items in a dropdown list using any custom ckeditor5 build
+
+1. Add "toolbargroup" to the toolbar.items array as shown below
+2. add a toolbarGroup object to the editor.config and set the required parameters.
+
+The toolbarGroup accepts an option array with a model and title property respectively.
+
+Values for the model is same as toolbar.items array, while the values for the title is optional. if you want a custom title, then you can set that option as desired
+
+An example is shown below
+```
+
+```js 
+import ToolbarGroup from '@ckeditor/ckeditor5-toolbar-group/toolbargroup'; 
+
+	Editor.create( document.querySelector( '#editor' ),{
+
+		     toolbar: {
+                items: [ 'bold', 'italic','underline','highlight','toolbargroup']
+            },
+            toolbarGroup: {
+                options: [
+                    { model: 'paragraph', title: 'Paragraph' },
+                    { model: 'heading1',  title: 'Heading 1' },
+                    { model: 'heading2', title: 'Heading 2' },
+                    { model: 'link'},
+                ]
+            },
+		} )
+		.then(...)
+		.catch(...);
+```

packages/ckeditor5-toolbar-group/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "ckeditor5-toolbar-group",
+  "version": "1.0.0",
+  "description": "A plugin to group different toolbar items in a dropdown",
+  "main": "toolbargroup.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ckeditor",
+    "ckeditor-5",
+    "toolbargroup",
+    "dropdown"
+  ],
+  "author": "Adinlewa Akinwale Fikayo",
+  "license": "ISC"
+}

packages/ckeditor5-toolbar-group/toolbargroup.js

@@ -0,0 +1,102 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+//import necessary view components for the toolbar
+import MenuIcon from './svg/ellipsis-v.svg';
+import {addToolbarToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+
+
+
+export default class ToolbarGroup extends Plugin {
+
+	static get pluginName() {
+		return 'ToolbarGroup';
+	}
+
+	constructor( editor ) {
+
+		super( editor );
+
+		this.groupTitle = this._groupTitle();
+
+		this.textOption = this._textOption();
+
+		this.icon = MenuIcon;
+	}
+
+    init() {
+
+        const editor  = this.editor;
+        const t       = editor.t;
+        const config  = editor.config.get('toolbargroup');
+        const factory = editor.ui.componentFactory;
+
+        factory.add( 'toolbargroup', locale => {
+
+			const buttons = [];
+
+			for(const option of config.options){
+
+				const view = factory.create( option.model );
+
+				if (view.hasOwnProperty('buttonView')) {
+
+					view.buttonView.set({
+						withText : true,
+						tooltip : false,
+						label : option.title || view.buttonView.label,
+					})
+
+				}else{
+
+					view.set({
+						withText : true,
+						tooltip : false,
+						label : option.title || view.label,
+					})
+
+				}
+
+				buttons.push( view );
+			}
+			//create dropdown view
+ 			const dropdownView = createDropdown(locale);
+
+	        dropdownView.buttonView.set( {
+			    withText: this.textOption,
+			    label: t(this.groupTitle),
+			    icon: MenuIcon,
+			    tooltip: true,
+			    class:'toolbar_group'
+			} );
+	        //add to toolbar
+			addToolbarToDropdown( dropdownView, buttons );
+			dropdownView.toolbarView.isVertical = true;
+
+			return dropdownView;
+        } );
+
+    }
+
+    _groupTitle(){
+    	const editor  = this.editor;
+        const config  = editor.config.get('toolbarGroup');
+        const title   = 'More Options';
+        if (config !== undefined) {
+        	return config.title || title;
+        }
+        return title;
+    }
+
+    _textOption(){
+    	const editor  = this.editor;
+        const config  = editor.config.get('toolbarGroup');
+        if (config !== undefined) {
+        	return config.hasOwnProperty('title');
+        }
+        return false;
+    }
+
+
+
+
+
+}