fix(editor): preserve subscript and superscript in pasted text

frontend/package.json

@@ -67,6 +67,8 @@
     "@tiptap/extension-link": "3.30.3",
     "@tiptap/extension-list": "3.30.3",
     "@tiptap/extension-mention": "3.30.3",
+    "@tiptap/extension-subscript": "3.30.3",
+    "@tiptap/extension-superscript": "3.30.3",
     "@tiptap/extension-table": "3.30.3",
     "@tiptap/extension-typography": "3.30.3",
     "@tiptap/extension-underline": "3.30.3",

frontend/src/components/input/editor/editorExtensions.ts

@@ -10,6 +10,8 @@ import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import {Table, TableRow, TableCell, TableHeader} from '@tiptap/extension-table'
 import Typography from '@tiptap/extension-typography'
 import Image from '@tiptap/extension-image'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
 import Underline from '@tiptap/extension-underline'
 import {Placeholder} from '@tiptap/extensions'
 import HardBreak from '@tiptap/extension-hard-break'
@@ -252,6 +254,8 @@ export function createEditorExtensions(deps: EditorExtensionDeps): Extensions {
 			},
 		}),
 		Typography,
+		Subscript,
+		Superscript,
 		Underline,
 		NonInclusiveLink.configure({
 			openOnClick: false,

frontend/src/components/input/editor/subscriptSuperscript.test.ts

@@ -0,0 +1,76 @@
+import {describe, it, expect, beforeEach} from 'vitest'
+import {createPinia, setActivePinia} from 'pinia'
+import {ref} from 'vue'
+import {Editor} from '@tiptap/core'
+
+import {createEditorExtensions, type EditorExtensionDeps} from './editorExtensions'
+
+const stubDeps: EditorExtensionDeps = {
+	t: key => key,
+	isEditing: ref(true),
+	isEditEnabled: () => true,
+	placeholder: '',
+	contentHasChanged: ref(false),
+	bubbleSave: () => {},
+	getEditor: () => undefined,
+	uploadCallback: undefined,
+	uploadAndInsertFiles: () => {},
+	loadedAttachments: ref({}),
+	attachmentService: {} as never,
+}
+
+beforeEach(() => {
+	setActivePinia(createPinia())
+})
+
+describe('Subscript and superscript support', () => {
+	const createEditor = (content: string = '') => {
+		return new Editor({
+			extensions: createEditorExtensions(stubDeps),
+			content,
+		})
+	}
+
+	const pasteHtml = (editor: Editor, html: string, text: string) => {
+		const event = new Event('paste', {bubbles: true, cancelable: true}) as ClipboardEvent
+		Object.defineProperty(event, 'clipboardData', {
+			value: {
+				getData: (type: string) => {
+					if (type === 'text/html') {
+						return html
+					}
+
+					if (type === 'text/plain') {
+						return text
+					}
+
+					return ''
+				},
+				items: [],
+			},
+		})
+
+		editor.view.dom.dispatchEvent(event)
+	}
+
+	it('preserves subscript and superscript through the HTML round-trip', () => {
+		const html = '<p>H<sub>2</sub>O and x<sup>2</sup></p>'
+		const editor = createEditor(html)
+
+		expect(editor.getHTML()).toBe(html)
+
+		editor.destroy()
+	})
+
+	it('preserves subscript and superscript when pasting clipboard html', () => {
+		const html = '<p>H<sub>2</sub>O and x<sup>2</sup></p>'
+		const editor = createEditor('<p></p>')
+		editor.commands.focus('end')
+
+		pasteHtml(editor, html, 'H2O and x2')
+
+		expect(editor.getHTML()).toBe(html)
+
+		editor.destroy()
+	})
+})

frontend/tests/e2e/task/task.spec.ts

@@ -17,7 +17,7 @@ import {TaskAttachmentFactory} from '../../factories/task_attachments'
 import {TaskReminderFactory} from '../../factories/task_reminders'
 import {createDefaultViews} from '../project/prepareProjects'
 import {TaskBucketFactory} from '../../factories/task_buckets'
-import {pasteFile} from '../../support/commands'
+import {pasteFile, pasteHtmlFromClipboard} from '../../support/commands'
 import {login} from '../../support/authenticateUser'
 import type {Page} from '@playwright/test'
 import {readFileSync} from 'fs'
@@ -775,6 +775,22 @@ test.describe('Task', () => {
 			expect(naturalWidth).toBeGreaterThan(0)
 		})
 
+		test('Preserves subscript and superscript when pasting rich text into the description editor', async ({authenticatedPage: page}) => {
+			const tasks = await TaskFactory.create(1, {
+				id: 1,
+			}) as Task[]
+			await page.goto(`/tasks/${tasks[0].id}`)
+
+			const editor = page.locator('.task-view .details.content.description .tiptap__editor .tiptap.ProseMirror')
+			await expect(editor).toBeVisible({timeout: 30_000})
+
+			await pasteHtmlFromClipboard(page, editor, '<p>H<sub>2</sub>O and x<sup>2</sup></p>', 'H₂O and x²')
+
+			await expect(editor.locator('sub')).toHaveText('2')
+			await expect(editor.locator('sup')).toHaveText('2')
+			await expect(editor).toContainText('H2O and x2')
+		})
+
 		test('Can set a reminder', async ({authenticatedPage: page}) => {
 			const tasks = await TaskFactory.create(1, {
 				id: 1,

frontend/tests/support/commands.ts

@@ -1,4 +1,4 @@
-import type {Locator} from '@playwright/test'
+import type {Locator, Page} from '@playwright/test'
 import {readFileSync} from 'fs'
 import {join, dirname} from 'path'
 import {fileURLToPath} from 'url'
@@ -42,6 +42,23 @@ export async function pasteFile(locator: Locator, fileName: string, fileType = '
 	}, {base64Data: base64, name: fileName, type: fileType})
 }
 
+/**
+ * Simulates pasting HTML/plain text from the clipboard into an element
+ */
+export async function pasteHtmlFromClipboard(page: Page, locator: Locator, html: string, text: string) {
+	await page.evaluate(async ({html, text}) => {
+		const clipboardItem = new ClipboardItem({
+			'text/html': new Blob([html], {type: 'text/html'}),
+			'text/plain': new Blob([text], {type: 'text/plain'}),
+		})
+
+		await navigator.clipboard.write([clipboardItem])
+	}, {html, text})
+
+	await locator.focus()
+	await page.keyboard.press(process.platform === 'darwin' ? 'Meta+V' : 'Control+V')
+}
+
 /**
  * Performs a drag and drop operation
  * Note: Playwright has native dragTo() support, so this is just a wrapper for consistency

frontend/tests/support/fixtures.ts

@@ -31,6 +31,10 @@ export const test = base.extend<{
 	},
 
 	authenticatedPage: async ({page, apiContext, currentUser}, use) => {
+		await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], {
+			origin: process.env.BASE_URL || 'http://127.0.0.1:4173',
+		})
+
 		const {token} = await login(page, apiContext, currentUser)
 		await use(page)
 		// Navigate away to stop all frontend requests (notification polling, token