Tiptap RTE: Refactor Table menus to use menu extension-type (#19789)

* Added `action` kind for `menuItem` extension-type

* Adds `<umb-tiptap-menu>` component

* Adds support for `menu` extensions to the `<umb-cascading-menu-popover>` component

* Adds support for `menu` extensions to the `tiptapToolbarExtension` extension-type

* Adds support for `menu` extensions to the `<umb-tiptap-toolbar-menu>` component

* Adds manifests for table column/row menus

Deprecates the `umb-tiptap-table-column-menu` and `umb-tiptap-table-row-menu` components.

* Adds table column menu actions

* Adds table row menu actions

* Adds table cell menu actions

* Adds table (general) menu actions

* Replaces table toolbar menu with the new `menu` extensions

* Adds `UMB_TIPTAP_RTE_CONTEXT`

so that the menu actions can access the Editor instance.

* Update src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/actions/table-properties.action.ts

Co-authored-by: Copilot <[email protected]>

* `UmbTiptapMenuElement` doesn't use the `editor` property

---------

Co-authored-by: Copilot <[email protected]>

Author: leekelleher

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-bubble-menu.extension.ts

@@ -7,12 +7,14 @@ import type { PluginView } from '@tiptap/pm/state';
 
 export interface UmbTiptapBubbleMenuElement extends HTMLElement {
 	editor?: Editor;
+	menuAlias?: string;
 }
 
 export type UmbBubbleMenuPluginProps = {
 	unique: string;
 	placement?: UUIPopoverContainerElement['placement'];
 	elementName?: string | null;
+	menuAlias?: string;
 	shouldShow?:
 		| ((props: { editor: Editor; view: EditorView; state: EditorState; from: number; to: number }) => boolean)
 		| null;
@@ -42,6 +44,7 @@ export const UmbBubbleMenu = Extension.create<UmbBubbleMenuOptions>({
 				unique: this.options.unique,
 				placement: this.options.placement,
 				elementName: this.options.elementName,
+				menuAlias: this.options.menuAlias,
 				shouldShow: this.options.shouldShow,
 			}),
 		];
@@ -68,6 +71,7 @@ class UmbBubbleMenuPluginView implements PluginView {
 		if (props.elementName) {
 			const menu = document.createElement(props.elementName) as UmbTiptapBubbleMenuElement;
 			menu.editor = editor;
+			menu.menuAlias = props.menuAlias;
 			this.#popover.appendChild(menu);
 		}
 

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-table.extension.ts

@@ -38,6 +38,7 @@ export const UmbTable = Table.configure({ resizable: true, View: UmbTableView })
 
 export const UmbTableRow = TableRow.extend({
 	allowGapCursor: false,
+	content: '(tableCell | tableHeader)*',
 });
 
 export const UmbTableHeader = TableHeader.extend({
@@ -70,7 +71,8 @@ export const UmbTableHeader = TableHeader.extend({
 			UmbBubbleMenuPlugin(this.editor, {
 				unique: 'table-column-menu',
 				placement: 'top',
-				elementName: 'umb-tiptap-table-column-menu',
+				elementName: 'umb-tiptap-menu',
+				menuAlias: 'Umb.Menu.Tiptap.TableColumn',
 				shouldShow(props) {
 					return isColumnGripSelected(props);
 				},
@@ -162,7 +164,8 @@ export const UmbTableCell = TableCell.extend({
 			UmbBubbleMenuPlugin(this.editor, {
 				unique: 'table-row-menu',
 				placement: 'left',
-				elementName: 'umb-tiptap-table-row-menu',
+				elementName: 'umb-tiptap-menu',
+				menuAlias: 'Umb.Menu.Tiptap.TableRow',
 				shouldShow(props) {
 					return isRowGripSelected(props);
 				},

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/action-menu-item.api.ts

@@ -0,0 +1,17 @@
+import type { UmbMenuItemActionApi, UmbMenuItemActionApiArgs } from './types.js';
+import { UmbActionBase } from '@umbraco-cms/backoffice/action';
+
+export abstract class UmbMenuItemActionApiBase<ArgsMetaType = never>
+	extends UmbActionBase<UmbMenuItemActionApiArgs<ArgsMetaType>>
+	implements UmbMenuItemActionApi<ArgsMetaType>
+{
+	public execute(): Promise<void> {
+		return Promise.resolve();
+	}
+}
+
+export class UmbActionMenuItemApi extends UmbMenuItemActionApiBase {
+	override async execute() {}
+}
+
+export default UmbActionMenuItemApi;

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/action-menu-item.element.ts

@@ -0,0 +1,44 @@
+import type { ManifestMenuItemActionKind, UmbMenuItemActionApi, UmbMenuItemActionElement } from './types.js';
+import { customElement, html, ifDefined, property, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUIMenuItemEvent } from '@umbraco-cms/backoffice/external/uui';
+
+@customElement('umb-action-menu-item')
+export default class UmbActionMenuItemElement extends UmbLitElement implements UmbMenuItemActionElement {
+	@property({ attribute: false })
+	api?: UmbMenuItemActionApi;
+
+	@property({ attribute: false })
+	manifest?: ManifestMenuItemActionKind;
+
+	#onClickLabel(event: UUIMenuItemEvent) {
+		event.stopPropagation();
+
+		try {
+			this.api?.execute();
+		} catch (error) {
+			console.error('Error menu item action:', error);
+		}
+	}
+
+	// Prevents the regular click event from bubbling up.
+	// This could be handled in the UUI Menu item component, to prevent dispatching both "click-label" and "click" events at the same time.
+	#onClick(event: PointerEvent) {
+		event.stopPropagation();
+	}
+
+	override render() {
+		const label = this.localize.string(this.manifest?.meta.label ?? this.manifest?.name);
+		return html`
+			<uui-menu-item label=${ifDefined(label)} @click-label=${this.#onClickLabel} @click=${this.#onClick}>
+				${when(this.manifest?.meta.icon, (icon) => html`<umb-icon slot="icon" name=${icon}></umb-icon>`)}
+			</uui-menu-item>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-action-menu-item': UmbActionMenuItemElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/manifests.ts

@@ -0,0 +1,16 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'kind',
+		alias: 'Umb.Kind.MenuItem.Action',
+		matchKind: 'action',
+		matchType: 'menuItem',
+		manifest: {
+			type: 'menuItem',
+			kind: 'action',
+			api: () => import('./action-menu-item.api.js'),
+			element: () => import('./action-menu-item.element.js'),
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts

@@ -0,0 +1,34 @@
+import type { MetaMenuItem } from '../../../menu-item.extension.js';
+import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbAction } from '@umbraco-cms/backoffice/action';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export interface UmbMenuItemActionApiArgs<MetaArgsType> {
+	meta: MetaArgsType;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbMenuItemActionApi<ArgsMetaType = never> extends UmbAction<UmbMenuItemActionApiArgs<ArgsMetaType>> {}
+
+export interface UmbMenuItemActionElement extends UmbControllerHostElement {
+	manifest?: ManifestMenuItemActionKind;
+}
+
+// Unable to extend from `ManifestMenuItem` as `UmbMenuItemElement` is of type `HTMLElement`, but for use with an API,
+// it needs to be of type `UmbControllerHostElement`, and modifying `UmbMenuItemElement` would be a breaking-change. [LK]
+export interface ManifestMenuItemActionKind
+	extends ManifestElementAndApi<UmbMenuItemActionElement, UmbMenuItemActionApi<MetaMenuItemActionKind>>,
+		ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+	type: 'menuItem';
+	kind: 'action';
+	meta: MetaMenuItemActionKind;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaMenuItemActionKind extends Exclude<MetaMenuItem, 'entityType'> {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbActionMenuItemKind: ManifestMenuItemActionKind;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/index.ts

@@ -1 +1,2 @@
 export * from './menu-item-default.element.js';
+export * from './action/action-menu-item.api.js';

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/manifests.ts

@@ -1,4 +1,5 @@
+import { manifests as actionManifests } from './action/manifests.js';
 import { manifests as linkManifests } from './link/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...linkManifests];
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...actionManifests, ...linkManifests];

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/types.ts

@@ -1 +1,2 @@
+export type * from './action/types.js';
 export type * from './link/types.js';

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts

@@ -1,12 +1,14 @@
 import { css, customElement, html, ifDefined, property, repeat, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
+import type { ManifestMenu } from '@umbraco-cms/backoffice/menu';
 
 export type UmbCascadingMenuItem = {
 	label: string;
 	icon?: string;
 	items?: Array<UmbCascadingMenuItem>;
 	element?: HTMLElement;
+	menu?: string;
 	separatorAfter?: boolean;
 	style?: string;
 	isActive?: () => boolean | undefined;
@@ -27,7 +29,7 @@ export class UmbCascadingMenuPopoverElement extends UmbElementMixin(UUIPopoverCo
 	}
 
 	#onMouseEnter(item: UmbCascadingMenuItem, popoverId?: string) {
-		if (!item.items?.length || !popoverId) return;
+		if (!(item.items?.length || item.menu) || !popoverId) return;
 
 		const popover = this.#getPopoverById(popoverId);
 		if (!popover) return;
@@ -65,17 +67,16 @@ export class UmbCascadingMenuPopoverElement extends UmbElementMixin(UUIPopoverCo
 	override 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: UmbCascadingMenuItem, index: number) {
-		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) {
@@ -103,7 +104,7 @@ export class UmbCascadingMenuPopoverElement extends UmbElementMixin(UUIPopoverCo
 							${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>
 					`,
@@ -112,6 +113,16 @@ export class UmbCascadingMenuPopoverElement extends UmbElementMixin(UUIPopoverCo
 					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: ManifestMenu) => menu.alias === menuAlias}></umb-extension-slot>
+								`,
+							)}
 						</umb-cascading-menu-popover>
 					`,
 				)}