From 6ce245a6b6fc0e446206cad883e35c43a9eb603f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Jul 2024 13:26:27 +0200
Subject: [PATCH 1/2] hotfix: block grid live editing race condition (#2101)

* Prevent initial data begin populated

* remove log
---
 .../workspace/block-workspace.context.ts      | 114 ++++++++++--------
 1 file changed, 64 insertions(+), 50 deletions(-)

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 b99fbe271b..2697654e84 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
@@ -130,6 +130,70 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			'observeLayoutInitially',
 		);
 
+		this.#observeBlockData(unique);
+
+		if (this.#liveEditingMode) {
+			this.#establishLiveSync();
+		}
+	}
+
+	async create(contentElementTypeId: string) {
+		await this.#retrieveBlockEntries;
+		await this.#retrieveModalContext;
+		if (!this.#blockEntries) {
+			throw new Error('Block Entries not found');
+			return;
+		}
+		if (!this.#modalContext) {
+			throw new Error('Modal Context not found');
+			return;
+		}
+
+		// 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 as UmbBlockWorkspaceData,
+		);
+		if (!blockCreated) {
+			throw new Error('Block Entries could not create block');
+		}
+
+		// TODO: We should investigate if it makes sense to gather
+
+		if (!this.#liveEditingMode) {
+			this.#layout.setValue(blockCreated.layout as LayoutDataType);
+			this.content.setData(blockCreated.content);
+			if (blockCreated.settings) {
+				this.settings.setData(blockCreated.settings);
+			}
+		} else {
+			// Insert already, cause we are in live editing mode:
+			const blockInserted = await this.#blockEntries.insert(
+				blockCreated.layout,
+				blockCreated.content,
+				blockCreated.settings,
+				this.#modalContext.data as UmbBlockWorkspaceData,
+			);
+			if (!blockInserted) {
+				throw new Error('Block Entries could not insert block');
+			}
+
+			const unique = blockCreated.layout.contentUdi;
+
+			this.#observeBlockData(unique);
+			this.#establishLiveSync();
+		}
+	}
+
+	#observeBlockData(unique: string) {
+		if (!this.#blockEntries) {
+			throw new Error('Block Entries not found');
+			return;
+		}
 		this.observe(
 			this.#blockEntries.layoutOf(unique),
 			(layoutData) => {
@@ -183,56 +247,6 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			},
 			'observeLayout',
 		);
-
-		if (this.#liveEditingMode) {
-			this.#establishLiveSync();
-		}
-	}
-
-	async create(contentElementTypeId: string) {
-		await this.#retrieveBlockEntries;
-		await this.#retrieveModalContext;
-		if (!this.#blockEntries) {
-			throw new Error('Block Entries not found');
-			return;
-		}
-		if (!this.#modalContext) {
-			throw new Error('Modal Context not found');
-			return;
-		}
-
-		// 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 as UmbBlockWorkspaceData,
-		);
-		if (!blockCreated) {
-			throw new Error('Block Entries could not create block');
-		}
-
-		this.#layout.setValue(blockCreated.layout as LayoutDataType);
-		this.content.setData(blockCreated.content);
-		if (blockCreated.settings) {
-			this.settings.setData(blockCreated.settings);
-		}
-
-		if (this.#liveEditingMode) {
-			// Insert already, cause we are in live editing mode:
-			const blockInserted = await this.#blockEntries.insert(
-				blockCreated.layout,
-				blockCreated.content,
-				blockCreated.settings,
-				this.#modalContext.data as UmbBlockWorkspaceData,
-			);
-			if (!blockInserted) {
-				throw new Error('Block Entries could not insert block');
-			}
-			this.#establishLiveSync();
-		}
 	}
 
 	#establishLiveSync() {

From 59ea7a2469bda61ac977b006e3ef37fe7657080e Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jul 2024 09:50:30 +0100
Subject: [PATCH 2/2] Ensures word-wrap for `<umb-ufm-render>` component

---
 .../src/packages/ufm/components/ufm-render/ufm-render.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
index 570669c6bc..65f33c51b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
@@ -97,6 +97,7 @@ export class UmbUfmRenderElement extends UmbLitElement {
 		css`
 			* {
 				max-width: 100%;
+				word-wrap: break-word;
 			}
 
 			pre {