@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

package/dist-cms/packages/tiptap/extensions/statusbar/word-count.tiptap-statusbar-element.d.ts

@@ -0,0 +1,18 @@
+import type { Editor } from '../../../../external/tiptap/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+export declare class UmbTiptapStatusbarWordCountElement extends UmbLitElement {
+    #private;
+    private _characters;
+    private _words;
+    private _showCharacters;
+    editor?: Editor;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { UmbTiptapStatusbarWordCountElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-statusbar-word-count': UmbTiptapStatusbarWordCountElement;
+    }
+}

package/dist-cms/packages/tiptap/extensions/statusbar/word-count.tiptap-statusbar-element.js

@@ -0,0 +1,56 @@
+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 { customElement, html, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+let UmbTiptapStatusbarWordCountElement = class UmbTiptapStatusbarWordCountElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._characters = 0;
+        this._words = 0;
+        this._showCharacters = false;
+        this.#onEditorUpdate = () => {
+            this._characters = this.editor?.storage.characterCount.characters() ?? 0;
+            this._words = this.editor?.storage.characterCount.words() ?? 0;
+        };
+        this.#onClick = () => (this._showCharacters = !this._showCharacters);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.editor) {
+            this.editor.on('update', this.#onEditorUpdate);
+            this.#onEditorUpdate();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.editor) {
+            this.editor.off('update', this.#onEditorUpdate);
+        }
+    }
+    #onEditorUpdate;
+    #onClick;
+    render() {
+        const label = this._showCharacters
+            ? this._characters.toLocaleString() + ' ' + (this._characters === 1 ? 'character' : 'characters')
+            : this._words.toLocaleString() + ' ' + (this._words === 1 ? 'word' : 'words');
+        return html `<uui-button compact label=${label} @click=${this.#onClick}></uui-button>`;
+    }
+};
+__decorate([
+    state()
+], UmbTiptapStatusbarWordCountElement.prototype, "_characters", void 0);
+__decorate([
+    state()
+], UmbTiptapStatusbarWordCountElement.prototype, "_words", void 0);
+__decorate([
+    state()
+], UmbTiptapStatusbarWordCountElement.prototype, "_showCharacters", void 0);
+UmbTiptapStatusbarWordCountElement = __decorate([
+    customElement('umb-tiptap-statusbar-word-count')
+], UmbTiptapStatusbarWordCountElement);
+export { UmbTiptapStatusbarWordCountElement };
+export { UmbTiptapStatusbarWordCountElement as element };

package/dist-cms/packages/tiptap/extensions/style-select/manifests.d.ts

@@ -1,2 +1 @@
-import type { ManifestTiptapToolbarExtension } from '../types.js';
-export declare const manifests: Array<ManifestTiptapToolbarExtension>;
+export declare const manifests: Array<UmbExtensionManifest>;

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

@@ -1,9 +1,50 @@
 export const manifests = [
     {
         type: 'tiptapToolbarExtension',
+        kind: 'styleMenu',
         alias: 'Umb.Tiptap.Toolbar.StyleSelect',
         name: 'Style Select Tiptap Extension',
-        element: () => import('./style-select-tiptap-toolbar.element.js'),
+        items: [
+            {
+                label: 'Headers',
+                items: [
+                    {
+                        label: 'Page header',
+                        appearance: { icon: 'icon-heading-2', style: 'font-size: x-large;font-weight: bold;' },
+                        data: { tag: 'h2' },
+                    },
+                    {
+                        label: 'Section header',
+                        appearance: { icon: 'icon-heading-3', style: 'font-size: large;font-weight: bold;' },
+                        data: { tag: 'h3' },
+                    },
+                    {
+                        label: 'Paragraph header',
+                        appearance: { icon: 'icon-heading-4', style: 'font-weight: bold;' },
+                        data: { tag: 'h4' },
+                    },
+                ],
+            },
+            {
+                label: 'Blocks',
+                items: [{ label: 'Paragraph', appearance: { icon: 'icon-paragraph' }, data: { tag: 'p' } }],
+            },
+            {
+                label: 'Containers',
+                items: [
+                    {
+                        label: 'Block quote',
+                        appearance: { icon: 'icon-blockquote', style: 'font-style: italic;' },
+                        data: { tag: 'blockquote' },
+                    },
+                    {
+                        label: 'Code block',
+                        appearance: { icon: 'icon-code', style: 'font-family: monospace;' },
+                        data: { tag: 'codeBlock' },
+                    },
+                ],
+            },
+        ],
         meta: {
             alias: 'umbStyleSelect',
             icon: 'icon-palette',

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

@@ -0,0 +1,4 @@
+import UmbTiptapToolbarStyleMenuApi from '../../components/toolbar/style-menu.tiptap-toolbar-api.js';
+/** @deprecated No longer used internally. This class will be removed in Umbraco 17. [LK] */
+export default class UmbTiptapToolbarStyleSelectExtensionApi extends UmbTiptapToolbarStyleMenuApi {
+}

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

@@ -0,0 +1,4 @@
+import UmbTiptapToolbarStyleMenuApi from '../../components/toolbar/style-menu.tiptap-toolbar-api.js';
+/** @deprecated No longer used internally. This class will be removed in Umbraco 17. [LK] */
+export default class UmbTiptapToolbarStyleSelectExtensionApi extends UmbTiptapToolbarStyleMenuApi {
+}

package/dist-cms/packages/tiptap/extensions/table/components/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS = "Umb.Modal.Tiptap.TableProperties";

package/dist-cms/packages/tiptap/extensions/table/components/constants.js

@@ -0,0 +1 @@
+export const UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS = 'Umb.Modal.Tiptap.TableProperties';

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

@@ -0,0 +1,14 @@
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { Editor, UmbTiptapBubbleMenuElement } from '../../../../../external/tiptap/index.js';
+export declare class UmbTiptapTableColumnMenuElement extends UmbLitElement implements UmbTiptapBubbleMenuElement {
+    #private;
+    editor?: Editor;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbTiptapTableColumnMenuElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-table-column-menu': UmbTiptapTableColumnMenuElement;
+    }
+}

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

@@ -0,0 +1,48 @@
+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 } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+let UmbTiptapTableColumnMenuElement = class UmbTiptapTableColumnMenuElement extends UmbLitElement {
+    #onAddColumnBefore = () => this.editor?.chain().focus().addColumnBefore().run();
+    #onAddColumnAfter = () => this.editor?.chain().focus().addColumnAfter().run();
+    #onDeleteColumn = () => this.editor?.chain().focus().deleteColumn().run();
+    render() {
+        return html `
+			<uui-menu-item label="Add column before" @click=${this.#onAddColumnBefore}>
+				<uui-icon slot="icon" name="icon-navigation-first"></uui-icon>
+			</uui-menu-item>
+			<uui-menu-item label="Add column after" @click=${this.#onAddColumnAfter}>
+				<uui-icon slot="icon" name="icon-tab-key"></uui-icon>
+			</uui-menu-item>
+			<uui-menu-item label="Delete column" @click=${this.#onDeleteColumn}>
+				<uui-icon slot="icon" name="icon-trash"></uui-icon>
+			</uui-menu-item>
+		`;
+    }
+    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({ attribute: false })
+], UmbTiptapTableColumnMenuElement.prototype, "editor", void 0);
+UmbTiptapTableColumnMenuElement = __decorate([
+    customElement('umb-tiptap-table-column-menu')
+], UmbTiptapTableColumnMenuElement);
+export { UmbTiptapTableColumnMenuElement };
+export default UmbTiptapTableColumnMenuElement;

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

@@ -15,7 +15,7 @@ let UmbTiptapTableInsertElement = class UmbTiptapTableInsertElement extends UmbL
     #onClick(column, row) {
         this._selectedColumn = column;
         this._selectedRow = row;
-        this.editor?.chain().focus().insertTable({ rows: row, cols: column }).run();
+        this.editor?.chain().focus().insertTable({ rows: row, cols: column, withHeaderRow: false }).run();
     }
     #onMouseover(column, row) {
         this._selectedColumn = column;

package/dist-cms/packages/tiptap/extensions/table/components/table-properties-modal.element.d.ts

@@ -0,0 +1,14 @@
+import type { UmbTiptapTablePropertiesModalData, UmbTiptapTablePropertiesModalValue } from './table-properties-modal.token.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+export declare class UmbTiptapTablePropertiesModalElement extends UmbModalBaseElement<UmbTiptapTablePropertiesModalData, UmbTiptapTablePropertiesModalValue> {
+    #private;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbTiptapTablePropertiesModalElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-table-properties-modal': UmbTiptapTablePropertiesModalElement;
+    }
+}

package/dist-cms/packages/tiptap/extensions/table/components/table-properties-modal.element.js

@@ -0,0 +1,123 @@
+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, repeat, when } from '../../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+let UmbTiptapTablePropertiesModalElement = class UmbTiptapTablePropertiesModalElement extends UmbModalBaseElement {
+    #appearance = { labelOnTop: true };
+    #properties = [
+        { alias: 'width', label: 'Width', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
+        { alias: 'height', label: 'Height', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
+        {
+            alias: 'backgroundColor',
+            label: 'Background color',
+            propertyEditorUiAlias: 'Umb.PropertyEditorUi.EyeDropper',
+            config: [{ alias: 'showPalette', value: true }],
+        },
+        {
+            alias: 'alignment',
+            label: 'Alignment',
+            propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
+            config: [
+                {
+                    alias: 'items',
+                    value: [
+                        { name: 'None', value: 'none' },
+                        { name: 'Left', value: 'left' },
+                        { name: 'Center', value: 'center' },
+                        { name: 'Right', value: 'right' },
+                    ],
+                },
+            ],
+        },
+        { alias: 'borderWidth', label: 'Border width', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
+        {
+            alias: 'borderStyle',
+            label: 'Border style',
+            propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
+            config: [
+                {
+                    alias: 'items',
+                    value: [
+                        { name: 'Solid', value: 'solid' },
+                        { name: 'Dotted', value: 'dotted' },
+                        { name: 'Dashed', value: 'dashed' },
+                        { name: 'Double', value: 'double' },
+                        { name: 'Groove', value: 'groove' },
+                        { name: 'Ridge', value: 'ridge' },
+                        { name: 'Inset', value: 'inset' },
+                        { name: 'Outset', value: 'outset' },
+                        { name: 'None', value: 'none' },
+                        { name: 'Hidden', value: 'hidden' },
+                    ],
+                },
+            ],
+        },
+        {
+            alias: 'borderColor',
+            label: 'Border color',
+            propertyEditorUiAlias: 'Umb.PropertyEditorUi.EyeDropper',
+            config: [{ alias: 'showPalette', value: true }],
+        },
+    ];
+    #values = [];
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.data) {
+            this.#values = Object.entries(this.data).map(([alias, value]) => ({ alias, value }));
+        }
+    }
+    #onChange(event) {
+        this.#values = event.target.value;
+    }
+    #onSubmit() {
+        this.value = this.#values;
+        this._submitModal();
+    }
+    render() {
+        return html `
+			<umb-body-layout headline="Table properties">
+				<uui-box>
+					${when(this.#properties?.length, () => html `
+							<umb-property-dataset .value=${this.#values} @change=${this.#onChange}>
+								${repeat(this.#properties, (property) => property.alias, (property) => html `
+										<umb-property
+											alias=${property.alias}
+											label=${property.label}
+											property-editor-ui-alias=${property.propertyEditorUiAlias}
+											.appearance=${this.#appearance}
+											.config=${property.config}>
+										</umb-property>
+									`)}
+							</umb-property-dataset>
+						`, () => html `<p>There are no properties for this modal.</p>`)}
+				</uui-box>
+				<uui-button
+					slot="actions"
+					label=${this.localize.term('general_cancel')}
+					@click=${this._rejectModal}></uui-button>
+				<uui-button
+					slot="actions"
+					color="positive"
+					look="primary"
+					label=${this.localize.term('bulk_done')}
+					@click=${this.#onSubmit}></uui-button>
+			</umb-body-layout>
+		`;
+    }
+    static { this.styles = [
+        css `
+			umb-property {
+				--uui-size-layout-1: var(--uui-size-space-4);
+			}
+		`,
+    ]; }
+};
+UmbTiptapTablePropertiesModalElement = __decorate([
+    customElement('umb-tiptap-table-properties-modal')
+], UmbTiptapTablePropertiesModalElement);
+export { UmbTiptapTablePropertiesModalElement };
+export { UmbTiptapTablePropertiesModalElement as element };

package/dist-cms/packages/tiptap/extensions/table/components/table-properties-modal.token.d.ts

@@ -0,0 +1,5 @@
+import { UmbModalToken } from '../../../../core/modal/index.js';
+import type { UmbPropertyValueData } from '../../../../core/property/index.js';
+export type UmbTiptapTablePropertiesModalData = Record<string, unknown>;
+export type UmbTiptapTablePropertiesModalValue = Array<UmbPropertyValueData>;
+export declare const UMB_TIPTAP_TABLE_PROPERTIES_MODAL: UmbModalToken<UmbTiptapTablePropertiesModalData, UmbTiptapTablePropertiesModalValue>;

package/dist-cms/packages/tiptap/extensions/table/components/table-properties-modal.token.js

@@ -0,0 +1,5 @@
+import { UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS } from './constants.js';
+import { UmbModalToken } from '../../../../core/modal/index.js';
+export const UMB_TIPTAP_TABLE_PROPERTIES_MODAL = new UmbModalToken(UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS, {
+    modal: { size: 'small', type: 'sidebar' },
+});

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

@@ -0,0 +1,14 @@
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { Editor, UmbTiptapBubbleMenuElement } from '../../../../../external/tiptap/index.js';
+export declare class UmbTiptapTableRowMenuElement extends UmbLitElement implements UmbTiptapBubbleMenuElement {
+    #private;
+    editor?: Editor;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbTiptapTableRowMenuElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-table-row-menu': UmbTiptapTableRowMenuElement;
+    }
+}

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

@@ -0,0 +1,48 @@
+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 } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+let UmbTiptapTableRowMenuElement = class UmbTiptapTableRowMenuElement extends UmbLitElement {
+    #onAddRowBefore = () => this.editor?.chain().focus().addRowBefore().run();
+    #onAddRowAfter = () => this.editor?.chain().focus().addRowAfter().run();
+    #onDeleteRow = () => this.editor?.chain().focus().deleteRow().run();
+    render() {
+        return html `
+			<uui-menu-item label="Add row before" @click=${this.#onAddRowBefore}>
+				<uui-icon slot="icon" name="icon-page-up"></uui-icon>
+			</uui-menu-item>
+			<uui-menu-item label="Add row after" @click=${this.#onAddRowAfter}>
+				<uui-icon slot="icon" name="icon-page-down"></uui-icon>
+			</uui-menu-item>
+			<uui-menu-item label="Delete row" @click=${this.#onDeleteRow}>
+				<uui-icon slot="icon" name="icon-trash"></uui-icon>
+			</uui-menu-item>
+		`;
+    }
+    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({ attribute: false })
+], UmbTiptapTableRowMenuElement.prototype, "editor", void 0);
+UmbTiptapTableRowMenuElement = __decorate([
+    customElement('umb-tiptap-table-row-menu')
+], UmbTiptapTableRowMenuElement);
+export { UmbTiptapTableRowMenuElement };
+export default UmbTiptapTableRowMenuElement;

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

@@ -0,0 +1,11 @@
+import { UmbTiptapToolbarMenuElement } from '../../../components/toolbar/tiptap-toolbar-menu.element.js';
+import './table-insert.element.js';
+export declare class UmbTiptapTableToolbarMenuElement extends UmbTiptapToolbarMenuElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { UmbTiptapTableToolbarMenuElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tiptap-table-toolbar-menu-element': UmbTiptapTableToolbarMenuElement;
+    }
+}

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

@@ -0,0 +1,36 @@
+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 { UmbTiptapToolbarMenuElement } from '../../../components/toolbar/tiptap-toolbar-menu.element.js';
+import { customElement, html, ifDefined, when } from '../../../../../external/lit/index.js';
+import './table-insert.element.js';
+let UmbTiptapTableToolbarMenuElement = class UmbTiptapTableToolbarMenuElement extends UmbTiptapToolbarMenuElement {
+    render() {
+        const label = this.localize.string(this.manifest?.meta.label);
+        return html `
+			${when(this.isActive, () => html `
+					<uui-button compact look="outline" 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 look="default" label=${ifDefined(label)} title=${label} popovertarget="popover-insert">
+						${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>
+				`)}
+			${this.renderMenu()}
+			<uui-popover-container id="popover-insert">
+				<umb-tiptap-table-insert .editor=${this.editor}></umb-tiptap-table-insert>
+			</uui-popover-container>
+		`;
+    }
+};
+UmbTiptapTableToolbarMenuElement = __decorate([
+    customElement('umb-tiptap-table-toolbar-menu-element')
+], UmbTiptapTableToolbarMenuElement);
+export { UmbTiptapTableToolbarMenuElement };
+export { UmbTiptapTableToolbarMenuElement as element };

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

@@ -0,0 +1 @@
+export * from './components/table-properties-modal.token.js';

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

@@ -0,0 +1 @@
+export * from './components/table-properties-modal.token.js';

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

@@ -1,2 +1 @@
-import type { ManifestTiptapExtension, ManifestTiptapToolbarExtension } from '../types.js';
-export declare const manifests: (ManifestTiptapToolbarExtension<import("../tiptap-toolbar.extension.js").MetaTiptapToolbarExtension> | ManifestTiptapExtension<import("../tiptap.extension.js").MetaTiptapExtension>)[];
+export declare const manifests: import("../../../../libs/extension-api/index.js").ManifestBase[];

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

@@ -1,3 +1,12 @@
+import { UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS } from './components/constants.js';
+const modals = [
+    {
+        type: 'modal',
+        alias: UMB_TIPTAP_TABLE_PROPERTIES_MODAL_ALIAS,
+        name: 'Tiptap Table Properties Modal',
+        element: () => import('./components/table-properties-modal.element.js'),
+    },
+];
 const coreExtensions = [
     {
         type: 'tiptapExtension',
@@ -15,16 +24,50 @@ const coreExtensions = [
 const toolbarExtensions = [
     {
         type: 'tiptapToolbarExtension',
+        kind: 'menu',
         alias: 'Umb.Tiptap.Toolbar.Table',
         name: 'Table Tiptap Extension',
         api: () => import('./table.tiptap-toolbar-api.js'),
-        element: () => import('./table-tiptap-toolbar-button.element.js'),
+        element: () => import('./components/table-toolbar-menu.element.js'),
         forExtensions: ['Umb.Tiptap.Table'],
         meta: {
             alias: 'table',
             icon: 'icon-table',
             label: 'Table',
+            look: 'icon',
+            items: [
+                {
+                    label: 'Cell',
+                    items: [
+                        { label: 'Merge cells', data: 'mergeCells' },
+                        { label: 'Split cell', data: 'splitCell' },
+                        { label: 'Merge or split', data: 'mergeOrSplit' },
+                        { label: 'Toggle header cell', data: 'toggleHeaderCell' },
+                    ],
+                },
+                {
+                    label: 'Row',
+                    items: [
+                        { label: 'Add row before', icon: 'icon-page-up', data: 'addRowBefore' },
+                        { label: 'Add row after', icon: 'icon-page-down', data: 'addRowAfter' },
+                        { label: 'Delete row', icon: 'icon-trash', data: 'deleteRow' },
+                        { label: 'Toggle header row', data: 'toggleHeaderRow' },
+                    ],
+                },
+                {
+                    label: 'Column',
+                    items: [
+                        { label: 'Add column before', icon: 'icon-navigation-first', data: 'addColumnBefore' },
+                        { label: 'Add column after', icon: 'icon-tab-key', data: 'addColumnAfter' },
+                        { label: 'Delete column', icon: 'icon-trash', data: 'deleteColumn' },
+                        { label: 'Toggle header column', data: 'toggleHeaderColumn' },
+                    ],
+                    separatorAfter: true,
+                },
+                { label: 'Table properties', data: 'tableProperties' },
+                { label: 'Delete table', icon: 'icon-trash', data: 'deleteTable' },
+            ],
         },
     },
 ];
-export const manifests = [...coreExtensions, ...toolbarExtensions];
+export const manifests = [...modals, ...coreExtensions, ...toolbarExtensions];

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

@@ -1,4 +1,6 @@
 import { UmbTiptapExtensionApiBase } from '../base.js';
+import './components/table-column-menu.element.js';
+import './components/table-row-menu.element.js';
 export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBase {
     getTiptapExtensions: () => import("@tiptap/core").Node<import("@tiptap/extension-table-row").TableRowOptions, any>[];
     getStyles: () => import("lit").CSSResult;

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

@@ -1,6 +1,8 @@
 import { UmbTiptapExtensionApiBase } from '../base.js';
 import { css } from '../../../../external/lit/index.js';
 import { UmbTable, UmbTableHeader, UmbTableRow, UmbTableCell } from '../../../../external/tiptap/index.js';
+import './components/table-column-menu.element.js';
+import './components/table-row-menu.element.js';
 export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBase {
     constructor() {
         super(...arguments);
@@ -14,7 +16,6 @@ export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBas
 				border-radius: 0.25rem;
 				border-spacing: 0;
 				box-sizing: border-box;
-				width: 100%;
 				max-width: 100%;
 
 				td,
@@ -42,7 +43,6 @@ export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBas
 				}
 
 				th {
-					background-color: var(--uui-color-background);
 					font-weight: bold;
 				}
 
@@ -68,7 +68,7 @@ export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBas
 				}
 
 				.selectedCell {
-					background-color: var(--uui-color-surface-emphasis);
+					background-color: color-mix(in srgb, var(--uui-color-surface-emphasis) 50%, transparent);
 					border-color: var(--uui-color-selected);
 				}
 

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

@@ -1,8 +1,8 @@
-import type { UmbCascadingMenuItem } from '../../components/cascading-menu-popover/cascading-menu-popover.element.js';
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { MetaTiptapToolbarMenuItem } from '../types.js';
 import type { Editor } from '../../../../external/tiptap/index.js';
 export declare class UmbTiptapToolbarTableExtensionApi extends UmbTiptapToolbarElementApiBase {
-    execute(): void;
-    getMenu(editor?: Editor): Array<UmbCascadingMenuItem>;
+    #private;
+    execute(editor?: Editor, item?: MetaTiptapToolbarMenuItem): void;
 }
 export { UmbTiptapToolbarTableExtensionApi as api };