@umbraco-cms/backoffice 16.1.0 → 16.2.0-rc

package/dist-cms/packages/templating/templates/global-components/template-card/template-card.element.js

@@ -20,14 +20,15 @@ let UmbTemplateCardElement = class UmbTemplateCardElement extends UUIFormControl
         super(...arguments);
         this.name = '';
         this.default = false;
-        this._id = '';
+        this.#id = '';
     }
+    #id;
     set id(newId) {
-        this._id = newId;
+        this.#id = newId;
         super.value = newId;
     }
     get id() {
-        return this._id;
+        return this.#id;
     }
     getFormElement() {
         return undefined;

package/dist-cms/packages/templating/templates/tree/manifests.d.ts

@@ -1,4 +1,7 @@
 export declare const UMB_TEMPLATE_TREE_REPOSITORY_ALIAS = "Umb.Repository.Template.Tree";
+/**
+ * @deprecated Use {@link UMB_TEMPLATE_TREE_REPOSITORY_ALIAS} instead. This will be removed in Umbraco 18.
+ */
 export declare const UMB_TEMPLATE_TREE_STORE_ALIAS = "Umb.Store.Template.Tree";
 export declare const UMB_TEMPLATE_TREE_ALIAS = "Umb.Tree.Template";
 export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/templating/templates/tree/manifests.js

@@ -1,6 +1,9 @@
 import { UMB_TEMPLATE_ENTITY_TYPE, UMB_TEMPLATE_ROOT_ENTITY_TYPE } from '../entity.js';
 import { manifests as reloadTreeItemChildrenManifest } from './reload-tree-item-children/manifests.js';
 export const UMB_TEMPLATE_TREE_REPOSITORY_ALIAS = 'Umb.Repository.Template.Tree';
+/**
+ * @deprecated Use {@link UMB_TEMPLATE_TREE_REPOSITORY_ALIAS} instead. This will be removed in Umbraco 18.
+ */
 export const UMB_TEMPLATE_TREE_STORE_ALIAS = 'Umb.Store.Template.Tree';
 export const UMB_TEMPLATE_TREE_ALIAS = 'Umb.Tree.Template';
 export const manifests = [

package/dist-cms/packages/templating/templates/tree/template-tree.store.context-token.d.ts

@@ -1,3 +1,6 @@
 import type { UmbTemplateTreeStore } from './template-tree.store.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+/**
+ * @deprecated - Use `UmbTemplateTreeRepository` instead. This will be removed in Umbraco 18.
+ */
 export declare const UMB_TEMPLATE_TREE_STORE_CONTEXT: UmbContextToken<UmbTemplateTreeStore, UmbTemplateTreeStore>;

package/dist-cms/packages/templating/templates/tree/template-tree.store.context-token.js

@@ -1,2 +1,5 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+/**
+ * @deprecated - Use `UmbTemplateTreeRepository` instead. This will be removed in Umbraco 18.
+ */
 export const UMB_TEMPLATE_TREE_STORE_CONTEXT = new UmbContextToken('UmbTemplateTreeStore');

package/dist-cms/packages/templating/templates/tree/template-tree.store.d.ts

@@ -4,6 +4,7 @@ import { UmbUniqueTreeStore } from '@umbraco-cms/backoffice/tree';
  * @class UmbTemplateTreeStore
  * @augments {UmbStoreBase}
  * @description - Tree Data Store for Template Items
+ * @deprecated - Use `UmbTemplateTreeRepository` instead. This will be removed in Umbraco 18.
  */
 export declare class UmbTemplateTreeStore extends UmbUniqueTreeStore {
     /**

package/dist-cms/packages/templating/templates/tree/template-tree.store.js

@@ -4,6 +4,7 @@ import { UmbUniqueTreeStore } from '@umbraco-cms/backoffice/tree';
  * @class UmbTemplateTreeStore
  * @augments {UmbStoreBase}
  * @description - Tree Data Store for Template Items
+ * @deprecated - Use `UmbTemplateTreeRepository` instead. This will be removed in Umbraco 18.
  */
 export class UmbTemplateTreeStore extends UmbUniqueTreeStore {
     /**

package/dist-cms/packages/templating/types.js

@@ -1,9 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export var CodeSnippetType;
 (function (CodeSnippetType) {
     CodeSnippetType["partialView"] = "partialView";
     CodeSnippetType["dictionaryItem"] = "dictionaryItem";
     CodeSnippetType["pageField"] = "pageField";
 })(CodeSnippetType || (CodeSnippetType = {}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export var TemplatingSectionType;
 (function (TemplatingSectionType) {
     TemplatingSectionType["renderChildTemplate"] = "RenderChildTemplate";

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

@@ -4,6 +4,7 @@ export type UmbCascadingMenuItem = {
     icon?: string;
     items?: Array<UmbCascadingMenuItem>;
     element?: HTMLElement;
+    menu?: string;
     separatorAfter?: boolean;
     style?: string;
     isActive?: () => boolean | undefined;

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

@@ -15,7 +15,7 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
         return !!items?.some((item) => item.isActive?.() || this.#isMenuActive(item.items));
     }
     #onMouseEnter(item, popoverId) {
-        if (!item.items?.length || !popoverId)
+        if (!(item.items?.length || item.menu) || !popoverId)
             return;
         const popover = this.#getPopoverById(popoverId);
         if (!popover)
@@ -49,12 +49,14 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
     render() {
         return html `
 			<uui-scroll-container>
-				${when(this.items?.length, () => html `${repeat(this.items, (item, index) => this.#renderItem(item, index))} ${super.render()}`, () => super.render())}
+				${when(this.items?.length, () => repeat(this.items, (item, index) => this.#renderItem(item, index)))}
+				${super.render()}
 			</uui-scroll-container>
 		`;
     }
     #renderItem(item, index) {
-        const popoverId = item.items ? `menu-${index}` : undefined;
+        const hasChildMenu = item.items?.length || !!item.menu;
+        const popoverId = hasChildMenu ? `menu-${index}` : undefined;
         const element = item.element;
         if (element && popoverId) {
             element.setAttribute('popovertarget', popoverId);
@@ -76,12 +78,19 @@ let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extend
 							${when(item.icon, (icon) => html `<uui-icon slot="icon" name=${icon}></uui-icon>`)}
 							<div slot="label" class="menu-item">
 								<span style=${ifDefined(item.style)}>${label}</span>
-								${when(item.items, () => html `<uui-symbol-expand></uui-symbol-expand>`)}
+								${when(hasChildMenu, () => html `<uui-symbol-expand></uui-symbol-expand>`)}
 							</div>
 						</uui-menu-item>
 					`)}
 				${when(popoverId, (popoverId) => html `
 						<umb-cascading-menu-popover id=${popoverId} placement="right-start" .items=${item.items}>
+							${when(item.menu, (menuAlias) => html `
+									<umb-extension-slot
+										type="menu"
+										default-element="umb-tiptap-menu"
+										single
+										.filter=${(menu) => menu.alias === menuAlias}></umb-extension-slot>
+								`)}
 						</umb-cascading-menu-popover>
 					`)}
 			</div>

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

@@ -2,3 +2,4 @@ export * from './input-tiptap/index.js';
 export * from './anchor-modal/index.js';
 export * from './cascading-menu-popover/cascading-menu-popover.element.js';
 export * from './character-map/index.js';
+export * from './menu/index.js';

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

@@ -2,3 +2,4 @@ export * from './input-tiptap/index.js';
 export * from './anchor-modal/index.js';
 export * from './cascading-menu-popover/cascading-menu-popover.element.js';
 export * from './character-map/index.js';
+export * from './menu/index.js';

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

@@ -4,6 +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 { UmbTiptapRteContext } from '../../contexts/tiptap-rte.context.js';
 import { css, customElement, html, property, repeat, state, unsafeCSS, when, } from '@umbraco-cms/backoffice/external/lit';
 import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -20,6 +21,7 @@ const TIPTAP_CORE_EXTENSION_ALIAS = 'Umb.Tiptap.RichTextEssentials';
  */
 const STYLESHEET_ROOT_PATH = '/css';
 let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement) {
+    #context;
     #stylesheets;
     set value(value) {
         if (value === this.#value)
@@ -36,6 +38,7 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
     #value;
     constructor() {
         super();
+        this.#context = new UmbTiptapRteContext(this);
         this.#stylesheets = new Set(['/umbraco/backoffice/css/rte-content.css']);
         this.#value = '';
         /**
@@ -83,13 +86,6 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
         const element = this.shadowRoot?.querySelector('#editor');
         if (!element)
             return;
-        const dimensions = this.configuration?.getValueByAlias('dimensions');
-        if (dimensions?.width) {
-            this.setAttribute('style', `max-width: ${dimensions.width}px;`);
-        }
-        if (dimensions?.height) {
-            element.setAttribute('style', `height: ${dimensions.height}px;`);
-        }
         const stylesheets = this.configuration?.getValueByAlias('stylesheets');
         if (stylesheets?.length) {
             stylesheets.forEach((stylesheet) => {
@@ -117,6 +113,7 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
             editable: !this.readonly,
             extensions: tiptapExtensions,
             content: this.#value,
+            injectCSS: false, // Prevents injecting CSS into `window.document`, as it never applies to the shadow DOM. [LK]
             //enableContentCheck: true,
             onBeforeCreate: ({ editor }) => {
                 this._extensions.forEach((ext) => ext.setEditor(editor));
@@ -130,13 +127,14 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
                 this.dispatchEvent(new UmbChangeEvent());
             },
         });
+        this.#context.setEditor(this._editor);
     }
     render() {
         const loading = !this._editor && !this._extensions?.length;
         return html `
 			${when(loading, () => html `<div id="loader"><uui-loader></uui-loader></div>`)}
 			${when(!loading, () => html `${this.#renderStyles()}${this.#renderToolbar()}`)}
-			<div id="editor" data-mark="input:tiptap-rte"></div>
+			<div id="editor" data-mark="input:tiptap-rte" ?data-loaded=${!loading}></div>
 			${when(!loading, () => this.#renderStatusbar())}
 		`;
     }
@@ -182,6 +180,10 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
 				display: block;
 				position: relative;
 				z-index: 0;
+
+				width: var(--umb-rte-width, unset);
+				min-width: var(--umb-rte-min-width, unset);
+				max-width: var(--umb-rte-max-width, 100%);
 			}
 
 			:host([readonly]) {
@@ -211,13 +213,21 @@ let UmbInputTiptapElement = class UmbInputTiptapElement extends UmbFormControlMi
 				display: flex;
 				overflow: auto;
 				border-radius: var(--uui-border-radius);
-				border: 1px solid var(--umb-tiptap-edge-border-color, var(--uui-color-border));
+				border: 1px solid transparent;
 				padding: 1rem;
 				box-sizing: border-box;
-				height: 100%;
+
+				height: var(--umb-rte-height, 100%);
+				min-height: var(--umb-rte-min-height, 100%);
+				max-height: var(--umb-rte-max-height, 100%);
+
 				width: 100%;
 				max-width: 100%;
 
+				&[data-loaded] {
+					border-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
+				}
+
 				> .tiptap {
 					height: 100%;
 					width: 100%;

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

@@ -1,11 +1,14 @@
 import type { UmbTiptapStatusbarValue } from '../types.js';
-import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+/**
+ * Provides a status bar for the {@link UmbInputTiptapElement}
+ * @element umb-tiptap-statusbar
+ * @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
+ */
 export declare class UmbTiptapStatusbarElement extends UmbLitElement {
     #private;
-    private _lookup?;
     readonly: boolean;
     editor?: Editor;
     configuration?: UmbPropertyEditorConfigCollection;
@@ -13,7 +16,7 @@ export declare class UmbTiptapStatusbarElement extends UmbLitElement {
     get statusbar(): UmbTiptapStatusbarValue;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): typeof nothing | Generator<unknown, void, unknown>;
+    render(): unknown;
     static readonly styles: import("lit").CSSResult;
 }
 declare global {

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

@@ -4,19 +4,29 @@ 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, map, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { debounce } from '@umbraco-cms/backoffice/utils';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbExtensionsElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+/**
+ * Provides a status bar for the {@link UmbInputTiptapElement}
+ * @element umb-tiptap-statusbar
+ * @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
+ */
 let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this.#attached = false;
+        this.#debouncer = debounce(() => this.requestUpdate(), 100);
+        this.#lookup = new Map();
         this.readonly = false;
         this.#statusbar = [[], []];
     }
     #attached;
+    #debouncer;
     #extensionsController;
+    #lookup;
     set statusbar(value) {
         if (typeof value === 'string') {
             value = [[], [value]];
@@ -46,17 +56,26 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
             return;
         this.#extensionsController?.destroy();
         this.#extensionsController = new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'tiptapStatusbarExtension', (manifest) => this.statusbar.flat().includes(manifest.alias), (extensionControllers) => {
-            this._lookup = new Map(extensionControllers.map((ext) => {
-                ext.component?.setAttribute('data-mark', `action:tiptap-statusbar:${ext.alias}`);
-                return [ext.alias, ext.component];
-            }));
+            extensionControllers.forEach((ext) => {
+                if (!this.#lookup.has(ext.alias)) {
+                    ext.component?.setAttribute('data-mark', `action:tiptap-statusbar:${ext.alias}`);
+                    this.#lookup.set(ext.alias, ext.component);
+                    this.#debouncer();
+                }
+            });
         });
         this.#extensionsController.properties = { editor: this.editor, configuration: this.configuration };
     }
     render() {
         if (!this.statusbar.flat().length)
             return nothing;
-        return map(this.statusbar, (area) => html `<div class="area">${map(area, (alias) => this._lookup?.get(alias) ?? nothing)}</div>`);
+        return this.#renderAreas(this.statusbar);
+    }
+    #renderAreas(statusbar) {
+        return repeat(statusbar, (area) => html `<div class="area">${this.#renderActions(area)}</div>`);
+    }
+    #renderActions(aliases) {
+        return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? nothing);
     }
     static { this.styles = css `
 		:host([readonly]) {
@@ -72,10 +91,11 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
 			justify-content: space-between;
 
 			border-radius: var(--uui-border-radius);
-			border: 1px solid var(--uui-color-border);
+			border: 1px solid var(--umb-tiptap-edge-border-color, var(--uui-color-border));
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 			border-top: 0;
+			box-sizing: border-box;
 
 			min-height: var(--uui-size-layout-1);
 			max-height: var(--uui-size-layout-2);
@@ -94,9 +114,6 @@ let UmbTiptapStatusbarElement = class UmbTiptapStatusbarElement extends UmbLitEl
 		}
 	`; }
 };
-__decorate([
-    state()
-], UmbTiptapStatusbarElement.prototype, "_lookup", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbTiptapStatusbarElement.prototype, "readonly", void 0);

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

@@ -1,25 +1,23 @@
 import type { UmbTiptapToolbarValue } from '../types.js';
-import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import '../cascading-menu-popover/cascading-menu-popover.element.js';
 /**
-* Provides a sticky toolbar for the {@link UmbInputTiptapElement}
-* @element umb-tiptap-toolbar
-* @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
-* @cssprop --umb-tiptap-top - Defines the top value for the sticky toolbar
-*/
+ * Provides a sticky toolbar for the {@link UmbInputTiptapElement}
+ * @element umb-tiptap-toolbar
+ * @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
+ * @cssprop --umb-tiptap-top - Defines the top value for the sticky toolbar
+ */
 export declare class UmbTiptapToolbarElement extends UmbLitElement {
     #private;
-    private _lookup?;
     readonly: boolean;
     editor?: Editor;
     configuration?: UmbPropertyEditorConfigCollection;
     toolbar: UmbTiptapToolbarValue;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): typeof nothing | Generator<unknown, void, unknown>;
+    render(): unknown;
     static readonly styles: import("lit").CSSResult;
 }
 declare global {

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

@@ -4,26 +4,31 @@ 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, map, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { debounce } from '@umbraco-cms/backoffice/utils';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbExtensionsElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import '../cascading-menu-popover/cascading-menu-popover.element.js';
 /**
-* Provides a sticky toolbar for the {@link UmbInputTiptapElement}
-* @element umb-tiptap-toolbar
-* @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
-* @cssprop --umb-tiptap-top - Defines the top value for the sticky toolbar
-*/
+ * Provides a sticky toolbar for the {@link UmbInputTiptapElement}
+ * @element umb-tiptap-toolbar
+ * @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
+ * @cssprop --umb-tiptap-top - Defines the top value for the sticky toolbar
+ */
 let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this.#attached = false;
+        this.#debouncer = debounce(() => this.requestUpdate(), 100);
+        this.#lookup = new Map();
         this.readonly = false;
         this.toolbar = [[[]]];
     }
     #attached;
+    #debouncer;
     #extensionsController;
+    #lookup;
     connectedCallback() {
         super.connectedCallback();
         this.#attached = true;
@@ -40,10 +45,13 @@ let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElemen
             return;
         this.#extensionsController?.destroy();
         this.#extensionsController = new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'tiptapToolbarExtension', [], (manifest) => this.toolbar.flat(2).includes(manifest.alias), (extensionControllers) => {
-            this._lookup = new Map(extensionControllers.map((ext) => {
-                ext.component?.setAttribute('data-mark', `action:tiptap-toolbar:${ext.alias}`);
-                return [ext.alias, ext.component];
-            }));
+            extensionControllers.forEach((ext) => {
+                if (!this.#lookup.has(ext.alias)) {
+                    ext.component?.setAttribute('data-mark', `action:tiptap-toolbar:${ext.alias}`);
+                    this.#lookup.set(ext.alias, ext.component);
+                    this.#debouncer();
+                }
+            });
         }, undefined, undefined, () => import('../toolbar/default-tiptap-toolbar-api.js'));
         this.#extensionsController.apiProperties = { configuration: this.configuration };
         this.#extensionsController.elementProperties = { editor: this.editor, configuration: this.configuration };
@@ -51,11 +59,19 @@ let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElemen
     render() {
         if (!this.toolbar.flat(2).length)
             return nothing;
-        return map(this.toolbar, (row) => html `
-				<div class="row">
-					${map(row, (group) => html `<div class="group">${map(group, (alias) => this._lookup?.get(alias) ?? nothing)}</div>`)}
-				</div>
-			`);
+        return this.#renderRows(this.toolbar);
+    }
+    #renderRows(rows) {
+        return repeat(rows, (row) => html `<div class="row">${this.#renderGroups(row)}</div>`);
+    }
+    #renderGroups(groups) {
+        return repeat(groups, (group) => html `<div class="group">${this.#renderActions(group)}</div>`);
+    }
+    #renderActions(aliases) {
+        return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? this.#renderActionPlaceholder());
+    }
+    #renderActionPlaceholder() {
+        return html `<span class="skeleton" role="none"></span>`;
     }
     static { this.styles = css `
 		:host([readonly]) {
@@ -72,6 +88,7 @@ let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElemen
 			border-top-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
 			border-left-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
 			border-right-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
+			box-sizing: border-box;
 
 			background-color: var(--uui-color-surface);
 			color: var(--color-text);
@@ -81,7 +98,7 @@ let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElemen
 			flex-direction: column;
 
 			position: sticky;
-			top: var(--umb-tiptap-top,-25px);
+			top: var(--umb-tiptap-top, -25px);
 			left: 0;
 			right: 0;
 			padding: var(--uui-size-3);
@@ -97,26 +114,34 @@ let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElemen
 			flex-direction: row;
 			flex-wrap: wrap;
 
+			min-height: var(--uui-size-12, 36px);
+
 			.group {
 				display: inline-flex;
 				flex-wrap: wrap;
 				align-items: stretch;
 
+				min-height: var(--uui-size-12, 36px);
+
 				&:not(:last-child)::after {
 					content: '';
 					background-color: var(--uui-color-border);
 					width: 1px;
 					place-self: center;
-					height: 22px;
+					height: var(--uui-size-7, 21px);
 					margin: 0 var(--uui-size-3);
 				}
 			}
 		}
+
+		.skeleton {
+			background-color: var(--uui-color-background);
+			height: var(--uui-size-12, 36px);
+			width: var(--uui-size-10, 30px);
+			margin-left: 1px;
+		}
 	`; }
 };
-__decorate([
-    state()
-], UmbTiptapToolbarElement.prototype, "_lookup", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbTiptapToolbarElement.prototype, "readonly", void 0);

package/dist-cms/packages/tiptap/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tiptap-menu-item-api-base.js';
+export * from './tiptap-menu.element.js';

package/dist-cms/packages/tiptap/components/menu/index.js

@@ -0,0 +1,2 @@
+export * from './tiptap-menu-item-api-base.js';
+export * from './tiptap-menu.element.js';

package/dist-cms/packages/tiptap/components/menu/tiptap-menu-item-api-base.d.ts

@@ -0,0 +1,3 @@
+import { UmbMenuItemActionApiBase } from '@umbraco-cms/backoffice/menu';
+export declare abstract class UmbTiptapMenuItemActionApi extends UmbMenuItemActionApiBase {
+}

package/dist-cms/packages/tiptap/components/menu/tiptap-menu-item-api-base.js

@@ -0,0 +1,3 @@
+import { UmbMenuItemActionApiBase } from '@umbraco-cms/backoffice/menu';
+export class UmbTiptapMenuItemActionApi extends UmbMenuItemActionApiBase {
+}

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

@@ -0,0 +1,12 @@
+import { UmbMenuElement } from '@umbraco-cms/backoffice/menu';
+export declare class UmbTiptapMenuElement extends UmbMenuElement {
+    menuAlias?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbTiptapMenuElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-menu': UmbTiptapMenuElement;
+    }
+}

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

@@ -0,0 +1,42 @@
+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 { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbMenuElement } from '@umbraco-cms/backoffice/menu';
+let UmbTiptapMenuElement = class UmbTiptapMenuElement extends UmbMenuElement {
+    render() {
+        return html `
+			${when(this.menuAlias || this.manifest?.alias, (menu) => html `
+					<umb-extension-with-api-slot
+						type="menuItem"
+						default-element="umb-action-menu-item"
+						.filter=${(items) => items.meta.menus.includes(menu)}></umb-extension-with-api-slot>
+				`)}
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				--uui-menu-item-flat-structure: 1;
+
+				display: flex;
+				flex-direction: column;
+
+				background-color: var(--uui-color-surface);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbTiptapMenuElement.prototype, "menuAlias", void 0);
+UmbTiptapMenuElement = __decorate([
+    customElement('umb-tiptap-menu')
+], UmbTiptapMenuElement);
+export { UmbTiptapMenuElement };
+export default UmbTiptapMenuElement;

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

@@ -18,6 +18,6 @@ export declare class UmbTiptapToolbarMenuElement extends UmbLitElement {
 export { UmbTiptapToolbarMenuElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-tiptap-toolbar-menu-element': UmbTiptapToolbarMenuElement;
+        'umb-tiptap-toolbar-menu': UmbTiptapToolbarMenuElement;
     }
 }