@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc

package/dist-cms/packages/tiptap/components/input-tiptap/input-tiptap.element.js

@@ -10,7 +10,7 @@ import { css, customElement, html, property, repeat, state, unsafeCSS, when, } f
 import { loadManifestApi } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
-import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { umbDestroyOnDisconnect, UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbFormControlMixin } from '../../../core/validation/index.js';
 import '../toolbar/tiptap-toolbar.element.js';
 import '../statusbar/tiptap-statusbar.element.js';
@@ -202,7 +202,8 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
 				.statusbar=${this._statusbar}
 				.editor=${this._editor}
 				.configuration=${this.configuration}
-				?readonly=${this.readonly}>
+				?readonly=${this.readonly}
+				${umbDestroyOnDisconnect()}>
 			</umb-tiptap-statusbar>
 		`;
     }

package/dist-cms/packages/tiptap/components/statusbar/tiptap-statusbar.element.d.ts

@@ -17,6 +17,7 @@ export declare class UmbTiptapStatusbarElement extends UmbLitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): unknown;
+    destroy(): void;
     static readonly styles: import("lit").CSSResult;
 }
 declare global {

package/dist-cms/packages/tiptap/components/statusbar/tiptap-statusbar.element.js

@@ -35,6 +35,7 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
             value = [[], value[0]];
         }
         this.#statusbar = value;
+        this.#reinitializeExtensions();
     }
     get statusbar() {
         return this.#statusbar;
@@ -47,14 +48,19 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
     }
     disconnectedCallback() {
         this.#attached = false;
+        super.disconnectedCallback();
+    }
+    #reinitializeExtensions() {
         this.#extensionsController?.destroy();
         this.#extensionsController = undefined;
-        super.disconnectedCallback();
+        this.#lookup.clear();
+        this.#observeExtensions();
     }
     #observeExtensions() {
         if (!this.#attached)
             return;
-        this.#extensionsController?.destroy();
+        if (this.#extensionsController)
+            return;
         this.#extensionsController = new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'tiptapStatusbarExtension', (manifest) => this.statusbar.flat().includes(manifest.alias), (extensionControllers) => {
             extensionControllers.forEach((ext) => {
                 if (!this.#lookup.has(ext.alias)) {
@@ -77,6 +83,11 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
     #renderActions(aliases) {
         return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? nothing);
     }
+    destroy() {
+        super.destroy();
+        this.#extensionsController?.destroy();
+        this.#extensionsController = undefined;
+    }
     static { this.styles = css `
 		:host([readonly]) {
 			display: none;

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-button-action.element.d.ts

@@ -0,0 +1,11 @@
+import type { ManifestTiptapToolbarExtensionActionButtonKind } from '../../extensions/tiptap-toolbar.extension.js';
+import { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
+export declare class UmbTiptapToolbarButtonActionElement extends UmbTiptapToolbarButtonElement<ManifestTiptapToolbarExtensionActionButtonKind> {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { UmbTiptapToolbarButtonActionElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-toolbar-button-action': UmbTiptapToolbarButtonActionElement;
+    }
+}

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-button-action.element.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
+import { customElement, html, when } from '../../../../external/lit/index.js';
+let UmbTiptapToolbarButtonActionElement = class UmbTiptapToolbarButtonActionElement extends UmbTiptapToolbarButtonElement {
+    // Note: This element does not use the inherited `isActive` @state in its template,
+    // but relies on it being set by the base class `#onEditorUpdate` to trigger Lit re-renders
+    // so that `api.isDisabled(editor)` is re-evaluated.
+    render() {
+        const label = this.localize.string(this.manifest?.meta.label);
+        return html `
+			<uui-button
+				compact
+				look="default"
+				label=${label}
+				title=${label}
+				?disabled=${this.api?.isDisabled(this.editor)}
+				@click=${() => this.api?.execute(this.editor)}>
+				${when(this.manifest?.meta.icon, (icon) => html `<umb-icon name=${icon}></umb-icon>`, () => html `<span>${label}</span>`)}
+			</uui-button>
+		`;
+    }
+};
+UmbTiptapToolbarButtonActionElement = __decorate([
+    customElement('umb-tiptap-toolbar-button-action')
+], UmbTiptapToolbarButtonActionElement);
+export { UmbTiptapToolbarButtonActionElement };
+export { UmbTiptapToolbarButtonActionElement as element };

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-button-disabled.element.d.ts

@@ -1,4 +1,5 @@
 import { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
+/** @deprecated No longer used internally. Please use `UmbTiptapToolbarButtonActionElement` (`umb-tiptap-toolbar-button-action`) instead. This will be removed in Umbraco 19. [LK] */
 export declare class UmbTiptapToolbarButtonDisabledElement extends UmbTiptapToolbarButtonElement {
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-button-disabled.element.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
 import { customElement, html, when } from '../../../../external/lit/index.js';
+/** @deprecated No longer used internally. Please use `UmbTiptapToolbarButtonActionElement` (`umb-tiptap-toolbar-button-action`) instead. This will be removed in Umbraco 19. [LK] */
 let UmbTiptapToolbarButtonDisabledElement = class UmbTiptapToolbarButtonDisabledElement extends UmbTiptapToolbarButtonElement {
     render() {
         const label = this.localize.string(this.manifest?.meta.label);
@@ -17,7 +18,7 @@ let UmbTiptapToolbarButtonDisabledElement = class UmbTiptapToolbarButtonDisabled
 				title=${label}
 				?disabled=${!this.isActive}
 				@click=${() => this.api?.execute(this.editor)}>
-				${when(this.manifest?.meta.icon, () => html `<umb-icon name=${this.manifest.meta.icon}></umb-icon>`, () => html `<span>${label}</span>`)}
+				${when(this.manifest?.meta.icon, (icon) => html `<umb-icon name=${icon}></umb-icon>`, () => html `<span>${label}</span>`)}
 			</uui-button>
 		`;
     }

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-button.element.d.ts

@@ -1,12 +1,12 @@
 import type { Editor } from '../../externals.js';
-import type { ManifestTiptapToolbarExtensionButtonKind } from '../../extensions/index.js';
+import type { ManifestTiptapToolbarExtension, ManifestTiptapToolbarExtensionButtonKind } from '../../extensions/tiptap-toolbar.extension.js';
 import type { UmbTiptapToolbarElementApi } from '../../extensions/types.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-export declare class UmbTiptapToolbarButtonElement extends UmbLitElement {
+export declare class UmbTiptapToolbarButtonElement<ManifestType extends ManifestTiptapToolbarExtension = ManifestTiptapToolbarExtensionButtonKind> extends UmbLitElement {
     #private;
     api?: UmbTiptapToolbarElementApi;
     editor?: Editor;
-    manifest?: ManifestTiptapToolbarExtensionButtonKind;
+    manifest?: ManifestType;
     protected isActive: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist-cms/packages/tiptap/components/toolbar/tiptap-toolbar-color-picker-button.element.d.ts

@@ -1,5 +1,6 @@
+import type { ManifestTiptapToolbarExtensionColorPickerButtonKind } from '../../extensions/tiptap-toolbar.extension.js';
 import { UmbTiptapToolbarButtonElement } from './tiptap-toolbar-button.element.js';
-export declare class UmbTiptapToolbarColorPickerButtonElement extends UmbTiptapToolbarButtonElement {
+export declare class UmbTiptapToolbarColorPickerButtonElement extends UmbTiptapToolbarButtonElement<ManifestTiptapToolbarExtensionColorPickerButtonKind> {
     #private;
     private _selectedColor?;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/tiptap/extensions/block/block.tiptap-api.js

@@ -1,33 +1,67 @@
 import { UmbTiptapExtensionApiBase } from '../tiptap-extension-api-base.js';
 import { umbRteBlock, umbRteBlockInline } from './block.tiptap-extension.js';
+import { debounceTime } from '../../../../external/rxjs/index.js';
 import { UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '../../../rte/index.js';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from '../../../block/block-rte/index.js';
 export default class UmbTiptapBlockElementApi extends UmbTiptapExtensionApiBase {
     #blockTypes;
+    #managerContext;
     constructor(host) {
         super(host);
         this.consumeContext(UMB_BLOCK_RTE_MANAGER_CONTEXT, (context) => {
             if (!context)
                 return;
+            this.#managerContext = context;
             this.observe(context.blockTypes, (blockTypes) => {
-                this.#blockTypes = new Map(blockTypes.map((x) => [x.contentElementTypeKey, x]));
+                this.#blockTypes = new Map(blockTypes?.map((x) => [x.contentElementTypeKey, x]));
             }, '_observeBlockTypes');
-            this.observe(context.contents, (contents) => {
+            this.observe(context.contents.pipe(debounceTime(20)), (contents) => {
                 this.#updateBlocks(contents);
             }, '_observeContents');
+            this.observe(context.pendingDeletions, (pendingDeletions) => {
+                this.#processPendingDeletions(pendingDeletions);
+            }, '_observePendingDeletions');
         });
     }
     getTiptapExtensions() {
         return [umbRteBlock, umbRteBlockInline];
     }
-    #updateBlocks(contents) {
+    /**
+     * Process pending deletions by removing blocks from the editor.
+     * This is triggered when blocks are deleted via the delete button.
+     * Removing HTML first enables undo support via _filterUnusedBlocks.
+     * @param {Array<string>} pendingDeletions - Array of content keys to delete.
+     */
+    #processPendingDeletions(pendingDeletions) {
+        if (pendingDeletions.length === 0)
+            return;
         const editor = this._editor;
         if (!editor)
             return;
+        // Remove blocks from editor
+        this.#removeBlocksFromEditor(pendingDeletions);
+        // Clear processed pending deletions
+        pendingDeletions.forEach((contentKey) => {
+            this.#managerContext?.clearPendingDeletion(contentKey);
+        });
+    }
+    /**
+     * Sync blocks from manager contents to the editor.
+     * This adds blocks that exist in contents but not in the editor.
+     * Note: Removal is handled by _filterUnusedBlocks in the RTE base element,
+     * which enables undo support by storing block data before removal.
+     * @param {Array<UmbBlockDataModel>} contents - Array of block data models.
+     */
+    #updateBlocks(contents) {
         if (!contents?.length)
             return;
+        const editor = this._editor;
+        if (!editor)
+            return;
+        // Find existing blocks in the editor
         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 = contents.filter((x) => !existingBlocks.find((contentKey) => contentKey === x.key));
+        // ADD blocks that are in contents but NOT in editor
+        const newBlocks = contents.filter((x) => !existingBlocks.includes(x.key));
         newBlocks.forEach((block) => {
             const inline = this.#blockTypes?.get(block.contentTypeKey)?.displayInline ?? false;
             if (inline) {
@@ -38,4 +72,31 @@ export default class UmbTiptapBlockElementApi extends UmbTiptapExtensionApiBase
             }
         });
     }
+    /**
+     * Remove blocks from the editor by content keys.
+     * @param {Array<string>} contentKeys - Array of content keys to remove.
+     */
+    #removeBlocksFromEditor(contentKeys) {
+        const editor = this._editor;
+        if (!editor)
+            return;
+        // Collect positions to delete
+        const nodesToDelete = [];
+        editor.state.doc.descendants((node, pos) => {
+            const contentKey = node.attrs[UMB_BLOCK_RTE_DATA_CONTENT_KEY];
+            if (contentKey && contentKeys.includes(contentKey)) {
+                nodesToDelete.push({ pos, size: node.nodeSize });
+            }
+            return true; // Continue traversal to find all matches
+        });
+        if (nodesToDelete.length === 0)
+            return;
+        // Delete in reverse order (highest position first) to maintain valid positions
+        nodesToDelete.sort((a, b) => b.pos - a.pos);
+        let tr = editor.state.tr;
+        for (const { pos, size } of nodesToDelete) {
+            tr = tr.delete(pos, pos + size);
+        }
+        editor.view.dispatch(tr);
+    }
 }

package/dist-cms/packages/tiptap/extensions/bubble-menu/bubble-menu.tiptap-extension.d.ts

@@ -4,10 +4,12 @@ import { Plugin } from '@tiptap/pm/state';
 import type { EditorState } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 import type { UUIPopoverContainerElement } from '../../../../external/uui/index.js';
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export interface UmbTiptapBubbleMenuElement extends HTMLElement {
     editor?: Editor;
     menuAlias?: string;
 }
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export type UmbTiptapBubbleMenuPluginProps = {
     unique: string;
     placement?: UUIPopoverContainerElement['placement'];
@@ -21,6 +23,9 @@ export type UmbTiptapBubbleMenuPluginProps = {
         to: number;
     }) => boolean) | null;
 };
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export type UmbBubbleMenuOptions = UmbTiptapBubbleMenuPluginProps;
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export declare const UmbBubbleMenu: Extension<UmbTiptapBubbleMenuPluginProps, any>;
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export declare const UmbBubbleMenuPlugin: (editor: Editor, props: UmbTiptapBubbleMenuPluginProps) => Plugin<any>;

package/dist-cms/packages/tiptap/extensions/bubble-menu/bubble-menu.tiptap-extension.js

@@ -1,6 +1,7 @@
 /* eslint-disable local-rules/enforce-umbraco-external-imports */
 import { Extension } from '../../externals.js';
 import { Plugin } from '@tiptap/pm/state';
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export const UmbBubbleMenu = Extension.create({
     name: 'umbBubbleMenu',
     addOptions() {
@@ -66,6 +67,7 @@ class UmbBubbleMenuPluginView {
         this.#popover.remove();
     }
 }
+/** @deprecated No longer used internally. This will be removed in Umbraco 19. [LK] */
 export const UmbBubbleMenuPlugin = (editor, props) => {
     return new Plugin({
         view(editorView) {

package/dist-cms/packages/tiptap/extensions/index.d.ts

@@ -1,4 +1,5 @@
 export * from './tiptap-extension-api-base.js';
+export * from './tiptap-toolbar-action-button-api-base.js';
 export * from './tiptap-toolbar-element-api-base.js';
 export * from './anchor/index.js';
 export * from './bubble-menu/index.js';

package/dist-cms/packages/tiptap/extensions/index.js

@@ -1,4 +1,5 @@
 export * from './tiptap-extension-api-base.js';
+export * from './tiptap-toolbar-action-button-api-base.js';
 export * from './tiptap-toolbar-element-api-base.js';
 export * from './anchor/index.js';
 export * from './bubble-menu/index.js';

package/dist-cms/packages/tiptap/extensions/link/link.tiptap-extension.js

@@ -7,6 +7,8 @@ export const UmbLink = Link.extend({
         return {
             ...this.parent?.(),
             'data-anchor': { default: null },
+            'data-culture': { default: null },
+            target: { default: null },
             title: { default: null },
             type: { default: 'external' },
         };
@@ -19,7 +21,6 @@ export const UmbLink = Link.extend({
         return {
             ...this.parent?.(),
             HTMLAttributes: {
-                target: '',
                 'data-router-slot': 'disabled',
             },
         };

package/dist-cms/packages/tiptap/extensions/link/link.tiptap-toolbar-api.js

@@ -22,6 +22,7 @@ export default class UmbTiptapToolbarLinkExtensionApi extends UmbTiptapToolbarEl
     }
     #getLinkData(attrs) {
         const queryString = attrs['data-anchor'];
+        const culture = attrs['data-culture'];
         const url = attrs.href?.substring(0, attrs.href.length - (queryString?.length ?? 0));
         const unique = url?.includes('localLink:') ? url.substring(url.indexOf(':') + 1, url.indexOf('}')) : null;
         return {
@@ -31,10 +32,11 @@ export default class UmbTiptapToolbarLinkExtensionApi extends UmbTiptapToolbarEl
             type: attrs.type,
             unique,
             url,
+            culture,
         };
     }
     #parseLinkData(link) {
-        const { name, target, type, unique } = link;
+        const { name, target, type, unique, culture } = link;
         let { queryString, url } = link;
         // If an anchor exists, check that it is appropriately prefixed
         queryString = this.#queryStringFromUrl(queryString);
@@ -67,6 +69,7 @@ export default class UmbTiptapToolbarLinkExtensionApi extends UmbTiptapToolbarEl
             'data-anchor': anchor,
             target,
             title: name ?? url,
+            'data-culture': culture,
         };
     }
     #extractUrlAndQueryString(url, queryString) {

package/dist-cms/packages/tiptap/extensions/link/manifests.js

@@ -25,11 +25,10 @@ export const manifests = [
     },
     {
         type: 'tiptapToolbarExtension',
-        kind: 'button',
+        kind: 'actionButton',
         alias: 'Umb.Tiptap.Toolbar.Unlink',
         name: 'Unlink Tiptap Toolbar Extension',
         api: () => import('./unlink.tiptap-toolbar-api.js'),
-        element: () => import('../../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
         forExtensions: ['Umb.Tiptap.Link'],
         meta: {
             alias: 'unlink',

package/dist-cms/packages/tiptap/extensions/link/unlink.tiptap-toolbar-api.d.ts

@@ -1,7 +1,6 @@
 import type { Editor } from '../../externals.js';
-import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
-export default class UmbTiptapToolbarUnlinkExtensionApi extends UmbTiptapToolbarElementApiBase {
+import { UmbTiptapToolbarActionButtonApiBase } from '../tiptap-toolbar-action-button-api-base.js';
+export default class UmbTiptapToolbarUnlinkExtensionApi extends UmbTiptapToolbarActionButtonApiBase {
     isActive: (editor?: Editor) => boolean;
-    isDisabled: (editor?: Editor) => boolean;
     execute(editor?: Editor): void;
 }

package/dist-cms/packages/tiptap/extensions/link/unlink.tiptap-toolbar-api.js

@@ -1,9 +1,8 @@
-import { UmbTiptapToolbarElementApiBase } from '../tiptap-toolbar-element-api-base.js';
-export default class UmbTiptapToolbarUnlinkExtensionApi extends UmbTiptapToolbarElementApiBase {
+import { UmbTiptapToolbarActionButtonApiBase } from '../tiptap-toolbar-action-button-api-base.js';
+export default class UmbTiptapToolbarUnlinkExtensionApi extends UmbTiptapToolbarActionButtonApiBase {
     constructor() {
         super(...arguments);
         this.isActive = (editor) => editor?.isActive('umbLink') === true;
-        this.isDisabled = (editor) => !this.isActive(editor);
     }
     execute(editor) {
         editor?.chain().focus().unsetUmbLink().run();

package/dist-cms/packages/tiptap/extensions/manifests.js

@@ -1,6 +1,7 @@
+import { manifest as actionButtonKind } from './tiptap-toolbar-action-button.kind.js';
 import { manifest as buttonKind } from './tiptap-toolbar-button.kind.js';
-import { manifest as colorPickerButton } from './tiptap-toolbar-color-picker-button.kind.js';
-import { manifest as menuButton } from './tiptap-toolbar-menu.kind.js';
+import { manifest as colorPickerButtonKind } from './tiptap-toolbar-color-picker-button.kind.js';
+import { manifest as menuButtonKind } from './tiptap-toolbar-menu.kind.js';
 import { manifest as styleMenuKind } from './style-menu/style-menu.kind.js';
 import { manifests as anchor } from './anchor/manifests.js';
 import { manifests as block } from './block/manifests.js';
@@ -44,7 +45,7 @@ import { manifests as underline } from './underline/manifests.js';
 import { manifests as undoRedo } from './undo-redo/manifests.js';
 import { manifests as viewSource } from './view-source/manifests.js';
 import { manifests as wordCount } from './word-count/manifests.js';
-const kinds = [buttonKind, colorPickerButton, menuButton, styleMenuKind];
+const kinds = [actionButtonKind, buttonKind, colorPickerButtonKind, menuButtonKind, styleMenuKind];
 export const manifests = [
     ...kinds,
     ...anchor,

package/dist-cms/packages/tiptap/extensions/table/plugins/table-handle.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '../../../externals.js';
+import { Plugin } from '@tiptap/pm/state';
+/**
+ * Creates the TableHandlePlugin for managing table grips and context menus.
+ * @param {Editor} editor The Tiptap editor instance to which the plugin will be attached.
+ * @returns {Plugin} Returns a ProseMirror plugin instance that manages table grips and context menus.
+ */
+export declare const TableHandlePlugin: (editor: Editor) => Plugin;