import { Mark, mergeAttributes } from '@tiptap/core';

export interface EmphasisOptions {
	/**
	 * HTML attributes to add to the emphasis element.
	 * @default {}
	 * @example { class: 'foo' }
	 */
	HTMLAttributes: Record<string, any>;
}

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		emphasis: {
			/**
			 * Set an emphasis mark
			 * @example editor.commands.setEmphasis()
			 */
			setEmphasis: () => ReturnType;
			/**
			 * Toggle an emphasis mark
			 * @example editor.commands.toggleEmphasis()
			 */
			toggleEmphasis: () => ReturnType;
			/**
			 * Unset an emphasis mark
			 * @example editor.commands.unsetEmphasis()
			 */
			unsetEmphasis: () => ReturnType;
		};
	}
}

/**
 * This extension allows you to create emphasis text.
 * @see https://www.tiptap.dev/api/marks/emphasis
 */
export const Emphasis = Mark.create<EmphasisOptions>({
	name: 'emphasis',

	addOptions() {
		return {
			HTMLAttributes: {}
		};
	},

	parseHTML() {
		return [
			{
				tag: 'em'
			}
		];
	},

	renderHTML({ HTMLAttributes }) {
		return ['em', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
	},

	addCommands() {
		return {
			setEmphasis:
				() =>
				({ commands }) => {
					return commands.setMark(this.name);
				},
			toggleEmphasis:
				() =>
				({ commands }) => {
					return commands.toggleMark(this.name);
				},
			unsetEmphasis:
				() =>
				({ commands }) => {
					return commands.unsetMark(this.name);
				}
		};
	}
});