From f32929929f7f41cfde8737377984c260be948334 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 20 Aug 2024 11:10:53 +0200
Subject: [PATCH] add readonly to property editor

---
 .../property-editor-ui-tiny-mce.element.ts        | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts
index 2be77797cf..a548388d19 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts
@@ -59,6 +59,15 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 		return this._value;
 	}
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	_config?: UmbPropertyEditorConfigCollection;
 
@@ -138,7 +147,11 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 
 	override render() {
 		return html`
-			<umb-input-tiny-mce .configuration=${this._config} .value=${this._markup} @change=${this.#onChange}>
+			<umb-input-tiny-mce
+				.configuration=${this._config}
+				.value=${this._markup}
+				@change=${this.#onChange}
+				?readonly=${this.readonly}>
 			</umb-input-tiny-mce>
 		`;
 	}