From 4ec0eb8eb101f1be2d39ec5d709440510e18baec Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Fri, 19 May 2023 14:18:22 +1000 Subject: [PATCH] update to use umbdatapropertycollection for configuration adds additional function to data-type-property-collection class for converting to alias-keyed object --- .../data-type-property-collection.class.ts | 22 +++++++++++++++++++ .../input-tiny-mce/input-tiny-mce.element.ts | 11 +++++----- .../property-editor-ui-tiny-mce.element.ts | 12 +++++----- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts b/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts index a4feb809fe..2cb34f38f1 100644 --- a/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts +++ b/src/Umbraco.Web.UI.Client/libs/data-type/data-type-property-collection.class.ts @@ -9,6 +9,10 @@ export class UmbDataTypePropertyCollection extends Array(alias: string): T | undefined { const property = this.getByAlias(alias); @@ -22,4 +26,22 @@ export class UmbDataTypePropertyCollection extends Array 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 { + return Object.fromEntries(this.map(x => [x.alias, x.value])); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts index 11b833fad3..8a2132221b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/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 = []; + 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` diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts index 294f40be0a..c754ed2837 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/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 = []; - @property({ type: Array, attribute: false }) - public config = new UmbDataTypePropertyCollection(); - public set config(config: Array) { - 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``; }