@sapui5/sap.ui.richtexteditor 1.84.40 → 1.84.42

package/src/sap/ui/richtexteditor/ToolbarWrapper.js

@@ -1,15 +1,14 @@
 /*!
  * SAPUI5
- * (c) Copyright 2009-2023 SAP SE. All rights reserved.
+ * (c) Copyright 2009-2024 SAP SE. All rights reserved.
  */
 
-/*global Promise */
-
 // Provides control sap.ui.richtexteditor.ToolbarWrapper.
 sap.ui.define([
 	"sap/ui/thirdparty/jquery",
 	'sap/ui/core/Control',
 	'./library',
+	"sap/m/library",
 	'sap/ui/core/IconPool',
 	'sap/ui/core/Item',
 	'sap/ui/core/Core',
@@ -18,9 +17,24 @@ sap.ui.define([
 	"sap/base/Log",
 	"./ToolbarWrapperRenderer" // Control renderer
 ],
-	function(jQuery, Control, library, IconPool, Item, Core, RTESplitButton, URLWhitelist, Log) {
+	function(
+		jQuery,
+		Control,
+		library,
+		mLibrary,
+		IconPool,
+		Item,
+		Core,
+		RTESplitButton,
+		URLWhitelist,
+		Log
+	) {
 		"use strict";
 
+		var ButtonGroups = library.ButtonGroups,
+			EditorCommands = library.EditorCommands,
+			ButtonsToCommandsMap = library.ButtonsToCommandsMap,
+			ButtonType = mLibrary.ButtonType;
 
 		/**
 		 * Constructor for a new RichTextEditor's Custom Toolbar.
@@ -37,7 +51,6 @@ sap.ui.define([
 		 * @constructor
 		 * @private
 		 * @alias sap.ui.richtexteditor.ToolbarWrapper
-		 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 		 * @since 1.48
 		 */
 		var ToolbarWrapper = Control.extend("sap.ui.richtexteditor.ToolbarWrapper", /** @lends sap.ui.richtexteditor.ToolbarWrapper.prototype */ {
@@ -87,8 +100,8 @@ sap.ui.define([
 			this._helper = library.RichTextEditorHelper;
 			this._oResourceBundle = Core.getLibraryResourceBundle("sap.ui.richtexteditor");
 			this._oAccessibilityTexts = {};
-			this._sTextColor = library.EditorCommands.TextColor.defaultValue;
-			this._sBackgroundColor = library.EditorCommands.BackgroundColor.defaultValue;
+			this._sTextColor = EditorCommands.TextColor.defaultValue;
+			this._sBackgroundColor = EditorCommands.BackgroundColor.defaultValue;
 		};
 
 		ToolbarWrapper.prototype.onBeforeRendering = function () {
@@ -97,10 +110,10 @@ sap.ui.define([
 					oEditor = this.getEditor();
 
 				if (oEditor) {
-					oToolbar.setEnabled(oEditor.getEditable());
+					oToolbar && oToolbar.setEnabled(oEditor.getEditable());
 				}
 
-				oToolbar.addStyleClass("sapUiRTECustomToolbar");
+				oToolbar && oToolbar.addStyleClass("sapUiRTECustomToolbar");
 				this.setAggregation("_toolbar", oToolbar);
 
 				this.setAggregation("_customInsertImageDialog",
@@ -118,12 +131,12 @@ sap.ui.define([
 
 		ToolbarWrapper.prototype.onAfterRendering = function () {
 			var oEditor = this.getEditor();
-			// create an array of deep copies with the initia setupof the button groups
+			// create an array of deep copies with the initial setup of the button groups
 			this._initialButtonGroupsState = oEditor && oEditor.getButtonGroups().map(function(oObject){
 				 return jQuery.extend(true, {}, oObject);
 			});
 
-			this._syncPopoverOpeningArrows();
+			this._modifyPopoverOpeningArrowHandlers(true);
 			this._syncColors("TextColor", this._sTextColor);
 			this._syncColors("BackgroundColor", this._sBackgroundColor);
 		};
@@ -136,25 +149,78 @@ sap.ui.define([
 
 			this._customButtons = null;
 			this._oAccessibilityTexts = null;
+			this._helper = null;
+			this._oResourceBundle = null;
+			this._sTextColor = null;
+			this._sBackgroundColor = null;
 		};
 
 		/**
-		 * Helper function for synchronising the arrow button of the color selection SplitButtons
+		 * Helper function for attaching / detaching the synchronization handlers of the color selection SplitButton arrow buttons
 		 * The arrow button should be displayed as active, while the corresponding color popover is open
 		 *
+		 * @param {boolean} bAttach Will attach the handlers if true
+		 * @private
+		 */
+		ToolbarWrapper.prototype._modifyPopoverOpeningArrowHandlers = function (bAttach) {
+			var oTextColorButton = this._findButtonById("TextColor"),
+				oTextColorArrowButton = oTextColorButton && oTextColorButton._getArrowButton(),
+				oBackgroundColorButton = this._findButtonById("BackgroundColor"),
+				oBackgroundColorArrowButton =  oBackgroundColorButton && oBackgroundColorButton._getArrowButton();
+
+			// Attaching handlers
+			// As this method is called each time after rendering, we need to ensure that we attach
+			// the necessary handlers only once. That is why two properties were introduced:
+			// _bTextColorSyncHandlersAttached
+			// _bBackgroundColorSyncHandlersAttached
+			if (bAttach && oTextColorArrowButton && !this._bTextColorSyncHandlersAttached) {
+				this.getAggregation("_customTextColorDialog")._ensurePopover()
+					.attachAfterOpen(oTextColorArrowButton, this._customColorDialogAfterOpen, this)
+					.attachAfterClose(oTextColorArrowButton, this._customColorDialogAfterClose, this);
+				this._bTextColorSyncHandlersAttached = true;
+			}
+			if (bAttach && oBackgroundColorArrowButton && !this._bBackgroundColorSyncHandlersAttached) {
+				this.getAggregation("_customBackgroundColorDialog")._ensurePopover()
+					.attachAfterOpen(oBackgroundColorArrowButton, this._customColorDialogAfterOpen, this)
+					.attachAfterClose(oBackgroundColorArrowButton, this._customColorDialogAfterClose, this);
+				this._bBackgroundColorSyncHandlersAttached = true;
+			}
+
+			// Detaching handlers
+			if (!bAttach && oTextColorArrowButton && this._bTextColorSyncHandlersAttached) {
+				this.getAggregation("_customTextColorDialog")._ensurePopover()
+					.detachAfterOpen(this._customColorDialogAfterOpen, this)
+					.detachAfterClose(this._customColorDialogAfterClose, this);
+				this._bTextColorSyncHandlersAttached = null;
+			}
+			if (!bAttach && oBackgroundColorArrowButton && this._bBackgroundColorSyncHandlersAttached) {
+				this.getAggregation("_customBackgroundColorDialog")._ensurePopover()
+					.detachAfterOpen(this._customColorDialogAfterOpen, this)
+					.detachAfterClose(this._customColorDialogAfterClose, this);
+				this._bBackgroundColorSyncHandlersAttached = null;
+			}
+		};
+
+		/**
+		 * Synchronization handler called after opening of the text / background color picker dialog
+		 *
+		 * @param {object} oEvent The event object
+		 * @param {object} oButton The color button
 		 * @private
 		 */
-		ToolbarWrapper.prototype._syncPopoverOpeningArrows = function () {
-			var aFontButtons = this._findGroupedControls("font"),
-				oTextColorArrowButton = aFontButtons[2] && aFontButtons[2]._getArrowButton(),
-				oBackgroundColorArrowButton =  aFontButtons[3] && aFontButtons[3]._getArrowButton();
+		ToolbarWrapper.prototype._customColorDialogAfterOpen = function (oEvent, oButton) {
+			oButton && oButton._activeButton();
+		};
 
-			this.getAggregation("_customTextColorDialog")._ensurePopover()
-				.attachAfterOpen(function () { oTextColorArrowButton._activeButton();})
-				.attachAfterClose(function () { oTextColorArrowButton._inactiveButton();});
-			this.getAggregation("_customBackgroundColorDialog")._ensurePopover()
-				.attachAfterOpen(function () { oBackgroundColorArrowButton._activeButton();})
-				.attachAfterClose(function () { oBackgroundColorArrowButton._inactiveButton();});
+		/**
+		 * Synchronization handler called after closing of the text / background color picker dialog
+		 *
+		 * @param {object} oEvent The event object
+		 * @param {object} oButton The color button
+		 * @private
+		 */
+		ToolbarWrapper.prototype._customColorDialogAfterClose = function (oEvent, oButton) {
+			oButton && oButton._inactiveButton();
 		};
 
 		/**
@@ -199,15 +265,27 @@ sap.ui.define([
 		 * @public
 		 */
 		ToolbarWrapper.prototype.modifyRTEToolbarConfig = function (oConfig) {
-			var oToolbar = this;
+			var that = this;
 
 			// Remove the native toolbar. From now on the sap.ui.richtexteditor.ToolbarWrapper will be used
 			oConfig.toolbar = false;
 
 			oConfig.setup = function (editor) {
+				editor.on('PreInit', function () {
+					editor.addShortcut('alt+f10', 'Focus the first element in the toolbar.',
+						function () {
+							var oFirstVisibleElement = that.getAggregation("_toolbar").getAggregation("content").filter(function(oControl) {
+								return oControl.getVisible();
+							})[0];
+
+							oFirstVisibleElement && oFirstVisibleElement.focus();
+						}
+					);
+                });
+
 				// Sync sap.ui.richtexteditor.ToolbarWrapper buttons with the editor
 				editor.on('NodeChange', function () {
-					oToolbar._syncToolbarStates(this);
+					that._syncToolbarStates(this);
 				});
 			};
 
@@ -237,20 +315,20 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._syncColors = function (sCommand, sColor) {
-			var aControls = this._findGroupedControls("font"),
-				oTextButtonIcon;
+			var oColorButton = this._findButtonById(sCommand),
+				oColorButtonIcon;
 
 			if (!sColor) {
 				return;
 			}
-			switch (sCommand) {
-				case "TextColor":
-					aControls[2] && aControls[2].setIconColor(sColor);
-					break;
-				case "BackgroundColor":
-					oTextButtonIcon = aControls[3] && aControls[3]._getTextButton().getDomRef("img");
-					oTextButtonIcon && Core.byId(oTextButtonIcon.id).setColor(sColor);
-					break;
+
+			if (sCommand === "TextColor") {
+				oColorButton && oColorButton.setIconColor(sColor);
+			}
+
+			if (sCommand === "BackgroundColor") {
+				oColorButtonIcon = oColorButton && oColorButton._getTextButton().getDomRef("img");
+				oColorButtonIcon && Core.byId(oColorButtonIcon.id).setColor(sColor);
 			}
 		};
 		/**
@@ -260,16 +338,18 @@ sap.ui.define([
 		 */
 		ToolbarWrapper.prototype._syncToolbarStates = function (oNativeEditor) {
 			var oEditorCommand, oControl, sEditorCommand,
-				oEditorCommands = library.EditorCommands,
 				oFormatter = oNativeEditor.formatter,
+				oResourceBundle = this._oResourceBundle,
 				_syncTextAlign = function (oTextAlignCommand, oEditorFormatter, oControl) {
-					var sAlignCommand, sIconUri;
+					var sAlignCommand, sIconUri, oCommand;
 
 					for (sAlignCommand in oTextAlignCommand) {
-						sIconUri = IconPool.getIconURI(oEditorCommand[sAlignCommand].icon);
+						oCommand = oEditorCommand[sAlignCommand];
+						sIconUri = IconPool.getIconURI(oCommand.icon);
 						if (oTextAlignCommand.hasOwnProperty(sAlignCommand) &&
 							oEditorFormatter.match(oTextAlignCommand[sAlignCommand].style) &&
 							oControl.getIcon() !== sIconUri) {
+								oControl.setTooltip(oResourceBundle.getText(oTextAlignCommand.bundleKey) + " " + oResourceBundle.getText(oCommand.bundleKey));
 								oControl.setIcon(sIconUri);
 								break;
 						}
@@ -341,12 +421,12 @@ sap.ui.define([
 					}
 				};
 
-			for (sEditorCommand in oEditorCommands) {
-				if (!oEditorCommands.hasOwnProperty(sEditorCommand)) {
+			for (sEditorCommand in EditorCommands) {
+				if (!EditorCommands.hasOwnProperty(sEditorCommand)) {
 					continue;
 				}
 
-				oEditorCommand = oEditorCommands[sEditorCommand];
+				oEditorCommand = EditorCommands[sEditorCommand];
 				// TODO: Probably there's a better way to handle this
 				oControl = Core.byId(this._getId(sEditorCommand));
 
@@ -400,11 +480,9 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createButtonConfig = function (sCommand) {
-			var oEditorCommands = library.EditorCommands,
-				oCommand = oEditorCommands[sCommand],
+			var oCommand = EditorCommands[sCommand],
 				oRTE = this.getEditor();
 
-
 			return {
 				id: this._getId(sCommand),
 				icon: IconPool.getIconURI(oCommand.icon),
@@ -429,17 +507,16 @@ sap.ui.define([
 		 */
 		ToolbarWrapper.prototype._createMenuButtonItems = function (sCommand) {
 			var oEditorHelper = this._helper,
-				oEditorCommands = library.EditorCommands,
 				aItems = [],
 				sItemText,
 				oCommand;
 
-			for (var sEditorCommand in oEditorCommands[sCommand]) {
+			for (var sEditorCommand in EditorCommands[sCommand]) {
 				if (sEditorCommand === 'bundleKey') {
 					continue;
 				}
 
-				oCommand = oEditorCommands[sCommand][sEditorCommand];
+				oCommand = EditorCommands[sCommand][sEditorCommand];
 				sItemText = this._oResourceBundle.getText(oCommand.bundleKey) || oCommand.text;
 				aItems.push(oEditorHelper.createMenuItem(this._getId(sCommand + sEditorCommand), sItemText, IconPool.getIconURI(oCommand.icon)));
 			}
@@ -455,7 +532,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._findTextAlignCommandByIcon = function (sIconUri) {
-			var oEditorCommands = library.EditorCommands['TextAlign'],
+			var oEditorCommands = EditorCommands['TextAlign'],
 				sCommandIconUri, sCommand;
 
 			Object.keys(oEditorCommands)
@@ -477,8 +554,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createFontStyleSelectItems = function () {
-			var oEditorCommands = library.EditorCommands,
-				oFontFamilies = oEditorCommands["FontFamily"],
+			var oFontFamilies = EditorCommands["FontFamily"],
 				aItems = [],
 				oItem;
 
@@ -502,8 +578,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._getFontStyleCommand = function (sItemText) {
-			var oEditorCommands = library.EditorCommands,
-				oFontFamilies = oEditorCommands["FontFamily"];
+			var oFontFamilies = EditorCommands["FontFamily"];
 
 			for (var sFontStyle in oFontFamilies) {
 				if (oFontFamilies.hasOwnProperty(sFontStyle) && oFontFamilies[sFontStyle].text === sItemText) {
@@ -520,8 +595,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._getFormatBlockCommand = function (sItemText) {
-			var oEditorCommands = library.EditorCommands,
-				oFormat = oEditorCommands["FormatBlock"];
+			var oFormat = EditorCommands["FormatBlock"];
 
 			for (var sFormat in oFormat) {
 				if (oFormat.hasOwnProperty(sFormat) && this._oResourceBundle.getText(oFormat[sFormat].bundleKey) === sItemText) {
@@ -539,10 +613,9 @@ sap.ui.define([
 		ToolbarWrapper.prototype._createFontSizeSelectItems = function () {
 			var aItems = [],
 				number = 1, //TinyMCE command values for font sizes have a value from 1 to 7
-				oItem,
-				oEditorCommands = library.EditorCommands;
+				oItem;
 
-			oEditorCommands["FontSize"].forEach(function (item) {
+			EditorCommands["FontSize"].forEach(function (item) {
 				oItem = {
 					id: this._getId("FontSize" + number),
 					text: item + " pt"
@@ -560,8 +633,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createFormatBlockItems = function () {
-			var oEditorCommands = library.EditorCommands,
-				oFormatBlock = oEditorCommands["FormatBlock"],
+			var oFormatBlock = EditorCommands["FormatBlock"],
 				aItems = [],
 				oItem;
 
@@ -586,9 +658,9 @@ sap.ui.define([
 		 */
 		ToolbarWrapper.prototype._getColor = function (sCommand) {
 			var oRTE = this.getEditor(),
-				oCommandStyle = library.EditorCommands[sCommand].style,
-				oNode = oRTE.getNativeApi().selection.getNode(),
-				aNodes = oRTE.getNativeApi().dom.getParents(oNode),
+				oCommandStyle = EditorCommands[sCommand].style,
+				oNode = oRTE && oRTE.getNativeApi().selection.getNode(),
+				aNodes = oRTE && oRTE.getNativeApi().dom.getParents(oNode),
 				i, aCurrentNode, sColor;
 
 			for (i = 0; i < aNodes.length; i++) {
@@ -601,7 +673,7 @@ sap.ui.define([
 			}
 
 			// If there is no color style found, return the default color
-			return library.EditorCommands[sCommand].defaultValue;
+			return EditorCommands[sCommand].defaultValue;
 		};
 
 
@@ -610,32 +682,30 @@ sap.ui.define([
 		 *
 		 * @private
 		 * @param {string} [sCommand] Editor Command
-		 * @returns {object} The configuration object for the toolbar SplitButton which opens a command specific popover
+		 * @returns {object|null} The configuration object for the toolbar SplitButton which opens a command specific popover or null
 		 */
 		ToolbarWrapper.prototype._createSplitButtonForDialog = function (sCommand) {
-			var oCommand = library.EditorCommands[sCommand],
-				oToolbar = this,
+			var oCommand = EditorCommands[sCommand],
+				that = this,
 				oDialog, oResultConfig;
 
 			if (!oCommand) {
-				return;
+				return null;
 			}
 
 			oResultConfig = {
 				id: this._getId(sCommand),
 				tooltip: this._oResourceBundle.getText(oCommand.bundleKey),
 				press: function () {
-					switch (sCommand) {
-						case "TextColor":
-							oToolbar._applyColor(sCommand, oCommand.command, oToolbar._sTextColor);
-							break;
-						case "BackgroundColor":
-							oToolbar._applyColor(sCommand, oCommand.command, oToolbar._sBackgroundColor);
-							break;
+					if (sCommand === "TextColor") {
+						that._applyColor(sCommand, oCommand.command, that._sTextColor);
+					}
+					if (sCommand === "BackgroundColor") {
+						that._applyColor(sCommand, oCommand.command, that._sBackgroundColor);
 					}
 				},
 				arrowPress: function () {
-					oDialog = oToolbar.getAggregation("_custom" + sCommand + "Dialog");
+					oDialog = that.getAggregation("_custom" + sCommand + "Dialog");
 
 					this._getArrowButton()._activeButton();
 					if (!oDialog) {
@@ -655,19 +725,19 @@ sap.ui.define([
 
 
 		/**
-		 * Helper function for creating Button Control configuration for opening dialogs
+		 * Helper function for creating Button Control configuration for opening dialogs.
 		 *
 		 * @private
 		 * @param {string} [sCommand] Editor Command
-		 * @returns {object} The configuration object for the toolbar button which opens a command specific dialog
+		 * @returns {object|null} The configuration object for the toolbar button which opens a command specific dialog or null.
 		 */
 		ToolbarWrapper.prototype._createButtonForDialog = function (sCommand) {
-			var oCommand = library.EditorCommands[sCommand],
-				oToolbar = this,
+			var oCommand = EditorCommands[sCommand],
+				that = this,
 				oDialog;
 
 			if (!oCommand) {
-				return;
+				return null;
 			}
 
 			return {
@@ -676,7 +746,7 @@ sap.ui.define([
 				tooltip: this._oResourceBundle.getText(oCommand.bundleKey),
 				text: this._oResourceBundle.getText(oCommand.bundleKey),
 				press: function () {
-					oDialog = oToolbar.getAggregation("_custom" + sCommand + "Dialog");
+					oDialog = that.getAggregation("_custom" + sCommand + "Dialog");
 
 					if (!oDialog) {
 						return;
@@ -685,13 +755,16 @@ sap.ui.define([
 					switch (sCommand) {
 						case "InsertImage":
 							this.setPressed(true);
-							oToolbar._syncImageDialogData(oDialog);
+							that._syncImageDialogData(oDialog);
 							break;
 						case "InsertLink":
-							oToolbar._syncLinkDialogData(oDialog);
+							that._syncLinkDialogData(oDialog);
 							break;
 						case "InsertTable":
-							oToolbar._resetDialogContent(oDialog);
+							that._resetDialogContent(oDialog);
+							break;
+						default:
+							break;
 					}
 					oDialog.open();
 				}
@@ -838,25 +911,22 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createColorPalettePopoverConfig = function(sType) {
-			var oCommand = library.EditorCommands[sType],
+			var oCommand = EditorCommands[sType],
 				sColor = oCommand.defaultValue,
-				oToolbar = this;
+				that = this;
 
 			return {
 				defaultColor: sColor,
 				colorSelect: function (oEvent) {
 					var sColor = oEvent.getParameters().value;
-					oToolbar._applyColor(sType, oCommand.command, sColor, oEvent.getParameter("defaultAction"));
-
-					switch (sType) {
-						case "TextColor":
-							oToolbar._sTextColor = sColor;
-							oToolbar._syncColors("TextColor", sColor);
-							break;
-						case "BackgroundColor":
-							oToolbar._sBackgroundColor = sColor;
-							oToolbar._syncColors("BackgroundColor", sColor);
-							break;
+					that._applyColor(sType, oCommand.command, sColor, oEvent.getParameter("defaultAction"));
+					if (sType === "TextColor") {
+						that._sTextColor = sColor;
+						that._syncColors("TextColor", sColor);
+					}
+					if (sType === "BackgroundColor") {
+						that._sBackgroundColor = sColor;
+						that._syncColors("BackgroundColor", sColor);
 					}
 				}
 			};
@@ -892,7 +962,7 @@ sap.ui.define([
 		 */
 		ToolbarWrapper.prototype._createInsertImageConfig = function() {
 			var iRationCoeff,
-				oTitleBundleText = this._oResourceBundle.getText(sap.ui.richtexteditor.EditorCommands["InsertImage"].bundleKey),
+				oTitleBundleText = this._oResourceBundle.getText(EditorCommands["InsertImage"].bundleKey),
 				oURLInput = this._helper.createInput(),
 					oURLLabel = this._helper.createLabel({
 						text: this._oResourceBundle.getText("INSERT_IMAGE_URL"),
@@ -904,7 +974,8 @@ sap.ui.define([
 						labelFor: oTextInput
 					}),
 					oDimensionsLabel = this._helper.createLabel({
-						text: this._oResourceBundle.getText("INSERT_CONTENT_DIMENSIONS")
+						text: this._oResourceBundle.getText("INSERT_CONTENT_DIMENSIONS"),
+						labelFor: oDimensionWidthInput
 					}),
 					oDimensionWidthInput = this._helper.createInput({
 						width: '8rem',
@@ -948,7 +1019,7 @@ sap.ui.define([
 					}),
 					oRTE = this.getEditor(),
 					fnCalculateRatio = function(bCheckHeight, bCheckWidth) {
-						var oSelection = oRTE.getNativeApi().selection,
+						var oSelection = oRTE && oRTE.getNativeApi().selection,
 							oSelectionNode = oSelection && oSelection.getNode(),
 							fWidthInputValue = parseFloat(oDimensionWidthInput.getValue()),
 							fHeightInputValue = parseFloat(oDimensionHeightInput.getValue()),
@@ -976,23 +1047,24 @@ sap.ui.define([
 							oDimensionHeightInput.setValue(fWidthInputValue / iRationCoeff);
 						}
 					},
-					oToolbar = this,
+					that = this,
 					aButtons = [];
 
 				oDimensionsLabel.setLabelFor(oDimensionWidthInput);
 
 				aButtons.push(this._helper.createButton({
 					id: this._getId("InsertImageButton"),
+					type: ButtonType.Emphasized,
 					text: this._oResourceBundle.getText("DIALOG_OK_BUTTON"),
 					press: function () {
 						oRTE.getNativeApi()
-							.insertContent(oToolbar._generateImageHTML(oURLInput.getValue(),
+							.insertContent(that._generateImageHTML(oURLInput.getValue(),
 																		oTextInput.getValue(),
 																		oDimensionHeightInput.getValue(),
 																		oDimensionWidthInput.getValue(),
 																		oRatioCheckBox.getSelected()));
-						oToolbar.getAggregation("_customInsertImageDialog").close();
-						oToolbar._syncToolbarStates(oRTE.getNativeApi());
+						that.getAggregation("_customInsertImageDialog").close();
+						that._syncToolbarStates(oRTE.getNativeApi());
 					}
 				}));
 
@@ -1000,8 +1072,8 @@ sap.ui.define([
 					id: this._getId("CancelInsertImageButton"),
 					text: this._oResourceBundle.getText("DIALOG_CANCEL_BUTTON"),
 					press: function () {
-						oToolbar.getAggregation("_customInsertImageDialog").close();
-						oToolbar._syncToolbarStates(oRTE.getNativeApi());
+						that.getAggregation("_customInsertImageDialog").close();
+						that._syncToolbarStates(oRTE.getNativeApi());
 					}
 				}));
 
@@ -1048,10 +1120,9 @@ sap.ui.define([
 		 * Helper function for generating link HTML content
 		 *
 		 * @param {string} [sURL] The URL of the HTML link tag
-		 * @param {string} [sText] The text of the HTML link tag
 		 * @param {string} [sTitle] The title of the HTML link tag
 		 * @param {boolean} [bTarget] True if the provided link should be opened in a new window
-		 * @returns {string} String representing HTML tag with the provided parameters
+		 * @param {string} [sText] The text of the HTML link tag
 		 * @private
 		 */
 		ToolbarWrapper.prototype._generateLinkHTML = function (sURL, sTitle, bTarget, sText) {
@@ -1126,7 +1197,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createInsertLinkConfig = function() {
-			var oTitleBundleText = this._oResourceBundle.getText(sap.ui.richtexteditor.EditorCommands["InsertLink"].bundleKey),
+			var oTitleBundleText = this._oResourceBundle.getText(EditorCommands["InsertLink"].bundleKey),
 				oURLInput = this._helper.createInput(),
 				oURLLabel = this._helper.createLabel({
 					text: this._oResourceBundle.getText("INSERT_LINK_URL"),
@@ -1166,20 +1237,21 @@ sap.ui.define([
 							oTargetSelect]
 				}),
 				oRTE = this.getEditor(),
-				oToolbar = this,
+				that = this,
 				aButtons = [];
 
 				aButtons.push(this._helper.createButton({
 					id: this._getId("InsertLinkButton"),
+					type: ButtonType.Emphasized,
 					text: this._oResourceBundle.getText("DIALOG_OK_BUTTON"),
 					press: function () {
 						var bTarget = (oTargetSelect.getSelectedItem() === oTargetSelect.getItems()[1]);
-						oToolbar._generateLinkHTML(oURLInput.getValue(),
+						that._generateLinkHTML(oURLInput.getValue(),
 							oTitleInput.getValue(),
 							bTarget,
 							oTextInput.getValue());
-						oToolbar.getAggregation("_customInsertLinkDialog").close();
-						oToolbar._syncToolbarStates(oRTE.getNativeApi());
+						that.getAggregation("_customInsertLinkDialog").close();
+						that._syncToolbarStates(oRTE.getNativeApi());
 					}
 				}));
 
@@ -1187,8 +1259,8 @@ sap.ui.define([
 					id: this._getId("CancelInsertLinkButton"),
 					text: this._oResourceBundle.getText("DIALOG_CANCEL_BUTTON"),
 					press: function () {
-						oToolbar.getAggregation("_customInsertLinkDialog").close();
-						oToolbar._syncToolbarStates(oRTE.getNativeApi());
+						that.getAggregation("_customInsertLinkDialog").close();
+						that._syncToolbarStates(oRTE.getNativeApi());
 					}
 				}));
 
@@ -1215,7 +1287,7 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createInsertTableConfig = function() {
-			var oTitleBundleText = this._oResourceBundle.getText(sap.ui.richtexteditor.EditorCommands["InsertTable"].bundleKey),
+			var oTitleBundleText = this._oResourceBundle.getText(EditorCommands["InsertTable"].bundleKey),
 				oRowsInput = this._helper.createStepInput({
 					value: 2,
 					min: 0,
@@ -1263,21 +1335,31 @@ sap.ui.define([
 							oDimensionWidthInput]
 				}),
 				oRTE = this.getEditor(),
-				oToolbar = this,
+				that = this,
 				aButtons = [];
 
 				aButtons.push(this._helper.createButton({
 					id: this._getId("InsertTableButton"),
 					text: this._oResourceBundle.getText("DIALOG_OK_BUTTON"),
 					press: function () {
-						var tableElm = oRTE.getNativeApi().plugins.table
-											.insertTable(oColsInput.getValue(), oRowsInput.getValue()),
-							dom = oRTE.getNativeApi().dom;
+						var oDomRef = oRTE.getNativeApi().dom;
+						var oNativeAPI = oRTE.getNativeApi();
+						var oTableElm;
+
+						if (oRTE.getEditorType() === library.EditorType.TinyMCE6) {
+							oNativeAPI.execCommand('mceInsertTable', false, { rows: oRowsInput.getValue(), columns: oColsInput.getValue() });
+
+							oTableElm = oDomRef.getParents(oNativeAPI.selection.getNode()).find(function (element) {
+								return element.tagName.toLowerCase() === "table";
+							});
+						} else {
+							oTableElm = oNativeAPI.plugins.table.insertTable(oColsInput.getValue(), oRowsInput.getValue());
+						}
 
-						dom.setStyle(tableElm, 'width', oDimensionWidthInput.getValue() + "px");
-						dom.setStyle(tableElm, 'height', oDimensionHeightInput.getValue() + "px");
+						oDomRef.setStyle(oTableElm, 'width', oDimensionWidthInput.getValue() + "px");
+						oDomRef.setStyle(oTableElm, 'height', oDimensionHeightInput.getValue() + "px");
 
-						oToolbar.getAggregation("_customInsertTableDialog").close();
+						that.getAggregation("_customInsertTableDialog").close();
 					}
 				}));
 
@@ -1285,7 +1367,7 @@ sap.ui.define([
 					id: this._getId("CancelInsertTableButton"),
 					text: this._oResourceBundle.getText("DIALOG_CANCEL_BUTTON"),
 					press: function () {
-						oToolbar.getAggregation("_customInsertTableDialog").close();
+						that.getAggregation("_customInsertTableDialog").close();
 					}
 				}));
 
@@ -1314,8 +1396,7 @@ sap.ui.define([
 		ToolbarWrapper.prototype._createCustomToolbar = function () {
 			var oEditorHelper = this._helper,
 				aContent = [],
-				oButtonGroups = library.ButtonGroups,
-				aGroupNames = Object.keys(oButtonGroups),
+				aGroupNames = Object.keys(ButtonGroups),
 				aGroups = [],
 				aGroupObjects = this.getEditor() ? this.getEditor().getButtonGroups() : [];
 
@@ -1332,7 +1413,7 @@ sap.ui.define([
 			aGroups = this._sortToolbarContent(aGroups);
 
 			aGroups.forEach(function(oGroup){
-				aContent = aContent.concat(this.addButtonGroup(oGroup.name));
+				aContent = aContent.concat(this._createButtonGroup(oGroup));
 			}.bind(this));
 
 			return oEditorHelper.createOverflowToolbar(this._getId(), aContent);
@@ -1372,183 +1453,331 @@ sap.ui.define([
 		};
 
 		/**
-		 * Adds a Button Group to the Custom Toolbar
+		 * Maps the native TinyMCE style button names to ones supported by the toolbar wrapper.
 		 *
-		 * @param {string} [sGroupName] Group name
+		 * @param {string} sGroupName Name of the group
+		 * @param {string[]} aNativeButtons Array of native TinyMCE style button names.
+		 * @returns {string[]} Array of supported button names (commands).
+		 * @private
+		 */
+		ToolbarWrapper.prototype._mapNativeButtonsToCommands = function (sGroupName, aNativeButtons) {
+			var oRTE = this.getEditor();
+			var aCommandsToCreate = [];
+			var aSupportedButtonGroup = ButtonGroups[sGroupName];
+
+			if (!Array.isArray(aSupportedButtonGroup) || aNativeButtons && !aNativeButtons.length) {
+				return [];
+			}
+
+			// There are some special groups which do not map 1 to 1 with the native button types
+			// Those groups require some special attention as they might render all buttons as single menu one
+			// or create select type controls.
+			switch (sGroupName) {
+				case "text-align":
+					aCommandsToCreate.push("TextAlign");
+					break;
+				case "formatselect":
+				case "blocks":
+				case "styleselect":
+				case "styles":
+					aCommandsToCreate.push("FormatBlock");
+					break;
+				case "insert":
+					aCommandsToCreate.push("InsertImage");
+					break;
+				default:
+					// Check the provided buttons in the group against the supported ones for this particular group from the library.
+					aNativeButtons.forEach(function (sNativeButtonName) {
+						var sCustomCommandName = ButtonsToCommandsMap[sNativeButtonName];
+
+						if (aSupportedButtonGroup.indexOf(sCustomCommandName) > -1) {
+							// The button is supported in the custom toolbar and can be added
+							aCommandsToCreate.push(sCustomCommandName);
+						} else {
+							// For unsupported buttons - log warning and do not do anything
+							Log.warning("Unsupported button for the custom toolbar found: " + sNativeButtonName + ", for group: " + sGroupName + ".", oRTE);
+						}
+					});
+					break;
+			}
+
+			return aCommandsToCreate;
+		};
+
+		ToolbarWrapper.prototype._createFontToolbarContent = function (aButtonsToCreate, bVisible) {
+			// All buttons in this group should be handled case by case as they are not of the same type.
+			var aToolbarContent = [];
+			var oAccessibilityKeys = library.Accessibility;
+			var oRTE = this.getEditor();
+			var that = this;
+
+			// --- Font Family ---
+			if (aButtonsToCreate.indexOf("FontFamily") !== -1) {
+				var oInvisibleTextFontFamily = this._helper.createInvisibleText({
+					text: this._oResourceBundle.getText(oAccessibilityKeys["FontFamily"])
+				}).toStatic();
+				this._registerAssociatedInvisibleTexts("font", oInvisibleTextFontFamily.getId());
+
+				aToolbarContent.push(
+					this._helper.createSelect({
+						id: this._getId("FontFamily"),
+						ariaLabelledBy: oInvisibleTextFontFamily,
+						selectedItemId: this._getId("FontFamilyVerdana"),
+						items: this._createFontStyleSelectItems(),
+						change: function (oEvent) {
+							var oItem;
+
+							if (oRTE) {
+								oItem = oEvent.getSource().getSelectedItem();
+								oRTE.getNativeApi().execCommand('FontName', false, that._getFontStyleCommand(oItem.getText()));
+							} else {
+								Log.warning("Cannot execute native command: " + 'FontName');
+							}
+						}
+					}).setVisible(bVisible)
+				);
+			}
+
+			// --- Font Size ---
+			if (aButtonsToCreate.indexOf("FontSize") !== -1) {
+				var oInvisibleTextFontSize = this._helper.createInvisibleText({
+					text: this._oResourceBundle.getText(oAccessibilityKeys["FontSize"])
+				}).toStatic();
+				this._registerAssociatedInvisibleTexts("font", oInvisibleTextFontSize.getId());
+
+				aToolbarContent.push(
+					this._helper.createSelect({
+						id: this._getId("FontSize"),
+						ariaLabelledBy: oInvisibleTextFontSize,
+						selectedItemId: this._getId("FontSize2"),
+						items: this._createFontSizeSelectItems(),
+						change: function (oEvent) {
+							var oItem;
+
+							if (oRTE) {
+								oItem = oEvent.getSource().getSelectedItem();
+								oRTE.getNativeApi().execCommand('FontSize', false, oItem.getText().replace(/\s/g, ""));
+							} else {
+								Log.warning("Cannot execute native command: " + 'FontSize');
+							}
+						}
+					}).setVisible(bVisible)
+				);
+			}
+
+			// --- Font Color ---
+			if (aButtonsToCreate.indexOf("TextColor") !== -1) {
+				var oInvisibleTextFontColor = this._helper.createInvisibleText({
+					text: this._oResourceBundle.getText(oAccessibilityKeys["FontColor"])
+				}).toStatic();
+
+				var oRTESplitButton = new RTESplitButton(this._createSplitButtonForDialog("TextColor")).setVisible(bVisible);
+				oRTESplitButton._getTextButton().addAriaLabelledBy(oInvisibleTextFontColor);
+
+				aToolbarContent.push(oRTESplitButton);
+			}
+
+			// --- Background Color ---
+			if (aButtonsToCreate.indexOf("BackgroundColor") !== -1) {
+				var oInvisibleTextBackgroundColor = this._helper.createInvisibleText({
+					text: this._oResourceBundle.getText(oAccessibilityKeys["BackgroundColor"])
+				}).toStatic();
+
+				var oBackgroundColorButton = this._helper.createSplitButton(this._createSplitButtonForDialog("BackgroundColor")).setVisible(bVisible);
+				oBackgroundColorButton._getTextButton().addAriaLabelledBy(oInvisibleTextBackgroundColor);
+				aToolbarContent.push(oBackgroundColorButton);
+			}
+
+			return aToolbarContent;
+		};
+
+		ToolbarWrapper.prototype._createTextAlignToolbarContent = function (bVisible) {
+			var oRTE = this.getEditor();
+			var bGroupVisible = oRTE ? oRTE.getShowGroupFontStyle() || bVisible : false;
+			var that = this;
+			var bTextAlignLRight = oRTE._getTextDirection() === "rtl";
+			var iDefaultItemIndex = bTextAlignLRight ? 2 : 0;
+			var aMenuItems = this._createMenuButtonItems("TextAlign");
+
+			return [
+				this._helper.createMenuButton(
+					this._getId("TextAlign"),
+					aMenuItems,
+					function (oEvent) {
+						var oSelectedItem, oEditor, oSelectedItemIcon;
+
+						if (oRTE) {
+							oSelectedItem = oEvent.getParameter("item");
+							oEditor = oRTE.getNativeApi();
+							oSelectedItemIcon = oSelectedItem.getIcon();
+							if (oSelectedItemIcon === this.getParent().getIcon()) {
+								var sTextAlign = bTextAlignLRight ? "JustifyRight" : "JustifyLeft";
+								// Text Align commands in TinyMCE have a toggle behavior when you set a
+								// certain command twice the default command (text-align-left) will be applied
+								oEditor.execCommand(sTextAlign);
+							} else {
+								oEditor.execCommand('Justify' + that._findTextAlignCommandByIcon(oSelectedItemIcon));
+							}
+						} else {
+							Log.warning("Cannot execute native command: " + 'Justify');
+						}
+					},
+					aMenuItems[iDefaultItemIndex].getIcon(),
+					this._oResourceBundle.getText(EditorCommands["TextAlign"].bundleKey)
+				).setVisible(bGroupVisible)
+			];
+		};
+
+		ToolbarWrapper.prototype._createFormatSelectToolbarContent = function (bVisible) {
+			var oRTE = this.getEditor();
+			var oAccessibilityKeys = library.Accessibility;
+			var oInvisibleTextFormatBlock = this._helper.createInvisibleText({
+				text: this._oResourceBundle.getText(oAccessibilityKeys["FormatBlock"])
+			}).toStatic();
+
+			this._registerAssociatedInvisibleTexts("formatselect", oInvisibleTextFormatBlock.getId());
+
+			return [
+				this._helper.createSelect({
+					id: this._getId("FormatBlock"),
+					ariaLabelledBy: oInvisibleTextFormatBlock,
+					items: this._createFormatBlockItems(),
+					change: function (oEvent) {
+						var oSelectedItem;
+						if (oRTE) {
+							oSelectedItem = oEvent.getSource().getSelectedItem();
+							if (oSelectedItem) {
+								var currentFormatterCommand = oRTE.getAggregation("_toolbarWrapper")._getFormatBlockCommand(oSelectedItem.getText());
+								oRTE.getNativeApi().execCommand('FormatBlock', false, currentFormatterCommand);
+							}
+						} else {
+							Log.warning("Cannot execute native command: " + 'FormatBlock');
+						}
+					}
+				}).setVisible(bVisible)
+			];
+		};
+
+		ToolbarWrapper.prototype._createFontStyleToolbarContent = function (aButtonsToCreate, bVisible) {
+			var aToolbarContent = [];
+
+			aButtonsToCreate.forEach(function (oCommand) {
+				aToolbarContent.push(this._helper.createOverflowToolbarToggleButton(this._createButtonConfig(oCommand)).setVisible(bVisible));
+			}, this);
+
+			return aToolbarContent;
+		};
+
+		ToolbarWrapper.prototype._createInsertToolbarContent = function (bVisible) {
+			return [this._helper.createOverflowToolbarToggleButton(this._createButtonForDialog("InsertImage")).setVisible(bVisible)];
+		};
+
+		ToolbarWrapper.prototype._createLinkToolbarContent = function (aButtonsToCreate, bVisible) {
+			var aToolbarContent = [];
+
+			// All buttons in this group should be handled case by case as they are not of the same type.
+			if (aButtonsToCreate.indexOf("InsertLink") !== -1) {
+				aToolbarContent.push(this._helper.createOverflowToolbarToggleButton(this._createButtonForDialog("InsertLink")).setVisible(bVisible));
+			}
+			if (aButtonsToCreate.indexOf("Unlink") !== -1) {
+				aToolbarContent.push(this._helper.createOverflowToolbarButton(this._createButtonConfig("Unlink")).setVisible(bVisible));
+			}
+
+			return aToolbarContent;
+		};
+
+		ToolbarWrapper.prototype._createStructureToolbarContent = function (aButtonsToCreate, bVisible) {
+			var aToolbarContent = [];
+
+			aButtonsToCreate.forEach(function (oCommand) {
+				aToolbarContent.push(this._helper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisible));
+			}, this);
+
+			return aToolbarContent;
+		};
+
+		ToolbarWrapper.prototype._createClipboardToolbarContent = function (aButtonsToCreate, bVisible) {
+			var aToolbarContent = [];
+
+			aButtonsToCreate.forEach(function (oCommand) {
+				aToolbarContent.push(this._helper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisible));
+			}, this);
+
+			return aToolbarContent;
+		};
+
+		ToolbarWrapper.prototype._createUndoToolbarContent = function (aButtonsToCreate, bVisible) {
+			var aToolbarContent = [];
+
+			aButtonsToCreate.forEach(function (oCommand) {
+				aToolbarContent.push(this._helper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisible));
+			}, this);
+
+			return aToolbarContent;
+		};
+
+		/**
+		 * Creates a Button Group for the Custom Toolbar
+		 *
+		 * @param {string} [mGroup] Object map containing group information.
+		 * @param {string[]}   [mGroup.buttons] Array of name/IDs of the buttons in the group
+		 * @param {string}     [mGroup.name] Name/ID of the group.
+		 * @param {boolean}    [mGroup.visible=true] (optional) The priority of the button group. Lower priorities are added first.
+		 * @param {int}        [mGroup.row=0] (optional) Row number in which the button should be
+		 * @param {int}        [mGroup.priority=10] (optional) The priority of the button group. Lower priorities are added first.
+		 * @param {int}        [mGroup.customToolbarPriority] (optional) The priority of the button group in the custom toolbar. Each default group in the custom toolbar has a predefined <code>customToolbarPriority</code>. Lower priorities are added in first.
 		 * @returns {Array} An array containing the buttons in the group that should be added to the Custom Toolbar's content
-		 * @public
+		 * @private
 		 */
-		ToolbarWrapper.prototype.addButtonGroup = function (sGroupName) {
+		ToolbarWrapper.prototype._createButtonGroup = function (mGroup) {
 			var oRTE = this.getEditor(),
 				oEditorHelper = this._helper,
 				aContent = [],
-				oButtonGroups = library.ButtonGroups,
-				oCommands = library.EditorCommands,
-				oAccessibilityKeys = library.Accessibility,
-				bVisibleGroupClipboard,
-				bVisibleGroupStructure,
-				bVisibleGroupFont,
-				bVisibleGroupFontStyle,
-				bVisibleGroupUndo,
-				bVisibleGroupTextAlign,
-				bVisibleGroupFormatBlock,
-				bVisibleGroupLink,
-				bVisibleGroupInsert,
-				oToolbar = this;
+				aToolbarButtonsToCreate = [];
 
+			if (!oRTE) {
+				return [];
+			}
 
-			switch (sGroupName) {
-				case "font-style":
-					bVisibleGroupFontStyle = oRTE ? oRTE.getShowGroupFontStyle() : false;
+			// Map native tinyMCE style button names (e.g. "bold", "forecolor") to supported by the custom toolbar button commands (e.g. "Bold", "TextColor").
+			// If the group does not have "buttons" property, the default configuration for this particular group will be used.
+			aToolbarButtonsToCreate = this._mapNativeButtonsToCommands(mGroup.name, mGroup.buttons);
 
-					oButtonGroups["font-style"].forEach(function (oCommand) {
-						aContent.push(oEditorHelper.createOverflowToolbarToggleButton(this._createButtonConfig(oCommand)).setVisible(bVisibleGroupFontStyle));
-					}, this);
+			switch (mGroup.name) {
+				case "font-style":
+					aContent = this._createFontStyleToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "font":
-					bVisibleGroupFont = oRTE ? oRTE.getShowGroupFont() : false;
-
-					var oInvisibleTextFontFamily = oEditorHelper.createInvisibleText({
-							text: this._oResourceBundle.getText(oAccessibilityKeys["FontFamily"])
-						}).toStatic(),
-						oInvisibleTextFontSize = oEditorHelper.createInvisibleText({
-							text: this._oResourceBundle.getText(oAccessibilityKeys["FontSize"])
-						}).toStatic();
-					this._registerAssociatedInvisibleTexts("font", oInvisibleTextFontFamily.getId());
-					this._registerAssociatedInvisibleTexts("font", oInvisibleTextFontSize.getId());
-
-					aContent.push(
-						oEditorHelper.createSelect({
-							id: this._getId("FontFamily"),
-							selectedItemId: this._getId("FontFamilyVerdana"),
-							ariaLabelledBy: oInvisibleTextFontFamily,
-							items: this._createFontStyleSelectItems(),
-							change: function (oEvent) {
-								var oItem;
-
-								if (oRTE) {
-									oItem = oEvent.getSource().getSelectedItem();
-									oRTE.getNativeApi().execCommand('FontName', false, this._getFontStyleCommand(oItem.getText()));
-								} else {
-									Log.warning("Cannot execute native command: " + 'FontName');
-								}
-							}.bind(this)
-						}).setVisible(bVisibleGroupFont)
-					);
-
-					aContent.push(
-						oEditorHelper.createSelect({
-							id: this._getId("FontSize"),
-							selectedItemId: this._getId("FontSize2"),
-							ariaLabelledBy: oInvisibleTextFontSize,
-							items: this._createFontSizeSelectItems(),
-							change: function (oEvent) {
-								var oItem;
-
-								if (oRTE) {
-									oItem = oEvent.getSource().getSelectedItem();
-									oRTE.getNativeApi().execCommand('FontSize', false, oItem.getText().replace(/\s/g, ""));
-								} else {
-									Log.warning("Cannot execute native command: " + 'FontSize');
-								}
-							}
-						}).setVisible(bVisibleGroupFont)
-					);
-					aContent.push(new RTESplitButton(this._createSplitButtonForDialog("TextColor")).setVisible(bVisibleGroupFont));
-					aContent.push(oEditorHelper.createSplitButton(this._createSplitButtonForDialog("BackgroundColor")).setVisible(bVisibleGroupFont));
+					aContent = this._createFontToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "text-align":
-					bVisibleGroupTextAlign = oRTE ? oRTE.getShowGroupTextAlign() : false;
-					var bTextAlignLRight = oRTE._getTextDirection() === "rtl";
-					var iDefaultItemIndex = bTextAlignLRight ? 2 : 0;
-					var aMenuItems = this._createMenuButtonItems("TextAlign");
-					aContent.push(
-						oEditorHelper.createMenuButton(
-							this._getId("TextAlign"),
-							aMenuItems,
-							function (oEvent) {
-								var oSelectedItem, oEditor, oSelectedItemIcon;
-
-								if (oRTE) {
-									oSelectedItem = oEvent.getParameter("item");
-									oEditor = oRTE.getNativeApi();
-									oSelectedItemIcon = oSelectedItem.getIcon();
-									if (oSelectedItemIcon === this.getParent().getIcon()) {
-										var sTextAlign = bTextAlignLRight ? "JustifyRight" : "JustifyLeft";
-										// Text Align commands in TinyMCE have a toggle behavior when you set a
-										// certain command twice the default command (text-align-left) will be applied
-										oEditor.execCommand(sTextAlign);
-									} else {
-										oEditor.execCommand('Justify' + oToolbar._findTextAlignCommandByIcon(oSelectedItemIcon));
-									}
-								} else {
-									Log.warning("Cannot execute native command: " + 'Justify');
-								}
-							},
-							aMenuItems[iDefaultItemIndex].getIcon(),
-							this._oResourceBundle.getText(oCommands["TextAlign"].bundleKey)
-						).setVisible(bVisibleGroupTextAlign)
-					);
+					aContent = this._createTextAlignToolbarContent(mGroup.visible);
 					break;
+				case "styleselect":
+				case "styles":
+				case "blocks":
 				case "formatselect":
-					bVisibleGroupFormatBlock = oRTE ? (this._isButtonGroupAdded("styleselect") || this._isButtonGroupAdded("formatselect")) : false;
-
-					if (bVisibleGroupFormatBlock) {
-						var oInvisibleTextFormatBlock = oEditorHelper.createInvisibleText({
-							text: this._oResourceBundle.getText(oAccessibilityKeys["FormatBlock"])
-						}).toStatic();
-						this._registerAssociatedInvisibleTexts("formatselect", oInvisibleTextFormatBlock.getId());
-						aContent.push(
-							oEditorHelper.createSelect({
-								id: this._getId("FormatBlock"),
-								ariaLabelledBy: oInvisibleTextFormatBlock,
-								items: this._createFormatBlockItems(),
-								change: function (oEvent) {
-									var oSelectedItem;
-									if (oRTE) {
-										oSelectedItem = oEvent.getSource().getSelectedItem();
-										if (oSelectedItem) {
-											var currentFormatterCommand = oRTE.getAggregation("_toolbarWrapper")._getFormatBlockCommand(oSelectedItem.getText());
-											oRTE.getNativeApi().execCommand('FormatBlock', false, currentFormatterCommand);
-										}
-									} else {
-										Log.warning("Cannot execute native command: " + 'FormatBlock');
-									}
-								}
-							}).setVisible(bVisibleGroupFormatBlock)
-						);
-					}
+					aContent = this._createFormatSelectToolbarContent(this._isButtonGroupAdded("styleselect") || this._isButtonGroupAdded("styles") || this._isButtonGroupAdded("blocks") || this._isButtonGroupAdded("formatselect"));
 					break;
 				case "structure":
-					bVisibleGroupStructure = oRTE ? oRTE.getShowGroupStructure() : false;
-					oButtonGroups["structure"].forEach(function (oCommand) {
-						aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisibleGroupStructure));
-					}, this);
+					aContent = this._createStructureToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "clipboard":
-					bVisibleGroupClipboard = oRTE ? oRTE.getShowGroupClipboard() : false;
-					oButtonGroups["clipboard"].forEach(function (oCommand) {
-						aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisibleGroupClipboard));
-					}, this);
+					aContent = this._createClipboardToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "undo":
-					bVisibleGroupUndo = oRTE ? oRTE.getShowGroupUndo() : false;
-					oButtonGroups["undo"].forEach(function (oCommand) {
-						aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonConfig(oCommand)).setVisible(bVisibleGroupUndo));
-					}, this);
+					aContent = this._createUndoToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "insert":
-					bVisibleGroupInsert = oRTE ? oRTE.getShowGroupInsert() : false;
-					aContent.push(oEditorHelper.createOverflowToolbarToggleButton(this._createButtonForDialog("InsertImage")).setVisible(bVisibleGroupInsert));
+					aContent = this._createInsertToolbarContent(mGroup.visible);
 					break;
 				case "link":
-					bVisibleGroupLink = oRTE ? oRTE.getShowGroupLink() : false;
-					aContent.push(oEditorHelper.createOverflowToolbarToggleButton(this._createButtonForDialog("InsertLink")).setVisible(bVisibleGroupLink));
-					aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonConfig("Unlink")).setVisible(bVisibleGroupLink));
+					aContent = this._createLinkToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
 					break;
 				case "table":
-					aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonForDialog("InsertTable")));
+					aContent.push(oEditorHelper.createOverflowToolbarButton(this._createButtonForDialog("InsertTable")).setVisible(mGroup.visible));
 					break;
+				default: break;
 			}
 
 			return aContent;
@@ -1558,36 +1787,28 @@ sap.ui.define([
 		 * Adds a Button Group to an existing Toolbar
 		 *
 		 * @param {map} [mGroup] Group object
-		 * @param {boolean} [bFullGroup] If false, the group is generated from a group name
 		 * @returns {object} this for method chaining
 		 * @public
 		 */
-		ToolbarWrapper.prototype.addButtonGroupToContent = function (mGroup, bFullGroup) {
+		ToolbarWrapper.prototype.addButtonGroupToContent = function (mGroup) {
 			var sGroupName;
 			// if the group is generated add it to the button groups object
 			// as a custom group (if it contains supported group buttons - ex."table")
-			if (!bFullGroup && mGroup.buttons[0] === "table") {
-				sGroupName = mGroup.buttons[0];
-				sap.ui.richtexteditor.ButtonGroups.custom[mGroup.name] = {
-					name: mGroup.buttons[0],
-					controls: ["InsertTable"]
-				};
-			}
 
 			// if the group is supported (ex. "table") add it to the button groups object
-			if (bFullGroup && mGroup.name === "table") {
+			if (mGroup.name === "table") {
 				sGroupName = mGroup.name;
-				sap.ui.richtexteditor.ButtonGroups[mGroup.name] = ["InsertTable"];
+				ButtonGroups[mGroup.name] = ["InsertTable"];
 			}
 
 			// if the group is supported (ex. "formatselect") add it to the button groups object
-			if (bFullGroup && (mGroup.name === "formatselect" || mGroup.name === "styleselect")) {
+			if (mGroup.name === "formatselect" || mGroup.name === "styleselect" || mGroup.name === "styles" || mGroup.name === "blocks") {
 				sGroupName = "formatselect";
-				sap.ui.richtexteditor.ButtonGroups[mGroup.name] = ["FormatBlock"];
+				ButtonGroups[mGroup.name] = ["FormatBlock"];
 			}
 
 			// if not supported return and do not add content
-			if (!sap.ui.richtexteditor.ButtonGroups[mGroup.name] && !sap.ui.richtexteditor.ButtonGroups.custom[mGroup.name]) {
+			if (!ButtonGroups[mGroup.name] && !ButtonGroups.custom[mGroup.name]) {
 				return this;
 			}
 
@@ -1598,7 +1819,7 @@ sap.ui.define([
 			}
 
 			var oToolbar = this.getAggregation("_toolbar"),
-				aContent = this.addButtonGroup(sGroupName),
+				aContent = this._createButtonGroup(mGroup),
 				iContentSize = aContent.length,
 				i, iStartIndex;
 
@@ -1625,27 +1846,41 @@ sap.ui.define([
 		/**
 		 * Helper function for finding the correct position of a group according to its customToolbarPriority
 		 *
-		 * @param {Array} [mGroup] Group Object
-		 * @returns {Number} The index where the first element of the group should be added
+		 * @param {object} mGroup Group Object
+		 * @param {string} [mGroup.name] Name of the group
+		 * @param {int} [mGroup.customToolbarPriority] Predefined group priority
+		 * @returns {int} The index where the first element of the group should be added
 		 * @private
 		 */
 		ToolbarWrapper.prototype._findGroupPriorityPosition = function (mGroup) {
 			var aGroups = this.getEditor().getButtonGroups(),
-				aCustomToolbarGroups = library.ButtonGroups,
 				iStartIndex = 0;
 
 			// place groups without predefined customToolbarPriority at the end
-			if (!jQuery.isNumeric(mGroup.customToolbarPriority)) {
+			if (typeof mGroup.customToolbarPriority !== "number") {
 				mGroup.customToolbarPriority = this._getLastGroupPriority(aGroups) + 10;
 			}
 
 			// sort groups according to customToolbarPriority
 			aGroups = this._sortToolbarContent(aGroups);
 
-			aGroups.forEach(function (oGroup) {
-					if (oGroup.customToolbarPriority < mGroup.customToolbarPriority && oGroup.name !== mGroup.name) {
+			aGroups
+				// Map all groups to supported buttons that can be created in the custom toolbar
+				// based on the current group configuration
+				.map(function (oGroup) {
+					// We need new object that maps buttons to commands, as they do not map directly and some of the configurations
+					// may have many buttons, which is then translated to single control in the custom toolbar.
+					return {
+						name: oGroup.name,
+						iButtonsCount: this._mapNativeButtonsToCommands(oGroup.name, oGroup.buttons).length,
+						customToolbarPriority: oGroup.customToolbarPriority
+					};
+				}.bind(this))
+				// Find the correct starting index for this group, based on the customToolbarPriority group property
+				.forEach(function (oMappedGroup) {
+					if (oMappedGroup.customToolbarPriority < mGroup.customToolbarPriority && oMappedGroup.name !== mGroup.name) {
 						// if the group exist for the customToolbar, add its button count to the startIndex
-						iStartIndex += aCustomToolbarGroups[oGroup.name] ? aCustomToolbarGroups[oGroup.name].length : 0;
+						iStartIndex += ButtonGroups[oMappedGroup.name] ? oMappedGroup.iButtonsCount : 0;
 					}
 				});
 
@@ -1655,8 +1890,8 @@ sap.ui.define([
 		/**
 		 * Helper function for finding the priority of the last group in the toolbar
 		 *
-		 * @param {Array} [oGroups] Group name
-		 * @returns {Number} The priority of the last group in the toolbar
+		 * @param {Array} [aGroups] Group name
+		 * @returns {number} The priority of the last group in the toolbar
 		 * @private
 		 */
 		ToolbarWrapper.prototype._getLastGroupPriority = function (aGroups) {
@@ -1676,6 +1911,11 @@ sap.ui.define([
 		ToolbarWrapper.prototype.removeButtonGroup = function (sGroupName) {
 			var aObjects = this._findGroupedControls(sGroupName);
 
+			// Detach handlers from color picker dialogs if the font group is removed
+			if (sGroupName === "font") {
+				this._modifyPopoverOpeningArrowHandlers(false);
+			}
+
 			// destroys associated InvisibleTexts for the group
 			this._destroyAssociatedInvisibleTexts(sGroupName);
 
@@ -1803,18 +2043,17 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._findGroupedControls = function (sGroupName) {
-			var oButtonGroups = library.ButtonGroups,
-				oToolbar = this.getAggregation("_toolbar"),
+			var oToolbar = this.getAggregation("_toolbar"),
 				aControls = [];
 
 			if (!oToolbar) {
 				return [];
 			}
 
-			if (oButtonGroups[sGroupName]) {
-				aControls = oButtonGroups[sGroupName];
-			} else if (oButtonGroups.custom[sGroupName]) {
-				aControls = oButtonGroups.custom[sGroupName].controls;
+			if (ButtonGroups[sGroupName]) {
+				aControls = ButtonGroups[sGroupName];
+			} else if (ButtonGroups.custom[sGroupName]) {
+				aControls = ButtonGroups.custom[sGroupName].controls;
 			}
 
 			var aIds = aControls.map(function (sName) {
@@ -1841,8 +2080,13 @@ sap.ui.define([
 		 * @public
 		 */
 		ToolbarWrapper.prototype.modifyToolbarContent = function (sModifier) {
-			var vResult,
-				args = Array.prototype.slice.call(arguments);
+			var vResult;
+			var args = Array.prototype.slice.call(arguments);
+			var oToolbar = this.getAggregation("_toolbar");
+
+			if (!oToolbar) {
+				return null;
+			}
 
 			args.shift();
 
@@ -1874,6 +2118,9 @@ sap.ui.define([
 				case "remove":
 					vResult = this._proxyToolbarRemove.apply(this, args);
 					break;
+
+				default:
+					break;
 			}
 
 			return vResult;
@@ -2001,6 +2248,8 @@ sap.ui.define([
 				case "number":
 					sId = this._customButtons[vItem];
 					break;
+				default:
+					break;
 			}
 
 			vResult = oToolbar.removeContent(sId);
@@ -2012,5 +2261,19 @@ sap.ui.define([
 			return vResult;
 		};
 
+		/**
+		 * Helper function for finding controls in the Toolbar by their corresponding names.
+		 *
+		 * @param {string} sButtonName Custom toolbar button name (Bold, TextAlign, Italic, TextColor, etc...)
+		 * @returns {sap.ui.core.Control|null} The control with the corresponding name or null.
+		 */
+		ToolbarWrapper.prototype._findButtonById = function (sButtonName) {
+			var oRTE = this.getEditor();
+			if (!oRTE) {
+				return null;
+			}
+			return Core.byId(oRTE.getId() + this.getId() + "-" + sButtonName);
+		};
+
 		return ToolbarWrapper;
 	});