@umbraco-cms/backoffice 14.0.0--preview004-5857d7ce → 14.0.0--preview004-5d4a08ee

package/dist-cms/custom-elements.json

@@ -1759,22 +1759,7 @@
     {
       "name": "umb-property-editor-config",
       "path": "./../src/packages/core/components/property-editor-config/property-editor-config.element.ts",
-      "attributes": [
-        {
-          "name": "data",
-          "description": "Data. The element will render configuration editors with values from this data.\nIf a value is not found in this data, the element will use the default value from the configuration.",
-          "type": "Array<{ alias: string; value: unknown }>",
-          "default": "\"[]\""
-        }
-      ],
       "properties": [
-        {
-          "name": "data",
-          "attribute": "data",
-          "description": "Data. The element will render configuration editors with values from this data.\nIf a value is not found in this data, the element will use the default value from the configuration.",
-          "type": "Array<{ alias: string; value: unknown }>",
-          "default": "\"[]\""
-        },
         {
           "name": "styles",
           "type": "array",

package/dist-cms/packages/core/components/property-editor-config/property-editor-config.element.d.ts

@@ -6,20 +6,9 @@ import { UmbLitElement } from '../../../../shared/lit-element/index.js';
  */
 export declare class UmbPropertyEditorConfigElement extends UmbLitElement {
     #private;
-    /**
-     * Data. The element will render configuration editors with values from this data.
-     * If a value is not found in this data, the element will use the default value from the configuration.
-     * @type {Array<{ alias: string; value: unknown }>}
-     * @attr
-     * @default []
-     */
-    data: Array<{
-        alias: string;
-        value: unknown;
-    }>;
     private _properties;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): unknown;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }
 export default UmbPropertyEditorConfigElement;

package/dist-cms/packages/core/components/property-editor-config/property-editor-config.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, state, ifDefined } from '../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../shared/style/index.js";
+import { html, customElement, state, ifDefined, repeat } from '../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '../../../settings/data-types/index.js';
 /**
@@ -18,43 +18,31 @@ export let UmbPropertyEditorConfigElement = class UmbPropertyEditorConfigElement
     #variantContext;
     constructor() {
         super();
-        /**
-         * Data. The element will render configuration editors with values from this data.
-         * If a value is not found in this data, the element will use the default value from the configuration.
-         * @type {Array<{ alias: string; value: unknown }>}
-         * @attr
-         * @default []
-         */
-        this.data = [];
         this._properties = [];
         this.consumeContext(UMB_DATA_TYPE_VARIANT_CONTEXT, (instance) => {
             this.#variantContext = instance;
-            this.observe(this.#variantContext.properties, (properties) => {
-                this._properties = properties;
-            }, 'observeProperties');
+            this.#observeProperties();
         });
     }
+    #observeProperties() {
+        if (!this.#variantContext)
+            return;
+        this.observe(this.#variantContext.properties, (properties) => {
+            this._properties = properties;
+        }, 'observeProperties');
+    }
     render() {
-        return html `
-			${this._properties.length > 0
-            ? html `
-						${this._properties?.map((property) => html `
-								<umb-workspace-property
-									label="${property.label}"
-									description="${ifDefined(property.description)}"
-									alias="${property.alias}"
-									property-editor-ui-alias="${property.propertyEditorUiAlias}"
-									.config=${property.config}></umb-workspace-property>
-							`)}
-				  `
-            : html `<div>No configuration</div>`}
-		`;
+        return this._properties.length > 0
+            ? repeat(this._properties, (property) => property.alias, (property) => html `<umb-workspace-property
+							label="${property.label}"
+							description="${ifDefined(property.description)}"
+							alias="${property.alias}"
+							property-editor-ui-alias="${property.propertyEditorUiAlias}"
+							.config=${property.config}></umb-workspace-property>`)
+            : html `<div>No configuration</div>`;
     }
     static { this.styles = [UmbTextStyles]; }
 };
-__decorate([
-    property({ type: Array })
-], UmbPropertyEditorConfigElement.prototype, "data", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorConfigElement.prototype, "_properties", void 0);

package/dist-cms/packages/core/modal/common/code-editor/code-editor-modal.element.js

@@ -17,7 +17,7 @@ export let UmbCodeEditorModalElement = class UmbCodeEditorModalElement extends U
         this.#loadCodeEditor();
     }
     #handleConfirm() {
-        this.modalContext?.submit({ content: this.data?.content ?? '' });
+        this.modalContext?.submit({ content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' });
     }
     #handleCancel() {
         this.modalContext?.reject();
@@ -31,19 +31,10 @@ export let UmbCodeEditorModalElement = class UmbCodeEditorModalElement extends U
             console.error(error);
         }
     }
-    // TODO => debounce?
-    #onCodeEditorInput(e) {
-        e.preventDefault();
-        if (!this.data) {
-            return;
-        }
-        this.data.content = this._codeEditor?.code ?? '';
-    }
     #renderCodeEditor() {
         return html `<umb-code-editor
 			language=${ifDefined(this.data?.language)}
-			.code=${this.data?.content ?? ''}
-			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+			.code=${this.data?.content ?? ''}></umb-code-editor>`;
     }
     #renderLoading() {
         return html `<div id="loader-container">

package/dist-cms/packages/core/property-editor/schemas/Umbraco.CheckboxList.js

@@ -1,7 +1,7 @@
 export const manifest = {
     type: 'propertyEditorSchema',
     name: 'Checkbox List',
-    alias: 'Umbraco.CheckboxList',
+    alias: 'Umbraco.CheckBoxList',
     meta: {
         defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.CheckboxList',
     },

package/dist-cms/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.js

@@ -42,27 +42,25 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
             data.text = ' ';
         }
         if (!this.#anchorElement) {
-            this.#openLinkPicker();
+            this.#openLinkPicker({ name: this.editor.selection.getContent() });
             return;
         }
         //if we already have a link selected, we want to pass that data over to the dialog
         const currentTarget = {
-            name: this.#anchorElement.title,
-            url: this.#anchorElement.getAttribute('href') ?? '',
+            name: this.#anchorElement.title || this.#anchorElement.textContent,
             target: this.#anchorElement.target,
+            queryString: `${this.#anchorElement.search}${this.#anchorElement.hash}`,
         };
-        // drop the lead char from the anchor text, if it has a value
-        const anchorVal = this.#anchorElement.dataset.anchor;
-        if (anchorVal) {
-            currentTarget.queryString = anchorVal.substring(1);
+        if (this.#anchorElement.href.includes('localLink:')) {
+            const href = this.#anchorElement.getAttribute('href');
+            currentTarget.udi = href.split('localLink:')[1].slice(0, -1);
         }
-        if (currentTarget.url?.includes('localLink:')) {
-            currentTarget.udi =
-                currentTarget.url?.substring(currentTarget.url.indexOf(':') + 1, currentTarget.url.lastIndexOf('}')) ?? '';
+        else if (this.#anchorElement.host.length) {
+            currentTarget.url = this.#anchorElement.protocol ? this.#anchorElement.protocol + '//' : undefined;
+            currentTarget.url += this.#anchorElement.host + this.#anchorElement.pathname;
         }
         this.#openLinkPicker(currentTarget);
     }
-    // TODO => get anchors to provide to link picker?
     async #openLinkPicker(currentTarget) {
         const modalHandler = this.#modalContext?.open(UMB_LINK_PICKER_MODAL, {
             config: {
@@ -73,7 +71,7 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
         });
         if (!modalHandler)
             return;
-        const linkPickerData = await modalHandler.onSubmit();
+        const linkPickerData = await modalHandler.onSubmit().catch(() => undefined);
         if (!linkPickerData)
             return;
         this.#linkPickerData = linkPickerData;
@@ -82,12 +80,17 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
     //Create a json obj used to create the attributes for the tag
     // TODO => where has rel gone?
     #createElemAttributes() {
-        const a = Object.assign({}, this.#linkPickerData?.link, { 'data-anchor': null });
+        // Attribute 'name' because of linkPickerData. It should be 'title' .
+        const { name, ...linkPickerData } = this.#linkPickerData.link;
+        const a = Object.assign({}, linkPickerData);
         // always need to map back to href for tinymce to render correctly
         // do this first as checking querystring below may modify the href property
         if (this.#linkPickerData?.link.url) {
             a.href = this.#linkPickerData.link.url;
         }
+        if (this.#linkPickerData?.link.name) {
+            a.title = name;
+        }
         if (this.#linkPickerData?.link.queryString?.startsWith('#')) {
             a['data-anchor'] = this.#linkPickerData?.link.queryString;
             a.href += this.#linkPickerData?.link.queryString;
@@ -136,7 +139,7 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
                 this.#linkPickerData.link.queryString = urlParts[1] + urlParts[2];
             }
         }
-        if (!this.#linkPickerData?.link.url && !this.#linkPickerData?.link.queryString) {
+        if (!this.#linkPickerData?.link.url && !this.#linkPickerData?.link.queryString && !this.#linkPickerData?.link.udi) {
             this.editor.execCommand('unlink');
             return;
         }

package/dist-cms/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { html, customElement, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**

package/dist-cms/packages/settings/data-types/workspace/data-type-workspace.context.d.ts

@@ -16,12 +16,15 @@ export declare class UmbDataTypeWorkspaceContext extends UmbWorkspaceContext<Umb
     properties: Observable<Array<PropertyEditorConfigProperty> | undefined>;
     private _propertyEditorSchemaConfigDefaultData;
     private _propertyEditorUISettingsDefaultData;
-    private _propertyEditorSchemaConfigProperties?;
-    private _propertyEditorUISettingsProperties?;
+    private _propertyEditorSchemaConfigProperties;
+    private _propertyEditorUISettingsProperties;
+    private _propertyEditorSchemaConfigDefaultUIAlias;
     private _configDefaultData?;
+    private _propertyEditorUISettingsSchemaAlias?;
     defaults: Observable<PropertyEditorConfigDefaultData[]>;
+    propertyEditorUiIcon: Observable<string | null>;
+    propertyEditorUiName: Observable<string | null>;
     constructor(host: UmbControllerHostElement);
-    private _observePropertyEditorSchemaConfig;
     private _mergeConfigProperties;
     private _mergeConfigDefaultData;
     getPropertyDefaultValue(alias: string): unknown;

package/dist-cms/packages/settings/data-types/workspace/data-type-workspace.context.js

@@ -1,10 +1,10 @@
 import { UmbDataTypeRepository } from '../repository/data-type.repository.js';
 import { UmbDataTypeVariantContext } from '../variant-context/data-type-variant-context.js';
-import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
-import { appendToFrozenArray, UmbArrayState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbWorkspaceContext, } from '../../../core/workspace/index.js';
+import { appendToFrozenArray, UmbArrayState, UmbObjectState, UmbStringState, } from '../../../../libs/observable-api/index.js';
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
 import { combineLatest, map } from '../../../../external/rxjs/index.js';
-import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
+import { umbExtensionsRegistry, } from '../../../core/extension-registry/index.js';
 import { UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT } from '../../../core/property-editor/index.js';
 export class UmbDataTypeWorkspaceContext extends UmbWorkspaceContext {
     // TODO: revisit. temp solution because the create and response models are different.
@@ -12,6 +12,8 @@ export class UmbDataTypeWorkspaceContext extends UmbWorkspaceContext {
     #getDataPromise;
     #properties;
     #defaults;
+    #propertyEditorUiIcon;
+    #propertyEditorUiName;
     constructor(host) {
         super(host, 'Umb.Workspace.DataType', new UmbDataTypeRepository(host));
         // TODO: revisit. temp solution because the create and response models are different.
@@ -25,38 +27,69 @@ export class UmbDataTypeWorkspaceContext extends UmbWorkspaceContext {
         this.properties = this.#properties.asObservable();
         this._propertyEditorSchemaConfigDefaultData = [];
         this._propertyEditorUISettingsDefaultData = [];
+        this._propertyEditorSchemaConfigProperties = [];
+        this._propertyEditorUISettingsProperties = [];
+        this._propertyEditorSchemaConfigDefaultUIAlias = null;
         this.#defaults = new UmbArrayState([], (entry) => entry.alias);
         this.defaults = this.#defaults.asObservable();
-        this.observe(this.propertyEditorUiAlias, (propertyEditorUiAlias) => {
-            if (!propertyEditorUiAlias) {
-                // No property editor ui alias, so we clean up and reset the properties.
-                this.removeControllerByAlias('propertyEditorUiAlias');
-                this._propertyEditorUISettingsProperties = [];
-                this._propertyEditorUISettingsDefaultData = [];
-                this._mergeConfigProperties();
-                this._mergeConfigDefaultData();
+        this.#propertyEditorUiIcon = new UmbStringState(null);
+        this.propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable();
+        this.#propertyEditorUiName = new UmbStringState(null);
+        this.propertyEditorUiName = this.#propertyEditorUiName.asObservable();
+        this.#observePropertyEditorUIAlias();
+    }
+    #observePropertyEditorUIAlias() {
+        this.observe(this.propertyEditorUiAlias, async (propertyEditorUiAlias) => {
+            // we only want to react on the change if the alias is set or null. When it is undefined something is still loading
+            if (propertyEditorUiAlias === undefined)
                 return;
+            // if the property editor ui alias is not set, we use the default alias from the schema
+            if (propertyEditorUiAlias === null) {
+                await this.#observePropertyEditorSchemaAlias();
+                this.setPropertyEditorUiAlias(this._propertyEditorSchemaConfigDefaultUIAlias);
             }
-            this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUiAlias), (manifest) => {
-                this._observePropertyEditorSchemaConfig(manifest?.meta.propertyEditorSchemaAlias || UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT);
-                this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || [];
-                this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || [];
-                this._mergeConfigProperties();
-                this._mergeConfigDefaultData();
-            }, 'observePropertyEditorUiAlias');
+            else {
+                await this.#setPropertyEditorUIConfig(propertyEditorUiAlias);
+                this.setPropertyEditorSchemaAlias(this._propertyEditorUISettingsSchemaAlias);
+                await this.#observePropertyEditorSchemaAlias();
+            }
+            this._mergeConfigProperties();
+            this._mergeConfigDefaultData();
         });
     }
-    _observePropertyEditorSchemaConfig(propertyEditorSchemaAlias) {
-        this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias), (manifest) => {
+    #observePropertyEditorSchemaAlias() {
+        return this.observe(this.propertyEditorSchemaAlias, async (propertyEditorSchemaAlias) => {
+            if (!propertyEditorSchemaAlias) {
+                this.setPropertyEditorSchemaAlias(UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT);
+                return;
+            }
+            await this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias);
+        }).asPromise();
+    }
+    #setPropertyEditorSchemaConfig(propertyEditorSchemaAlias) {
+        return this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias), (manifest) => {
             this._propertyEditorSchemaConfigProperties = manifest?.meta.settings?.properties || [];
             this._propertyEditorSchemaConfigDefaultData = manifest?.meta.settings?.defaultData || [];
-            this._mergeConfigProperties();
-            this._mergeConfigDefaultData();
-        });
+            this._propertyEditorSchemaConfigDefaultUIAlias = manifest?.meta.defaultPropertyEditorUiAlias || null;
+        }).asPromise();
+    }
+    #setPropertyEditorUIConfig(propertyEditorUIAlias) {
+        return this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUIAlias), (manifest) => {
+            this.#propertyEditorUiIcon.next(manifest?.meta.icon || null);
+            this.#propertyEditorUiName.next(manifest?.name || null);
+            this._propertyEditorUISettingsSchemaAlias = manifest?.meta.propertyEditorSchemaAlias;
+            this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || [];
+            this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || [];
+        }).asPromise();
     }
     _mergeConfigProperties() {
+        console.log('schema properties', this._propertyEditorSchemaConfigProperties);
+        console.log('ui properties', this._propertyEditorUISettingsProperties);
         if (this._propertyEditorSchemaConfigProperties && this._propertyEditorUISettingsProperties) {
-            this.#properties.next([...this._propertyEditorSchemaConfigProperties, ...this._propertyEditorUISettingsProperties]);
+            this.#properties.next([
+                ...this._propertyEditorSchemaConfigProperties,
+                ...this._propertyEditorUISettingsProperties,
+            ]);
         }
     }
     _mergeConfigDefaultData() {
@@ -122,12 +155,13 @@ export class UmbDataTypeWorkspaceContext extends UmbWorkspaceContext {
             this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value),
             this.#defaults.asObservablePart((defaults) => defaults?.find((x) => x.alias === propertyAlias)?.value),
         ]).pipe(map(([value, defaultValue]) => {
-            return (value ?? defaultValue);
+            return value ?? defaultValue;
         }));
         //return this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value ?? this.getPropertyDefaultValue(propertyAlias) as ReturnType);
     }
     getPropertyValue(propertyAlias) {
-        return this.#data.getValue()?.values?.find((x) => x.alias === propertyAlias)?.value ?? this.getPropertyDefaultValue(propertyAlias);
+        return (this.#data.getValue()?.values?.find((x) => x.alias === propertyAlias)?.value ??
+            this.getPropertyDefaultValue(propertyAlias));
     }
     // TODO: its not called a property in the model, but we do consider this way in our front-end
     async setPropertyValue(alias, value) {

package/dist-cms/packages/settings/data-types/workspace/data-type-workspace.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbDataTypeWorkspaceContext } from './data-type-workspace.context.js';
-import { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { html, customElement } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import './data-type-workspace-editor.element.js';

package/dist-cms/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.d.ts

@@ -2,23 +2,18 @@ import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import type { DataTypeResponseModel } from '../../../../../../external/backend-api/index.js';
 import { UmbWorkspaceEditorViewExtensionElement } from '../../../../../core/extension-registry/index.js';
 export declare class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceEditorViewExtensionElement {
+    #private;
     _dataType?: DataTypeResponseModel;
     private _propertyEditorUiIcon?;
     private _propertyEditorUiName?;
     private _propertyEditorUiAlias?;
     private _propertyEditorSchemaAlias?;
-    private _data;
     private _workspaceContext?;
     private _modalContext?;
     constructor();
     private _observeDataType;
-    private _setPropertyEditorUiAlias;
-    private _observePropertyEditorUI;
     private _openPropertyEditorUIPicker;
-    private _selectPropertyEditorUI;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderPropertyEditorUI;
-    private _renderConfig;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbDataTypeDetailsWorkspaceViewEditElement;

package/dist-cms/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.js

@@ -5,15 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context.js';
-import { UmbTextStyles } from "../../../../../../shared/style/index.js";
-import { css, html, nothing, customElement, state } from '../../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../../shared/style/index.js';
+import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, } from '../../../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
-import { umbExtensionsRegistry, } from '../../../../../core/extension-registry/index.js';
 export let UmbDataTypeDetailsWorkspaceViewEditElement = class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
     constructor() {
         super();
-        this._data = [];
+        this._propertyEditorUiIcon = null;
+        this._propertyEditorUiName = null;
+        this._propertyEditorUiAlias = null;
+        this._propertyEditorSchemaAlias = null;
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
             this._modalContext = instance;
         });
@@ -27,78 +29,37 @@ export let UmbDataTypeDetailsWorkspaceViewEditElement = class UmbDataTypeDetails
             return;
         }
         this.observe(this._workspaceContext.data, (dataType) => {
-            if (!dataType)
-                return;
-            // TODO: handle if model is not of the type wanted.
             this._dataType = dataType;
-            if (!this._dataType.propertyEditorUiAlias) {
-                if (this._dataType.propertyEditorAlias) {
-                    // Get the property editor UI alias from the property editor alias:
-                    this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', this._dataType.propertyEditorAlias), (propertyEditorSchema) => {
-                        // TODO: show error. We have stored a propertyEditorSchemaAlias and can't find the PropertyEditorSchema in the registry.
-                        if (!propertyEditorSchema)
-                            return;
-                        this._setPropertyEditorUiAlias(propertyEditorSchema.meta.defaultPropertyEditorUiAlias ?? undefined);
-                    }, '_observePropertyEditorSchemaForDefaultUI');
-                }
-                else {
-                    this._setPropertyEditorUiAlias(undefined);
-                }
-            }
-            else {
-                this._setPropertyEditorUiAlias(this._dataType.propertyEditorUiAlias);
-            }
-            if (this._dataType.values && this._dataType.values !== this._data) {
-                this._data = this._dataType.values;
-            }
         });
-    }
-    _setPropertyEditorUiAlias(value) {
-        const oldValue = this._propertyEditorUiAlias;
-        if (oldValue !== value) {
+        this.observe(this._workspaceContext.propertyEditorUiAlias, (value) => {
             this._propertyEditorUiAlias = value;
-            this._observePropertyEditorUI(value || undefined);
-        }
-    }
-    _observePropertyEditorUI(propertyEditorUiAlias) {
-        if (!propertyEditorUiAlias) {
-            this._propertyEditorUiName = this._propertyEditorUiIcon = this._propertyEditorUiAlias = undefined;
-            this.removeControllerByAlias('_observePropertyEditorUI');
-            return;
-        }
-        // remove the '_observePropertyEditorSchemaForDefaultUI' controller, as we do not want to observe for default value anymore:
-        this.removeControllerByAlias('_observePropertyEditorSchemaForDefaultUI');
-        this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUiAlias), (propertyEditorUI) => {
-            // TODO: show error. We have stored a PropertyEditorUIAlias and can't find the PropertyEditorUI in the registry.
-            if (!propertyEditorUI)
-                return;
-            this._propertyEditorUiName = propertyEditorUI?.meta.label ?? propertyEditorUI?.name ?? '';
-            this._propertyEditorUiAlias = propertyEditorUI?.alias ?? '';
-            this._propertyEditorUiIcon = propertyEditorUI?.meta.icon ?? '';
-            this._propertyEditorSchemaAlias = propertyEditorUI?.meta.propertyEditorSchemaAlias ?? '';
-            this._workspaceContext?.setPropertyEditorSchemaAlias(this._propertyEditorSchemaAlias);
-        }, '_observePropertyEditorUI');
+        });
+        this.observe(this._workspaceContext.propertyEditorSchemaAlias, (value) => {
+            this._propertyEditorSchemaAlias = value;
+        });
+        this.observe(this._workspaceContext.propertyEditorUiName, (value) => {
+            this._propertyEditorUiName = value;
+        });
+        this.observe(this._workspaceContext.propertyEditorUiIcon, (value) => {
+            this._propertyEditorUiIcon = value;
+        });
     }
     _openPropertyEditorUIPicker() {
-        if (!this._dataType)
-            return;
         const modalContext = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, {
             selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
         });
         modalContext?.onSubmit().then(({ selection }) => {
-            this._selectPropertyEditorUI(selection[0]);
+            this._workspaceContext?.setPropertyEditorUiAlias(selection[0]);
         });
     }
-    _selectPropertyEditorUI(propertyEditorUiAlias) {
-        this._workspaceContext?.setPropertyEditorUiAlias(propertyEditorUiAlias);
-    }
     render() {
         return html `
-			<uui-box> ${this._renderPropertyEditorUI()} </uui-box>
-			${this._renderConfig()} </uui-box>
+			<uui-box> ${this.#renderPropertyEditorReference()} </uui-box>
+			${this.#renderPropertyEditorConfig()} </uui-box>
 		`;
     }
-    _renderPropertyEditorUI() {
+    #renderPropertyEditorReference() {
+        console.log(this._dataType);
         return html `
 			<umb-workspace-property-layout label="Property Editor" description="Select a property editor">
 				${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
@@ -129,18 +90,10 @@ export let UmbDataTypeDetailsWorkspaceViewEditElement = class UmbDataTypeDetails
 			</umb-workspace-property-layout>
 		`;
     }
-    _renderConfig() {
-        return html `
-			${this._propertyEditorSchemaAlias && this._propertyEditorUiAlias
-            ? html `
-						<uui-box headline="Settings">
-							<umb-property-editor-config
-								property-editor-ui-alias="${this._propertyEditorUiAlias}"
-								.data="${this._data}"></umb-property-editor-config>
-						</uui-box>
-				  `
-            : nothing}
-		`;
+    #renderPropertyEditorConfig() {
+        return html `<uui-box headline="Settings">
+			<umb-property-editor-config></umb-property-editor-config>
+		</uui-box> `;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -172,9 +125,6 @@ __decorate([
 __decorate([
     state()
 ], UmbDataTypeDetailsWorkspaceViewEditElement.prototype, "_propertyEditorSchemaAlias", void 0);
-__decorate([
-    state()
-], UmbDataTypeDetailsWorkspaceViewEditElement.prototype, "_data", void 0);
 UmbDataTypeDetailsWorkspaceViewEditElement = __decorate([
     customElement('umb-data-type-details-workspace-view')
 ], UmbDataTypeDetailsWorkspaceViewEditElement);