From 66891333a84eb0caa8460eee125933808af6ec28 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 18 Mar 2025 17:35:18 +0000
Subject: [PATCH] Refactored the Tiptap Table toolbar button

to only show the table actions when the table is active,
otherwise show the Insert Table feature.
---
 .../cascading-menu-popover.element.ts         |  6 ++-
 .../toolbar/tiptap-toolbar-menu.element.ts    |  8 +++-
 .../components/table-toolbar-menu.element.ts  | 48 +++++++++++++++++++
 .../tiptap/extensions/table/manifests.ts      |  7 +--
 .../table/table.tiptap-toolbar-api.ts         |  2 -
 5 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/components/table-toolbar-menu.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts
index 3cae4c23ac..513abc2ffc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts
@@ -55,7 +55,7 @@ export class UmbCascadingMenuPopoverElement extends UUIPopoverContainerElement {
 			<uui-scroll-container>
 				${when(
 					this.items?.length,
-					() => html` ${repeat(this.items!, (item, index) => this.#renderItem(item, index))} ${super.render()} `,
+					() => html`${repeat(this.items!, (item, index) => this.#renderItem(item, index))} ${super.render()}`,
 					() => super.render(),
 				)}
 			</uui-scroll-container>
@@ -63,11 +63,13 @@ export class UmbCascadingMenuPopoverElement extends UUIPopoverContainerElement {
 	}
 
 	#renderItem(item: UmbCascadingMenuItem, index: number) {
-		const element = item.element;
 		const popoverId = `item-${index}`;
+
+		const element = item.element;
 		if (element) {
 			element.setAttribute('popovertarget', popoverId);
 		}
+
 		return html`
 			<div
 				@mouseenter=${() => this.#onMouseEnter(item, popoverId)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts
index 089ac20ade..9576445ecf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts
@@ -123,7 +123,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
 						${when(
 							this.manifest?.meta.icon,
 							(icon) => html`<umb-icon name=${icon}></umb-icon>`,
-							() => html`<span>${this.manifest?.meta.label}</span>`,
+							() => html`<span>${label}</span>`,
 						)}
 						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
 					</uui-button>
@@ -135,6 +135,12 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
 					</uui-button>
 				`,
 			)}
+			${this.renderMenu()}
+		`;
+	}
+
+	protected renderMenu() {
+		return html`
 			<umb-cascading-menu-popover id="popover-menu" placement="bottom-start" .items=${this.#menu}>
 			</umb-cascading-menu-popover>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/components/table-toolbar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/components/table-toolbar-menu.element.ts
new file mode 100644
index 0000000000..d57dc13401
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/components/table-toolbar-menu.element.ts
@@ -0,0 +1,48 @@
+import { UmbTiptapToolbarMenuElement } from '../../../components/toolbar/tiptap-toolbar-menu.element.js';
+import { customElement, html, ifDefined, when } from '@umbraco-cms/backoffice/external/lit';
+
+import './table-insert.element.js';
+
+@customElement('umb-tiptap-table-toolbar-menu-element')
+export class UmbTiptapTableToolbarMenuElement extends UmbTiptapToolbarMenuElement {
+	override 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>
+		`;
+	}
+}
+
+export { UmbTiptapTableToolbarMenuElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tiptap-table-toolbar-menu-element': UmbTiptapTableToolbarMenuElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/manifests.ts
index fa9fbf51fe..493add2b69 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/manifests.ts
@@ -22,6 +22,7 @@ const toolbarExtensions: Array<UmbExtensionManifest> = [
 		alias: 'Umb.Tiptap.Toolbar.Table',
 		name: 'Table Tiptap Extension',
 		api: () => import('./table.tiptap-toolbar-api.js'),
+		element: () => import('./components/table-toolbar-menu.element.js'),
 		forExtensions: ['Umb.Tiptap.Table'],
 		meta: {
 			alias: 'table',
@@ -29,12 +30,6 @@ const toolbarExtensions: Array<UmbExtensionManifest> = [
 			label: 'Table',
 			look: 'icon',
 			items: [
-				{
-					label: 'Table',
-					icon: 'icon-table',
-					items: [{ label: 'Insert table', elementName: 'umb-tiptap-table-insert' }],
-					separatorAfter: true,
-				},
 				{
 					label: 'Cell',
 					items: [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts
index 4fb036f5ba..576a318c24 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts
@@ -2,8 +2,6 @@ import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { MetaTiptapToolbarMenuItem } from '../types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
-import './components/table-insert.element.js';
-
 export class UmbTiptapToolbarTableExtensionApi extends UmbTiptapToolbarElementApiBase {
 	#commands: Record<string, (editor?: Editor) => void> = {
 		// Cells