Merge pull request #2223 from umbraco/v14/feature/readonly-tiny-mce

Feature: Readonly mode for Tiny MCE Property Editor UI

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -75,6 +75,24 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '
 		return super.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 })
+	public get readonly() {
+		return this.#readonly;
+	}
+	public set readonly(value) {
+		this.#readonly = value;
+		const editor = this.getEditor();
+		const mode = value ? 'readonly' : 'design';
+		editor?.mode.set(mode);
+	}
+	#readonly = false;
+
 	@query('.editor', true)
 	private _editorElement?: HTMLElement;
 
@@ -84,7 +102,6 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '
 
 	constructor() {
 		super();
-
 		this.#loadEditor();
 	}
 
@@ -246,6 +263,7 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '
 			language: this.#getLanguage(),
 			promotion: false,
 			convert_unsafe_embeds: true, // [JOV] Workaround for CVE-2024-29881
+			readonly: this.#readonly,
 
 			// Extend with configuration options
 			...configurationOptions,

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts

@@ -14,6 +14,7 @@ const manifest: ManifestPropertyEditorUi = {
 		propertyEditorSchemaAlias: UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS,
 		icon: 'icon-browser-window',
 		group: 'richContent',
+		supportsReadOnly: true,
 		settings: {
 			properties: [
 				{

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>
 		`;
 	}