From d0a07b5871a8a2f8d7ffe00694d81c63f5ca7573 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 21 Mar 2024 16:45:35 +0100 Subject: [PATCH] Feature: RTE PropertyEditor bug fixes --- .../input-block-type.element.ts | 1 + ...ui-block-rte-type-configuration.element.ts | 33 +++++++++++++++---- ...ny-mce-dimensions-configuration.element.ts | 13 ++++++++ ...-mce-maximagesize-configuration.element.ts | 14 +++++++- 4 files changed, 54 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index ad408e2314..9eb8494a17 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -10,6 +10,7 @@ import { UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UMB_DOCUMENT_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/document-type'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +/** TODO: Look into sending a "change" event when there is a change, rather than create, delete, and change event. Make sure it doesn't break move for RTE/List/Grid. [LI] */ @customElement('umb-input-block-type') export class UmbInputBlockTypeElement< BlockType extends UmbBlockTypeWithGroupKey = UmbBlockTypeWithGroupKey, diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.ts index 8014b2e4fc..2d97509a77 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.ts @@ -1,8 +1,11 @@ import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type'; import { UmbInputBlockTypeElement } from '@umbraco-cms/backoffice/block-type'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { + UmbPropertyValueChangeEvent, + type UmbPropertyEditorConfigCollection, +} from '@umbraco-cms/backoffice/property-editor'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; /** @@ -14,19 +17,37 @@ export class UmbPropertyEditorUIBlockRteBlockConfigurationElement implements UmbPropertyEditorUiElement { @property({ attribute: false }) - value: UmbBlockTypeBaseModel[] = []; + public set value(value: UmbBlockTypeBaseModel[]) { + this._value = value ?? []; + } + public get value() { + return this._value; + } + + @state() + private _value: UmbBlockTypeBaseModel[] = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; + #onCreate(e: CustomEvent) { + const key = e.detail.contentElementTypeKey; + this.value = [...this._value, { contentElementTypeKey: key, forceHideContentEditorInOverlay: false }]; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + #onChange(e: CustomEvent) { + this.value = (e.target as UmbInputBlockTypeElement).value; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + render() { return UmbInputBlockTypeElement ? html` { - this.value = (e.target as UmbInputBlockTypeElement).value; - }}>` + @create=${this.#onCreate} + @change=${this.#onChange} + @delete=${this.#onChange}>` : ''; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts index 11a40ab8bb..d79c3c576c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.ts @@ -1,6 +1,8 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; /** * @element umb-property-editor-ui-tiny-mce-dimensions-configuration @@ -10,17 +12,28 @@ export class UmbPropertyEditorUITinyMceDimensionsConfigurationElement extends Um @property({ type: Object }) value: { width?: number; height?: number } = {}; + #onChangeWidth(e: UUIInputEvent) { + this.value = { ...this.value, width: Number(e.target.value as string) }; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + #onChangeHeight(e: UUIInputEvent) { + this.value = { ...this.value, height: Number(e.target.value as string) }; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + render() { return html` x pixels`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts index cc4ce9bf4e..f3631ea2a6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.ts @@ -1,6 +1,8 @@ import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; /** * @element umb-property-editor-ui-tiny-mce-maximagesize-configuration @@ -13,8 +15,18 @@ export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement @property({ type: Number }) value: number = 0; + #onChange(e: UUIInputEvent) { + this.value = Number(e.target.value as string); + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + render() { - return html``; + return html``; } }