Tiptap RTE: Resolves inline blocks being set as dirty (closes #17749)

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

@@ -3,7 +3,7 @@
 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 { mergeObservables, observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { mergeObservables } from '@umbraco-cms/backoffice/observable-api';
 export class UmbBlockRteEntryContext extends UmbBlockEntryContext<
 	typeof UMB_BLOCK_RTE_MANAGER_CONTEXT,
 	typeof UMB_BLOCK_RTE_MANAGER_CONTEXT.TYPE,
@@ -12,6 +12,7 @@
 	UmbBlockRteTypeModel,
 	UmbBlockRteLayoutModel
 > {
+	/** @deprecated Use `displayInlineConfig` instead. This field will be removed in Umbraco 19. [LK] */
 	readonly displayInline = this._layout.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
 	readonly displayInlineConfig = this._blockType.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
 
@@ -32,23 +33,7 @@
 
 	protected override _gotManager() {}
 
-	protected override _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',
-		);
-	}
+	protected override _gotEntries() {}
 
 	protected override _gotContentType() {}
 }

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

@@ -38,10 +38,6 @@ export class UmbBlockRteManagerContext<
 			throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`);
 		}
 
-		if (blockType.displayInline) {
-			data.layout.displayInline = true;
-		}
-
 		return data;
 	}
 

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

@@ -5,6 +5,7 @@ export interface UmbBlockRteTypeModel extends UmbBlockTypeBaseModel {
 	displayInline: boolean;
 }
 export interface UmbBlockRteLayoutModel extends UmbBlockLayoutBaseModel {
+	/** @deprecated Use `displayInline` on `UmbBlockRteTypeModel` instead. This field will be removed in Umbraco 19. [LK] */
 	displayInline?: boolean;
 }
 

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/block.tiptap-api.ts

@@ -1,28 +1,34 @@
 import { UmbTiptapExtensionApiBase } from '../tiptap-extension-api-base.js';
 import { umbRteBlock, umbRteBlockInline } from './block.tiptap-extension.js';
-import { distinctUntilChanged } from '@umbraco-cms/backoffice/external/rxjs';
 import { UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '@umbraco-cms/backoffice/rte';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/block-rte';
 import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
-import type { UmbBlockRteLayoutModel } from '@umbraco-cms/backoffice/block-rte';
+import type { UmbBlockRteTypeModel } from '@umbraco-cms/backoffice/block-rte';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export default class UmbTiptapBlockElementApi extends UmbTiptapExtensionApiBase {
+	#blockTypes?: Map<string, UmbBlockRteTypeModel>;
+
 	constructor(host: UmbControllerHost) {
 		super(host);
 
 		this.consumeContext(UMB_BLOCK_RTE_MANAGER_CONTEXT, (context) => {
+			if (!context) return;
+			this.observe(
+				context.blockTypes,
+				(blockTypes) => {
+					this.#blockTypes = new Map(
+						blockTypes.map((x) => [x.contentElementTypeKey, x] as [string, UmbBlockRteTypeModel]),
+					);
+				},
+				'_observeBlockTypes',
+			);
 			this.observe(
-				context?.contents.pipe(
-					distinctUntilChanged((prev, curr) => prev.map((y) => y.key).join() === curr.map((y) => y.key).join()),
-				),
+				context.contents,
 				(contents) => {
-					if (!contents || !context) {
-						return;
-					}
-					this.#updateBlocks(contents, context.getLayouts());
+					this.#updateBlocks(contents);
 				},
-				'contents',
+				'_observeContents',
 			);
 		});
 	}
@@ -31,20 +37,19 @@ export default class UmbTiptapBlockElementApi extends UmbTiptapExtensionApiBase
 		return [umbRteBlock, umbRteBlockInline];
 	}
 
-	#updateBlocks(blocks: UmbBlockDataModel[], layouts: Array<UmbBlockRteLayoutModel>) {
+	#updateBlocks(contents: Array<UmbBlockDataModel>) {
 		const editor = this._editor;
 		if (!editor) return;
 
+		if (!contents?.length) return;
+
 		const existingBlocks = Array.from(editor.view.dom.querySelectorAll('umb-rte-block, umb-rte-block-inline')).map(
 			(x) => x.getAttribute(UMB_BLOCK_RTE_DATA_CONTENT_KEY),
 		);
-		const newBlocks = blocks.filter((x) => !existingBlocks.find((contentKey) => contentKey === x.key));
+		const newBlocks = contents.filter((x) => !existingBlocks.find((contentKey) => contentKey === x.key));
 
 		newBlocks.forEach((block) => {
-			// Find layout for block
-			const layout = layouts.find((x) => x.contentKey === block.key);
-			const inline = layout?.displayInline ?? false;
-
+			const inline = this.#blockTypes?.get(block.contentTypeKey)?.displayInline ?? false;
 			if (inline) {
 				editor.commands.setBlockInline({ contentKey: block.key });
 			} else {