@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.js

@@ -7,11 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbBlockListManagerContext } from '../../context/block-list-manager.context.js';
 import { UmbBlockListEntriesContext } from '../../context/block-list-entries.context.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
-import { css, customElement, html, nothing, property, repeat, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
+import { html, customElement, property, state, repeat, css, nothing, ifDefined, } from '../../../../../external/lit/index.js';
 import { debounceTime } from '../../../../../external/rxjs/index.js';
 import { extractJsonQueryProps, UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../../../core/validation/index.js';
 import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
-import { umbDestroyOnDisconnect, UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content/content/index.js';
@@ -36,6 +36,11 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this.#lastValue = value;
         if (!value) {
             super.value = undefined;
+            // Clear manager state so blocks are actually removed
+            this.#managerContext.setLayouts([]);
+            this.#managerContext.setContents([]);
+            this.#managerContext.setSettings([]);
+            this.#managerContext.setExposes([]);
             return;
         }
         const buildUpValue = value ? { ...value } : {};
@@ -108,7 +113,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         });
         this.#validationContext = new UmbValidationContext(this);
         this.#lastValue = undefined;
-        this._createButtonLabel = this.localize.term('content_createEmpty');
+        this._createButtonLabel = this.localize.term('blockEditor_addBlock');
         this.#readonly = false;
         this._layouts = [];
         this.#managerContext = new UmbBlockListManagerContext(this);
@@ -256,7 +261,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
             return nothing;
         return html `
 			${this.#renderSortModeToolbar()}
-			${repeat(this._layouts, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `
+			${repeat(this._layouts, (layout) => layout.contentKey, (layout, index) => html `
 					${this.#renderInlineCreateButton(index)}
 					<umb-block-list-entry
 						index=${index}
@@ -276,38 +281,62 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
     #renderInlineCreateButton(index) {
         if (this.readonly)
             return nothing;
+        const createPath = this.#entriesContext.getPathForCreateBlock(index);
         return html `
 			<uui-button-inline-create
 				label=${this._createButtonLabel}
-				href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}>
+				href=${ifDefined(createPath)}
+				@click=${() => {
+            // If no path, then we can conclude there is not modal flow for the user to follow, instead we will just insert the Block: [NL]
+            if (createPath === undefined) {
+                this.#handleCreateWithNoCreatePath(index);
+            }
+        }}>
 			</uui-button-inline-create>
 		`;
     }
     #renderCreateButton() {
-        let createPath;
-        if (this._blocks?.length === 1) {
-            const elementKey = this._blocks[0].contentElementTypeKey;
-            createPath =
-                this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey;
-        }
-        else {
-            createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 });
-        }
+        if (!this._catalogueRouteBuilder)
+            return nothing;
+        const createPath = this.#entriesContext.getPathForCreateBlock(-1);
         return html `
 			<uui-button
 				look="placeholder"
-				label=${this._createButtonLabel}
-				href=${createPath ?? ''}
-				?disabled=${this.readonly}></uui-button>
+				.label=${this._createButtonLabel}
+				href=${ifDefined(createPath)}
+				?disabled=${this.readonly}
+				@click=${() => {
+            // If no path, then we can conclude there is not modal flow for the user to follow, instead we will just insert the Block: [NL]
+            if (createPath === undefined) {
+                this.#handleCreateWithNoCreatePath();
+            }
+        }}></uui-button>
 		`;
     }
+    async #handleCreateWithNoCreatePath(index) {
+        if (!this._blocks || this._blocks.length === 0) {
+            throw new Error('No block types are configured for this Block List property editor');
+        }
+        if (index === undefined) {
+            index = -1;
+        }
+        const originData = { index };
+        const created = await this.#entriesContext.create(this._blocks[0].contentElementTypeKey, {}, originData);
+        if (created) {
+            this.#entriesContext.insert(created.layout, created.content, created.settings, originData);
+        }
+        else {
+            throw new Error('Failed to create block');
+        }
+    }
     #renderPasteButton() {
         return html `
 			<uui-button
 				label=${this.localize.term('content_createFromClipboard')}
 				look="placeholder"
 				href=${this._catalogueRouteBuilder?.({ view: 'clipboard', index: -1 }) ?? ''}
-				?disabled=${this.readonly}>
+				?disabled=${this.readonly}
+				title=${this.localize.term('general_clipboard')}>
 				<uui-icon name="icon-clipboard-paste"></uui-icon>
 			</uui-button>
 		`;
@@ -319,19 +348,8 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
     }
     static { this.styles = [
         css `
-			:host {
-				display: grid;
-				align-content: start;
-				gap: 1px;
-			}
-			> div {
-				display: flex;
-				flex-direction: column;
-				align-items: stretch;
-			}
-
 			uui-button-group {
-				padding-top: 1px;
+				margin-top: 1px;
 				display: grid;
 				grid-template-columns: 1fr auto;
 			}

package/dist-cms/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 import '../ref-rte-block/index.js';
 /**
@@ -20,6 +20,7 @@ export declare class UmbBlockRteEntryElement extends UmbLitElement implements Um
     private _workspaceEditSettingsPath?;
     private _contentTypeAlias?;
     private _contentTypeName?;
+    private _isReadOnly;
     private _blockViewProps;
     _contentInvalid?: boolean;
     _settingsInvalid?: boolean;

package/dist-cms/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.js

@@ -4,15 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_BLOCK_RTE } from '../../constants.js';
+import { UMB_BLOCK_RTE, UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../constants.js';
 import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
+import { css, customElement, html, nothing, property, state } from '../../../../../external/lit/index.js';
+import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { html, css, property, state, customElement, nothing } from '../../../../../external/lit/index.js';
+import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
+import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
+import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../../clipboard/index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT, UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import '../ref-rte-block/index.js';
-import { UmbObserveValidationStateController } from '../../../../core/validation/index.js';
-import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
 /**
  * @class UmbBlockRteEntryElement
  */
@@ -35,12 +37,14 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         this._blockViewProps = { ...this._blockViewProps, ...incoming };
         this.requestUpdate('_blockViewProps');
     }
+    #clipboardContext;
     constructor() {
         super();
         this.#context = new UmbBlockRteEntryContext(this);
         this._showContentEdit = false;
         this._hasSettings = false;
         this._label = '';
+        this._isReadOnly = false;
         this._blockViewProps = {
             contentKey: undefined,
             config: { showContentEdit: false, showSettingsEdit: false },
@@ -56,7 +60,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         };
         this.#extensionSlotRenderMethod = (ext) => {
             ext.component?.setAttribute('part', 'component');
-            if (this._exposed) {
+            if (this._exposed || this._isReadOnly) {
                 return ext.component;
             }
             else {
@@ -77,6 +81,9 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         };
         // We do not have index for RTE Blocks at the moment.
         this.#context.setIndex(0);
+        this.consumeContext(UMB_CLIPBOARD_PROPERTY_CONTEXT, (clipboardContext) => {
+            this.#clipboardContext = clipboardContext;
+        });
         this.observe(this.#context.showContentEdit, (showContentEdit) => {
             this._showContentEdit = showContentEdit;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
@@ -133,6 +140,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this._workspaceEditSettingsPath = path;
             this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
         }, null);
+        this.observe(this.#context.readOnlyGuard.permitted, (isReadOnly) => (this._isReadOnly = isReadOnly), 'umbReadOnlyObserver');
     }
     async #observeData() {
         this.observe(await this.#context.contentValues(), (content) => {
@@ -146,6 +154,38 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         super.connectedCallback();
         this.setAttribute('contenteditable', 'false');
     }
+    async #copyToClipboard() {
+        if (!this.#clipboardContext) {
+            console.warn('Clipboard context is not available.');
+            return;
+        }
+        const propertyDatasetContext = await this.getContext(UMB_PROPERTY_DATASET_CONTEXT);
+        const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
+        if (!propertyDatasetContext || !propertyContext) {
+            throw new Error('Could not get required contexts to copy.');
+        }
+        const workspaceName = propertyDatasetContext?.getName();
+        const propertyLabel = propertyContext?.getLabel();
+        const blockLabel = this.#context.getName();
+        const entryName = [workspaceName, propertyLabel, blockLabel].filter(Boolean).join(' - ');
+        const content = this.#context.getContent();
+        const layout = this.#context.getLayout();
+        const settings = this.#context.getSettings();
+        const expose = this.#context.getExpose();
+        const propertyValue = {
+            contentData: content ? [structuredClone(content)] : [],
+            layout: { [UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS]: layout ? [structuredClone(layout)] : undefined },
+            settingsData: settings ? [structuredClone(settings)] : [],
+            expose: expose ? [structuredClone(expose)] : [],
+        };
+        const editorUiManifest = propertyContext.getEditorManifest();
+        this.#clipboardContext.write({
+            icon: this._icon,
+            name: entryName,
+            propertyValue,
+            propertyEditorUiAlias: editorUiManifest?.alias ?? '',
+        });
+    }
     #filterBlockCustomViews;
     #expose;
     #extensionSlotRenderMethod;
@@ -170,9 +210,13 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             : nothing;
     }
     #renderActionBar() {
-        return this._showActions
-            ? html `<uui-action-bar>${this.#renderEditAction()}${this.#renderEditSettingsAction()}</uui-action-bar>`
-            : nothing;
+        if (!this._showActions)
+            return nothing;
+        return html `
+			<uui-action-bar>
+				${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}${this.#renderDeleteAction()}
+			</uui-action-bar>
+		`;
     }
     #renderBuiltinBlockView;
     #renderRefBlock() {
@@ -186,6 +230,8 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 			.config=${this._blockViewProps.config}></umb-ref-rte-block>`;
     }
     #renderEditAction() {
+        if (this._isReadOnly)
+            return nothing;
         return this._showContentEdit && this._workspaceEditContentPath
             ? html `<uui-button
 					label="edit"
@@ -207,6 +253,8 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
                 : nothing;
     }
     #renderEditSettingsAction() {
+        if (this._isReadOnly)
+            return nothing;
         return html `
 			${this._hasSettings && this._workspaceEditSettingsPath
             ? html `<uui-button
@@ -222,6 +270,27 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             : nothing}
 		`;
     }
+    #renderCopyToClipboardAction() {
+        if (!this.#clipboardContext)
+            return nothing;
+        return html `
+			<uui-button
+				label=${this.localize.term('clipboard_labelForCopyToClipboard')}
+				look="secondary"
+				@click=${() => this.#copyToClipboard()}>
+				<uui-icon name="icon-clipboard-copy"></uui-icon>
+			</uui-button>
+		`;
+    }
+    #renderDeleteAction() {
+        if (this._isReadOnly)
+            return nothing;
+        return html `
+			<uui-button label="delete" look="secondary" @click=${() => this.#context.requestDelete()}>
+				<uui-icon name="icon-remove"></uui-icon>
+			</uui-button>
+		`;
+    }
     render() {
         return this.#renderBlock();
     }
@@ -293,6 +362,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_contentTypeName", void 0);
+__decorate([
+    state()
+], UmbBlockRteEntryElement.prototype, "_isReadOnly", void 0);
 __decorate([
     state()
 ], UmbBlockRteEntryElement.prototype, "_blockViewProps", void 0);

package/dist-cms/packages/block/block-rte/context/block-rte-entries.context.d.ts

@@ -1,10 +1,11 @@
-import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel, UmbBlockRteValueModel } from '../types.js';
-import { type UmbBlockRteWorkspaceOriginData } from '../workspace/block-rte-workspace.modal-token.js';
+import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
+import type { UmbBlockRteWorkspaceOriginData } from '../workspace/block-rte-workspace.modal-token.js';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
 import { UmbBlockEntriesContext } from '../../block/index.js';
 import type { UmbBlockDataModel } from '../../block/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<typeof UMB_BLOCK_RTE_MANAGER_CONTEXT, typeof UMB_BLOCK_RTE_MANAGER_CONTEXT.TYPE, UmbBlockRteTypeModel, UmbBlockRteLayoutModel, UmbBlockRteWorkspaceOriginData> {
+    #private;
     readonly canCreate: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHost);
     protected _gotBlockManager(): void;
@@ -21,6 +22,12 @@ export declare class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<ty
         settings: UmbBlockDataModel | undefined;
     } | undefined>;
     insert(layoutEntry: UmbBlockRteLayoutModel, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined, originData: UmbBlockRteWorkspaceOriginData): Promise<boolean>;
+    /**
+     * Delete a block by requesting its removal through the pending deletion mechanism.
+     * This enables undo support by removing the HTML element first via Tiptap,
+     * which triggers _filterUnusedBlocks to store block data before removal.
+     * @param {string} contentKey - The content key of the block to delete.
+     */
     delete(contentKey: string): Promise<void>;
-    protected _insertFromPropertyValue(value: UmbBlockRteValueModel, originData: UmbBlockRteWorkspaceOriginData): Promise<UmbBlockRteWorkspaceOriginData>;
+    protected _insertFromPropertyValue(_value: unknown, _originData: UmbBlockRteWorkspaceOriginData): Promise<UmbBlockRteWorkspaceOriginData>;
 }

package/dist-cms/packages/block/block-rte/context/block-rte-entries.context.js

@@ -1,13 +1,20 @@
-import { UMB_BLOCK_RTE_WORKSPACE_MODAL, } from '../workspace/block-rte-workspace.modal-token.js';
+import { UMB_BLOCK_RTE_WORKSPACE_MODAL } from '../workspace/block-rte-workspace.modal-token.js';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
-import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js';
+import { UmbBlockEntriesContext, UMB_BLOCK_CATALOGUE_MODAL } from '../../block/index.js';
 import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
+import { UmbClipboardPastePropertyValueTranslatorValueResolver, UMB_CLIPBOARD_PROPERTY_CONTEXT, } from '../../../clipboard/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../core/property/index.js';
 /**
  * Copied from the 'rte' package to avoid a circular dependency.
  * @internal
  */
 const UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.RichText';
+/**
+ * Copied from the 'tiptap' package to avoid a circular dependency.
+ * @internal
+ */
+const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.Tiptap';
 export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext {
     constructor(host) {
         super(host, UMB_BLOCK_RTE_MANAGER_CONTEXT);
@@ -16,12 +23,46 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext {
         this.canCreate = new UmbBooleanState(true).asObservable();
         new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
             .addAdditionalPath('_catalogue/:view')
-            .onSetup((routingInfo) => {
+            .onSetup(async (routingInfo) => {
+            const blockTypes = this._manager?.getBlockTypes() ?? [];
+            /*
+            modal size logic:
+            If more than 8 block types, medium modal, more than 12 large modal:
+            */
+            const modalSize = blockTypes.length > 12 ? 'large' : blockTypes.length > 8 ? 'medium' : 'small';
+            await this._retrieveManager;
+            if (!this._manager)
+                return false;
+            const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
+            if (!clipboardContext) {
+                throw new Error('Clipboard context not found');
+            }
+            const pasteTranslatorManifests = clipboardContext.getPasteTranslatorManifests(UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS);
+            // TODO: consider moving some of this logic to the clipboard property context
+            const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
+            if (!propertyContext) {
+                throw new Error('Property context not found');
+            }
+            const config = propertyContext.getConfig();
+            const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
             return {
+                modal: { size: modalSize },
                 data: {
-                    blocks: this._manager?.getBlockTypes() ?? [],
+                    blocks: blockTypes,
                     blockGroups: [],
                     openClipboard: routingInfo.view === 'clipboard',
+                    clipboardFilter: async (clipboardEntryDetail) => {
+                        const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(pasteTranslatorManifests, clipboardEntryDetail.values);
+                        if (!hasSupportedPasteTranslator) {
+                            return false;
+                        }
+                        const pasteTranslator = await valueResolver.getPasteTranslator(clipboardEntryDetail.values, UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS);
+                        if (pasteTranslator.isCompatibleValue) {
+                            const value = await valueResolver.resolve(clipboardEntryDetail.values, UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS);
+                            return pasteTranslator.isCompatibleValue(value, config);
+                        }
+                        return true;
+                    },
                     originData: {},
                     createBlockInWorkspace: true,
                 },
@@ -29,16 +70,22 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext {
         })
             .onSubmit(async (value, data) => {
             if (value?.create && data) {
-                const created = await this.create(value.create.contentElementTypeKey, 
-                // We can parse an empty object, cause the rest will be filled in by others.
-                {});
+                const created = await this.create(value.create.contentElementTypeKey, {}, data.originData);
                 if (created) {
-                    this.insert(created.layout, created.content, created.settings, data.originData);
+                    await this.insert(created.layout, created.content, created.settings, data.originData);
                 }
                 else {
                     throw new Error('Failed to create block');
                 }
             }
+            else if (value?.clipboard && value.clipboard.selection?.length && data) {
+                const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
+                if (!clipboardContext) {
+                    throw new Error('Clipboard context not found');
+                }
+                const propertyValues = await clipboardContext.readMultiple(value.clipboard.selection, UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS);
+                await this.#insertFromRtePropertyValues(propertyValues, data.originData);
+            }
         })
             .observeRouteBuilder((routeBuilder) => {
             this._catalogueRouteBuilderState.setValue(routeBuilder);
@@ -77,25 +124,43 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext {
         await this._retrieveManager;
         return await this._manager?.createWithPresets(contentElementTypeKey, partialLayoutEntry, originData);
     }
-    // insert Block?
     async insert(layoutEntry, content, settings, originData) {
         await this._retrieveManager;
         return this._manager?.insert(layoutEntry, content, settings, originData) ?? false;
     }
-    // create Block?
+    /**
+     * Delete a block by requesting its removal through the pending deletion mechanism.
+     * This enables undo support by removing the HTML element first via Tiptap,
+     * which triggers _filterUnusedBlocks to store block data before removal.
+     * @param {string} contentKey - The content key of the block to delete.
+     */
     async delete(contentKey) {
-        await super.delete(contentKey);
-        this._manager?.deleteLayoutElement(contentKey);
+        await this._retrieveManager;
+        this._manager?.requestPendingDeletion(contentKey);
+    }
+    async #insertFromRtePropertyValues(values, originData) {
+        for (const value of values) {
+            originData = await this.#insertFromRtePropertyValue(value, originData);
+        }
     }
-    async _insertFromPropertyValue(value, originData) {
-        const layoutEntries = value.layout[UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS];
+    async #insertFromRtePropertyValue(value, originData) {
+        if (!value.blocks) {
+            throw new Error('No blocks found in property value');
+        }
+        const layoutEntries = value.blocks.layout[UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS];
         if (!layoutEntries) {
             throw new Error('No layout entries found');
         }
         await Promise.all(layoutEntries.map(async (layoutEntry) => {
-            this._insertBlockFromPropertyValue(layoutEntry, value, originData);
+            this._insertBlockFromPropertyValue(layoutEntry, value.blocks, originData);
             // TODO: Missing some way to insert a Block HTML Element into the RTE at the current cursor point. (hopefully the responsibility can be avoided here, but there is some connection missing at this point) [NL]
         }));
         return originData;
     }
+    // This method is required by the base class but is not used for RTE blocks.
+    // RTE blocks use `#insertFromRtePropertyValue` instead because they expect
+    // `UmbPropertyEditorRteValueType` (with markup and blocks) rather than `UmbBlockValueType`.
+    _insertFromPropertyValue(_value, _originData) {
+        throw new Error('Use #insertFromRtePropertyValue for RTE blocks');
+    }
 }

package/dist-cms/packages/block/block-rte/context/block-rte-entry.context.js

@@ -1,7 +1,7 @@
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
 import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from './block-rte-entries.context-token.js';
-import { UmbBlockEntryContext } from '../../block/index.js';
 import { mergeObservables } from '../../../../libs/observable-api/index.js';
+import { UmbBlockEntryContext } from '../../block/index.js';
 export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
     constructor(host) {
         super(host, UMB_BLOCK_RTE_MANAGER_CONTEXT, UMB_BLOCK_RTE_ENTRIES_CONTEXT);

package/dist-cms/packages/block/block-rte/context/block-rte-manager.context.d.ts

@@ -7,6 +7,20 @@ import '../components/block-rte-entry/index.js';
  * A implementation of the Block Manager specifically for the Rich Text Editor.
  */
 export declare class UmbBlockRteManagerContext<BlockLayoutType extends UmbBlockRteLayoutModel = UmbBlockRteLayoutModel> extends UmbBlockManagerContext<UmbBlockRteTypeModel, BlockLayoutType> {
+    #private;
+    readonly pendingDeletions: import("rxjs").Observable<string[]>;
+    /**
+     * Request a block to be deleted. This adds the contentKey to pending deletions,
+     * which will be processed by the Tiptap API to remove the HTML element first,
+     * enabling undo support.
+     * @param {string} contentKey - The content key of the block to delete.
+     */
+    requestPendingDeletion(contentKey: string): void;
+    /**
+     * Clear a pending deletion after it has been processed.
+     * @param {string} contentKey - The content key to clear from pending deletions.
+     */
+    clearPendingDeletion(contentKey: string): void;
     removeOneLayout(contentKey: string): void;
     removeManyLayouts(contentKeys: Array<string>): void;
     /**

package/dist-cms/packages/block/block-rte/context/block-rte-manager.context.js

@@ -1,9 +1,44 @@
+import { UmbArrayState } from '../../../../libs/observable-api/index.js';
 import { UmbBlockManagerContext } from '../../block/index.js';
 import '../components/block-rte-entry/index.js';
 /**
  * A implementation of the Block Manager specifically for the Rich Text Editor.
  */
 export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
+    constructor() {
+        super(...arguments);
+        /**
+         * Pending deletions are used to support undo for block deletions.
+         * When a block is deleted via the delete button, the contentKey is added to this list.
+         * The Tiptap API observes this and removes the HTML element, which triggers
+         * the _filterUnusedBlocks mechanism that stores block data for undo and removes from manager.
+         */
+        this.#pendingDeletions = new UmbArrayState([], (x) => x);
+        this.pendingDeletions = this.#pendingDeletions.asObservable();
+    }
+    /**
+     * Pending deletions are used to support undo for block deletions.
+     * When a block is deleted via the delete button, the contentKey is added to this list.
+     * The Tiptap API observes this and removes the HTML element, which triggers
+     * the _filterUnusedBlocks mechanism that stores block data for undo and removes from manager.
+     */
+    #pendingDeletions;
+    /**
+     * Request a block to be deleted. This adds the contentKey to pending deletions,
+     * which will be processed by the Tiptap API to remove the HTML element first,
+     * enabling undo support.
+     * @param {string} contentKey - The content key of the block to delete.
+     */
+    requestPendingDeletion(contentKey) {
+        this.#pendingDeletions.appendOne(contentKey);
+    }
+    /**
+     * Clear a pending deletion after it has been processed.
+     * @param {string} contentKey - The content key to clear from pending deletions.
+     */
+    clearPendingDeletion(contentKey) {
+        this.#pendingDeletions.removeOne(contentKey);
+    }
     removeOneLayout(contentKey) {
         this._layouts.removeOne(contentKey);
     }
@@ -29,6 +64,7 @@ export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
     insert(layoutEntry, content, settings, originData) {
         this._layouts.appendOne(layoutEntry);
         this.insertBlockData(layoutEntry, content, settings, originData);
+        this.notifyBlockInserted(layoutEntry, originData);
         return true;
     }
     /**

package/dist-cms/packages/block/block-rte/property-value-cloner/property-value-cloner-block-rte.cloner.js

@@ -4,21 +4,31 @@ export class UmbBlockRTEPropertyValueCloner {
     #markup;
     #markupDoc;
     async cloneValue(value) {
-        if (value) {
-            this.#markup = value.markup;
-            const parser = new DOMParser();
-            this.#markupDoc = parser.parseFromString(this.#markup, 'text/html');
-            const cloner = new UmbFlatLayoutBlockPropertyValueCloner(UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS, {
-                contentIdUpdatedCallback: this.#replaceContentKeyInMarkup,
-            });
-            const result = {};
-            if (value.blocks) {
+        if (!value)
+            return value;
+        const result = {};
+        if (value.blocks) {
+            if (value.markup) {
+                // Full path - parse DOM and update content keys in markup
+                this.#markup = value.markup;
+                this.#markupDoc = new DOMParser().parseFromString(this.#markup, 'text/html');
+                const cloner = new UmbFlatLayoutBlockPropertyValueCloner(UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS, {
+                    contentIdUpdatedCallback: this.#replaceContentKeyInMarkup,
+                });
                 result.blocks = await cloner.cloneValue(value.blocks);
+                result.markup = this.#markup;
             }
-            result.markup = this.#markup;
-            return result;
+            else {
+                // Fast path - no markup to update, just clone blocks
+                const cloner = new UmbFlatLayoutBlockPropertyValueCloner(UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS);
+                result.blocks = await cloner.cloneValue(value.blocks);
+                result.markup = '';
+            }
+        }
+        else {
+            result.markup = value.markup ?? '';
         }
-        return value;
+        return result;
     }
     #replaceContentKeyInMarkup = (contentKey, newContentKey) => {
         if (!this.#markupDoc)