propagate data changes

Author: nielslyngsoe

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

@@ -1,15 +1,15 @@
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
+import { UMB_BLOCK_GRID_AREA_TYPE_ENTRIES_CONTEXT } from '../../property-editors/block-grid-areas-config/block-grid-area-type-entries.context-token.js';
 import {
 	UmbBlockGridScaleManager,
 	type UmbBlockGridScalableContext,
 } from '../../context/block-grid-scale-manager/block-grid-scale-manager.controller.js';
-import { UMB_BLOCK_GRID_AREA_TYPE_ENTRIES_CONTEXT } from '../../property-editors/block-grid-areas-config/block-grid-area-type-entries.context-token.js';
 import { UMB_BLOCK_GRID_AREA_CONFIG_ENTRY_CONTEXT } from './block-grid-area-config-entry.context-token.js';
 import type { UmbBlockGridTypeAreaType } from '@umbraco-cms/backoffice/block-grid';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
-import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 export class UmbBlockGridAreaConfigEntryContext
 	extends UmbContextBase<UmbBlockGridAreaConfigEntryContext>
 	implements UmbBlockGridScalableContext
@@ -21,6 +21,7 @@ export class UmbBlockGridAreaConfigEntryContext
 	//
 	#areaKey?: string;
 	#area = new UmbObjectState<UmbBlockGridTypeAreaType | undefined>(undefined);
+	readonly area = this.#area.asObservable();
 	readonly alias = this.#area.asObservablePart((x) => x?.alias);
 	readonly columnSpan = this.#area.asObservablePart((x) => x?.columnSpan);
 	readonly rowSpan = this.#area.asObservablePart((x) => x?.rowSpan ?? 1);
@@ -85,7 +86,19 @@ export class UmbBlockGridAreaConfigEntryContext
 					this.#area.setValue(areaType);
 				}
 			},
-			'observeAreaKey',
+			'observeAreaData',
+		);
+		this.observe(
+			this.area,
+			(area) => {
+				if (area && this.#propertyContext) {
+					const value = this.#propertyContext.getValue() as Array<UmbBlockGridTypeAreaType> | undefined;
+					if (!value) return;
+					const newValue = appendToFrozenArray(value, area, (x) => x.key === this.#areaKey);
+					this.#propertyContext?.setValue(newValue);
+				}
+			},
+			'observeInternalArea',
 		);
 	}