Desktop, Mobile: Fixes #14630: underline disappearing from ++insert++ syntax when cursor is on that line (#14631)

packages/editor/CodeMirror/extensions/markdownDecorationExtension.test.ts

@@ -27,4 +27,21 @@ left    | right
 		expect(codeBlock.textContent).toBe('`foo`');
 		expect(codeBlock.parentElement.classList.contains('.cm-tableRow'));
 	});
+
+	test.each([
+		0,
+		'before ++'.length + 1,
+	])('should decorate ++insert++ spans when the caret is at %i', async cursorPos => {
+		const editorText = 'before ++inserted++ after';
+		const editor = await createTestEditor(
+			editorText,
+			EditorSelection.cursor(cursorPos),
+			['Insert'],
+			[decoratorExtension],
+		);
+
+		const insertSpan = editor.contentDOM.querySelector('.cm-insert');
+		expect(insertSpan).not.toBeNull();
+		expect(insertSpan?.textContent).toContain('inserted');
+	});
 });

packages/editor/CodeMirror/extensions/markdownDecorationExtension.ts

@@ -116,6 +116,10 @@ const strikethroughDecoration = Decoration.mark({
 	attributes: { class: 'cm-strike' },
 });
 
+const insertDecoration = Decoration.mark({
+	attributes: { class: 'cm-insert' },
+});
+
 const nodeNameToLineDecoration: Record<string, Decoration> = {
 	'FencedCode': codeBlockDecoration,
 	'CodeBlock': codeBlockDecoration,
@@ -150,6 +154,7 @@ const nodeNameToMarkDecoration: Record<string, Decoration> = {
 	'HorizontalRule': horizontalRuleDecoration,
 	'TaskMarker': taskMarkerDecoration,
 	'Strikethrough': strikethroughDecoration,
+	'Insert': insertDecoration,
 	'Highlight': markDecoration,
 };
 

packages/editor/CodeMirror/theme.ts

@@ -187,6 +187,9 @@ const createTheme = (theme: EditorTheme): Extension[] => {
 		'& .cm-strike': {
 			textDecoration: 'line-through',
 		},
+		'& .cm-insert': {
+			textDecoration: 'underline',
+		},
 
 		// Applying font size changes with CSS rather than the theme below works
 		// around an issue where the border for code blocks in headings was too