[WIP] Placeholder media picker extension for Tiptap RTE

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts

@@ -0,0 +1,10 @@
+import type { ManifestTiptapExtension } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTiptapExtension> = [
+	{
+		type: 'tiptapExtension',
+		alias: 'Umb.Tiptap.MediaPicker',
+		name: 'Media Picker Tiptap Extension',
+		api: () => import('./tiptap-mediapicker.extension.js'),
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-mediapicker.extension.ts

@@ -0,0 +1,68 @@
+import { UmbTiptapExtensionBase } from '../components/input-tiptap/tiptap-extension.js';
+import { mergeAttributes, Node } from '@umbraco-cms/backoffice/external/tiptap';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+import { UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/media';
+
+export default class UmbTiptapMediaPickerPlugin extends UmbTiptapExtensionBase {
+	getExtensions() {
+		return [
+			Node.create({
+				name: 'umbMediaPicker',
+				group: 'block',
+				marks: '',
+				draggable: true,
+				addNodeView() {
+					return () => {
+						//console.log('umb-media.addNodeView');
+						const dom = document.createElement('umb-debug');
+						dom.attributes.setNamedItem(document.createAttribute('visible'));
+						dom.attributes.setNamedItem(document.createAttribute('dialog'));
+						return { dom };
+					};
+				},
+				parseHTML() {
+					//console.log('umb-media.parseHTML');
+					return [{ tag: 'umb-media' }];
+				},
+				renderHTML({ HTMLAttributes }) {
+					//console.log('umb-media.renderHTML');
+					return ['umb-media', mergeAttributes(HTMLAttributes)];
+				},
+			}),
+		];
+	}
+
+	getToolbarButtons() {
+		return [
+			{
+				name: 'umb-media',
+				icon: 'icon-picture',
+				isActive: (editor?: Editor) => editor?.isActive('umbMediaPicker'),
+				command: async (editor?: Editor) => {
+					//console.log('umb-media.command', editor);
+
+					const selection = await this.#openMediaPicker();
+					if (!selection || !selection.length) return;
+
+					editor?.chain().focus().insertContent(`<umb-media>${selection}</umb-media>`).run();
+				},
+			},
+		];
+	}
+
+	async #openMediaPicker() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const modalHandler = modalManager?.open(this, UMB_MEDIA_PICKER_MODAL, {
+			data: { multiple: false },
+			value: { selection: [] },
+		});
+
+		if (!modalHandler) return;
+
+		const { selection } = await modalHandler.onSubmit().catch(() => ({ selection: undefined }));
+
+		//console.log('umb-media.selection', selection);
+		return selection;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/manifests.ts

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