@umbraco-cms/backoffice 16.0.0 → 16.1.0

package/dist-cms/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.js

@@ -5,39 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from './script-folder-workspace.context-token.js';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-const elementName = 'umb-script-folder-workspace-editor';
 let UmbScriptFolderWorkspaceEditorElement = class UmbScriptFolderWorkspaceEditorElement extends UmbLitElement {
-    #workspaceContext;
     constructor() {
         super();
-        this._name = '';
         this.consumeContext(UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
-            this.#workspaceContext = workspaceContext;
-            this.#observeName();
+            workspaceContext?.nameWriteGuard.addRule({
+                unique: 'UMB_SERVER_PREVENT_FILE_SYSTEM_FOLDER_RENAME',
+                permitted: false,
+                message: 'It is not possible to change the name of a script folder.',
+            });
         });
     }
-    #observeName() {
-        if (!this.#workspaceContext)
-            return;
-        this.observe(this.#workspaceContext.name, (name) => {
-            if (name !== this._name) {
-                this._name = name ?? '';
-            }
-        }, 'observeName');
-    }
     render() {
-        return html `<umb-workspace-editor headline=${this._name}> </umb-workspace-editor>`;
+        return html `<umb-folder-workspace-editor></umb-folder-workspace-editor>`;
     }
-    static { this.styles = [UmbTextStyles, css ``]; }
 };
-__decorate([
-    state()
-], UmbScriptFolderWorkspaceEditorElement.prototype, "_name", void 0);
 UmbScriptFolderWorkspaceEditorElement = __decorate([
-    customElement(elementName)
+    customElement('umb-script-folder-workspace-editor')
 ], UmbScriptFolderWorkspaceEditorElement);
 export { UmbScriptFolderWorkspaceEditorElement };
 export { UmbScriptFolderWorkspaceEditorElement as element };

package/dist-cms/packages/templating/stylesheets/entity-actions/rename/rename-stylesheet.server.data-source.d.ts

@@ -10,7 +10,7 @@ export declare class UmbRenameStylesheetServerDataSource {
      * @memberof UmbRenameStylesheetServerDataSource
      */
     rename(unique: string, name: string): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: import("../../types.js").UmbStylesheetDetailModel;

package/dist-cms/packages/templating/stylesheets/repository/item/stylesheet-item.server.data-source.d.ts

@@ -24,7 +24,7 @@ export declare class UmbStylesheetItemServerDataSource implements UmbItemDataSou
         data: UmbStylesheetItemModel[];
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/templating/stylesheets/repository/stylesheet-detail.server.data-source.d.ts

@@ -8,21 +8,21 @@ export declare class UmbStylesheetDetailServerDataSource implements UmbDetailDat
         data: UmbStylesheetDetailModel;
     }>;
     create(model: UmbStylesheetDetailModel, parentUnique?: string | null): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbStylesheetDetailModel;
         error?: undefined;
     }>;
     read(unique: string): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbStylesheetDetailModel;
         error?: undefined;
     }>;
     update(model: UmbStylesheetDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbStylesheetDetailModel;

package/dist-cms/packages/templating/stylesheets/tree/folder/repository/stylesheet-folder.server.data-source.d.ts

@@ -32,7 +32,7 @@ export declare class UmbStylesheetFolderServerDataSource implements UmbDetailDat
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
     /**
@@ -50,7 +50,7 @@ export declare class UmbStylesheetFolderServerDataSource implements UmbDetailDat
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
     /**

package/dist-cms/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.d.ts

@@ -1,15 +1,11 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-declare const elementName = "umb-stylesheet-folder-workspace-editor";
 export declare class UmbStylesheetFolderWorkspaceEditorElement extends UmbLitElement {
-    #private;
-    private _name;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
 }
 export { UmbStylesheetFolderWorkspaceEditorElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbStylesheetFolderWorkspaceEditorElement;
+        ['umb-stylesheet-folder-workspace-editor']: UmbStylesheetFolderWorkspaceEditorElement;
     }
 }

package/dist-cms/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.js

@@ -5,39 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_STYLESHEET_FOLDER_WORKSPACE_CONTEXT } from './stylesheet-folder-workspace.context-token.js';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-const elementName = 'umb-stylesheet-folder-workspace-editor';
 let UmbStylesheetFolderWorkspaceEditorElement = class UmbStylesheetFolderWorkspaceEditorElement extends UmbLitElement {
-    #workspaceContext;
     constructor() {
         super();
-        this._name = '';
         this.consumeContext(UMB_STYLESHEET_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
-            this.#workspaceContext = workspaceContext;
-            this.#observeName();
+            workspaceContext?.nameWriteGuard.addRule({
+                unique: 'UMB_SERVER_PREVENT_FILE_SYSTEM_FOLDER_RENAME',
+                permitted: false,
+                message: 'It is not possible to change the name of a Stylesheet folder.',
+            });
         });
     }
-    #observeName() {
-        if (!this.#workspaceContext)
-            return;
-        this.observe(this.#workspaceContext.name, (name) => {
-            if (name !== this._name) {
-                this._name = name ?? '';
-            }
-        }, 'observeName');
-    }
     render() {
-        return html `<umb-workspace-editor headline=${this._name}> </umb-workspace-editor>`;
+        return html `<umb-folder-workspace-editor></umb-folder-workspace-editor>`;
     }
-    static { this.styles = [UmbTextStyles, css ``]; }
 };
-__decorate([
-    state()
-], UmbStylesheetFolderWorkspaceEditorElement.prototype, "_name", void 0);
 UmbStylesheetFolderWorkspaceEditorElement = __decorate([
-    customElement(elementName)
+    customElement('umb-stylesheet-folder-workspace-editor')
 ], UmbStylesheetFolderWorkspaceEditorElement);
 export { UmbStylesheetFolderWorkspaceEditorElement };
 export { UmbStylesheetFolderWorkspaceEditorElement as element };

package/dist-cms/packages/templating/templates/repository/detail/template-detail.server.data-source.d.ts

@@ -30,7 +30,7 @@ export declare class UmbTemplateServerDataSource implements UmbDetailDataSource<
      * @memberof UmbTemplateServerDataSource
      */
     read(unique: string): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbTemplateDetailModel;
@@ -43,7 +43,7 @@ export declare class UmbTemplateServerDataSource implements UmbDetailDataSource<
      * @memberof UmbTemplateServerDataSource
      */
     create(model: UmbTemplateDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbTemplateDetailModel;
@@ -57,7 +57,7 @@ export declare class UmbTemplateServerDataSource implements UmbDetailDataSource<
      * @memberof UmbTemplateServerDataSource
      */
     update(model: UmbTemplateDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbTemplateDetailModel;

package/dist-cms/packages/templating/templates/repository/item/template-item.server.data-source.d.ts

@@ -16,6 +16,6 @@ export declare class UmbTemplateItemServerDataSource extends UmbItemServerDataSo
     constructor(host: UmbControllerHost);
     getItems(uniques: Array<string>): Promise<{
         data: UmbTemplateItemModel[] | undefined;
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError | undefined;
     }>;
 }

package/dist-cms/packages/templating/templates/search/template-search.repository.d.ts

@@ -13,7 +13,7 @@ export declare class UmbTemplateSearchRepository extends UmbControllerBase imple
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/templating/templates/search/template-search.server.data-source.d.ts

@@ -27,7 +27,7 @@ export declare class UmbTemplateSearchServerDataSource implements UmbSearchDataS
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/templating/templates/search/template.search-provider.d.ts

@@ -13,7 +13,7 @@ export declare class UmbTemplateSearchProvider extends UmbControllerBase impleme
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
     destroy(): void;

package/dist-cms/packages/templating/templates/workspace/template-workspace.context.d.ts

@@ -12,7 +12,7 @@ export declare class UmbTemplateWorkspaceContext extends UmbEntityNamedDetailWor
     readonly content: import("rxjs").Observable<string | null | undefined>;
     readonly masterTemplateUnique: import("rxjs").Observable<string | undefined>;
     constructor(host: UmbControllerHost);
-    load(unique: string): Promise<import("@umbraco-cms/backoffice/repository").UmbRepositoryResponse<UmbTemplateDetailModel> | import("@umbraco-cms/backoffice/repository").UmbRepositoryResponseWithAsObservable<UmbTemplateDetailModel>>;
+    load(unique: string): Promise<import("@umbraco-cms/backoffice/repository").UmbRepositoryResponse<UmbTemplateDetailModel> | import("@umbraco-cms/backoffice/repository").UmbRepositoryResponseWithAsObservable<UmbTemplateDetailModel, UmbTemplateDetailModel>>;
     create(parent: any): Promise<UmbTemplateDetailModel | undefined>;
     setAlias(value: string): void;
     setContent(value: string): void;

package/dist-cms/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.d.ts

@@ -6,6 +6,7 @@ export type UmbCascadingMenuItem = {
     element?: HTMLElement;
     separatorAfter?: boolean;
     style?: string;
+    isActive?: () => boolean | undefined;
     execute?: () => void;
 };
 declare const UmbCascadingMenuPopoverElement_base: import("@umbraco-cms/backoffice/extension-api").HTMLElementConstructor<import("@umbraco-cms/backoffice/element-api").UmbElement> & typeof UUIPopoverContainerElement;

package/dist-cms/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.js

@@ -11,8 +11,11 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
     #getPopoverById(popoverId) {
         return this.shadowRoot?.querySelector(`#${popoverId}`);
     }
+    #isMenuActive(items) {
+        return !!items?.some((item) => item.isActive?.() || this.#isMenuActive(item.items));
+    }
     #onMouseEnter(item, popoverId) {
-        if (!item.items?.length)
+        if (!item.items?.length || !popoverId)
             return;
         const popover = this.#getPopoverById(popoverId);
         if (!popover)
@@ -23,6 +26,8 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
         popover.showPopover();
     }
     #onMouseLeave(item, popoverId) {
+        if (!popoverId)
+            return;
         const popover = this.#getPopoverById(popoverId);
         if (!popover)
             return;
@@ -33,9 +38,13 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
     }
     #onClick(item, popoverId) {
         item.execute?.();
-        setTimeout(() => {
-            this.#onMouseLeave(item, popoverId);
-        }, 100);
+        if (!popoverId) {
+            setTimeout(() => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                this.hidePopover();
+            }, 100);
+        }
     }
     render() {
         return html `
@@ -45,12 +54,13 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
 		`;
     }
     #renderItem(item, index) {
-        const popoverId = `item-${index}`;
+        const popoverId = item.items ? `menu-${index}` : undefined;
         const element = item.element;
-        if (element) {
+        if (element && popoverId) {
             element.setAttribute('popovertarget', popoverId);
         }
         const label = this.localize.string(item.label);
+        const isActive = item.isActive?.() || this.#isMenuActive(item.items) || false;
         return html `
 			<div
 				@mouseenter=${() => this.#onMouseEnter(item, popoverId)}
@@ -59,7 +69,9 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
 						<uui-menu-item
 							class=${item.separatorAfter ? 'separator' : ''}
 							label=${label}
-							popovertarget=${popoverId}
+							popovertarget=${ifDefined(popoverId)}
+							select-mode="highlight"
+							?selected=${isActive}
 							@click-label=${() => this.#onClick(item, popoverId)}>
 							${when(item.icon, (icon) => html `<uui-icon slot="icon" name=${icon}></uui-icon>`)}
 							<div slot="label" class="menu-item">
@@ -68,8 +80,10 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
 							</div>
 						</uui-menu-item>
 					`)}
-				<umb-cascading-menu-popover id=${popoverId} placement="right-start" .items=${item.items}>
-				</umb-cascading-menu-popover>
+				${when(popoverId, (popoverId) => html `
+						<umb-cascading-menu-popover id=${popoverId} placement="right-start" .items=${item.items}>
+						</umb-cascading-menu-popover>
+					`)}
 			</div>
 		`;
     }

package/dist-cms/packages/tiptap/components/toolbar/style-menu.tiptap-toolbar-api.d.ts

@@ -3,5 +3,6 @@ import type { MetaTiptapToolbarStyleMenuItem } from '../../extensions/types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 export default class UmbTiptapToolbarStyleMenuApi extends UmbTiptapToolbarElementApiBase {
     #private;
+    isActive(editor?: Editor, item?: MetaTiptapToolbarStyleMenuItem): boolean;
     execute(editor?: Editor, item?: MetaTiptapToolbarStyleMenuItem): void;
 }

package/dist-cms/packages/tiptap/components/toolbar/style-menu.tiptap-toolbar-api.js

@@ -1,31 +1,49 @@
 import { UmbTiptapToolbarElementApiBase } from '../../extensions/base.js';
 export default class UmbTiptapToolbarStyleMenuApi extends UmbTiptapToolbarElementApiBase {
+    #headingCommand(level) {
+        return {
+            type: 'heading',
+            command: (chain) => chain.toggleHeading({ level }),
+            isActive: (editor) => editor?.isActive('heading', { level }),
+        };
+    }
     #commands = {
-        h1: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 1 }) },
-        h2: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 2 }) },
-        h3: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 3 }) },
-        h4: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 4 }) },
-        h5: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 5 }) },
-        h6: { type: 'heading', command: (chain) => chain.toggleHeading({ level: 6 }) },
+        h1: this.#headingCommand(1),
+        h2: this.#headingCommand(2),
+        h3: this.#headingCommand(3),
+        h4: this.#headingCommand(4),
+        h5: this.#headingCommand(5),
+        h6: this.#headingCommand(6),
         p: { type: 'paragraph', command: (chain) => chain.setParagraph() },
         blockquote: { type: 'blockquote', command: (chain) => chain.toggleBlockquote() },
         code: { type: 'code', command: (chain) => chain.toggleCode() },
         codeBlock: { type: 'codeBlock', command: (chain) => chain.toggleCodeBlock() },
         div: { type: 'div', command: (chain) => chain.toggleNode('div', 'paragraph') },
-        em: { type: 'italic', command: (chain) => chain.setItalic() },
+        em: { type: 'italic', command: (chain) => chain.toggleItalic() },
         ol: { type: 'orderedList', command: (chain) => chain.toggleOrderedList() },
-        strong: { type: 'bold', command: (chain) => chain.setBold() },
-        s: { type: 'strike', command: (chain) => chain.setStrike() },
+        strong: { type: 'bold', command: (chain) => chain.toggleBold() },
+        s: { type: 'strike', command: (chain) => chain.toggleStrike() },
         span: { type: 'span', command: (chain) => chain.toggleMark('span') },
-        u: { type: 'underline', command: (chain) => chain.setUnderline() },
+        u: { type: 'underline', command: (chain) => chain.toggleUnderline() },
         ul: { type: 'bulletList', command: (chain) => chain.toggleBulletList() },
     };
+    isActive(editor, item) {
+        if (!editor || !item?.data)
+            return false;
+        const { tag, id, class: className } = item.data;
+        const ext = tag ? this.#commands[tag] : null;
+        const attrs = editor?.getAttributes(ext?.type ?? 'paragraph');
+        const tagMatch = !tag ? true : ext ? (ext.isActive?.(editor) ?? editor?.isActive(ext.type) ?? false) : false;
+        const idMatch = !id ? true : attrs.id === id;
+        const classMatch = !className ? true : attrs.class?.includes(className) === true;
+        return tagMatch && idMatch && classMatch;
+    }
     execute(editor, item) {
         if (!editor || !item?.data)
             return;
         const { tag, id, class: className } = item.data;
         const focus = editor.chain().focus();
         const ext = tag ? this.#commands[tag] : null;
-        (ext?.command?.(focus) ?? focus).setId(id, ext?.type).setClassName(className, ext?.type).run();
+        (ext?.command?.(focus) ?? focus).toggleId(id, ext?.type).toggleClassName(className, ext?.type).run();
     }
 }

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

@@ -4,7 +4,7 @@ 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 { customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 let UmbTiptapToolbarButtonElement = class UmbTiptapToolbarButtonElement extends UmbLitElement {
     constructor() {
@@ -37,7 +37,7 @@ let UmbTiptapToolbarButtonElement = class UmbTiptapToolbarButtonElement extends
 			<uui-button
 				compact
 				look=${this.isActive ? 'outline' : 'default'}
-				label=${ifDefined(this.manifest?.meta.label)}
+				label=${label}
 				title=${label}
 				?disabled=${this.api && this.editor && this.api.isDisabled(this.editor)}
 				@click=${() => this.api?.execute(this.editor)}>

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

@@ -4,7 +4,7 @@ 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 { css, customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import '../../components/cascading-menu-popover/cascading-menu-popover.element.js';
 let UmbTiptapToolbarMenuElement = class UmbTiptapToolbarMenuElement extends UmbLitElement {
@@ -14,7 +14,7 @@ let UmbTiptapToolbarMenuElement = class UmbTiptapToolbarMenuElement extends UmbL
         this.isActive = false;
         this.#onEditorUpdate = () => {
             if (this.api && this.editor && this.manifest) {
-                this.isActive = this.api.isActive(this.editor);
+                this.isActive = this.api.isActive(this.editor) || this.#isMenuActive(this.#menu) || false;
             }
         };
     }
@@ -84,9 +84,13 @@ let UmbTiptapToolbarMenuElement = class UmbTiptapToolbarMenuElement extends UmbL
             style: item.appearance?.style ?? item.style,
             separatorAfter: item.separatorAfter,
             element,
+            isActive: () => this.api?.isActive(this.editor, item),
             execute: () => this.api?.execute(this.editor, item),
         };
     }
+    #isMenuActive(items) {
+        return !!items?.some((item) => item.isActive?.() || this.#isMenuActive(item.items));
+    }
     #onEditorUpdate;
     render() {
         const label = this.localize.string(this.manifest?.meta.label);
@@ -94,15 +98,19 @@ let UmbTiptapToolbarMenuElement = class UmbTiptapToolbarMenuElement extends UmbL
 			${when(this.manifest?.meta.look === 'icon', () => html `
 					<uui-button
 						compact
+						label=${label}
 						look=${this.isActive ? 'outline' : 'default'}
-						label=${ifDefined(label)}
 						title=${label}
 						popovertarget="popover-menu">
 						${when(this.manifest?.meta.icon, (icon) => html `<umb-icon name=${icon}></umb-icon>`, () => html `<span>${label}</span>`)}
 						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
 					</uui-button>
 				`, () => html `
-					<uui-button compact label=${ifDefined(label)} popovertarget="popover-menu">
+					<uui-button
+						compact
+						label=${label}
+						look=${this.isActive ? 'outline' : 'default'}
+						popovertarget="popover-menu">
 						<span>${label}</span>
 						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
 					</uui-button>

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

@@ -606,15 +606,15 @@ const toolbarExtensions = [
         name: 'Font Size Tiptap Extension',
         api: () => import('./toolbar/font-size.tiptap-toolbar-api.js'),
         items: [
-            { label: '8pt', data: '8pt;' },
-            { label: '10pt', data: '10pt;' },
-            { label: '12pt', data: '12pt;' },
-            { label: '14pt', data: '14pt;' },
-            { label: '16pt', data: '16pt;' },
-            { label: '18pt', data: '18pt;' },
-            { label: '24pt', data: '24pt;' },
-            { label: '26pt', data: '26pt;' },
-            { label: '48pt', data: '48pt;' },
+            { label: '8pt', data: '8pt' },
+            { label: '10pt', data: '10pt' },
+            { label: '12pt', data: '12pt' },
+            { label: '14pt', data: '14pt' },
+            { label: '16pt', data: '16pt' },
+            { label: '18pt', data: '18pt' },
+            { label: '24pt', data: '24pt' },
+            { label: '26pt', data: '26pt' },
+            { label: '48pt', data: '48pt' },
         ],
         meta: {
             alias: 'umbFontSize',

package/dist-cms/packages/tiptap/extensions/table/components/table-toolbar-menu.element.js

@@ -23,7 +23,7 @@ let UmbTiptapTableToolbarMenuElement = class UmbTiptapTableToolbarMenuElement ex
 					</uui-button>
 				`)}
 			${this.renderMenu()}
-			<uui-popover-container id="popover-insert">
+			<uui-popover-container id="popover-insert" style="box-shadow: var(--uui-shadow-depth-3);">
 				<umb-tiptap-table-insert .editor=${this.editor}></umb-tiptap-table-insert>
 			</uui-popover-container>
 		`;

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

@@ -3,6 +3,7 @@ import type { MetaTiptapToolbarMenuItem } from '../types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 export declare class UmbTiptapToolbarTableExtensionApi extends UmbTiptapToolbarElementApiBase {
     #private;
+    isActive(editor?: Editor, item?: unknown): boolean;
     execute(editor?: Editor, item?: MetaTiptapToolbarMenuItem): void;
 }
 export { UmbTiptapToolbarTableExtensionApi as api };

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

@@ -22,6 +22,11 @@ export class UmbTiptapToolbarTableExtensionApi extends UmbTiptapToolbarElementAp
         deleteTable: (editor) => editor?.chain().focus().deleteTable().run(),
         tableProperties: (editor) => this.#tableProperties(editor),
     };
+    isActive(editor, item) {
+        if (!item)
+            return super.isActive(editor);
+        return false;
+    }
     async #tableProperties(editor) {
         if (!editor || !editor.isActive('table'))
             return;

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

@@ -1,6 +1,6 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
 export default class UmbTiptapToolbarClearFormattingExtensionApi extends UmbTiptapToolbarElementApiBase {
     execute(editor) {
-        editor?.chain().focus().unsetAllMarks().run();
+        editor?.chain().focus().unsetAllMarks().unsetClassName().unsetStyles().run();
     }
 }

package/dist-cms/packages/tiptap/extensions/toolbar/font-family.tiptap-toolbar-api.d.ts

@@ -2,5 +2,6 @@ import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { MetaTiptapToolbarMenuItem } from '../types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 export default class UmbTiptapToolbarFontFamilyExtensionApi extends UmbTiptapToolbarElementApiBase {
+    isActive(editor?: Editor, item?: MetaTiptapToolbarMenuItem): boolean;
     execute(editor?: Editor, item?: MetaTiptapToolbarMenuItem): void;
 }

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

@@ -1,8 +1,12 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
 export default class UmbTiptapToolbarFontFamilyExtensionApi extends UmbTiptapToolbarElementApiBase {
+    isActive(editor, item) {
+        const styles = editor?.getAttributes('span')?.style;
+        return styles?.includes(`font-family: ${item?.data};`) === true;
+    }
     execute(editor, item) {
         if (!item?.data)
             return;
-        editor?.chain().focus().setSpanStyle(`font-family: ${item.data};`).run();
+        editor?.chain().focus().toggleSpanStyle(`font-family: ${item.data};`).run();
     }
 }

package/dist-cms/packages/tiptap/extensions/toolbar/font-size.tiptap-toolbar-api.d.ts

@@ -2,5 +2,6 @@ import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { MetaTiptapToolbarMenuItem } from '../types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 export default class UmbTiptapToolbarFontFamilyExtensionApi extends UmbTiptapToolbarElementApiBase {
+    isActive(editor?: Editor, item?: MetaTiptapToolbarMenuItem): boolean;
     execute(editor?: Editor, item?: MetaTiptapToolbarMenuItem): void;
 }

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

@@ -1,8 +1,12 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
 export default class UmbTiptapToolbarFontFamilyExtensionApi extends UmbTiptapToolbarElementApiBase {
+    isActive(editor, item) {
+        const styles = editor?.getAttributes('span')?.style;
+        return styles?.includes(`font-size: ${item?.data};`) === true;
+    }
     execute(editor, item) {
         if (!item?.data)
             return;
-        editor?.chain().focus().setSpanStyle(`font-size: ${item.data};`).run();
+        editor?.chain().focus().toggleSpanStyle(`font-size: ${item.data};`).run();
     }
 }

package/dist-cms/packages/tiptap/extensions/toolbar/text-color-background.tiptap-toolbar-api.js

@@ -1,6 +1,6 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
 export default class UmbTiptapToolbarTextColorBackgroundExtensionApi extends UmbTiptapToolbarElementApiBase {
     execute(editor, selectedColor) {
-        editor?.chain().focus().setSpanStyle(`background-color: ${selectedColor};`).run();
+        editor?.chain().focus().toggleSpanStyle(`background-color: ${selectedColor};`).run();
     }
 }

package/dist-cms/packages/tiptap/extensions/toolbar/text-color-foreground.tiptap-toolbar-api.js

@@ -1,6 +1,6 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
 export default class UmbTiptapToolbarTextColorForegroundExtensionApi extends UmbTiptapToolbarElementApiBase {
     execute(editor, selectedColor) {
-        editor?.chain().focus().setSpanStyle(`color: ${selectedColor};`).run();
+        editor?.chain().focus().toggleSpanStyle(`color: ${selectedColor};`).run();
     }
 }