From 4ae643b65b874acd172c47986b7601c40211bfbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Sun, 26 May 2024 13:58:17 +0200 Subject: [PATCH] insert element via manager context --- .../context/block-rte-entry.context.ts | 22 ++++++++- .../context/block-rte-manager.context.ts | 21 ++++++--- .../tiny-mce-block-picker.plugin.ts | 46 ++----------------- .../src/packages/block/block-rte/types.ts | 8 +++- 4 files changed, 47 insertions(+), 50 deletions(-) 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 87011540af..899ded3877 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 @@ -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() {} } 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 19f7817032..9d3425e171 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 @@ -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 { // - #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( + ``, + ); + } else { + this.#editor.selection.setContent( + ``, + ); + } this.insertBlockData(layoutEntry, content, settings, modalData); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts index 57a8d70c2a..3587b07d2a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts +++ b/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( - '', - ); - } else { - this.editor.selection.setContent( - '', - ); - } - - // angularHelper.safeApply($rootScope, function () { - // editor.dispatch("Change"); - // }); - } } 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 5720048a89..45404b976e 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 @@ -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 {}