From a42068607ba18b359592a29ced472b5c9e9e9bd2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 16 Sep 2024 15:24:41 +0100
Subject: [PATCH] [WIP] Placeholder media picker extension for Tiptap RTE

---
 .../rte/tiptap/extensions/manifests.ts        | 10 +++
 .../tiptap-mediapicker.extension.ts           | 68 +++++++++++++++++++
 .../src/packages/rte/tiptap/manifests.ts      |  3 +-
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-mediapicker.extension.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/manifests.ts
new file mode 100644
index 0000000000..6780ce1c09
--- /dev/null
+++ b/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'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-mediapicker.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/extensions/tiptap-mediapicker.extension.ts
new file mode 100644
index 0000000000..be14701cef
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/manifests.ts
index 1dcd948374..8e6836b5cc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/manifests.ts
+++ b/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];