Renders Tiptap toolbar, with rows and groups

Author: leekelleher

src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts

@@ -1,5 +1,6 @@
-import type { ManifestTiptapToolbarExtension } from '../../extensions/tiptap-toolbar-extension.js';
-import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, map, property, state } from '@umbraco-cms/backoffice/external/lit';
+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 type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -10,6 +11,12 @@ const elementName = 'umb-tiptap-fixed-menu';
 
 @customElement(elementName)
 export class UmbTiptapFixedMenuElement extends UmbLitElement {
+	#attached = false;
+	#extensionsController?: UmbExtensionsElementAndApiInitializer;
+
+	@state()
+	private _lookup?: Map<string, unknown>;
+
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
 
@@ -20,43 +27,84 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement {
 	configuration?: UmbPropertyEditorConfigCollection;
 
 	@property({ attribute: false })
-	toolbar: string[][][] = [[[]]];
+	toolbar: Array<Array<Array<string>>> = [[[]]];
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.#attached = true;
+		this.#observeExtensions();
+	}
+	override disconnectedCallback(): void {
+		this.#attached = false;
+		this.#extensionsController?.destroy();
+		this.#extensionsController = undefined;
+		super.disconnectedCallback();
+	}
+
+	#observeExtensions(): void {
+		if (!this.#attached) 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.alias, ext.component]));
+			},
+		);
+
+		this.#extensionsController.apiProperties = { configuration: this.configuration };
+		this.#extensionsController.elementProperties = { editor: this.editor, configuration: this.configuration };
+	}
 
 	override render() {
 		return html`
-			<umb-extension-with-api-slot
-				type="tiptapToolbarExtension"
-				.filter=${(ext: ManifestTiptapToolbarExtension) =>
-					this.toolbar.flat(2).includes(ext.alias) && (!!ext.kind || !!ext.element)}
-				.elementProps=${{ editor: this.editor, configuration: this.configuration }}
-				.apiProps=${{ configuration: this.configuration }}>
-			</umb-extension-with-api-slot>
+			${map(
+				this.toolbar,
+				(row) => html`
+					<div class="row">
+						${map(row, (group) => html`<div class="group">${map(group, (alias) => this._lookup?.get(alias))}</div>`)}
+					</div>
+				`,
+			)}
 		`;
 	}
 
 	static override readonly styles = css`
+		:host([readonly]) {
+			pointer-events: none;
+			background-color: var(--uui-color-surface-alt);
+		}
+
 		:host {
 			border-radius: var(--uui-border-radius);
 			border: 1px solid var(--uui-color-border);
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 			background-color: var(--uui-color-surface);
 			color: var(--color-text);
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-			gap: var(--uui-size-space-1);
+			display: flex;
+			flex-direction: column;
 			position: sticky;
 			top: -25px;
 			left: 0px;
 			right: 0px;
 			padding: var(--uui-size-space-3);
-			align-items: center;
 			z-index: 9999999;
 		}
 
-		:host([readonly]) {
-			pointer-events: none;
-			background-color: var(--uui-color-surface-alt);
+		.row {
+			display: flex;
+			flex-direction: row;
+			gap: var(--uui-size-space-3);
+		}
+
+		.group {
+			display: flex;
+			flex-direction: row;
 		}
 	`;
 }