Mobile: Rich Text Editor: Support rendering subscript, superscript, and highlighted formatting (#12944)

packages/app-mobile/components/NoteEditor/RichTextEditor.test.tsx

@@ -406,4 +406,32 @@ describe('RichTextEditor', () => {
 			expect(body.trim()).toBe('# Heading\n\n# Heading 2\n\n[toc]\n\nTest. testing');
 		});
 	});
+
+	it.each([
+		'**bold**',
+		'*italic*',
+		'$\\text{math}$',
+		'<span style="color: red;">test</span>',
+		'`code`',
+		'==highlight==ed',
+		'<sup>Super</sup>script',
+		'<sub>Sub</sub>script',
+	])('should preserve inline markup on edit (case %#)', async (initialBody) => {
+		initialBody += 'test'; // Ensure that typing will add new content outside the formatting
+		let body = initialBody;
+
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={newBody => { body = newBody; }}
+		/>);
+
+		await findElement<HTMLElement>('div.prosemirror-editor');
+
+		const window = await getEditorWindow();
+		mockTyping(window, ' testing');
+
+		await waitFor(async () => {
+			expect(body.trim()).toBe(`${initialBody} testing`);
+		});
+	});
 });

packages/editor/ProseMirror/schema.ts

@@ -21,6 +21,9 @@ const domOutputSpecs = {
 	listItem: ['li', 0],
 	blockQuote: ['blockquote', 0],
 	hr: ['hr'],
+	sub: ['sub', 0],
+	sup: ['sup', 0],
+	mark: ['mark', 0],
 } satisfies Record<string, DOMOutputSpec>;
 
 type AttributeSpecs = Record<string, AttributeSpec>;
@@ -216,6 +219,18 @@ const marks = {
 		toDOM: () => domOutputSpecs.code,
 		excludes: '_',
 	},
+	sub: {
+		parseDOM: [{ tag: 'sub' }],
+		toDOM: () => domOutputSpecs.sub,
+	},
+	sup: {
+		parseDOM: [{ tag: 'sup' }],
+		toDOM: () => domOutputSpecs.sup,
+	},
+	mark: {
+		parseDOM: [{ tag: 'mark' }],
+		toDOM: () => domOutputSpecs.mark,
+	},
 	color: {
 		inclusive: false,
 		parseDOM: [{