Adds tiptapExtension and tiptapToolbarExtension extension types

src/packages/core/extension-registry/models/index.ts

@@ -42,6 +42,7 @@ import type { ManifestSectionView } from './section-view.model.js';
 import type { ManifestStore, ManifestTreeStore, ManifestItemStore } from './store.model.js';
 import type { ManifestTheme } from './theme.model.js';
 import type { ManifestTinyMcePlugin } from './tinymce-plugin.model.js';
+import type { ManifestTiptapExtension } from './tiptap-extension.model.js';
 import type { ManifestTree } from './tree.model.js';
 import type { ManifestTreeItem } from './tree-item.model.js';
 import type { ManifestUfmComponent } from './ufm-component.model.js';
@@ -113,6 +114,7 @@ export type * from './section.model.js';
 export type * from './store.model.js';
 export type * from './theme.model.js';
 export type * from './tinymce-plugin.model.js';
+export type * from './tiptap-extension.model.js';
 export type * from './tree-item.model.js';
 export type * from './tree.model.js';
 export type * from './ufm-component.model.js';
@@ -206,6 +208,7 @@ export type ManifestTypes =
 	| ManifestStore
 	| ManifestTheme
 	| ManifestTinyMcePlugin
+	| ManifestTiptapExtension
 	| ManifestTree
 	| ManifestTreeItem
 	| ManifestTreeStore

src/packages/core/extension-registry/models/tiptap-extension.model.ts

@@ -0,0 +1,6 @@
+import type { UmbTiptapExtensionBase } from '@umbraco-cms/backoffice/tiptap';
+import type { ManifestApi } from '@umbraco-cms/backoffice/extension-api';
+
+export interface ManifestTiptapExtension extends ManifestApi<UmbTiptapExtensionBase> {
+	type: 'tiptapExtension';
+}

src/packages/rte/manifests.ts

@@ -1,3 +1,4 @@
 import { manifests as tiptapManifests } from './tiptap/manifests.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-export const manifests = [...tiptapManifests];
+export const manifests: Array<ManifestTypes> = [...tiptapManifests];

src/packages/rte/tiptap/components/input-tiptap/index.ts

@@ -1 +1,2 @@
 export * from './input-tiptap.element.js';
+export * from './tiptap-extension.js';

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

@@ -1,38 +1,68 @@
-import type { UmbTiptapFixedMenuElement } from './tiptap-fixed-menu.element.js';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { css, customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbTiptapExtensionBase } from './tiptap-extension.js';
+import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { Editor, Link, StarterKit, TextAlign, Underline } from '@umbraco-cms/backoffice/external/tiptap';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 import './tiptap-fixed-menu.element.js';
 import './tiptap-hover-menu.element.js';
-import { Editor, Link, StarterKit, TextAlign, Underline } from '@umbraco-cms/backoffice/external/tiptap';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-input-tiptap')
-export class UmbInputTiptapElement extends UUIFormControlMixin(UmbLitElement, '') {
-	@query('umb-tiptap-fixed-menu') _fixedMenuElement!: UmbTiptapFixedMenuElement;
+export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, '') {
+	@state()
+	private _extensions: Array<UmbTiptapExtensionBase> = [];
+
 	@property({ attribute: false })
 	configuration?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	_editor!: Editor;
+	private _editor!: Editor;
+
+	protected override async firstUpdated() {
+		await Promise.all([await this.#loadExtensions(), await this.#loadEditor()]);
+	}
 
-	protected override firstUpdated(): void {
-		const editor = this.shadowRoot?.querySelector('#editor');
+	async #loadExtensions() {
+		await new Promise<void>((resolve) => {
+			this.observe(umbExtensionsRegistry.byType('tiptapExtension'), async (manifests) => {
+				this._extensions = [];
 
-		if (!editor) return;
+				for (const manifest of manifests) {
+					if (manifest.api) {
+						const extension = await loadManifestApi(manifest.api);
+						if (extension) {
+							this._extensions.push(new extension(this));
+						}
+					}
+				}
+
+				this.requestUpdate('_extensions');
+
+				resolve();
+			});
+		});
+	}
+
+	async #loadEditor() {
+		const element = this.shadowRoot?.querySelector('#editor');
+		if (!element) return;
+
+		const extensions = this._extensions.map((ext) => ext.getExtensions()).flat();
 
 		this._editor = new Editor({
-			element: editor,
+			element: element,
 			extensions: [
 				StarterKit,
 				TextAlign.configure({
 					types: ['heading', 'paragraph', 'blockquote', 'orderedList', 'bulletList', 'codeBlock'],
 				}),
 				Link.configure({ openOnClick: false }),
 				Underline,
+				...extensions,
 			],
 			content: this.value.toString(),
 			onUpdate: ({ editor }) => {
@@ -42,14 +72,11 @@ export class UmbInputTiptapElement extends UUIFormControlMixin(UmbLitElement, ''
 		});
 	}
 
-	protected getFormElement() {
-		return null;
-	}
-
 	override render() {
+		if (!this._extensions?.length) return html`<uui-loader></uui-loader>`;
 		return html`
 			<umb-tiptap-hover-menu .editor=${this._editor}></umb-tiptap-hover-menu>
-			<umb-tiptap-fixed-menu .editor=${this._editor}></umb-tiptap-fixed-menu>
+			<umb-tiptap-fixed-menu .editor=${this._editor} .extensions=${this._extensions}></umb-tiptap-fixed-menu>
 			<div id="editor"></div>
 		`;
 	}

src/packages/rte/tiptap/components/input-tiptap/tiptap-extension.ts

@@ -0,0 +1,22 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { Editor, Extension, Mark, Node } from '@umbraco-cms/backoffice/external/tiptap';
+import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export abstract class UmbTiptapExtensionBase extends UmbControllerBase implements UmbApi {
+	constructor(host: UmbControllerHost) {
+		super(host);
+	}
+
+	abstract getExtensions(): Array<Extension | Mark | Node>;
+
+	abstract getToolbarButtons(): Array<UmbTiptapToolbarButton>;
+}
+
+export interface UmbTiptapToolbarButton {
+	name: string;
+	icon: string | TemplateResult;
+	isActive: (editor?: Editor) => boolean | undefined;
+	command: (editor?: Editor) => boolean | undefined | void | Promise<boolean> | Promise<undefined> | Promise<void>;
+}