@sapui5/sap.ui.richtexteditor 1.108.2 → 1.108.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.richtexteditor",
-  "version": "1.108.2",
+  "version": "1.108.4",
   "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.108.2</version>
+	<version>1.108.4</version>
 
 	<documentation>A rich text editor (RTE) control. Requires installation of an additional rich text editor library.</documentation>
 

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

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

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

@@ -185,6 +185,7 @@ sap.ui.define([
 				/**
 				 * Height of RichTextEditor control in CSS units.
 				 * <b>Note:</b> If the height property results in a value smaller than 200px, the minimum height of 200px will be applied.
+				 * <b>Note:</b> If the "autoresize" TinyMCE plugin is used, the height property is not taken into account.
 				 */
 				height: { type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null },
 
@@ -336,7 +337,8 @@ sap.ui.define([
 				readyRecurring: {},
 
 				/**
-				 * This event is fired right before the TinyMCE instance is created and can be used to change the settings object that will be given to TinyMCE. The parameter "configuration" is the javascript oject that will be given to TinyMCE upon first instantiation. The configuration parameter contains a map that can be changed in the case of TinyMCE.
+				 * This event is fired right before the TinyMCE instance is created and can be used to change the settings object that will be given to TinyMCE. The parameter "configuration" is the javascript object that will be given to TinyMCE upon first instantiation. The configuration parameter contains a map that can be changed in the case of TinyMCE.
+				 * <b>Note:</b> In order to add plugins to the <code>RichTextEditor</code> control, you have to use the <code>addPlugin</code> method. Adding plugins through the settings object may lead to synchronizing issues between TinyMCE and <code>RichTextEditor</code> control.
 				 */
 				beforeEditorInit: {}
 			},
@@ -1168,7 +1170,7 @@ sap.ui.define([
 
 		this.setButtonGroups([{
 			name: "font-style",
-			visible: true,
+			visible: this.getShowGroupFontStyle(),
 			row: 0,
 			priority: 10,
 			customToolbarPriority: 20,
@@ -1177,14 +1179,14 @@ sap.ui.define([
 			]
 		}, {
 			name: "font",
-			visible: false,
+			visible: this.getShowGroupFont(),
 			row: 0,
 			priority: 30,
 			customToolbarPriority: 50,
 			buttons: fontButtonGroupButtoNamesMapping[this.getEditorType()]
 		}, {
 			name: "clipboard",
-			visible: true,
+			visible: this.getShowGroupClipboard(),
 			row: 1,
 			priority: 10,
 			customToolbarPriority: 110,
@@ -1193,7 +1195,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "structure",
-			visible: true,
+			visible: this.getShowGroupStructure(),
 			row: 1,
 			priority: 20,
 			customToolbarPriority: 60,
@@ -1202,7 +1204,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "undo",
-			visible: false,
+			visible: this.getShowGroupUndo(),
 			row: 1,
 			priority: 40,
 			customToolbarPriority: 100,
@@ -1211,7 +1213,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "insert",
-			visible: false,
+			visible: this.getShowGroupInsert(),
 			row: 1,
 			priority: 50,
 			customToolbarPriority: 80,
@@ -1220,7 +1222,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "link",
-			visible: false,
+			visible: this.getShowGroupLink(),
 			row: 1,
 			priority: 60,
 			customToolbarPriority: 70,
@@ -1230,7 +1232,7 @@ sap.ui.define([
 		}, {
 			// Text Align group
 			name: "text-align",
-			visible: true,
+			visible: this.getShowGroupTextAlign(),
 			row: 0,
 			priority: 20,
 			customToolbarPriority: 30,
@@ -1917,7 +1919,7 @@ sap.ui.define([
 		/*eslint-disable camelcase */
 		var oConfig = {
 			// The following line only covers the editor content, not the UI in general
-			height: "100%",
+			height: "calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))",
 			directionality: this._getTextDirection(),
 			selector: "[id='" + this._textAreaId + "']",
 			theme: bIsTinyMCE5Or6 ? "silver" : "modern",

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

@@ -28,6 +28,8 @@ sap.ui.define(['sap/ui/core/Core'],
 		var oToolbarWrapper = oRichTextEditor.getAggregation("_toolbarWrapper");
 		var bCustomToolbar = oToolbarWrapper && oRichTextEditor._bCustomToolbarRequirementsFullfiled;
 		var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.richtexteditor");
+		var aPlugins = oRichTextEditor.getPlugins();
+		var bAutoresize = false;
 
 		rm.openStart("div", oRichTextEditor);
 		rm.class("sapUiRTE");
@@ -42,7 +44,15 @@ sap.ui.define(['sap/ui/core/Core'],
 		}
 
 		rm.style("width", oRichTextEditor.getWidth());
-		rm.style("height", oRichTextEditor.getHeight() || "200px");
+
+		bAutoresize = aPlugins.some(function(oPlugin) {
+			return oPlugin.name === "autoresize";
+		});
+
+		if (oRichTextEditor.getHeight() && !bAutoresize) {
+			rm.style("height", oRichTextEditor.getHeight());
+		}
+
 		if (oRichTextEditor.getTooltip_AsString()) { // ensure not to render null
 			rm.attr("title", oRichTextEditor.getTooltip_AsString());
 		}

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

@@ -34,7 +34,7 @@ sap.ui.define([
 				"sap.ui.richtexteditor.RTESplitButton"
 			],
 			elements: [],
-			version: "1.108.2"
+			version: "1.108.4"
 		});
 
 		/**

package/src/sap/ui/richtexteditor/themes/base/RichTextEditor.less

@@ -3,6 +3,19 @@
 	min-height: 200px;
 }
 
+.sapUiRTE.sapUiRTEWithCustomToolbar {
+	--_sap_ui_richtexteditor__toolbar_height: 2.75rem;
+}
+
+.sapUiRTE:not(.sapUiRTEWithCustomToolbar) {
+	--_sap_ui_richtexteditor__toolbar_height: 0rem;
+}
+
+.sapUiSizeCompact.sapUiRTE.sapUiRTEWithCustomToolbar,
+.sapUiSizeCompact .sapUiRTE.sapUiRTEWithCustomToolbar {
+	--_sap_ui_richtexteditor__toolbar_height: 2rem;
+}
+
 /* This fixes the focus of the split buttons in Edge */
 html[data-sap-ui-browser^="ed"] {
 	.sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar .sapMBtnBase.sapMSBText .sapMBtnFocusDiv {
@@ -17,6 +30,8 @@ html[data-sap-ui-browser^="ed"] {
 	.tox-editor-header {
 		padding: 0;
 	}
+
+	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height))";
 }
 
 .sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {

package/src/sap/ui/richtexteditor/themes/sap_belize/RichTextEditor.less

@@ -4,6 +4,10 @@
 /* ==================================================== */
 
 /*RichTextEditor with Custom toolbar*/
+.sapUiRTE.sapUiRTEWithCustomToolbar {
+	--_sap_ui_richtexteditor__toolbar_height: 3rem;
+}
+
 .sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar {
 
 	.sapMBarChild ~ .sapMBarChild {