@sapui5/sap.ui.richtexteditor 1.139.0 → 1.141.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.richtexteditor",
-  "version": "1.139.0",
+  "version": "1.141.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.139.0</version>
+	<version>1.141.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.139.0
+		 * @version 1.141.0
 		 */
 		var RTESplitButton = SplitButton.extend("sap.ui.richtexteditor.RTESplitButton", {
 			metadata: {

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

@@ -372,11 +372,18 @@ sap.ui.define([
 				/**
 				 * Custom buttons are meant to extend the <code>RichTextEditor</code>'s custom toolbar.
 				 * Though type is set to sap.ui.Control, only sap.m.Button is allowed.
-				 * <b>Note:</b> customButtons are available only when the customToolbar is enabled and all the requirements are fulfilled.
+				 * <b>Note:</b> customButtons are available only when the <code>customToolbar</code> is enabled and all the requirements are fulfilled.
 				 *
 				 * @since 1.48
 				 */
-				customButtons: {type: "sap.ui.core.Control", multiple: true, singularName: "customButton", defaultValue: null}
+				customButtons: {type: "sap.ui.core.Control", multiple: true, singularName: "customButton", defaultValue: null},
+				/**
+				 * Custom font families that can be used in the <code>RichTextEditor</code>.
+				 * <b>Note:</b> Custom fonts are available only when the <code>customToolbar</code> is enabled.
+				 *
+				 * @since 1.141
+				 */
+				customFonts: {type: "sap.ui.richtexteditor.RichTextEditorFontFamily", multiple: true, singularName: "customFont", defaultValue: null}
 			},
 			associations: {
 				/**
@@ -412,6 +419,9 @@ sap.ui.define([
 	 */
 	RichTextEditor.EDITORTYPE_TINYMCE5 = library.EditorType.TinyMCE5;
 
+	/**
+	 * @deprecated As of version 1.141.0
+	 */
 	RichTextEditor.EDITORTYPE_TINYMCE6 = library.EditorType.TinyMCE6;
 
 	RichTextEditor.EDITORTYPE_TINYMCE7 = library.EditorType.TinyMCE7;
@@ -448,6 +458,9 @@ sap.ui.define([
 		"powerpaste"
 	];
 
+	/**
+	 * @deprecated As of version 1.141.0
+	 */
 	RichTextEditor.DEFAULT_PLUGINS_TINYMCE6 = [
 		"emoticons",
 		"directionality",
@@ -1305,11 +1318,14 @@ sap.ui.define([
 			 * @deprecated As of version 1.120
 			 */
 			if (oEditorMapping[sEditorType] === "TinyMCE5") {
-				Log.error("TinyMCE version 5 is used as editor type. TinyMCE 5 is deprecated and will be removed from the code entirely in near future.");
+				Log.error("TinyMCE version 5 is used as editor type. TinyMCE 5 is deprecated and will be removed from the code entirely at the beginning of 2026. The latest version will be automatically loaded instead.");
 			}
 
+			/**
+			 * @deprecated As of version 1.141.0
+			 */
 			if (oEditorMapping[sEditorType] === "TinyMCE6") {
-				Log.warning("TinyMCE version 6 is used as editor type. TinyMCE 6 will be deprecated and removed from the code entirely in near future.");
+				Log.error("TinyMCE version 6 is used as editor type. TinyMCE 6 is deprecated as of version 1.141.0 and will be removed from the code entirely in near future.");
 			}
 
 			this.initTinyMCE();
@@ -1932,7 +1948,6 @@ sap.ui.define([
 			toolbar_items_size: 'small',
 			toolbar: aButtonRows,
 			toolbar_mode: "sliding",
-			content_css: [sap.ui.require.toUrl("sap/ui/richtexteditor/js/styles/RichTextEditor.css")],
 			statusbar: false, // disables display of the status bar at the bottom of the editor
 			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(),
@@ -1943,6 +1958,7 @@ sap.ui.define([
 			sandbox_iframes: true, // default for v.7, remove after upgrade
 			init_instance_callback: function(oEditor) {
 				this._oEditor = oEditor;
+				this._insertCustomFonts();
 				fnOnInit();
 			}.bind(this)
 		};
@@ -1961,6 +1977,34 @@ sap.ui.define([
 		return oConfig;
 	};
 
+	RichTextEditor.prototype._insertCustomFonts = function() {
+		const doc = this._oEditor?.getDoc();
+
+		if (!doc) {
+			return;
+		}
+
+		const head = doc.getElementsByTagName("head")[0];
+		const style = doc.getElementById("custom-fonts") || doc.createElement("style");
+		style?.setAttribute("id", "custom-fonts");
+
+		const fontImports = this.getCustomFonts().map((oFont) => {
+			return `@import url('${oFont.getUrl()}');`;
+		}).join("\n");
+
+		const currentFonts = style?.textContent || "";
+
+		if (currentFonts === fontImports) {
+			return;
+		}
+
+		style.textContent = fontImports;
+
+		if (head && style) {
+			head.appendChild(style);
+		}
+	};
+
 
 	/**
 	 * Map languages that are incorrectly assigned or fallback if languages do not work

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

@@ -0,0 +1,78 @@
+/*!
+ * SAPUI5
+ * (c) Copyright 2025 SAP SE. All rights reserved.
+ */
+
+// Provides control sap.ui.richtexteditor.RichTextEditorFontFamily.
+sap.ui.define([
+	"sap/ui/core/Element",
+	"sap/base/Log",
+	"./library"
+], function(Element, Log, library) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>RichTextEditorFontFamily</code>.
+	 *
+	 * @param {string} [sId] id for the new control, generated automatically if no id is given
+	 * @param {object} [mSettings] initial settings for the new control
+	 *
+	 * @class
+	 * Represents a font family option for <code>RichTextEditor</code>.
+	 * @extends sap.ui.core.Element
+	 *
+	 * @author SAP SE
+	 * @version 1.141.0
+	 *
+	 * @public
+	 * @alias sap.ui.richtexteditor.RichTextEditorFontFamily
+	 */
+	var RichTextEditorFontFamily = Element.extend("sap.ui.richtexteditor.RichTextEditorFontFamily", /** @lends sap.ui.richtexteditor.RichTextEditorFontFamily.prototype */ {
+		metadata : {
+			library : "sap.ui.richtexteditor",
+			properties : {
+
+				/**
+				 * Used to identify the font in the editor.
+				 * Names should be unique and descriptive.
+				 */
+				name : {type : "string", group : "Misc", defaultValue : null},
+
+				/**
+				 * The text displayed in the font family dropdown.
+				 */
+				text : {type : "string", group : "Misc", defaultValue : null},
+
+				/**
+				 * The value of the font family.
+				 * CSS font-family value that will be applied to the text.
+				 */
+				value : {type : "string", group : "Misc", defaultValue : null},
+
+				/**
+				 * Used to load the font.
+				 * The URL should point to a CSS file that defines the font-face.
+				 */
+				url : {type: "sap.ui.core.URI", group : "Data", defaultValue : null}
+			}
+		}
+	});
+
+	RichTextEditorFontFamily.prototype.validateProperty = function(sPropertyName, oValue) {
+		if (sPropertyName === "url") {
+			var sUrl = Element.prototype.validateProperty.call(this, sPropertyName, oValue);
+
+			// Stronger validation to prevent CSS injection
+			if (sUrl && /[<>()'"\\]|\/\*|\*\/|javascript:|data:/i.test(sUrl)) {
+				Log.Error("RichTextEditorFontFamily: URL contains potentially dangerous characters: " + sUrl, this);
+				return "";
+			}
+
+			return sUrl;
+		}
+		return Element.prototype.validateProperty.call(this, sPropertyName, oValue);
+	};
+
+	return RichTextEditorFontFamily;
+
+});

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

@@ -39,6 +39,11 @@ sap.ui.define([
 			ButtonsToCommandsMap = library.ButtonsToCommandsMap,
 			ButtonType = mLibrary.ButtonType;
 
+		const SYSTEM_FONT_CHROME = "-apple-system,system-ui,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif";
+		// Safari and FF return BlinkMacSystemFont, Chrome returns system-ui
+		const SYSTEM_FONT_LEGACY = "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif";
+		const SYSTEM_FONT_KEY = "custom-font-family";
+
 		/**
 		 * Constructor for a new RichTextEditor's Custom Toolbar.
 		 *
@@ -105,6 +110,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 +163,7 @@ sap.ui.define([
 			this._sTextColor = null;
 			this._sBackgroundColor = null;
 			this._bLinkPrefixChecked = null;
+			this._oPreservedMergetagSelection = null;
 		};
 
 		/**
@@ -291,6 +298,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 +327,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 +366,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;
 
@@ -386,29 +406,6 @@ sap.ui.define([
 						}
 					}
 				},
-				_syncTextFontFamily = function (oEditor, oFontFamilyCommand, oControl) {
-					var sFontName, sCommandValue, sText, sItemId,
-						sFontNameCommandValue = oEditor.getDoc().queryCommandValue("FontName");
-
-					// Synchronize the selected item of the Font Family Select with the applied font family style
-					for (sFontName in oFontFamilyCommand) {
-						if (!oFontFamilyCommand.hasOwnProperty(sFontName)) {
-							continue;
-						}
-						sItemId = oControl.getId() + sFontName;
-
-						sCommandValue = oFontFamilyCommand[sFontName].commandValue.match(/\w+/g).join("").toLowerCase();
-						sFontNameCommandValue = sFontNameCommandValue && sFontNameCommandValue.match(/\w+/g)?.join("").toLowerCase();
-						sText = oFontFamilyCommand[sFontName].text.match(/\w+/g).join("").toLowerCase();
-
-						// the selected item should be changed, only when the new one is different
-						if ((oControl.getSelectedItemId() !== sItemId) &&
-							(sCommandValue === sFontNameCommandValue || sFontNameCommandValue === sText)) {
-							oControl.setSelectedItemId(sItemId);
-							break;
-						}
-					}
-				},
 				_syncImage = function (oEditor, oControl) {
 					var oSelection = oEditor.selection.getNode(),
 						bImage = oSelection && oSelection.tagName.toLowerCase() === "img" ||
@@ -445,9 +442,32 @@ sap.ui.define([
 					case "TextAlign":
 						_syncTextAlign(oEditorCommand, oFormatter, oControl);
 						break;
-					case "FontFamily":
-						_syncTextFontFamily(oNativeEditor, oEditorCommand, oControl);
+					case "FontFamily": {
+						let sFontName = oNativeEditor.queryCommandValue("FontName");
+						const bSystemFont = sFontName.includes(SYSTEM_FONT_CHROME) || sFontName.includes(SYSTEM_FONT_LEGACY);
+
+						// Enhanced mergetag font family detection
+						if (that._oPreservedMergetagSelection) {
+							var oPreservedComputedStyle = oNativeEditor.getDoc().defaultView.getComputedStyle(that._oPreservedMergetagSelection);
+							sFontName = oPreservedComputedStyle.fontFamily || sFontName;
+						}
+
+						if (bSystemFont) {
+							oControl.setSelectedKey(SYSTEM_FONT_KEY);
+							oControl.getSelectedItem()?.setText(oResourceBundle.getText("FONT_FAMILY_DEFAULT_TEXT"));
+							break;
+						}
+
+						const bExistingFont = oControl.getItems().find((oItem) => oItem.getKey() === sFontName);
+
+						if (bExistingFont) {
+							oControl.setSelectedKey(sFontName);
+						} else {
+							oControl.setSelectedKey(SYSTEM_FONT_KEY);
+							oControl.getSelectedItem()?.setText(sFontName);
+						}
 						break;
+					}
 					case "FormatBlock":
 						_syncTextFormatBlock(oNativeEditor, oEditorCommand, oControl);
 						break;
@@ -502,7 +522,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 +532,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);
@@ -575,37 +597,25 @@ sap.ui.define([
 		 * @private
 		 */
 		ToolbarWrapper.prototype._createFontStyleSelectItems = function () {
-			var oFontFamilies = EditorCommands["FontFamily"],
-				aItems = [],
-				oItem;
-
-			for (var sFontStyle in oFontFamilies) {
-				oItem = {
-					id: this._getId("FontFamily" + sFontStyle),
-					text: oFontFamilies[sFontStyle].text
-				};
-
-				aItems.push(new Item(oItem));
-			}
-
-			return aItems;
-		};
-
-		/**
-		 * Helper function for finding the command value of a given font style command
-		 *
-		 * @param {string} [sItemText] Font Family
-		 * @returns {string} The command value of the given font style
-		 * @private
-		 */
-		ToolbarWrapper.prototype._getFontStyleCommand = function (sItemText) {
-			var oFontFamilies = EditorCommands["FontFamily"];
+			const aFontFamilies = EditorCommands["FontFamily"];
+			const aCustomFonts = this.getEditor().getCustomFonts();
+			const cleanFontString = (fontKey) => {
+				return fontKey
+					.replace(/['"]/g, "")
+					.replace(/,\s+/g, ",");
+			};
 
-			for (var sFontStyle in oFontFamilies) {
-				if (oFontFamilies.hasOwnProperty(sFontStyle) && oFontFamilies[sFontStyle].text === sItemText) {
-					return oFontFamilies[sFontStyle].commandValue;
-				}
-			}
+			return [...aFontFamilies.map((oFontFamily) => {
+				return new Item({
+					text: oFontFamily.text,
+					key: oFontFamily.value
+				});
+			}), ...aCustomFonts.map((oFont) => {
+				return new Item({
+					text: oFont.getText(),
+					key: cleanFontString(oFont.getValue())
+				});
+			})];
 		};
 
 		/**
@@ -727,6 +737,9 @@ sap.ui.define([
 					}
 				},
 				arrowPress: function () {
+					// Preserve mergetag selection before opening popover
+					that._preserveMergetagSelection();
+
 					oDialog = that.getAggregation("_custom" + sCommand + "Dialog");
 
 					this._getArrowButton()._activeButton();
@@ -1593,14 +1606,21 @@ sap.ui.define([
 					this._helper.createSelect({
 						id: this._getId("FontFamily"),
 						ariaLabelledBy: oInvisibleTextFontFamily,
-						selectedItemId: this._getId("FontFamilyVerdana"),
-						items: this._createFontStyleSelectItems(),
+						items: [
+							...this._createFontStyleSelectItems(),
+							new Item({
+								key: "custom-font-family",
+								enabled: false
+							})
+						],
 						change: function (oEvent) {
+							that._preserveMergetagSelection();
 							var oItem;
 
 							if (oRTE) {
 								oItem = oEvent.getSource().getSelectedItem();
-								oRTE.getNativeApi().execCommand('FontName', false, that._getFontStyleCommand(oItem.getText()));
+								that._restoreMergetagSelection();
+								oRTE.getNativeApi().execCommand('FontName', false, oItem.getKey());
 							} else {
 								Log.warning("Cannot execute native command: " + 'FontName');
 							}
@@ -1629,10 +1649,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 +1693,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 +1721,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 +1740,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 +1755,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 +2389,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/js/styles/RichTextEditor.css

@@ -1,3 +0,0 @@
-body {
-    font-family: verdana, geneva, sans-serif;
-}