update to use umbdatapropertycollection for configuration

adds additional function to data-type-property-collection class for converting to alias-keyed object

src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts

@@ -9,6 +9,10 @@ export class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresent
 		super(...args);
 	}
 
+	static get [Symbol.species](): ArrayConstructor {
+		return Array;
+	}
+
 	getValueByAlias<T>(alias: string): T | undefined {
 		const property = this.getByAlias(alias);
 
@@ -22,4 +26,22 @@ export class UmbDataTypePropertyCollection extends Array<DataTypePropertyPresent
 	getByAlias(alias: string): DataTypePropertyPresentationModel | undefined {
 		return this.find((x) => x.alias === alias);
 	}
+
+	/**
+	 * Convert the underlying array to an object where 
+	 * the property value is keyed by its alias
+	 * eg 
+	 * `[
+	 *   { 'alias': 'myProperty', 'value': 27 }, 
+	 *   { 'alias': 'anotherProperty', 'value': 'eleven' },
+	 * ]`
+	 * is returned as
+	 * `{ 
+	 *   myProperty: 27,
+	 * 	 anotherProperty: 'eleven',
+	 * }`
+	 */
+	toObject(): Record<string, unknown> {
+		return Object.fromEntries(this.map(x => [x.alias, x.value]));
+	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import tinymce, { AstNode, Editor, EditorEvent } from 'tinymce';
 import { firstValueFrom } from 'rxjs';
-
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import {
 	UmbCurrentUserStore,
 	UMB_CURRENT_USER_STORE_CONTEXT_TOKEN,
@@ -19,7 +19,6 @@ import {
 } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbMediaHelper } from '@umbraco-cms/backoffice/utils';
 import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
-import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { ClassConstructor, hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -27,7 +26,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-input-tiny-mce')
 export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 	@property()
-	configuration: Array<DataTypePropertyPresentationModel> = [];
+	configuration?: UmbDataTypePropertyCollection;
 
 	// TODO => create interface when we know what shape that will take
 	// TinyMCE provides the EditorOptions interface, but all props are required
@@ -123,7 +122,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 		Object.assign(
 			this._configObject,
 			this.#fallbackConfig,
-			this.configuration ? Object.fromEntries(this.configuration.map((x) => [x.alias, x.value])) : {}
+			this.configuration ? this.configuration?.toObject() : {}
 		);
 
 		// no auto resize when a fixed height is set
@@ -315,7 +314,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 		editor.addShortcut('Ctrl+S', '', () =>
 			this.dispatchEvent(new CustomEvent('rte.shortcut.save', { composed: true, bubbles: true }))
 		);
-		
+
 		editor.addShortcut('Ctrl+P', '', () =>
 			this.dispatchEvent(new CustomEvent('rte.shortcut.saveAndPublish', { composed: true, bubbles: true }))
 		);
@@ -446,7 +445,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
 	render() {
 		return html``;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
+import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type';
 
 /**
  * @element umb-property-editor-ui-tiny-mce
@@ -11,16 +11,14 @@ import { UmbDataTypePropertyCollection } from '@umbraco-cms/backoffice/data-type
 @customElement('umb-property-editor-ui-tiny-mce')
 export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
 
+	#configuration?: UmbDataTypePropertyCollection;
 
 	@property({ type: String })
 	value = '';
 
-	configuration: Array<DataTypePropertyPresentationModel> = [];
-
 	@property({ type: Array, attribute: false })
-	public config = new UmbDataTypePropertyCollection();
-	public set config(config: Array<DataTypePropertyPresentationModel>) {
-		this.configuration = config;
+	public set config(config: UmbDataTypePropertyCollection) {
+		this.#configuration = config;
 	}
 
 	#onChange(event: InputEvent) {
@@ -31,7 +29,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 	render() {
 		return html`<umb-input-tiny-mce
 			@change=${this.#onChange}
-			.configuration=${this.configuration}
+			.configuration=${this.#configuration}
 			.value=${this.value}></umb-input-tiny-mce>`;
 	}