classroomio/packages/ui/src/custom/editor/extensions/audio/AudioExtension.ts

import { Node, nodeInputRule } from '@tiptap/core';
import { Plugin, PluginKey } from '@tiptap/pm/state';

export interface AudioOptions {
	HTMLAttributes: Record<string, unknown>;
}

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		audio: {
			/**
			 * Set a audio node
			 */
			setAudio: (src: string) => ReturnType;
			/**
			 * Toggle a audio
			 */
			toggleAudio: (src: string) => ReturnType;
			/**
			 * Remove a audio
			 */
			removeAudio: () => ReturnType;
		};
	}
}

const AUDIO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;

export const Audio = Node.create<AudioOptions>({
	name: 'audio',
	group: 'block',
	draggable: true,
	isolating: true,
	atom: true,
	addOptions() {
		return {
			HTMLAttributes: {}
		};
	},
	addAttributes() {
		return {
			src: {
				default: null,
				parseHTML: (el) => (el as HTMLSpanElement).getAttribute('src'),
				renderHTML: (attrs) => ({ src: attrs.src })
			}
		};
	},
	parseHTML() {
		return [
			{
				tag: 'audio',
				getAttrs: (el) => ({ src: (el as HTMLAudioElement).getAttribute('src') })
			}
		];
	},

	renderHTML({ HTMLAttributes }) {
		return [
			'audio',
			{ controls: 'true', style: 'width: 100%;', ...HTMLAttributes },
			['source', HTMLAttributes]
		];
	},
	addCommands() {
		return {
			setAudio:
				(src: string) =>
				({ commands }) =>
					commands.insertContent(
						`<audio controls autoplay="false" style="width: 100%;" src="${src}"></audio>`
					),

			toggleAudio:
				() =>
				({ commands }) =>
					commands.toggleNode(this.name, 'paragraph'),
			removeAudio:
				() =>
				({ commands }) =>
					commands.deleteNode(this.name)
		};
	},
	addInputRules() {
		return [
			nodeInputRule({
				find: AUDIO_INPUT_REGEX,
				type: this.type,
				getAttributes: (match) => {
					const [, , src] = match;

					return { src };
				}
			})
		];
	},
	addProseMirrorPlugins() {
		return [
			new Plugin({
				key: new PluginKey('audioDropPlugin'),

				props: {
					handleDOMEvents: {
						drop(view, event) {
							const {
								state: { schema, tr },
								dispatch
							} = view;
							const hasFiles =
								event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;

							if (!hasFiles) return false;

							const audios = Array.from(event.dataTransfer.files).filter((file) =>
								/audio/i.test(file.type)
							);

							if (audios.length === 0) return false;

							event.preventDefault();

							const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });

							audios.forEach((audio) => {
								const reader = new FileReader();

								reader.onload = (readerEvent) => {
									const node = schema.nodes.audio.create({ src: readerEvent.target?.result });

									if (coordinates && typeof coordinates.pos === 'number') {
										const transaction = tr.insert(coordinates?.pos, node);

										dispatch(transaction);
									}
								};

								reader.readAsDataURL(audio);
							});

							return true;
						}
					}
				}
			})
		];
	}
});