fix(ui5-textarea): sanitize mirror element value

SAP · Oct 17, 2024 · 58c4d63 · 58c4d63
1 parent d5e7750
commit 58c4d63
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 31 deletions.
diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
@@ -7,8 +7,8 @@
 
 	<div class="ui5-textarea-wrapper">
 		{{#if growing}}
-			<div id="{{_id}}-mirror" class="ui5-textarea-mirror" aria-hidden="true" contenteditable="true">
-				{{this.value}}
+			<div id="{{_id}}-mirror" class="ui5-textarea-mirror" aria-hidden="true" >
+				{{this._mirrorText}}
 			</div>
 		{{/if}}
 		<textarea

diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -12,10 +12,12 @@ import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEff
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { sanitizeHTML } from "@ui5/webcomponents-base/dist/util/HTMLSanitizer.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
 import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -41,12 +43,6 @@ import {
 import textareaStyles from "./generated/themes/TextArea.css.js";
 import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";
 
-type TokenizedText = Array<string>;
-type IndexedTokenizedText = Array<{
-	text: string;
-	last: boolean;
-}>;
-
 type ExceededText = {
 	exceededText?: string;
 	leftCharactersCount?: number;
@@ -283,8 +279,8 @@ class TextArea extends UI5Element implements IFormInputElement {
 	/**
 	 * @private
 	 */
-	@property({ type: Array })
-	_mirrorText: IndexedTokenizedText = [];
+	@property({ type: String })
+	_mirrorText: string = "";
 
 	/**
 	 * @private
@@ -362,6 +358,8 @@ class TextArea extends UI5Element implements IFormInputElement {
 			this.value = "";
 		}
 
+		this._mirrorText = sanitizeHTML(this.value);
+
 		this._exceededTextProps = this._calcExceededText();
 
 		this.exceeding = !!this._exceededTextProps.leftCharactersCount && this._exceededTextProps.leftCharactersCount < 0;
@@ -489,27 +487,6 @@ class TextArea extends UI5Element implements IFormInputElement {
 		return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
 	}
 
-	_tokenizeText(value: string) {
-		const tokenizedText = value.replace(/&/gm, "&amp;").replace(/"/gm, "&quot;").replace(/'/gm, "&apos;").replace(/</gm, "<")
-			.replace(/>/gm, ">")
-			.split("\n");
-
-		if (tokenizedText.length < this.rows) {
-			return this._mapTokenizedTextToObject([...tokenizedText, ...Array(this.rows - tokenizedText.length).fill("")] as TokenizedText);
-		}
-
-		return this._mapTokenizedTextToObject(tokenizedText);
-	}
-
-	_mapTokenizedTextToObject(tokenizedText: TokenizedText) {
-		return tokenizedText.map((token, index) => {
-			return {
-				text: token,
-				last: index === (tokenizedText.length - 1),
-			};
-		});
-	}
-
 	_calcExceededText() {
 		let calcedMaxLength,
 			exceededText,