Feature: RTE PropertyEditor bug fixes

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,

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`<umb-input-block-type
 					entity-type="block-rte-type"
 					.value=${this.value}
-					@change=${(e: Event) => {
-						this.value = (e.target as UmbInputBlockTypeElement).value;
-					}}></umb-input-block-type>`
+					@create=${this.#onCreate}
+					@change=${this.#onChange}
+					@delete=${this.#onChange}></umb-input-block-type>`
 			: '';
 	}
 }

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`<uui-input
 				type="number"
 				label=${this.localize.term('general_width')}
 				placeholder=${this.localize.term('general_width')}
+				@change=${this.#onChangeWidth}
 				.value=${this.value?.width}></uui-input>
 			x
 			<uui-input
 				type="number"
 				label=${this.localize.term('general_height')}
 				placeholder=${this.localize.term('general_height')}
+				@change=${this.#onChangeHeight}
 				.value=${this.value?.height}></uui-input>
 			pixels`;
 	}

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`<uui-input label="Max size" type="number" placeholder="Max size" .value=${this.value}></uui-input>`;
+		return html`<uui-input
+			label="Max size"
+			type="number"
+			placeholder="Max size"
+			@change=${this.#onChange}
+			.value=${this.value}></uui-input>`;
 	}
 }