Merge branch 'main' into v14/feature/block-area-permissions-display-content-type-name

Author: madsrasmussen

package-lock.json

@@ -143,6 +143,7 @@
 		"./src/packages/property-editors",
 		"./src/packages/tags",
 		"./src/packages/templating",
+		"./src/packages/tiny-mce",
 		"./src/packages/umbraco-news",
 		"./src/packages/user",
 		"./src/packages/webhook"

package.json

@@ -1562,6 +1562,7 @@ export default {
 		ascending: 'ascending',
 		descending: 'descending',
 		template: 'Template',
+		systemFields: 'System fields',
 	},
 	grid: {
 		media: 'Image',

src/assets/lang/en.ts

@@ -14,6 +14,7 @@ import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbId } from '@umbraco-cms/backoffice/id';
 
 export class UmbBlockGridAreaTypeWorkspaceContext
 	extends UmbSubmittableWorkspaceContextBase<UmbBlockGridTypeAreaType>
@@ -43,12 +44,20 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 			{
 				path: 'edit/:id',
 				component: () => import('./block-grid-area-type-workspace-editor.element.js'),
-				setup: (_component, info) => {
+				setup: (component, info) => {
 					const id = info.match.params.id;
-					(_component as any).workspaceAlias = manifest.alias;
+					(component as any).workspaceAlias = manifest.alias;
 					this.load(id);
 				},
 			},
+			{
+				path: 'create',
+				component: () => import('./block-grid-area-type-workspace-editor.element.js'),
+				setup: (component) => {
+					(component as any).workspaceAlias = manifest.alias;
+					this.create();
+				},
+			},
 		]);
 	}
 
@@ -78,17 +87,24 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 	}
 
 	async create() {
-		throw new Error('Method not implemented.');
-		/*
-		//Only set groupKey property if it exists
-		const data: UmbBlockGridTypeAreaType = {
-
+		this.resetState();
+		let data: UmbBlockGridTypeAreaType = {
+			key: UmbId.new(),
+			alias: '',
+			columnSpan: 12,
+			rowSpan: 1,
+			minAllowed: 0,
+			maxAllowed: undefined,
+			specifiedAllowance: [],
+		};
+
+		// If we have a modal context, we blend in the modal preset data: [NL]
+		if (this.modalContext) {
+			data = { ...data, ...this.modalContext.data.preset };
 		}
 
 		this.setIsNew(true);
 		this.#data.setValue(data);
-		return { data };
-		*/
 	}
 
 	getData() {

src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts

@@ -6,11 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-import {
-	UmbPropertyValueChangeEvent,
-	type UmbPropertyEditorConfigCollection,
-} from '@umbraco-cms/backoffice/property-editor';
-import { UmbId } from '@umbraco-cms/backoffice/id';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { incrementString } from '@umbraco-cms/backoffice/utils';
 
@@ -61,7 +57,17 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 		new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL)
 			.addAdditionalPath('block-grid-area-type')
 			.onSetup(() => {
-				return { data: { entityType: 'block-grid-area-type', preset: {} }, modal: { size: 'large' } };
+				if (!this._areaGridColumns) return false;
+				const halfGridColumns = this._areaGridColumns * 0.5;
+				const columnSpan = halfGridColumns === Math.round(halfGridColumns) ? halfGridColumns : this._areaGridColumns;
+
+				return {
+					data: {
+						entityType: 'block-grid-area-type',
+						preset: { columnSpan, alias: this.#generateUniqueAreaAlias('area') },
+					},
+					modal: { size: 'large' },
+				};
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this._workspacePath = routeBuilder({});
@@ -104,29 +110,6 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 		return alias;
 	}
 
-	#addNewArea() {
-		if (!this._areaGridColumns) return;
-		const halfGridColumns = this._areaGridColumns * 0.5;
-		const columnSpan = halfGridColumns === Math.round(halfGridColumns) ? halfGridColumns : this._areaGridColumns;
-
-		this._value = [
-			...this._value,
-			{
-				key: UmbId.new(),
-				alias: this.#generateUniqueAreaAlias('area'),
-				columnSpan: columnSpan,
-				rowSpan: 1,
-				minAllowed: 0,
-				maxAllowed: undefined,
-				specifiedAllowance: [],
-			},
-		];
-		this.requestUpdate('_value');
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-
-		//TODO: open area edit workspace
-	}
-
 	override render() {
 		return this._areaGridColumns
 			? html`${this._styleElement}
@@ -144,7 +127,11 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 									.key=${area.key}></umb-block-area-config-entry>`,
 						)}
 					</div>
-					<uui-button id="add-button" look="placeholder" label=${'Add area'} @click=${this.#addNewArea}></uui-button>`
+					<uui-button
+						id="add-button"
+						look="placeholder"
+						label=${'Add area'}
+						href=${this._workspacePath + 'create'}></uui-button>`
 			: '';
 	}
 }

src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

@@ -112,7 +112,6 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
 
 		this.setIsNew(true);
 		this.#data.setValue(data);
-		return { data };
 	}
 
 	getData() {

src/packages/block/block-type/workspace/block-type-workspace.context.ts

@@ -148,7 +148,7 @@ export class UmbInputEntityElement extends UmbFormControlMixin<string | undefine
 				id="btn-add"
 				look="placeholder"
 				@click=${this.#openPicker}
-				label="${this.localize.term('general_choose')}"></uui-button>
+				label=${this.localize.term('general_choose')}></uui-button>
 		`;
 	}
 

src/packages/core/components/input-entity/input-entity.element.ts

@@ -130,19 +130,22 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					${!this._references.length
-						? html`<uui-button
-								label=${this.localize.term('general_submit')}
-								look="primary"
-								color="positive"
-								@click=${this._submitModal}></uui-button>`
+						? html`
+								<uui-button
+									label=${this.localize.term('general_submit')}
+									look="primary"
+									color="positive"
+									@click=${this._submitModal}></uui-button>
+							`
 						: nothing}
 				</div>
 			</umb-body-layout>
 		`;
 	}
 
 	#renderHasReference() {
-		return html` <umb-localize key="contentTypeEditor_compositionInUse">
+		return html`
+			<umb-localize key="contentTypeEditor_compositionInUse">
 				This Content Type is used in a composition, and therefore cannot be composed itself.
 			</umb-localize>
 			<h4>
@@ -155,19 +158,22 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 				${repeat(
 					this._references,
 					(item) => item.unique,
-					(item) =>
-						html`<uui-ref-node-document-type
+					(item) => html`
+						<uui-ref-node-document-type
 							href=${'/section/settings/workspace/document-type/edit/' + item.unique}
-							name=${item.name}>
+							name=${this.localize.string(item.name)}>
 							<umb-icon slot="icon" name=${item.icon}></umb-icon>
-						</uui-ref-node-document-type>`,
+						</uui-ref-node-document-type>
+					`,
 				)}
-			</div>`;
+			</div>
+		`;
 	}
 
 	#renderAvailableCompositions() {
 		if (this._compatibleCompositions) {
-			return html`<umb-localize key="contentTypeEditor_compositionsDescription">
+			return html`
+				<umb-localize key="contentTypeEditor_compositionsDescription">
 					Inherit tabs and properties from an existing Document Type. New tabs will be<br />added to the current
 					Document Type or merged if a tab with an identical name exists.<br />
 				</umb-localize>
@@ -185,27 +191,31 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 								: nothing}
 							${this.#renderCompositionsItems(folder.compositions)}`,
 					)}
-				</div>`;
+				</div>
+			`;
 		} else {
-			return html`<umb-localize key="contentTypeEditor_noAvailableCompositions">
-				There are no Content Types available to use as a composition
-			</umb-localize>`;
+			return html`
+				<umb-localize key="contentTypeEditor_noAvailableCompositions">
+					There are no Content Types available to use as a composition
+				</umb-localize>
+			`;
 		}
 	}
 
 	#renderCompositionsItems(compositionsList: Array<UmbContentTypeCompositionCompatibleModel>) {
 		return repeat(
 			compositionsList,
 			(compositions) => compositions.unique,
-			(compositions) =>
-				html`<uui-menu-item
-					label=${compositions.name}
+			(compositions) => html`
+				<uui-menu-item
+					label=${this.localize.string(compositions.name)}
 					selectable
 					@selected=${() => this.#onSelectionAdd(compositions.unique)}
 					@deselected=${() => this.#onSelectionRemove(compositions.unique)}
 					?selected=${this._selection.find((unique) => unique === compositions.unique)}>
 					<umb-icon name=${compositions.icon} slot="icon"></umb-icon>
-				</uui-menu-item>`,
+				</uui-menu-item>
+			`,
 		);
 	}
 

src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

@@ -1,7 +1,7 @@
 import type { UmbContentTypeModel, UmbPropertyContainerTypes, UmbPropertyTypeContainerModel } from '../types.js';
 import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbController, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
 /**
@@ -17,6 +17,8 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 
 	#structure?: UmbContentTypeStructureManager<T>;
 
+	#containerObservers: Array<UmbController> = [];
+
 	// State containing the all containers defined in the data:
 	#childContainers = new UmbArrayState<UmbPropertyTypeContainerModel>([], (x) => x.id);
 	readonly containers = this.#childContainers.asObservable();
@@ -150,30 +152,31 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 				this.#parentType,
 			),
 			(containers) => {
-				// We want to remove hasProperties of groups that does not exist anymore.:
-				// this.#removeHasPropertiesOfGroup()
 				this.#hasProperties.setValue([]);
 				this.#childContainers.setValue([]);
+				this.#containerObservers.forEach((x) => x.destroy());
+				this.#containerObservers = [];
 
 				containers.forEach((container) => {
 					this.#observeHasPropertiesOf(container.id);
 
-					this.observe(
-						this.#structure!.containersOfParentId(container.id, this.#childType!),
-						(containers) => {
-							// get the direct owner containers of this container id:
-							this.#ownerChildContainers =
-								this.#structure!.getOwnerContainers(this.#childType!, this.#containerId!) ?? [];
-							// TODO: Maybe check for dif before setting it? Cause currently we are setting it every time one of the containers change. [NL]
-
-							// Remove existing containers that are not the parent of the new containers:
-							this.#childContainers.filter(
-								(x) => x.parent?.id !== container.id || containers.some((y) => y.id === x.id),
-							);
-
-							this.#childContainers.append(containers);
-						},
-						'_observeGroupsOf_' + container.id,
+					this.#containerObservers.push(
+						this.observe(
+							this.#structure!.containersOfParentId(container.id, this.#childType!),
+							(containers) => {
+								// get the direct owner containers of this container id: [NL]
+								this.#ownerChildContainers =
+									this.#structure!.getOwnerContainers(this.#childType!, this.#containerId!) ?? [];
+
+								// Remove existing containers that are not the parent of the new containers: [NL]
+								this.#childContainers.filter(
+									(x) => x.parent?.id !== container.id || containers.some((y) => y.id === x.id),
+								);
+
+								this.#childContainers.append(containers);
+							},
+							'_observeGroupsOf_' + container.id,
+						),
 					);
 				});
 			},