live sync when inline editing

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts

@@ -16,6 +16,9 @@ export class UmbBlockListManagerContext<
 
 	setInlineEditingMode(inlineEditingMode: boolean | undefined) {
 		this.#inlineEditingMode.setValue(inlineEditingMode ?? false);
+		if (inlineEditingMode === true) {
+			this._liveEditingMode.setValue(true);
+		}
 	}
 
 	create(

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts

@@ -3,7 +3,7 @@ import type { UmbBlockLayoutBaseModel, UmbBlockDataType } from '../types.js';
 import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbArrayState, UmbClassState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbBooleanState, UmbClassState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
@@ -14,8 +14,9 @@ import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 /**
  *
- * @param entityType
- * @param guid
+ * @param {string} entityType - The entity type
+ * @param {string} guid - The entity
+ * @returns {string} UDI in the format `umb://<entityType>/<guid>`
  */
 function buildUdi(entityType: string, guid: string) {
 	return `umb://${entityType}/${guid.replace(/-/g, '')}`;
@@ -52,6 +53,9 @@ export abstract class UmbBlockManagerContext<
 	protected _editorConfiguration = new UmbClassState<UmbPropertyEditorConfigCollection | undefined>(undefined);
 	public readonly editorConfiguration = this._editorConfiguration.asObservable();
 
+	protected _liveEditingMode = new UmbBooleanState(undefined);
+	public readonly liveEditingMode = this._liveEditingMode.asObservable();
+
 	protected _layouts = new UmbArrayState(<Array<BlockLayoutType>>[], (x) => x.contentUdi);
 	public readonly layouts = this._layouts.asObservable();
 
@@ -61,17 +65,11 @@ export abstract class UmbBlockManagerContext<
 	#settings = new UmbArrayState(<Array<UmbBlockDataType>>[], (x) => x.udi);
 	public readonly settings = this.#settings.asObservable();
 
-	// TODO: maybe its bad to consume Property Context, and instead wire this up manually in the property editor? With these: (and one for variant-id..)
-	/*setPropertyAlias(alias: string) {
-		this.#propertyAlias.setValue(alias);
-		this.#workspaceModal.setUniquePathValue('propertyAlias', alias);
-	}
-	getPropertyAlias() {
-		this.#propertyAlias.value;
-	}*/
-
 	setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
 		this._editorConfiguration.setValue(configs);
+		if (this._liveEditingMode.getValue() === undefined) {
+			this._liveEditingMode.setValue(configs.getValueByAlias<boolean>('liveEditingMode'));
+		}
 	}
 	getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined {
 		return this._editorConfiguration.getValue();

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts

@@ -34,7 +34,6 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	#retrieveBlockEntries;
 	#modalContext?: typeof UMB_MODAL_CONTEXT.TYPE;
 	#retrieveModalContext;
-	#editorConfigPromise?: Promise<unknown>;
 
 	#entityType: string;
 
@@ -75,16 +74,13 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 		this.#retrieveBlockManager = this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (context) => {
 			this.#blockManager = context;
-			this.#editorConfigPromise = this.observe(
-				context.editorConfiguration,
-				(editorConfigs) => {
-					if (editorConfigs) {
-						const value = editorConfigs.getValueByAlias<boolean>('useLiveEditing');
-						this.#liveEditingMode = value;
-					}
+			this.observe(
+				context.liveEditingMode,
+				(liveEditingMode) => {
+					this.#liveEditingMode = liveEditingMode;
 				},
-				'observeEditorConfig',
-			).asPromise();
+				'observeLiveEditingMode',
+			);
 		}).asPromise();
 
 		this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
@@ -145,7 +141,6 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	async load(unique: string) {
 		await this.#retrieveBlockManager;
 		await this.#retrieveBlockEntries;
-		await this.#editorConfigPromise;
 		if (!this.#blockManager || !this.#blockEntries) {
 			throw new Error('Block manager not found');
 		}