@sapui5/sap.ui.richtexteditor 1.143.0 → 1.144.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ui.richtexteditor",
-  "version": "1.143.0",
+  "version": "1.144.0",
   "description": "SAPUI5 Library sap.ui.richtexteditor",
   "homepage": "https://ui5.github.io/cli/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.143.0</version>
+	<version>1.144.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.143.0
+		 * @version 1.144.0
 		 */
 		var RTESplitButton = SplitButton.extend("sap.ui.richtexteditor.RTESplitButton", {
 			metadata: {

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

@@ -380,7 +380,7 @@ sap.ui.define([
 				_toolbarWrapper: {type: "sap.ui.richtexteditor.IToolbar", multiple: false, visibility : "hidden", defaultValue: null},
 				/**
 				 * 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.
+				 * Though type is set to sap.ui.core.Control, only sap.m.Button is allowed.
 				 * <b>Note:</b> customButtons are available only when the <code>customToolbar</code> is enabled and all the requirements are fulfilled.
 				 *
 				 * @since 1.48
@@ -1283,8 +1283,6 @@ sap.ui.define([
 			this.setProperty("editorType", sEditorType);
 			sEditorType = this.getEditorType();
 
-			this._setupToolbar();
-
 			if (!oEditorMapping[sEditorType]) {
 				this.setProperty("editorType", RichTextEditor.EDITORTYPE_TINYMCE);
 				Log.error('Invalid editorType value set. Fallbacks to latest.');
@@ -1297,6 +1295,7 @@ sap.ui.define([
 				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._setupToolbar();
 			this.initTinyMCE();
 		} else {
 			Log.error(
@@ -1875,17 +1874,11 @@ sap.ui.define([
 			sPluginsList = sPluginsList.replace(/(,powerpaste|powerpaste,)/gi, "");
 		}
 
-		var bIsTinyMCE6or7 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE7;
-
-		// since TinyMCE 6 plugins property format has changed
-		if (bIsTinyMCE6or7) {
-			sPluginsList = this.getPlugins().map(function(oPlugin) {
-				return oPlugin.name;
-			});
-		}
-
+		sPluginsList = this.getPlugins().map(function(oPlugin) {
+			return oPlugin.name;
+		});
 
-		if (bIsTinyMCE6or7 && !this.getEditable()) {
+		if (!this.getEditable()) {
 			sPluginsList = sPluginsList.filter(function(oPlugin) {
 				return oPlugin !== "powerpaste";
 			});
@@ -1989,7 +1982,6 @@ sap.ui.define([
 		var oLocale = new Locale(Localization.getLanguage()),
 			sLanguage = oLocale.getLanguage(),
 			sRegion = oLocale.getRegion(),
-			bIsTinyMCE6or7 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE7,
 			sLangStr;
 
 		// Language mapping for old/fallback languages
@@ -1997,7 +1989,7 @@ sap.ui.define([
 
 		// Find default region, if region is not given
 		if (!sRegion) {
-			sRegion = bIsTinyMCE6or7 ? RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE7[sLanguage] : RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS[sLanguage];
+			sRegion = RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE7[sLanguage];
 		}
 
 		sLangStr = sRegion ? sLanguage + "_" + sRegion.toUpperCase() : sLanguage;

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

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.143.0
+	 * @version 1.144.0
 	 *
 	 * @public
 	 * @alias sap.ui.richtexteditor.RichTextEditorFontFamily

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

@@ -873,7 +873,7 @@ sap.ui.define([
 			var aDialogContent = oDialog && oDialog.getContent(),
 				oSelection, oSelectedNode, sURL, sDisplayText, sTitle,
 				bTarget, oSelectionNode, bLinkPartSelected, bSelection,
-				sUrlInputPrefixValue;
+				sUrlInputPrefixValue, bImageSelected;
 
 			if (!(aDialogContent instanceof Array) || !aDialogContent.length) {
 				return;
@@ -881,7 +881,15 @@ sap.ui.define([
 
 			oSelection = this.getEditor().getNativeApi().selection;
 			oSelectionNode = oSelection.getNode();
-			oSelectedNode = this._getSelectionAnchor(oSelection);
+
+			bImageSelected = oSelectionNode && oSelectionNode.tagName &&
+				oSelectionNode.tagName.toLowerCase() === "img";
+
+			if (bImageSelected) {
+				oSelectedNode = this._getImageAnchor(oSelectionNode);
+			} else {
+				oSelectedNode = this._getSelectionAnchor(oSelection);
+			}
 
 			if (!oSelectedNode) {
 				oSelectedNode = oSelectionNode.parentElement;
@@ -902,9 +910,17 @@ sap.ui.define([
 				this._bLinkPrefixChecked = oSelectedNode.getAttribute('data-sap-ui-rte-link-prefix') === "true";
 			}
 
-			// if there isn't a selection or a link is partly selected,
-			// the display text should be equal to the text of the selection node
-			if (!bSelection || bLinkPartSelected) {
+			if (bImageSelected) {
+				// For images, check if there's an existing link with title, otherwise use alt text
+				const oImageAnchor = this._getImageAnchor(oSelectionNode);
+				if (oImageAnchor && oImageAnchor.getAttribute('title')) {
+					sDisplayText = oImageAnchor.getAttribute('title');
+				} else {
+					sDisplayText = oSelectionNode.getAttribute('alt') || '';
+				}
+			} else if (!bSelection || bLinkPartSelected) {
+				// if there isn't a selection or a link is partly selected,
+				// the display text should be equal to the text of the selection node
 				sDisplayText = oSelectedNode.text;
 			} else {
 				// prevents displaying the whole anchor element as a display text
@@ -1143,13 +1159,15 @@ sap.ui.define([
 
 		/**
 		 * Helper function for finding selected anchor HTML node
+		 * @param {object} oSelection TinyMCE selection object
+		 * @returns {HTMLAnchorElement|null} The selected anchor element or null
 		 * @private
 		 */
 		ToolbarWrapper.prototype._getSelectionAnchor = function (oSelection) {
 			var oSelectionNode, oAnchor;
 
 			if (!oSelection) {
-				return;
+				return null;
 			}
 
 			oSelectionNode = oSelection.getNode();
@@ -1163,6 +1181,83 @@ sap.ui.define([
 			return oAnchor;
 		};
 
+		/**
+		 * Helper function for finding anchor element that wraps an image
+		 * @param {HTMLImageElement} oImageElement The image element
+		 * @returns {HTMLAnchorElement|null} The wrapping anchor element or null
+		 * @private
+		 */
+		ToolbarWrapper.prototype._getImageAnchor = function (oImageElement) {
+			const oParent = oImageElement && oImageElement.parentElement;
+			return (oParent && oParent.tagName && oParent.tagName.toLowerCase() === "a") ? oParent : null;
+		};
+
+		/**
+		 * Handles creating text links in the editor
+		 * @param {string} sText The text content for the link
+		 * @param {object} oLinkAttrs Link attributes (href, title, target)
+		 * @private
+		 */
+		ToolbarWrapper.prototype._handleTextLink = function (sText, oLinkAttrs) {
+			const oNativeEditor = this.getEditor().getNativeApi();
+
+			if (sText !== this.sSelectionTextValue || sText === "") {
+				oNativeEditor.insertContent(oNativeEditor.dom.createHTML('a', oLinkAttrs, oNativeEditor.dom.encode(sText)));
+			} else {
+				oNativeEditor.execCommand('mceInsertLink', false, oLinkAttrs);
+			}
+		};
+
+		/**
+		 * Handles wrapping an image with a link or updating an existing image link
+		 * @param {HTMLImageElement} oImageElement The image element to link
+		 * @param {object} oLinkAttrs Link attributes (href, title, target)
+		 * @private
+		 */
+		ToolbarWrapper.prototype._handleImageLink = function (oImageElement, oLinkAttrs) {
+			const oNativeEditor = this.getEditor().getNativeApi();
+			const oExistingAnchor = this._getImageAnchor(oImageElement);
+
+			if (!oExistingAnchor) {
+				const oLinkElement = oNativeEditor.dom.create("a", oLinkAttrs);
+				oNativeEditor.dom.insertAfter(oLinkElement, oImageElement);
+				oLinkElement.appendChild(oImageElement);
+				oNativeEditor.selection.select(oLinkElement);
+			} else {
+				this._updateImageLinkAttributes(oExistingAnchor, oLinkAttrs);
+			}
+		};
+
+		/**
+		 * Updates the attributes of an existing image link
+		 * @param {HTMLAnchorElement} oAnchorElement The anchor element to update
+		 * @param {object} oLinkAttrs Link attributes to update
+		 * @private
+		 */
+		ToolbarWrapper.prototype._updateImageLinkAttributes = function (oAnchorElement, oLinkAttrs) {
+			if (oLinkAttrs.href) {
+				oAnchorElement.setAttribute("href", oLinkAttrs.href);
+			}
+			if (oLinkAttrs.title) {
+				oAnchorElement.setAttribute("title", oLinkAttrs.title);
+			}
+			if (oLinkAttrs.target) {
+				oAnchorElement.setAttribute("target", oLinkAttrs.target);
+			}
+		};
+
+		/**
+		 * Removes the link wrapper from an image element
+		 * @param {HTMLImageElement} oImageElement The image element
+		 * @param {HTMLAnchorElement} oAnchorElement The anchor element wrapping the image
+		 * @private
+		 */
+		ToolbarWrapper.prototype._removeImageLink = function (oImageElement, oAnchorElement) {
+			const oNativeEditor = this.getEditor().getNativeApi();
+			oNativeEditor.dom.insertAfter(oImageElement, oAnchorElement);
+			oNativeEditor.dom.remove(oAnchorElement);
+		};
+
 		/**
 		 * Validates and sanitizes a user-provided link field (URL) for safe usage in HTML links.
 		 * - Validates URL syntax and safety
@@ -1227,18 +1322,27 @@ sap.ui.define([
 		* @private
 		*/
 		ToolbarWrapper.prototype.createLink = function (oLinkAttrs, sText) {
-			var oNativeEditor = this.getEditor().getNativeApi();
+			const oNativeEditor = this.getEditor().getNativeApi();
+			const oSelectedNode = oNativeEditor.selection.getNode();
+			const bImageSelected = oSelectedNode && oSelectedNode.tagName &&
+				oSelectedNode.tagName.toLowerCase() === "img";
 
-			// if there is no url provided and no link selected, do not generate an anchor
+			// if there is no url provided
 			if (oLinkAttrs.href === "") {
+				// check if an image is already wrapped in a link and remove it
+				if (bImageSelected) {
+					const oExistingAnchor = this._getImageAnchor(oSelectedNode);
+					if (oExistingAnchor) {
+						this._removeImageLink(oSelectedNode, oExistingAnchor);
+					}
+				}
 				return;
 			}
 
-			// if the user modifies the predefined text value of the current node via the dialog we should perform insertContent
-			if (sText !== this.sSelectionTextValue || sText === "") {
-				oNativeEditor.insertContent(oNativeEditor.dom.createHTML('a', oLinkAttrs, oNativeEditor.dom.encode(sText)));
+			if (bImageSelected) {
+				this._handleImageLink(oSelectedNode, oLinkAttrs);
 			} else {
-				oNativeEditor.execCommand('mceInsertLink', false, oLinkAttrs);
+				this._handleTextLink(sText, oLinkAttrs);
 			}
 		};
 
@@ -1450,15 +1554,11 @@ sap.ui.define([
 						const iRows = Math.min(Math.max(oRowsInput.getValue(), iMinTableCells), iMaxTableCells);
 						const iCols = Math.min(Math.max(oColsInput.getValue(), iMinTableCells), iMaxTableCells);
 
-						if (oRTE.getEditorType() === library.EditorType.TinyMCE6 || oRTE.getEditorType() === library.EditorType.TinyMCE7) {
-							oNativeAPI.execCommand('mceInsertTable', false, { rows: iRows, columns: iCols });
+						oNativeAPI.execCommand('mceInsertTable', false, { rows: iRows, columns: iCols });
 
-							oTableElm = oDomRef.getParents(oNativeAPI.selection.getNode()).find(function (element) {
-								return element.tagName.toLowerCase() === "table";
-							});
-						} else {
-							oTableElm = oNativeAPI.plugins.table.insertTable(iCols, iRows);
-						}
+						oTableElm = oDomRef.getParents(oNativeAPI.selection.getNode()).find(function (element) {
+							return element.tagName.toLowerCase() === "table";
+						});
 
 						oDomRef.setStyle(oTableElm, 'width', oDimensionWidthInput.getValue() + "px");
 						oDomRef.setStyle(oTableElm, 'height', oDimensionHeightInput.getValue() + "px");

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

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

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

@@ -21,7 +21,7 @@ UNDERLINE_BUTTON_TOOLTIP=Pod\u010Drtano
 STRIKETHROUGH_BUTTON_TOOLTIP=Pre\u010Drtano
 
 #XTOL: Tooltip for text align menu button
-TEXTALIGN_BUTTON_TOOLTIP=Poravnava teksta
+TEXTALIGN_BUTTON_TOOLTIP=Poravnava besedila
 
 #XTOL: Tooltip for text formatBlock menu button
 FORMAT_BUTTON_TOOLTIP=Oblika