From 0b1589e29a0d18b696f284da0fba5e3e8800edfc Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 20 Aug 2024 11:10:32 +0200 Subject: [PATCH 1/3] Update manifests.ts --- .../src/packages/tiny-mce/property-editors/tiny-mce/manifests.ts | 1 + 1 file changed, 1 insertion(+) 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: [ { From f32929929f7f41cfde8737377984c260be948334 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 20 Aug 2024 11:10:53 +0200 Subject: [PATCH 2/3] 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` - + `; } From 598746598a88de08d87ad7692cad9f8806cc7ced Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 20 Aug 2024 11:16:46 +0200 Subject: [PATCH 3/3] pass readonly setting to tiny mce --- .../input-tiny-mce/input-tiny-mce.element.ts | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) 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,