Tiptap RTE: Toolbar/statusbar config initial value state (#19514)

Tiptap configuration waits until initialized to set value

Fixes #19009

Author: leekelleher

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-statusbar-configuration.element.ts

@@ -20,6 +20,8 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 		this._availableExtensions = this.#context.filterExtensions(query);
 	}, 250);
 
+	#initialized = false;
+
 	@state()
 	private _availableExtensions: Array<UmbTiptapStatusbarExtension> = [];
 
@@ -33,6 +35,7 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 		this.#value = value;
 	}
 	get value(): UmbTiptapStatusbarValue | undefined {
+		if (this.#value === undefined) return undefined;
 		return this.#context.cloneStatusbarValue(this.#value);
 	}
 	#value?: UmbTiptapStatusbarValue;
@@ -54,14 +57,17 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 			this.observe(this.#context.statusbar, (statusbar) => {
 				if (!statusbar.length) return;
 				this._statusbar = statusbar;
-				this.#value = statusbar.map((area) => [...area.data]);
-				propertyContext?.setValue(this.#value);
+				if (this.#initialized) {
+					this.#value = statusbar.map((area) => [...area.data]);
+					propertyContext?.setValue(this.#value);
+				}
 			});
 		});
 	}
 
 	protected override firstUpdated() {
 		this.#context.setStatusbar(this.#value);
+		this.#initialized = true;
 	}
 
 	#onClick(item: UmbTiptapStatusbarExtension) {

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts

@@ -24,6 +24,8 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 		this._availableExtensions = this.#context.filterExtensions(query);
 	}, 250);
 
+	#initialized = false;
+
 	@state()
 	private _availableExtensions: Array<UmbTiptapToolbarExtension> = [];
 
@@ -37,6 +39,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 		this.#value = this.#context.isValidToolbarValue(value) ? value : [[[]]];
 	}
 	get value(): UmbTiptapToolbarValue | undefined {
+		if (this.#value === undefined) return undefined;
 		return this.#context.cloneToolbarValue(this.#value);
 	}
 	#value?: UmbTiptapToolbarValue;
@@ -58,14 +61,17 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 			this.observe(this.#context.toolbar, (toolbar) => {
 				if (!toolbar.length) return;
 				this._toolbar = toolbar;
-				this.#value = toolbar.map((rows) => rows.data.map((groups) => [...groups.data]));
-				propertyContext?.setValue(this.#value);
+				if (this.#initialized) {
+					this.#value = toolbar.map((rows) => rows.data.map((groups) => [...groups.data]));
+					propertyContext?.setValue(this.#value);
+				}
 			});
 		});
 	}
 
 	protected override firstUpdated() {
 		this.#context.setToolbar(this.value);
+		this.#initialized = true;
 	}
 
 	#onClick(item: UmbTiptapToolbarExtension) {