diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index ee070859fa..8cfda14ba5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/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, diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts index c4c40d5be4..3dc820a374 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts +++ b/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: [ { 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` - + `; }