diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts index 2237af050453..c489e0db817a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts @@ -3,7 +3,7 @@ import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token 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 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext< 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 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext< 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() {} } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts index 5a833c724890..1275fe5faed8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts +++ b/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; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts index c7e8bff28b0c..2c8b27bb7170 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts +++ b/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; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/block.tiptap-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/block.tiptap-api.ts index 3af34ec0dc1d..96d31264d7a5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/block.tiptap-api.ts +++ b/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; + 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) { + #updateBlocks(contents: Array) { 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 {