@sapui5/sap.ui.richtexteditor 1.138.0 → 1.140.0

package/package.json

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

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

@@ -88,9 +88,6 @@ sap.ui.define(["sap/ui/core/Lib"],
 		rm.openEnd();
 
 		rm.openStart("textarea", oRichTextEditor.getId() + "-textarea");
-		rm.style("height", "100%");
-		rm.style("width", "100%");
-
 		rm.openEnd();
 
 		rm.close("textarea");

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

@@ -105,6 +105,7 @@ sap.ui.define([
 			this._oAccessibilityTexts = {};
 			this._sTextColor = EditorCommands.TextColor.defaultValue;
 			this._sBackgroundColor = EditorCommands.BackgroundColor.defaultValue;
+			this._oPreservedMergetagSelection = null;
 		};
 
 		ToolbarWrapper.prototype.onBeforeRendering = function () {
@@ -157,6 +158,7 @@ sap.ui.define([
 			this._sTextColor = null;
 			this._sBackgroundColor = null;
 			this._bLinkPrefixChecked = null;
+			this._oPreservedMergetagSelection = null;
 		};
 
 		/**
@@ -291,6 +293,17 @@ sap.ui.define([
 				editor.on('NodeChange', function () {
 					that._syncToolbarStates(this);
 				});
+
+				// When using mergetags plugin, the selection is lost when the user clicks on a toolbar action.
+				// This is a workaround to restore the last selection made by the user.
+				editor.on('SelectionChange', function() {
+					var oSelectionNode = this.selection.getNode();
+					if (oSelectionNode && oSelectionNode.classList && oSelectionNode.classList.contains('mce-mergetag')) {
+						that._oPreservedMergetagSelection = oSelectionNode;
+					} else {
+						that._oPreservedMergetagSelection = null;
+					}
+				});
 			};
 
 			return oConfig;
@@ -309,6 +322,7 @@ sap.ui.define([
 			// Prevent losing the focus to the overflow toolbar button after the menu popover is closed
 			setTimeout(function(){
 				if (bDefaultColor || this._getColor(sCommand).replace(/,\s/g, ',') !== sColor) {
+					this._restoreMergetagSelection();
 					this.getEditor().getNativeApi().execCommand(sCommandName, false, sColor);
 				}
 			}.bind(this), 0);
@@ -347,6 +361,7 @@ sap.ui.define([
 			var oEditorCommand, oControl, sEditorCommand,
 				oFormatter = oNativeEditor.formatter,
 				oResourceBundle = this._oResourceBundle,
+				that = this,
 				_syncTextAlign = function (oTextAlignCommand, oEditorFormatter, oControl) {
 					var sAlignCommand, sIconUri, oCommand;
 
@@ -390,6 +405,12 @@ sap.ui.define([
 					var sFontName, sCommandValue, sText, sItemId,
 						sFontNameCommandValue = oEditor.getDoc().queryCommandValue("FontName");
 
+					// Enhanced mergetag font family detection
+					if (that._oPreservedMergetagSelection) {
+						var oPreservedComputedStyle = oEditor.getDoc().defaultView.getComputedStyle(that._oPreservedMergetagSelection);
+						sFontNameCommandValue = oPreservedComputedStyle.fontFamily || sFontNameCommandValue;
+					}
+
 					// Synchronize the selected item of the Font Family Select with the applied font family style
 					for (sFontName in oFontFamilyCommand) {
 						if (!oFontFamilyCommand.hasOwnProperty(sFontName)) {
@@ -502,7 +523,8 @@ sap.ui.define([
 		 */
 		ToolbarWrapper.prototype._createButtonConfig = function (sCommand) {
 			var oCommand = EditorCommands[sCommand],
-				oRTE = this.getEditor();
+				oRTE = this.getEditor(),
+				that = this;
 
 			return {
 				id: this._getId(sCommand),
@@ -511,6 +533,7 @@ sap.ui.define([
 				text: this._oResourceBundle.getText(oCommand.bundleKey),
 				press: function () {
 					if (oRTE) {
+						that._restoreMergetagSelection();
 						oRTE.getNativeApi().execCommand(oCommand.command);
 					} else {
 						Log.warning("Cannot execute native command: " + oCommand.command);
@@ -727,6 +750,9 @@ sap.ui.define([
 					}
 				},
 				arrowPress: function () {
+					// Preserve mergetag selection before opening popover
+					that._preserveMergetagSelection();
+
 					oDialog = that.getAggregation("_custom" + sCommand + "Dialog");
 
 					this._getArrowButton()._activeButton();
@@ -1596,10 +1622,12 @@ sap.ui.define([
 						selectedItemId: this._getId("FontFamilyVerdana"),
 						items: this._createFontStyleSelectItems(),
 						change: function (oEvent) {
+							that._preserveMergetagSelection();
 							var oItem;
 
 							if (oRTE) {
 								oItem = oEvent.getSource().getSelectedItem();
+								that._restoreMergetagSelection();
 								oRTE.getNativeApi().execCommand('FontName', false, that._getFontStyleCommand(oItem.getText()));
 							} else {
 								Log.warning("Cannot execute native command: " + 'FontName');
@@ -1629,10 +1657,12 @@ sap.ui.define([
 							})
 						],
 						change: function (oEvent) {
+							that._preserveMergetagSelection();
 							var oItem;
 
 							if (oRTE) {
 								oItem = oEvent.getSource().getSelectedItem();
+								that._restoreMergetagSelection();
 								oRTE.getNativeApi().execCommand('FontSize', false, oItem.getText().replace(/\s/g, ""));
 							} else {
 								Log.warning("Cannot execute native command: " + 'FontSize');
@@ -1671,22 +1701,26 @@ sap.ui.define([
 		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");
+			var that = this;
 
 			return [
 				this._helper.createMenuButton(
 					this._getId("TextAlign"),
 					aMenuItems,
 					function (oEvent) {
+						that._preserveMergetagSelection();
 						var oSelectedItem, oEditor, oSelectedItemIcon;
+						var oPreservedNode = that._oPreservedMergetagSelection;
 
 						if (oRTE) {
 							oSelectedItem = oEvent.getParameter("item");
 							oEditor = oRTE.getNativeApi();
 							oSelectedItemIcon = oSelectedItem.getIcon();
+
+							that._restoreMergetagSelection();
 							if (oSelectedItemIcon === this.getParent().getIcon()) {
 								var sTextAlign = bTextAlignLRight ? "JustifyRight" : "JustifyLeft";
 								// Text Align commands in TinyMCE have a toggle behavior when you set a
@@ -1695,6 +1729,14 @@ sap.ui.define([
 							} else {
 								oEditor.execCommand('Justify' + that._findTextAlignCommandByIcon(oSelectedItemIcon));
 							}
+
+							// Restore mergetag selection after TinyMCE moves focus
+							if (oPreservedNode && oPreservedNode.classList && oPreservedNode.classList.contains('mce-mergetag')) {
+								// Prevent losing the focus to the overflow toolbar button after the menu popover is closed
+								requestAnimationFrame(function() {
+									oEditor.selection.select(oPreservedNode);
+								});
+							}
 						} else {
 							Log.warning("Cannot execute native command: " + 'Justify');
 						}
@@ -1706,6 +1748,7 @@ sap.ui.define([
 		};
 
 		ToolbarWrapper.prototype._createFormatSelectToolbarContent = function (bVisible) {
+			var that = this;
 			var oRTE = this.getEditor();
 			var oAccessibilityKeys = library.Accessibility;
 			var oInvisibleTextFormatBlock = this._helper.createInvisibleText({
@@ -1720,10 +1763,12 @@ sap.ui.define([
 					ariaLabelledBy: oInvisibleTextFormatBlock,
 					items: this._createFormatBlockItems(),
 					change: function (oEvent) {
+						that._preserveMergetagSelection();
 						var oSelectedItem;
 						if (oRTE) {
 							oSelectedItem = oEvent.getSource().getSelectedItem();
 							if (oSelectedItem) {
+								that._restoreMergetagSelection();
 								var currentFormatterCommand = oRTE.getAggregation("_toolbarWrapper")._getFormatBlockCommand(oSelectedItem.getText());
 								oRTE.getNativeApi().execCommand('FormatBlock', false, currentFormatterCommand);
 							}
@@ -2352,5 +2397,31 @@ sap.ui.define([
 			return Element.getElementById(oRTE.getId() + this.getId() + "-" + sButtonName);
 		};
 
+		// When using mergetags plugin, the selection is lost when the user clicks on a toolbar action.
+		// This is a workaround to restore the last selection made by the user.
+		ToolbarWrapper.prototype._preserveMergetagSelection = function () {
+			var oEditor = this.getEditor();
+			if (!oEditor) {
+				return;
+			}
+
+			var oSelectionNode = oEditor.getNativeApi().selection.getNode();
+
+			if (oSelectionNode && oSelectionNode.classList && oSelectionNode.classList.contains('mce-mergetag')) {
+				this._oPreservedMergetagSelection = oSelectionNode;
+			}
+		};
+
+		ToolbarWrapper.prototype._restoreMergetagSelection = function () {
+			if (this._oPreservedMergetagSelection) {
+				var oEditor = this.getEditor();
+				if (oEditor) {
+					var oNativeEditor = oEditor.getNativeApi();
+					oNativeEditor.selection.select(this._oPreservedMergetagSelection);
+				}
+				this._oPreservedMergetagSelection = null;
+			}
+		};
+
 		return ToolbarWrapper;
 	});

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

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