From c5340c186b4d948daebcf2a7a75d9650c7ef2879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 6 Nov 2024 13:42:45 +0100
Subject: [PATCH] give block workspace origin data to work from

---
 .../block-grid-block-inline.element.ts        | 15 ++++++
 .../context/block-grid-entries.context.ts     | 21 +++++++-
 .../workspace/block-workspace.context.ts      | 52 ++++++++-----------
 3 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 0145768cc8..38a103f3a2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -1,4 +1,6 @@
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
+import type { UmbBlockGridWorkspaceOriginData } from '../../workspace/block-grid-workspace.modal-token.js';
+import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
@@ -32,6 +34,8 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	#blockContext?: typeof UMB_BLOCK_GRID_ENTRY_CONTEXT.TYPE;
 	#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 	#contentKey?: string;
+	#parentUnique?: string | null;
+	#areaKey?: string | null;
 
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;
@@ -71,6 +75,10 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 				'observeContentKey',
 			);
 		});
+		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (entriesContext) => {
+			this.#parentUnique = entriesContext.getParentUnique();
+			this.#areaKey = entriesContext.getAreaKey();
+		});
 		new UmbExtensionApiInitializer(
 			this,
 			umbExtensionsRegistry,
@@ -79,7 +87,14 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			(permitted, ctrl) => {
 				const context = ctrl.api as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 				if (permitted && context) {
+					if (this.#parentUnique === undefined || this.#areaKey === undefined) {
+						throw new Error('Parent unique and area key must be defined');
+					}
 					this.#workspaceContext = context;
+					context.setOriginData({
+						areaKey: this.#areaKey,
+						parentUnique: this.#parentUnique,
+					} as UmbBlockGridWorkspaceOriginData);
 					this.#workspaceContext.establishLiveSync();
 
 					this.#load();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
index b69f1a2853..1850c2dd14 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts
@@ -99,6 +99,10 @@ export class UmbBlockGridEntriesContext
 		this.#catalogueModal.setUniquePathValue('parentUnique', pathFolderName(contentKey ?? 'null'));
 	}
 
+	getParentUnique(): string | null | undefined {
+		return this.#parentUnique;
+	}
+
 	setAreaKey(areaKey: string | null) {
 		this.#areaKey = areaKey;
 		this.#workspaceModal.setUniquePathValue('areaKey', areaKey ?? 'null');
@@ -110,6 +114,10 @@ export class UmbBlockGridEntriesContext
 		// If not, we want to set the layoutDataPath to a base one.
 	}
 
+	getAreaKey(): string | null | undefined {
+		return this.#areaKey;
+	}
+
 	setLayoutColumns(columns: number | undefined) {
 		this.#layoutColumns.setValue(columns);
 	}
@@ -157,7 +165,11 @@ export class UmbBlockGridEntriesContext
 						blocks: this.#allowedBlockTypes.getValue(),
 						blockGroups: this._manager.getBlockGroups() ?? [],
 						openClipboard: routingInfo.view === 'clipboard',
-						originData: { index: index, areaKey: this.#areaKey, parentUnique: this.#parentUnique },
+						originData: {
+							index: index,
+							areaKey: this.#areaKey,
+							parentUnique: this.#parentUnique,
+						} as UmbBlockGridWorkspaceOriginData,
 						createBlockInWorkspace: this._manager.getInlineEditingMode() === false,
 					},
 				};
@@ -195,7 +207,12 @@ export class UmbBlockGridEntriesContext
 					data: {
 						entityType: 'block',
 						preset: {},
-						originData: { areaKey: this.#areaKey, parentUnique: this.#parentUnique, baseDataPath: this._dataPath },
+						originData: {
+							index: -1,
+							areaKey: this.#areaKey,
+							parentUnique: this.#parentUnique,
+							baseDataPath: this._dataPath,
+						} as UmbBlockGridWorkspaceOriginData,
 					},
 					modal: { size: 'medium' },
 				};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
index 1d1827445b..3794671862 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
@@ -16,13 +16,12 @@ import {
 	observeMultiple,
 } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UMB_MODAL_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
+import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { decodeFilePath, UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
 import {
 	UMB_BLOCK_ENTRIES_CONTEXT,
 	UMB_BLOCK_MANAGER_CONTEXT,
 	type UmbBlockWorkspaceOriginData,
-	type UmbBlockWorkspaceData,
 	UMB_BLOCK_ENTRY_CONTEXT,
 } from '@umbraco-cms/backoffice/block';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
@@ -40,7 +39,11 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	#retrieveBlockManager;
 	#blockEntries?: typeof UMB_BLOCK_ENTRIES_CONTEXT.TYPE;
 	#retrieveBlockEntries;
-	#modalContext?: UmbModalContext<UmbBlockWorkspaceData>;
+	#originData?: UmbBlockWorkspaceOriginData;
+	// Set the origin data for this workspace. Example used by inline editing which setups the workspace context it self.
+	setOriginData(data: UmbBlockWorkspaceOriginData) {
+		this.#originData = data;
+	}
 	#retrieveModalContext;
 
 	#entityType: string;
@@ -80,7 +83,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		this.addValidationContext(this.settings.validation);
 
 		this.#retrieveModalContext = this.consumeContext(UMB_MODAL_CONTEXT, (context) => {
-			this.#modalContext = context as any;
+			this.#originData = context?.data.originData;
 			context.onSubmit().catch(this.#modalRejected);
 		}).asPromise();
 
@@ -238,19 +241,15 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		if (!this.#blockEntries) {
 			throw new Error('Block Entries not found');
 		}
-		if (!this.#modalContext) {
-			throw new Error('Modal Context not found');
+		if (!this.#originData) {
+			throw new Error('Origin data not defined');
 		}
 
 		// TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
 
 		this.setIsNew(true);
 
-		const blockCreated = await this.#blockEntries.create(
-			contentElementTypeId,
-			{},
-			this.#modalContext.data.originData as UmbBlockWorkspaceOriginData,
-		);
+		const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#originData);
 		if (!blockCreated) {
 			throw new Error('Block Entries could not create block');
 		}
@@ -263,7 +262,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 				blockCreated.layout,
 				blockCreated.content,
 				blockCreated.settings,
-				this.#modalContext.data.originData as UmbBlockWorkspaceOriginData,
+				this.#originData,
 			);
 			if (!blockInserted) {
 				throw new Error('Block Entries could not insert block');
@@ -348,7 +347,8 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	 * in the backoffice UI.
 	 */
 	establishLiveSync() {
-		let initialLayoutSet = true;
+		// Syncing Layout data is not a necessity, but it was an idea that someone might wanted to manipulate that from this workspace, but as it is giving trouble in Block Grid with Inline Editing Live Sync, then its taken out for now. [NL]
+		/*let initialLayoutSet = true;
 		this.observe(
 			this.layout,
 			(layoutData) => {
@@ -357,14 +357,11 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 						initialLayoutSet = false;
 						return;
 					}
-					this.#blockManager?.setOneLayout(
-						layoutData,
-						this.#modalContext?.data.originData as UmbBlockWorkspaceOriginData,
-					);
+					this.#blockManager?.setOneLayout(layoutData, this.#originData);
 				}
 			},
 			'observeThisLayout',
-		);
+		);*/
 		this.observe(
 			this.content.data,
 			(contentData) => {
@@ -435,7 +432,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	async submit() {
 		const layoutData = this.#layout.value;
 		const contentData = this.content.getData();
-		if (!layoutData || !this.#blockManager || !this.#blockEntries || !contentData || !this.#modalContext) {
+		if (!layoutData || !this.#blockManager || !this.#blockEntries || !contentData || !this.#originData) {
 			throw new Error('Missing data');
 		}
 
@@ -444,19 +441,14 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		if (!this.#liveEditingMode) {
 			if (this.getIsNew() === true) {
 				// Insert (This means the layout entry will be inserted at the desired location):
-				const blockInserted = await this.#blockEntries.insert(
-					layoutData,
-					contentData,
-					settingsData,
-					this.#modalContext.data.originData as UmbBlockWorkspaceOriginData,
-				);
+				const blockInserted = await this.#blockEntries.insert(layoutData, contentData, settingsData, this.#originData);
 				if (!blockInserted) {
 					throw new Error('Block Entries could not insert block');
 				}
 			} else {
 				// Update data:
 
-				this.#blockManager.setOneLayout(layoutData, this.#modalContext.data.originData as UmbBlockWorkspaceOriginData);
+				this.#blockManager.setOneLayout(layoutData, this.#originData);
 				if (contentData) {
 					this.#blockManager.setOneContent(contentData);
 				}
@@ -493,10 +485,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			} else {
 				// Revert the layout, content & settings data to the original state: [NL]
 				if (this.#initialLayout) {
-					this.#blockManager?.setOneLayout(
-						this.#initialLayout,
-						this.#modalContext?.data.originData as UmbBlockWorkspaceOriginData,
-					);
+					this.#blockManager?.setOneLayout(this.#initialLayout, this.#originData);
 				}
 				if (this.#initialContent) {
 					this.#blockManager?.setOneContent(this.#initialContent);
@@ -512,8 +501,9 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 		super.destroy();
 		this.#layout.destroy();
 		this.#name.destroy();
+		this.#layout = undefined as any;
 		this.#blockManager = undefined;
-		this.#modalContext = undefined;
+		this.#originData = undefined;
 	}
 }