@sapui5/sap.ui.richtexteditor 1.133.1 → 1.135.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.richtexteditor",
-  "version": "1.133.1",
+  "version": "1.135.0",
   "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-2024 SAP SE. All rights reserved.</copyright>
-	<version>1.133.1</version>
+	<version>1.135.0</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.133.1
+		 * @version 1.135.0
 		 */
 		var RTESplitButton = SplitButton.extend("sap.ui.richtexteditor.RTESplitButton", {
 			metadata: {

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

@@ -355,6 +355,11 @@ sap.ui.define([
 				beforeEditorInit: {}
 			},
 			aggregations: {
+				/**
+				 * Defines the footer of the control. The footer will be available only with custom toolbar.
+				 * @experimental As of version 1.135
+				 */
+				footer: {type: "sap.ui.richtexteditor.IToolbar", multiple: false},
 				/**
 				 * Custom toolbar wrapper.
 				 * The wrapper gets instantiated when customToolbar property is set to true.
@@ -675,11 +680,6 @@ sap.ui.define([
 		this._textAreaId = this.getId() + "-textarea";
 		this._iframeId = this._textAreaId + "_ifr";
 
-		this._textAreaDom = document.createElement("textarea");
-		this._textAreaDom.id = this._textAreaId;
-		this._textAreaDom.style.height = "100%";
-		this._textAreaDom.style.width = "100%";
-
 		this.setEditorType(sEditorType);
 
 		this._setupToolbar();
@@ -1550,17 +1550,11 @@ sap.ui.define([
 		} else if (oDomRef) {
 
 			switch (this._tinyMCEStatus) {
-				case EditorStatus.Initializing:
-					oDomRef.appendChild(this._textAreaDom);
-					break;
 				case EditorStatus.Loaded:
 				case EditorStatus.Loading:
-					this.getDomRef().appendChild(this._textAreaDom);
 					this.reinitializeTinyMCE();
 					break;
 				case EditorStatus.Ready:
-					// We need to reinitialize TinyMCE so changes will be shown.
-					oDomRef.appendChild(this._textAreaDom);
 					this.reinitializeTinyMCE();
 					break;
 
@@ -1681,7 +1675,7 @@ sap.ui.define([
 		this._pTinyMCEInitialized = new Promise(function(fnResolve, fnReject) {
 			this._bInitializationPending = false;
 			this._tinyMCEStatus = EditorStatus.Initializing;
-			this._textAreaDom.value = this._patchTinyMCEValue(this.getValue());
+			this._getTextAreaDOM().value = this._patchTinyMCEValue(this.getValue());
 			window.tinymce.init(this._createConfigTinyMCE(function() {
 				this._tinyMCEStatus = EditorStatus.Ready;
 				// Wee need to add a timeout here, as the promise resolves before other asynchronous tasks like the
@@ -1696,6 +1690,10 @@ sap.ui.define([
 		}.bind(this));
 	};
 
+	RichTextEditor.prototype._getTextAreaDOM = function() {
+		return this.getDomRef().querySelector("textarea");
+	};
+
 	/**
 	 * Patches the value which would be inserted in TinyMCE.
 	 *
@@ -1909,7 +1907,9 @@ sap.ui.define([
 		/*eslint-disable camelcase */
 		var oConfig = {
 			// The following line only covers the editor content, not the UI in general
-			height: "calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))",
+			height: !this.getAggregation("footer")
+			? "calc(100% - var(--_sap_ui_richtexteditor__footer_height))"
+			: "calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))",
 			directionality: this._getTextDirection(),
 			selector: "[id='" + this._textAreaId + "']",
 			theme: "silver",
@@ -1927,6 +1927,8 @@ sap.ui.define([
 			image_advtab: true, // Adds an "Advanced" tab to the image dialog allowing you to add custom styles, spacing and borders to images
 			readonly: !this.getEditable(),
 			nowrap: !this.getWrapping(),
+			convert_unsafe_embeds: true, // default for v.7, remove after upgrade
+			sandbox_iframes: true, // default for v.7, remove after upgrade
 			init_instance_callback: function(oEditor) {
 				this._oEditor = oEditor;
 				fnOnInit();

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

@@ -76,7 +76,31 @@ sap.ui.define(["sap/ui/core/Lib"],
 		if (this[sRenderMethodName] && typeof this[sRenderMethodName] === "function") {
 			this[sRenderMethodName].call(this, rm, oRichTextEditor);
 		}
+		const footer = oRichTextEditor.getFooter();
 
+		rm.openStart("div", oRichTextEditor.getId() + "-textareaWrapper");
+		rm.class("sapUiRTETextAreaWrapper");
+
+		if (footer) {
+			rm.class("sapUiRTEFooter");
+		}
+
+		rm.openEnd();
+
+		rm.openStart("textarea", oRichTextEditor.getId() + "-textarea");
+		rm.style("height", "100%");
+		rm.style("width", "100%");
+
+		rm.openEnd();
+
+		rm.close("textarea");
+
+		// Footer should be rendered only in case of custom toolbar.
+		if (footer && bCustomToolbar) {
+			rm.renderControl(footer);
+		}
+
+		rm.close("div");
 		rm.close("div");
 	};
 

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

@@ -460,17 +460,31 @@ sap.ui.define([
 					case "Unlink":
 						_syncLink(oNativeEditor, oControl, false);
 						break;
-					case "FontSize":
-						// queryCommandValue("FontSize") always returns empty string in FireFox - to be fixed
-						// Synchronize the selected item of the Font Name Select with the applied font size style
-						var sCommandValue = oNativeEditor.getDoc().queryCommandValue(sEditorCommand),
-							sItemId = oControl.getId() + sCommandValue;
+					case "FontSize": {
+						const pxToPt = function (px) {
+							return px * 0.75; // 1px = 0.75pt
+						};
+						const sOriginalFontSize = oNativeEditor.queryCommandValue(sEditorCommand).replace(/\s+/g, "");
+						let sParsedFontSize = sOriginalFontSize;
+
+						// if the value is in px, convert it to pt
+						if (sOriginalFontSize.includes("px")) {
+							sParsedFontSize = pxToPt(parseFloat(sOriginalFontSize)) + "pt";
+						}
 
-						// the selected item should be changed, only when the new one is different
-						if (oControl.getSelectedItemId() !== sItemId && sCommandValue) {
-							oControl.setSelectedItemId(sItemId);
+						if (sOriginalFontSize) {
+							// check if the item is one of the predefined font sizes
+							const oMatchingItem = oControl.getItems().find((oItem) => oItem.getKey() === sParsedFontSize);
+
+							if (oMatchingItem) {
+								oControl.setSelectedItem(oMatchingItem);
+							} else {
+								oControl.setSelectedKey("custom-font-size");
+								oControl.getSelectedItem().setText(sOriginalFontSize);
+							}
 						}
 						break;
+					}
 					default:
 						// Synchronize the pressed state of the OverflowToolbarToggleButtons
 						oControl.getMetadata().getName() === "sap.m.OverflowToolbarToggleButton" &&
@@ -625,7 +639,8 @@ sap.ui.define([
 			EditorCommands["FontSize"].forEach(function (item) {
 				oItem = {
 					id: this._getId("FontSize" + number),
-					text: item + " pt"
+					text: item + " pt",
+					key: item + "pt"
 				};
 				aItems.push(new Item(oItem));
 				number++;
@@ -1606,7 +1621,13 @@ sap.ui.define([
 						id: this._getId("FontSize"),
 						ariaLabelledBy: oInvisibleTextFontSize,
 						selectedItemId: this._getId("FontSize2"),
-						items: this._createFontSizeSelectItems(),
+						items: [
+							this._createFontSizeSelectItems(),
+							new Item({
+								key: "custom-font-size",
+								enabled: false
+							})
+						],
 						change: function (oEvent) {
 							var oItem;
 

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

@@ -37,7 +37,7 @@ sap.ui.define([
 				"sap.ui.richtexteditor.RTESplitButton"
 			],
 			elements: [],
-			version: "1.133.1"
+			version: "1.135.0"
 		});
 
 		/**

package/src/sap/ui/richtexteditor/messagebundle_fr.properties

@@ -132,7 +132,7 @@ INSERT_IMAGE_RATIO=G\u00E9rer le ratio d'aspect
 DIALOG_OK_BUTTON=OK
 
 #XBUT: Cancel button for inserting content dialog
-DIALOG_CANCEL_BUTTON=Interrompre
+DIALOG_CANCEL_BUTTON=Annuler
 
 #XFLD: Label for url input for inserting link
 INSERT_LINK_URL=URL

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

@@ -1,8 +1,15 @@
 .sapUiRTE {
 	display: inline-block;
 	min-height: 200px;
+
+}
+
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 4px;
 }
 
+/* ====== Custom Toolbar ====== */
+
 .sapUiRTE.sapUiRTEWithCustomToolbar {
 	--_sap_ui_richtexteditor__toolbar_height: 2.75rem;
 }
@@ -16,6 +23,21 @@
 	--_sap_ui_richtexteditor__toolbar_height: 2rem;
 }
 
+/* ====== Footer Toolbar ====== */
+
+.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 2.75rem;
+}
+
+.sapUiRTE .sapUiRTETextAreaWrapper:not(.sapUiRTEFooter) {
+	--_sap_ui_richtexteditor__footer_height: 0rem;
+}
+
+.sapUiSizeCompact.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter,
+.sapUiSizeCompact .sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 2rem;
+}
+
 /* This fixes the focus of the split buttons in Edge */
 html[data-sap-ui-browser^="ed"] {
 	.sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar .sapMBtnBase.sapMSBText .sapMBtnFocusDiv {
@@ -25,22 +47,24 @@ html[data-sap-ui-browser^="ed"] {
 
 .sapUiRTE .sapUiRteEditorContainer {
 	border-radius: 0;
-	border-width: 1px;
 	.tox-editor-container
 	.tox-editor-header {
 		padding: 0;
 	}
 
-	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height))";
+	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height) - var(--_sap_ui_richtexteditor__footer_height) - var(--_sap_ui_richtexteditor__wrapper-border))";
 }
 
 .sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
+	border: none !important;
 	box-sizing: border-box;
-	border-top: 0;
-	border-color: @sapUiFieldBorderColor;
 	box-shadow: none;
 }
 
+.sapUiRTEWithCustomToolbar .sapUiRTETextAreaWrapper {
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
 .sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
 	.mce-container.mce-panel.mce-first,
 	.mce-container.mce-panel.mce-last {
@@ -81,3 +105,16 @@ svg.rteFontColorIcon .outline {
 		-1px 1px 0 @sapUiContentForegroundBorderColor,
 		1px 1px 0 @sapUiContentForegroundBorderColor;
 }
+
+.sapUiRTE .sapUiRTETextAreaWrapper {
+	box-sizing: border-box;
+	height: ~"calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))";
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar {
+	box-sizing: border-box;
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar .sapMBarRight {
+	padding-right: 4px;
+}

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

@@ -3,11 +3,6 @@
 /* Belize theme                                        */
 /* ==================================================== */
 
-/*RichTextEditor with Custom toolbar*/
-.sapUiRTE.sapUiRTEWithCustomToolbar {
-	--_sap_ui_richtexteditor__toolbar_height: 3rem;
-}
-
 .sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar {
 
 	.sapMBarChild ~ .sapMBarChild {
@@ -30,4 +25,4 @@
 			right: 0.25rem;
 		}
 	}
-}
+}

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

@@ -3,8 +3,18 @@
 	min-height: 200px;
 }
 
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 0px;
+}
+
+.sapUiRTE .sapUiRTEFooter {
+	--_sap_ui_richtexteditor__wrapper-border: 2px;
+}
+
+/* ====== Custom Toolbar ====== */
+
 .sapUiRTE.sapUiRTEWithCustomToolbar {
-	--_sap_ui_richtexteditor__toolbar_height: 2.75rem;
+	--_sap_ui_richtexteditor__toolbar_height: 3rem;
 }
 
 .sapUiRTE:not(.sapUiRTEWithCustomToolbar) {
@@ -16,6 +26,21 @@
 	--_sap_ui_richtexteditor__toolbar_height: 2rem;
 }
 
+/* ====== Footer Toolbar ====== */
+
+.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 3rem;
+}
+
+.sapUiRTE .sapUiRTETextAreaWrapper:not(.sapUiRTEFooter) {
+	--_sap_ui_richtexteditor__footer_height: 0rem;
+}
+
+.sapUiSizeCompact.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter,
+.sapUiSizeCompact .sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 2rem;
+}
+
 /* This fixes the focus of the split buttons in Edge */
 html[data-sap-ui-browser^="ed"] {
 	.sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar .sapMBtnBase.sapMSBText .sapMBtnFocusDiv {
@@ -31,12 +56,15 @@ html[data-sap-ui-browser^="ed"] {
 		padding: 0;
 	}
 
-	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height))";
+	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height) - var(--_sap_ui_richtexteditor__footer_height) - var(--_sap_ui_richtexteditor__wrapper-border))";
+}
+
+.sapUiRTEWithCustomToolbar .sapUiRTEFooter .sapUiRteEditorContainer {
+	border: 0;
 }
 
 .sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
 	box-sizing: border-box;
-	border-top: 0;
 	border-color: @sapUiFieldBorderColor;
 	box-shadow: none;
 }
@@ -81,3 +109,36 @@ svg.rteFontColorIcon .outline {
 		-1px 1px 0 @sapUiContentForegroundBorderColor,
 		1px 1px 0 @sapUiContentForegroundBorderColor;
 }
+
+.sapUiRTE .sapUiRTETextAreaWrapper {
+	box-sizing: border-box;
+	height: ~"calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))";
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar {
+	box-sizing: border-box;
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar .sapMBarRight {
+	padding-right: 4px;
+}
+
+.sapUiRTE.sapUiRTEWithCustomToolbar {
+
+	.sapUiRTETextAreaWrapper.sapUiRTEFooter {
+		border: @sapUiContentFocusWidth solid @sapUiFieldBorderColor;
+	}
+
+	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
+		border-bottom: none;
+	}
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar {
+	box-sizing: border-box;
+}
+
+.sapUiRTE .sapUiRTEFooter .sapMIBar .sapMBarRight {
+	padding-right: 4px;
+}
+

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

@@ -3,6 +3,14 @@
 /* Belize High Contrast Black Theme                     */
 /* ==================================================== */
 
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 0px;
+}
+
+.sapUiRTE .sapUiRTEFooter {
+	--_sap_ui_richtexteditor__wrapper-border: 4px;
+}
+
 /*RichTextEditor with Custom toolbar*/
 .sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar {
 

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

@@ -3,6 +3,13 @@
 /* Belize High Contrast White Theme                     */
 /* ==================================================== */
 
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 0px;
+}
+
+.sapUiRTE .sapUiRTEFooter {
+	--_sap_ui_richtexteditor__wrapper-border: 4px;
+}
 
 /*RichTextEditor with Custom toolbar*/
 .sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar {

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

@@ -3,8 +3,10 @@
 	min-height: 200px;
 }
 
+/* ====== Custom Toolbar ====== */
+
 .sapUiRTE.sapUiRTEWithCustomToolbar {
-	--_sap_ui_richtexteditor__toolbar_height: 2.75rem;
+	--_sap_ui_richtexteditor__toolbar_height: 3rem;
 }
 
 .sapUiRTE:not(.sapUiRTEWithCustomToolbar) {
@@ -16,6 +18,21 @@
 	--_sap_ui_richtexteditor__toolbar_height: 2rem;
 }
 
+/* ====== Footer Toolbar ====== */
+
+.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 3rem;
+}
+
+.sapUiRTE .sapUiRTETextAreaWrapper:not(.sapUiRTEFooter) {
+	--_sap_ui_richtexteditor__footer_height: 0rem;
+}
+
+.sapUiSizeCompact.sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter,
+.sapUiSizeCompact .sapUiRTE .sapUiRTETextAreaWrapper.sapUiRTEFooter {
+	--_sap_ui_richtexteditor__footer_height: 2rem;
+}
+
 /* This fixes the focus of the split buttons in Edge */
 html[data-sap-ui-browser^="ed"] {
 	.sapUiRTE.sapUiRTEWithCustomToolbar .sapUiRTECustomToolbar .sapMBtnBase.sapMSBText .sapMBtnFocusDiv {
@@ -31,7 +48,7 @@ html[data-sap-ui-browser^="ed"] {
 		padding: 0;
 	}
 
-	min-height: ~"calc(200px - var(--_sap_ui_richtexteditor__toolbar_height))";
+	min-height: ~"calc(200px - 2 * var(--_sap_ui_richtexteditor__toolbar_height))";
 }
 
 .sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
@@ -81,3 +98,15 @@ svg.rteFontColorIcon .outline {
 		-1px 1px 0 @sapUiContentForegroundBorderColor,
 		1px 1px 0 @sapUiContentForegroundBorderColor;
 }
+
+.sapUiRTE .sapUiRTETextAreaWrapper {
+	box-sizing: border-box;
+	height: ~"calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))";
+}
+
+.sapUiRTE.sapUiRTEWithCustomToolbar {
+
+	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
+		border-bottom: none;
+	}
+}

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

@@ -3,10 +3,10 @@
 /* Fiori 3 theme                                        */
 /* ==================================================== */
 
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 2px;
+}
+
 .sapUiRTEWithCustomToolbar .sapMTB.sapUiRTECustomToolbar {
     border-bottom: none;
 }
-
-.sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
-    border-top: 1px solid @sapUiFieldBorderColor;
-}

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

@@ -3,10 +3,10 @@
 /* Fiori 3 Dark theme                                   */
 /* ==================================================== */
 
+.sapUiRTE {
+	--_sap_ui_richtexteditor__wrapper-border: 2px;
+}
+
 .sapUiRTEWithCustomToolbar .sapMTB.sapUiRTECustomToolbar {
     border-bottom: none;
 }
-
-.sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
-    border-top: 1px solid @sapUiFieldBorderColor;
-}

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

@@ -6,7 +6,3 @@
 .sapUiRTEWithCustomToolbar .sapMTB.sapUiRTECustomToolbar {
     border-bottom: none;
 }
-
-.sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
-    border-top: 1px solid @sapUiFieldBorderColor;
-}

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

@@ -6,7 +6,3 @@
 .sapUiRTEWithCustomToolbar .sapMTB.sapUiRTECustomToolbar {
     border-bottom: none;
 }
-
-.sapUiRTEWithCustomToolbar .sapUiRteEditorContainer {
-    border-top: 1px solid @sapUiFieldBorderColor;
-}

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

@@ -5,9 +5,9 @@
 
 .sapUiRTE.sapUiRTEWithCustomToolbar {
 
-	.sapUiRteEditorContainer {
-		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor !important;
-	};
+	.sapUiRTETextAreaWrapper {
+		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor;
+	}
 
 	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
 		border-bottom: none;
@@ -27,4 +27,4 @@
 	.sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnIcon {
 		top: 0.0625rem;
 	}
-}
+}

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

@@ -5,9 +5,9 @@
 
 .sapUiRTE.sapUiRTEWithCustomToolbar {
 
-	.sapUiRteEditorContainer {
-		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor !important;
-	};
+	.sapUiRTETextAreaWrapper {
+		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor;
+	}
 
 	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
 		border-bottom: none;

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

@@ -5,9 +5,9 @@
 
 .sapUiRTE.sapUiRTEWithCustomToolbar {
 
-	.sapUiRteEditorContainer {
-		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor !important;
-	};
+	.sapUiRTETextAreaWrapper {
+		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor;
+	}
 
 	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
 		border-bottom: none;

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

@@ -5,9 +5,9 @@
 
 .sapUiRTE.sapUiRTEWithCustomToolbar {
 
-	.sapUiRteEditorContainer {
-		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor !important;
-	};
+	.sapUiRTETextAreaWrapper {
+		border: @sapUiContentFocusWidth solid @sapUiFieldActiveBorderColor;
+	}
 
 	.sapUiRTECustomToolbar.sapMTB.sapMTBStandard {
 		border-bottom: none;