insert element via manager context

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

@@ -2,12 +2,16 @@ import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context.js';
 import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from './block-rte-entries.context-token.js';
 import { UmbBlockEntryContext } from '@umbraco-cms/backoffice/block';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 export class UmbBlockRteEntryContext extends UmbBlockEntryContext<
 	typeof UMB_BLOCK_RTE_MANAGER_CONTEXT,
 	typeof UMB_BLOCK_RTE_MANAGER_CONTEXT.TYPE,
 	typeof UMB_BLOCK_RTE_ENTRIES_CONTEXT,
 	typeof UMB_BLOCK_RTE_ENTRIES_CONTEXT.TYPE
 > {
+	readonly displayInline = this._layout.asObservablePart((x) => (x ? x.displayInline ?? false : undefined));
+	readonly displayInlineConfig = this._blockType.asObservablePart((x) => (x ? x.displayInline ?? false : undefined));
+
 	readonly forceHideContentEditorInOverlay = this._blockType.asObservablePart(
 		(x) => !!x?.forceHideContentEditorInOverlay,
 	);
@@ -20,7 +24,23 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext<
 
 	_gotManager() {}
 
-	_gotEntries() {}
+	_gotEntries() {
+		// Secure displayInline fits configuration:
+		this.observe(
+			observeMultiple([this.displayInline, this.displayInlineConfig]),
+			([displayInline, displayInlineConfig]) => {
+				if (displayInlineConfig !== undefined && displayInline !== undefined && displayInlineConfig !== displayInline) {
+					const layoutValue = this._layout.getValue();
+					if (!layoutValue) return;
+					this._layout.setValue({
+						...layoutValue,
+						displayInline: displayInlineConfig,
+					});
+				}
+			},
+			'displayInlineCorrection',
+		);
+	}
 
 	_gotContentType() {}
 }

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

@@ -1,8 +1,8 @@
 import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
 import type { UmbBlockRteWorkspaceData } from '../index.js';
 import type { UmbBlockDataType } from '../../block/types.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tinymce';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
 
 /**
@@ -12,11 +12,10 @@ export class UmbBlockRteManagerContext<
 	BlockLayoutType extends UmbBlockRteLayoutModel = UmbBlockRteLayoutModel,
 > extends UmbBlockManagerContext<UmbBlockRteTypeModel, BlockLayoutType> {
 	//
-	#inlineEditingMode = new UmbBooleanState(undefined);
-	readonly inlineEditingMode = this.#inlineEditingMode.asObservable();
+	#editor?: Editor;
 
-	setInlineEditingMode(inlineEditingMode: boolean | undefined) {
-		this.#inlineEditingMode.setValue(inlineEditingMode ?? false);
+	setTinyMceEditor(editor: Editor) {
+		this.#editor = editor;
 	}
 
 	create(
@@ -33,7 +32,17 @@ export class UmbBlockRteManagerContext<
 		settings: UmbBlockDataType | undefined,
 		modalData: UmbBlockRteWorkspaceData,
 	) {
-		this._layouts.appendOne(layoutEntry);
+		if (!this.#editor) return false;
+
+		if (layoutEntry.displayInline) {
+			this.#editor.selection.setContent(
+				`<umb-rte-block-inline data-content-udi="${layoutEntry.contentUdi}"><!--Umbraco-Block--></umb-rte-block-inline>`,
+			);
+		} else {
+			this.#editor.selection.setContent(
+				`<umb-rte-block data-content-udi="${layoutEntry.contentUdi}"><!--Umbraco-Block--></umb-rte-block>`,
+			);
+		}
 
 		this.insertBlockData(layoutEntry, content, settings, modalData);
 

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts

@@ -44,6 +44,8 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 		});
 
 		this.consumeContext(UMB_BLOCK_RTE_MANAGER_CONTEXT, (context) => {
+			context.setTinyMceEditor(args.editor);
+
 			this.observe(
 				context.blockTypes,
 				(blockTypes) => {
@@ -60,38 +62,19 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 	async showDialog() {
 		const blockEl = this.editor.selection.getNode();
 
-		if (blockEl.nodeName === 'UMB-RTE-BLOCK' || blockEl.nodeName === 'UMB-RTE-BLOCK-INLINE') {
+		/*if (blockEl.nodeName === 'UMB-RTE-BLOCK' || blockEl.nodeName === 'UMB-RTE-BLOCK-INLINE') {
 			const blockUdi = blockEl.getAttribute('data-content-udi') ?? undefined;
 			if (blockUdi) {
+				// TODO: Missing a solution to edit a block from this scope. [NL]
 				this.#editBlock(blockUdi);
 				return;
 			}
-		}
+		}*/
 
 		// If no block is selected, open the block picker:
 		this.#createBlock();
 	}
 
-	async #editBlock(blockUdi?: string) {
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modalHandler = modalManager.open(this, UMB_BLOCK_RTE_WORKSPACE_MODAL, {
-			data: {
-				preset: {
-					blockUdi,
-				},
-			},
-		});
-
-		if (!modalHandler) return;
-
-		const blockPickerData = await modalHandler.onSubmit().catch(() => undefined);
-		if (!blockPickerData) return;
-
-		for (const block of blockPickerData) {
-			this.#insertBlockInEditor(block.layout?.contentUdi ?? '', (block.layout as any)?.displayInline ?? false);
-		}
-	}
-
 	#createBlock() {
 		// TODO: Missing solution to skip catalogue if only one type available. [NL]
 		let createPath: string | undefined = undefined;
@@ -107,23 +90,4 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 			window.history.pushState({}, '', createPath);
 		}
 	}
-
-	#insertBlockInEditor(blockContentUdi: string, displayInline = false) {
-		if (!blockContentUdi) {
-			return;
-		}
-		if (displayInline) {
-			this.editor.selection.setContent(
-				'<umb-rte-block-inline data-content-udi="' + blockContentUdi + '"><!--Umbraco-Block--></umb-rte-block-inline>',
-			);
-		} else {
-			this.editor.selection.setContent(
-				'<umb-rte-block data-content-udi="' + blockContentUdi + '"><!--Umbraco-Block--></umb-rte-block>',
-			);
-		}
-
-		// angularHelper.safeApply($rootScope, function () {
-		// 	editor.dispatch("Change");
-		// });
-	}
 }

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts

@@ -3,7 +3,11 @@ import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/ba
 
 export const UMB_BLOCK_RTE_TYPE = 'block-rte-type';
 
-export interface UmbBlockRteTypeModel extends UmbBlockTypeBaseModel {}
-export interface UmbBlockRteLayoutModel extends UmbBlockLayoutBaseModel {}
+export interface UmbBlockRteTypeModel extends UmbBlockTypeBaseModel {
+	displayInline: boolean;
+}
+export interface UmbBlockRteLayoutModel extends UmbBlockLayoutBaseModel {
+	displayInline?: boolean;
+}
 
 export interface UmbBlockRteValueModel extends UmbBlockValueType<UmbBlockRteLayoutModel> {}