@sapui5/sap.ui.richtexteditor 1.105.1 → 1.107.1

package/README.md

@@ -1,7 +1,7 @@
 ![SAPUI5](https://ui5.sap.com/resources/sap/ui/documentation/sdk/images/Logo_B_SAPUI5_H.png)
 
 # @sapui5/sap.ui.richtexteditor
-Runtime resources of the [SAPUI5](https://sapui5.hana.ondemand.com) Library **sap.ui.richtexteditor**.
+Runtime resources of the [SAPUI5](https://ui5.sap.com) Library **sap.ui.richtexteditor**.
 
 ## Usage
 Refrain from installing this package using npm, Yarn or similar package managers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.richtexteditor",
-  "version": "1.105.1",
+  "version": "1.107.1",
   "description": "SAPUI5 Library sap.ui.richtexteditor",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/ui/richtexteditor/.library

@@ -5,7 +5,7 @@
 	<vendor>SAP SE</vendor>
 	<copyright>SAPUI5
  * (c) Copyright 2009-2022 SAP SE. All rights reserved.</copyright>
-	<version>1.105.1</version>
+	<version>1.107.1</version>
 
 	<documentation>A rich text editor (RTE) control. Requires installation of an additional rich text editor library.</documentation>
 
@@ -30,11 +30,6 @@
 		</jscoverage>
 		<packaging xmlns="http://www.sap.com/ui5/buildext/packaging" version="2.0" >
 			<all-in-one>
-				<!-- ===========================================================================
-				     !! ATTENTION !!
-				     The following excludes must be kept in sync with those configured for the
-				     'preload-and-merge' plugin execution in the pom.xml of this library.
-				     =========================================================================== -->
 				<exclude name="sap/ui/richtexteditor/js/" />
 			</all-in-one>
 		</packaging>
@@ -56,6 +51,11 @@
 				<copyright>Tiny Technologies, Inc.</copyright>
 				<pattern>sap/ui/richtexteditor/js/tiny_mce5/*</pattern>
 			</lib>
+			<lib name="TinyMCE-6" displayName="TinyMCE 6.1.0" version="6.1.0-6" homepage="https://www.tiny.cloud/">
+				<license url="https://about.tiny.cloud/legal/" type="Commercial"/>
+				<copyright>Tiny Technologies, Inc.</copyright>
+				<pattern>sap/ui/richtexteditor/js/tiny_mce6/*</pattern>
+			</lib>
 		</thirdparty>
 
 	</appData>

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

@@ -24,7 +24,7 @@ sap.ui.define([
 		 * @alias sap.ui.richtexteditor.RTESplitButton
 		 *
 		 * @author SAP SE
-		 * @version 1.105.1
+		 * @version 1.107.1
 		 */
 		var RTESplitButton = SplitButton.extend("sap.ui.richtexteditor.RTESplitButton", {
 			metadata: {

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

@@ -124,7 +124,7 @@ sap.ui.define([
 	 * Below is a list of supported groups and buttons, which can be specified in the configuration objects (format is <<group name>>: <<supported buttons>>):
 	 *	<ul>
 	 *		<li>font-style: bold, italic, underline, strikethrough</li>
-	 *		<li>font: fontselect, fontsizeselect, forecolor, backcolor</li>
+	 *		<li>font: fontfamily (fontselect in TinyMCE5), fontsize (fontsizeselect in TinyMCE5), forecolor, backcolor</li>
 	 *		<li>clipboard: cut, copy, paste</li>
 	 *		<li>structure: bullist, numlist, outdent, indent</li>
 	 *		<li>undo: undo, redo</li>
@@ -159,7 +159,6 @@ sap.ui.define([
 	 * @alias sap.ui.richtexteditor.RichTextEditor
 	 * @see {@link fiori:https://experience.sap.com/fiori-design-web/rich-text-editor/ Rich Text Editor}
 	 * @see {@link topic:d4f3f1598373452bb73f2120930c133c}
-	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var RichTextEditor = Control.extend("sap.ui.richtexteditor.RichTextEditor", /** @lends sap.ui.richtexteditor.RichTextEditor.prototype */ {
 		metadata: {
@@ -197,11 +196,15 @@ sap.ui.define([
 				 * not an enumeration).
 				 *
 				 * <b>Notes:</b>
-				 * <ul><li>TinyMCE version 3 is no longer supported and cannot be used. If you set the property to TinyMCE, it will load TinyMCE version 4.</li>
+				 * <ul><li>TinyMCE version 3 and 4 are no longer supported and cannot be used. If you set the property to TinyMCE, it will load TinyMCE version 6.</li>
 				 * <li>Any attempts to set this property after the first rendering will not
-				 * have any effect.</li></ul>
+				 * have any effect.</li>
+				 * <li>The default value of the property will always resolve to the recommended version by UI5. Due to the different support cycles, we will be constantly getting newer TinyMCE versions and update the default value accordingly.</li>
+				 * <li>Usage of internal TinyMCE APIs is not recommended, since it might lead to issues upon TinyMCE version update.</li>
+				 * <li>Have in mind when choosing a specific TinyMCE version that there might be differences in the support rules compared to UI5, therefore we might be forced to remove any TinyMCE version.</li>
+				 * <li>TinyMCE 4 is out of support and by using it, application developers are accepting all the risks comming from that fact. In addition TinyMCE 4 will be removed in future releases.</li></ul>
 				 */
-				editorType: { type: "string", group: "Misc", defaultValue: 'TinyMCE4' },
+				editorType: { type: "string", group: "Misc", defaultValue: 'TinyMCE' },
 
 				/**
 				 * Relative or absolute URL where the editor is available. Must be on the same server.
@@ -299,7 +302,7 @@ sap.ui.define([
 				buttonGroups: {type: "object[]", group: "Behavior", defaultValue: [] },
 
 				/**
-				 * Determines whether a Fiori Toolbar is used instead of the TinyMCE default toolbar one. It is applied only when the EditorType is TinyMCE4 or TinyMCE5 and sap.m library is loaded.
+				 * Determines whether a Fiori Toolbar is used instead of the TinyMCE default toolbar one. It is applied only when the EditorType is TinyMCE5 or TinyMCE6 and sap.m library is loaded.
 				 * <b>Note:</b> The <code>customToolbar</code> property will have effect only on initial loading. Changing it during runtime will not affect the initially loaded toolbar.
 				 *
 				 * @since 1.48
@@ -386,18 +389,59 @@ sap.ui.define([
 	// Editor type entries for backwards compatibility
 	RichTextEditor.EDITORTYPE_TINYMCE4 = library.EditorType.TinyMCE4;
 	RichTextEditor.EDITORTYPE_TINYMCE5 = library.EditorType.TinyMCE5;
-
-	RichTextEditor.EDITORLOCATION_TINYMCE4 = "js/tiny_mce4/tinymce.min.js";
-	RichTextEditor.EDITORLOCATION_TINYMCE5 = "js/tiny_mce5/tinymce.min.js";
-
+	RichTextEditor.EDITORTYPE_TINYMCE6 = library.EditorType.TinyMCE6;
+
+	// default
+	RichTextEditor.EDITORTYPE_TINYMCE = library.EditorType.TinyMCE;
+
+	var EDITOR_LOCATION_MAPPING = {};
+
+	// default
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE] = "js/tiny_mce6/tinymce.min.js";
+
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE4] = "js/tiny_mce4/tinymce.min.js";
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE5] = "js/tiny_mce5/tinymce.min.js";
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE6] = "js/tiny_mce6/tinymce.min.js";
+
+	RichTextEditor.DEFAULT_PLUGINS_TINYMCE5 = [
+		"emoticons",
+		"directionality",
+		"tabfocus",
+		"table",
+		"image",
+		"link",
+		"textcolor",
+		"colorpicker",
+		"textpattern",
+		"powerpaste"
+	];
+	RichTextEditor.DEFAULT_PLUGINS_TINYMCE6 = [
+		"emoticons",
+		"directionality",
+		"image",
+		"table",
+		"link",
+		"powerpaste"
+	];
+
+	// TinyMCE does not provide some of the regions/languages that our messagebundle has, therefore with this mapping, we are falling back to the ones provided
 	RichTextEditor.MAPPED_LANGUAGES_TINYMCE = {
-		"sh": "sr",
-		"ji": "yi",
+		"bg": "bg_BG",
+		"en_US": "en_GB",
+		"fr": "fr_FR",
+		"fr_CA": "fr_FR",
+		"hu": "hu_HU",
 		"in": "id",
 		"iw": "he",
+		"ji": "yi",
+		"ko": "ko_KR",
 		"no": "nb",
-		"fr": "fr_FR", // TinyMCE does not provide fr so we are manually falling back to fr_FR
-		"fr_CA": "fr_FR" // TinyMCE does not provide fr so we are manually falling back to fr_FR
+		"pt": "pt_PT",
+		"sh": "sr",
+		"sl": "sl_SI",
+		"sv": "sv_SE",
+		"th": "th_TH"
+
 	};
 
 	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE = {
@@ -434,6 +478,7 @@ sap.ui.define([
 		"gd": true,
 		"gl": true,
 		"he_IL": true,
+		"hi": true,
 		"hi_IN": true,
 		"hr": true,
 		"hu_HU": true,
@@ -492,6 +537,8 @@ sap.ui.define([
 		"ro_RO": true
 	};
 
+	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE6 = RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5;
+
 	RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS = {
 		"zh": "CN",
 		"fr": "FR",
@@ -517,7 +564,38 @@ sap.ui.define([
 		"vi": "VN"
 	};
 
+	RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE6 = {
+		"zh": "CN",
+		"fr": "FR",
+		"bn": "BD",
+		"bg": "BG",
+		"ka": "GE",
+		"he": "IL",
+		"hu": "HU",
+		"is": "IS",
+		"km": "KH",
+		"ko": "KR",
+		"ku": "IQ",
+		"ml": "IN",
+		"mn": "MN",
+		"nb": "NO",
+		"pt": "PT",
+		"si": "SI",
+		"sl": "SI",
+		"sv": "SE",
+		"th": "TH"
+	};
+
 	RichTextEditor.pLoadTinyMCE = null;
+	var oEditorMapping = {};
+
+	// default
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE] = RichTextEditor.EDITORTYPE_TINYMCE6;
+
+	// other versions
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE4] = RichTextEditor.EDITORTYPE_TINYMCE4;
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE5] = RichTextEditor.EDITORTYPE_TINYMCE5;
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE6] = RichTextEditor.EDITORTYPE_TINYMCE6;
 
 	/**
 	 * Creates and returns a promise to load the given location as script url. Only the first invocation needs the
@@ -557,8 +635,8 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype.init = function() {
-		var sEditorType = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 ?
-			RichTextEditor.EDITORTYPE_TINYMCE5 : RichTextEditor.EDITORTYPE_TINYMCE4;
+		var sEditorType = oEditorMapping[this.getEditorType()] || RichTextEditor.EDITORTYPE_TINYMCE;
+
 		this._bEditorCreated = false;
 		this._sTimerId = null;
 		RichTextEditor._iCountInstances++;
@@ -591,11 +669,7 @@ sap.ui.define([
 		}
 
 		if (this.isPropertyInitial("editorType")) {
-			Log.warning("If the editor is different than TinyMCE 4 or TinyMCE 5 the editorType property is automatically set to TinyMCE 4, because of the removal of TinyMCE 3");
-		}
-
-		if (this.getEditorType() === library.EditorType.TinyMCE4) {
-			Log.warning("TinyMCE version 4 is used as editor. This version is no longer supported by TinyMCE and will be removed in future releases. Please consider upgrading to TinyMCE version 5.");
+			Log.info("You are using the default value of the editorType which is subject to changes and might affect your application.");
 		}
 
 		this.onBeforeRenderingTinyMCE();
@@ -624,7 +698,6 @@ sap.ui.define([
 	 *
 	 * @returns {object} The native editor object (here: The TinyMCE editor instance)
 	 * @public
-	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	RichTextEditor.prototype.getNativeApi = function() {
 		return this.getNativeApiTinyMCE();
@@ -653,7 +726,7 @@ sap.ui.define([
 
 		this.setProperty("value", sValue, true);
 		sValue = this.getProperty("value");
-		if (this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE4) {
+		if (oEditorMapping[this.getEditorType()]) {
 			this.setValueTinyMCE(sValue);
 		} else {
 			this.reinitialize();
@@ -894,6 +967,20 @@ sap.ui.define([
 						customToolbarPriority: 90
 					};
 					break;
+				// TinyMCE 6
+				case "blocks":
+					vGroup = {
+						name: "blocks",
+						buttons: ["blocks"]
+					};
+					break;
+				case "styles":
+					vGroup = {
+						name: "styles",
+						buttons: ["styles"],
+						customToolbarPriority: 40
+					};
+					break;
 				default:
 					vGroup = {
 						name: this._createId("buttonGroup"),
@@ -1019,9 +1106,7 @@ sap.ui.define([
 			aPlugins.push({name: "lists"});
 		}
 
-		this.setProperty("plugins", aPlugins);
-
-		return this;
+		return this.setProperty("plugins", aPlugins);
 	};
 
 	/**
@@ -1059,27 +1144,27 @@ sap.ui.define([
 	};
 
 	RichTextEditor.prototype._setupToolbar = function () {
-		this.setPlugins([{
-			name: "emoticons"
-		}, {
-			name: "directionality"
-		}, {
-			name: "tabfocus"
-		}, {
-			name: "table"
-		}, {
-			name: "image"
-		}, {
-			name: "link"
-		}, {
-			name: "textcolor"
-		}, {
-			name: "colorpicker"
-		}, {
-			name: "textpattern"
-		}, {
-			name: "powerpaste"
-		}]);
+		var fnMapPluginList = function (aList) {
+			return aList.map(function(item) {
+				return { "name": item };
+			});
+		};
+
+		var mapping = {
+			"TinyMCE": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE6),
+			"TinyMCE4": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE5),
+			"TinyMCE5": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE5),
+			"TinyMCE6": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE6)
+		};
+
+		this.setPlugins(mapping[this.getEditorType()]);
+
+		var fontButtonGroupButtoNamesMapping = {
+			"TinyMCE": ["fontfamily", "fontsize", "forecolor", "backcolor"],
+			"TinyMCE4": ["fontselect", "fontsizeselect", "forecolor", "backcolor"],
+			"TinyMCE5": ["fontselect", "fontsizeselect", "forecolor", "backcolor"],
+			"TinyMCE6": ["fontfamily", "fontsize", "forecolor", "backcolor"]
+		};
 
 		this.setButtonGroups([{
 			name: "font-style",
@@ -1096,9 +1181,7 @@ sap.ui.define([
 			row: 0,
 			priority: 30,
 			customToolbarPriority: 50,
-			buttons: [
-				"fontselect", "fontsizeselect", "forecolor", "backcolor"
-			]
+			buttons: fontButtonGroupButtoNamesMapping[this.getEditorType()]
 		}, {
 			name: "clipboard",
 			visible: true,
@@ -1162,23 +1245,28 @@ sap.ui.define([
 	 * Switches the editor type and sets the default settings for the editor.
 	 * All plugins and button groups should be set after this has been invoked
 	 *
-	 * @param {string} [sEditorType] Which editor type to be used (currently only TinyMCE 4 and 5)
+	 * @param {string} [sEditorType] Which editor type to be used (currently only TinyMCE 4, 5 and 6)
 	 * @returns {object} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.setEditorType = function(sEditorType) {
-		var sEditorLocation;
+
 		if (!this._bEditorCreated) { // only supported before first rendering!
 			this.setProperty("editorType", sEditorType);
 			sEditorType = this.getEditorType();
 
-			sEditorLocation = sEditorType === RichTextEditor.EDITORTYPE_TINYMCE5 ? RichTextEditor.EDITORLOCATION_TINYMCE5 : RichTextEditor.EDITORLOCATION_TINYMCE4;
-			this.setEditorLocation(sEditorLocation);
+			this._setupToolbar();
+
+			this.setEditorLocation(EDITOR_LOCATION_MAPPING[this.getEditorType()]);
 
-			if (sEditorType !== RichTextEditor.EDITORTYPE_TINYMCE4 && sEditorType !== RichTextEditor.EDITORTYPE_TINYMCE5) {
+			if (!oEditorMapping[sEditorType]) {
 				Log.error('TinyMCE3 is removed now due to security concerns, please do NOT use it anymore. The framework automatically will load TinyMCE4 since v1.60');
 			}
 
+			if (oEditorMapping[sEditorType] === "TinyMCE4") {
+				Log.error("TinyMCE version 4 is used as editor. This version is no longer supported by TinyMCE and will be removed in future releases, therefore using it is at your own risk. Please consider upgrading to TinyMCE version 6.");
+			}
+
 			this.initTinyMCE();
 		} else {
 			Log.error(
@@ -1226,7 +1314,7 @@ sap.ui.define([
 			sGroupSep = sButtonSeparator + sGroupSeparator + sButtonSeparator,
 			i, iLen, mGroup,
 			aOrderedGroups = {},
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+			bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6, RichTextEditor.EDITORTYPE_TINYMCE].includes(this.getEditorType()),
 			sButtonRows = "",
 			aButtonRows = [];
 
@@ -1254,7 +1342,7 @@ sap.ui.define([
 					continue;
 				}
 
-				if (bIsTinyMCE5) {
+				if (bIsTinyMCE5Or6) {
 					if (!sButtonRows) {
 						sButtonRows = "";
 					}
@@ -1268,7 +1356,7 @@ sap.ui.define([
 			}
 		}
 
-		if (bIsTinyMCE5) {
+		if (bIsTinyMCE5Or6) {
 			return sButtonRows;
 		}
 
@@ -1422,6 +1510,8 @@ sap.ui.define([
 				return window.tinymce.majorVersion != "4";
 			case RichTextEditor.EDITORTYPE_TINYMCE5:
 				return window.tinymce.majorVersion != "5";
+			case RichTextEditor.EDITORTYPE_TINYMCE6:
+				return window.tinymce.majorVersion != "6";
 			default:
 				return false;
 		}
@@ -1808,12 +1898,29 @@ sap.ui.define([
 			sPluginsList = sPluginsList.replace(/(,powerpaste|powerpaste,)/gi, "");
 		}
 
+		var bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6, RichTextEditor.EDITORTYPE_TINYMCE].includes(this.getEditorType());
+		var bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE;
+
+		// since TinyMCE 6 plugins property format has changed
+		if (bIsTinyMCE6) {
+			sPluginsList = this.getPlugins().map(function(oPlugin) {
+				return oPlugin.name;
+			});
+		}
+
+		if (bIsTinyMCE6 && !this.getEditable()) {
+			sPluginsList = sPluginsList.filter(function(oPlugin) {
+				return oPlugin !== "powerpaste";
+			});
+		}
+
 		/*eslint-disable camelcase */
 		var oConfig = {
 			// The following line only covers the editor content, not the UI in general
+			height: "100%",
 			directionality: this._getTextDirection(),
 			selector: "[id='" + this._textAreaId + "']",
-			theme: this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 ? "silver" : "modern",
+			theme: bIsTinyMCE5Or6 ? "silver" : "modern",
 			menubar: false,
 			language: this._getLanguageTinyMCE(),
 			browser_spellcheck: true,
@@ -1830,7 +1937,14 @@ sap.ui.define([
 			init_instance_callback: function(oEditor) {
 				this._oEditor = oEditor;
 				fnOnInit();
-			}.bind(this)
+			}.bind(this),
+			setup: function(editor) {
+				editor.on('Init', function() {
+					if (this.editorManager.majorVersion === "4") {
+						editor.schema.getSpecialElements()['iframe'] = new RegExp('</iframe[^>]*>', 'gi');
+					}
+				});
+			}
 		};
 		/*eslint-enable camelcase */
 
@@ -1858,7 +1972,8 @@ sap.ui.define([
 		var oLocale = new Locale(Core.getConfiguration().getLanguage()),
 			sLanguage = oLocale.getLanguage(),
 			sRegion = oLocale.getRegion(),
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+			bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6, RichTextEditor.EDITORTYPE_TINYMCE].includes(this.getEditorType()),
+			bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE,
 			sLangStr;
 
 		// Language mapping for old/fallback languages
@@ -1866,7 +1981,7 @@ sap.ui.define([
 
 		// Find default region, if region is not given
 		if (!sRegion) {
-			sRegion = RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS[sLanguage];
+			sRegion = bIsTinyMCE6 ?  RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE6[sLanguage] : RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS[sLanguage];
 		}
 
 		sLangStr = sRegion ? sLanguage + "_" + sRegion.toUpperCase() : sLanguage;
@@ -1876,14 +1991,16 @@ sap.ui.define([
 			return sLangStr;
 		}
 
-		// If there is region language in the additional languages supported in TinyMCE5, return it
-		if (bIsTinyMCE5 && RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLangStr]) {
-			return sLangStr;
-		}
+		if (bIsTinyMCE5Or6) {
+			// If there is region language in the additional languages supported in TinyMCE5, return it
+			if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLangStr]) {
+				return sLangStr;
+			}
 
-		// If there is language in the additional languages supported in TinyMCE5, return it
-		if (bIsTinyMCE5 && RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLanguage]) {
-			return sLanguage;
+			// If there is language in the additional languages supported in TinyMCE5, return it
+			if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLanguage]) {
+				return sLanguage;
+			}
 		}
 
 		// If there is a some language, return it
@@ -1955,7 +2072,7 @@ sap.ui.define([
 	 */
 	RichTextEditor.prototype._registerWithPopupTinyMCE = function() {
 		var oBus = Core.getEventBus(),
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+		bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6, RichTextEditor.EDITORTYPE_TINYMCE].includes(this.getEditorType()),
 			$Pop = this.$().closest("[data-sap-ui-popup]");
 
 		setTimeout(function() {
@@ -1968,16 +2085,16 @@ sap.ui.define([
 
 				if (this._oEditor) {
 					this._oEditor.on('OpenWindow', function(oEvent) {
-						if (bIsTinyMCE5) { // sets our own id to the newly created dialog, because in TinyMCE5 doesn't set id
+						if (bIsTinyMCE5Or6) { // sets our own id to the newly created dialog, because in TinyMCE5 doesn't set id
 							jQuery(".tox-dialog[role='dialog']").attr("id", sDialogId);
 						}
-						var oObject = { id: bIsTinyMCE5 ? sDialogId : oEvent.win._id};
+						var oObject = { id: bIsTinyMCE5Or6 ? sDialogId : oEvent.win._id};
 						oBus.publish("sap.ui", "sap.ui.core.Popup.addFocusableContent-" + sPopupId, oObject);
 					});
 					this._oEditor.on('CloseWindow', function(oEvent) {
-						var oObject = { id: bIsTinyMCE5 ? sDialogId : oEvent.win._id};
+						var oObject = { id: bIsTinyMCE5Or6 ? sDialogId : oEvent.win._id};
 						oBus.publish("sap.ui", "sap.ui.core.Popup.removeFocusableContent-" + sPopupId, oObject);
-						if (bIsTinyMCE5) {
+						if (bIsTinyMCE5Or6) {
 							jQuery(".tox-dialog[role='dialog']").attr("id"); // remove our id
 						}
 					});
@@ -1997,9 +2114,7 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype._checkCustomToolbarRequirements = function() {
-		var bRequirementsFullfiled = this.getCustomToolbar() &&
-			(this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE4 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5) &&
-			library.RichTextEditorHelper.bSapMLoaded;
+		var bRequirementsFullfiled = this.getCustomToolbar() && oEditorMapping[this.getEditorType()] && library.RichTextEditorHelper.bSapMLoaded;
 
 		this.$().toggleClass("sapUiRTEWithCustomToolbar", bRequirementsFullfiled);
 

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

@@ -42,7 +42,7 @@ sap.ui.define(['sap/ui/core/Core'],
 		}
 
 		rm.style("width", oRichTextEditor.getWidth());
-		rm.style("height", oRichTextEditor.getHeight());
+		rm.style("height", oRichTextEditor.getHeight() || "200px");
 		if (oRichTextEditor.getTooltip_AsString()) { // ensure not to render null
 			rm.attr("title", oRichTextEditor.getTooltip_AsString());
 		}

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

@@ -51,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 */ {
@@ -1342,12 +1341,22 @@ sap.ui.define([
 					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;
 
-						dom.setStyle(tableElm, 'width', oDimensionWidthInput.getValue() + "px");
-						dom.setStyle(tableElm, 'height', oDimensionHeightInput.getValue() + "px");
+						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());
+						}
+
+						oDomRef.setStyle(oTableElm, 'width', oDimensionWidthInput.getValue() + "px");
+						oDomRef.setStyle(oTableElm, 'height', oDimensionHeightInput.getValue() + "px");
 
 						that.getAggregation("_customInsertTableDialog").close();
 					}
@@ -1467,7 +1476,9 @@ sap.ui.define([
 					aCommandsToCreate.push("TextAlign");
 					break;
 				case "formatselect":
+				case "blocks":
 				case "styleselect":
+				case "styles":
 					aCommandsToCreate.push("FormatBlock");
 					break;
 				case "insert":
@@ -1477,6 +1488,7 @@ sap.ui.define([
 					// 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);
@@ -1741,8 +1753,10 @@ sap.ui.define([
 					aContent = this._createTextAlignToolbarContent(mGroup.visible);
 					break;
 				case "styleselect":
+				case "styles":
+				case "blocks":
 				case "formatselect":
-					aContent = this._createFormatSelectToolbarContent(this._isButtonGroupAdded("styleselect") || this._isButtonGroupAdded("formatselect"));
+					aContent = this._createFormatSelectToolbarContent(this._isButtonGroupAdded("styleselect") || this._isButtonGroupAdded("styles") || this._isButtonGroupAdded("blocks") || this._isButtonGroupAdded("formatselect"));
 					break;
 				case "structure":
 					aContent = this._createStructureToolbarContent(aToolbarButtonsToCreate, mGroup.visible);
@@ -1787,7 +1801,7 @@ sap.ui.define([
 			}
 
 			// if the group is supported (ex. "formatselect") add it to the button groups object
-			if (mGroup.name === "formatselect" || mGroup.name === "styleselect") {
+			if (mGroup.name === "formatselect" || mGroup.name === "styleselect" || mGroup.name === "styles" || mGroup.name === "blocks") {
 				sGroupName = "formatselect";
 				ButtonGroups[mGroup.name] = ["FormatBlock"];
 			}
@@ -2065,8 +2079,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();