Mobile: Resolves #6808: Convert empty bolded regions to bold-italic regions in beta editor (#6807)

packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.test.ts

@@ -55,6 +55,24 @@ describe('markdownCommands', () => {
 		expect(editor.state.doc.toString()).toBe('Testing...');
 	});
 
+	it('for a cursor, bolding, then italicizing, should produce a bold-italic region', () => {
+		const initialDocText = '';
+		const editor = createEditor(
+			initialDocText, EditorSelection.cursor(0)
+		);
+
+		toggleBolded(editor);
+		toggleItalicized(editor);
+		expect(editor.state.doc.toString()).toBe('******');
+
+		editor.dispatch(editor.state.replaceSelection('Test'));
+		expect(editor.state.doc.toString()).toBe('***Test***');
+
+		toggleItalicized(editor);
+		editor.dispatch(editor.state.replaceSelection(' Test'));
+		expect(editor.state.doc.toString()).toBe('***Test*** Test');
+	});
+
 	it('toggling math should both create and navigate out of math regions', () => {
 		const initialDocText = 'Testing... ';
 		const editor = createEditor(initialDocText, EditorSelection.cursor(initialDocText.length));

packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.ts

@@ -24,13 +24,58 @@ export const toggleBolded: Command = (view: EditorView): boolean => {
 };
 
 export const toggleItalicized: Command = (view: EditorView): boolean => {
-	const changes = toggleInlineFormatGlobally(view.state, {
-		nodeName: 'Emphasis',
+	let handledBoldItalicRegion = false;
 
-		template: { start: '*', end: '*' },
-		matcher: { start: /[_*]/g, end: /[_*]/g },
-	});
-	view.dispatch(changes);
+	// Bold-italic regions' starting and ending patterns are similar to italicized regions.
+	// Thus, we need additional logic to convert bold regions to bold-italic regions.
+	view.dispatch(view.state.changeByRange((sel: SelectionRange) => {
+		const changes: ChangeSpec[] = [];
+
+		// Only handle cursors (empty selections)
+		if (sel.empty) {
+			const doc = view.state.doc;
+			const selLine = doc.lineAt(sel.from);
+
+			const selStartLineIdx = sel.from - selLine.from;
+			const selEndLineIdx = sel.to - selLine.from;
+			const beforeSel = selLine.text.substring(0, selStartLineIdx);
+			const afterSel = selLine.text.substring(selEndLineIdx);
+
+			const isBolded = beforeSel.endsWith('**') && afterSel.startsWith('**');
+
+			// If at the end of a bold-italic region, exit the region.
+			if (afterSel.startsWith('***')) {
+				sel = EditorSelection.cursor(sel.to + 3);
+				handledBoldItalicRegion = true;
+			} else if (isBolded) {
+				// Create a bold-italic region.
+				changes.push({
+					from: sel.from,
+					to: sel.to,
+					insert: '**',
+				});
+
+				// Move to the center of the bold-italic region (**|**** -> ***|***)
+				sel = EditorSelection.cursor(sel.to + 1);
+				handledBoldItalicRegion = true;
+			}
+		}
+
+		return {
+			changes,
+			range: sel,
+		};
+	}));
+
+	if (!handledBoldItalicRegion) {
+		const changes = toggleInlineFormatGlobally(view.state, {
+			nodeName: 'Emphasis',
+
+			template: { start: '*', end: '*' },
+			matcher: { start: /[_*]/g, end: /[_*]/g },
+		});
+		view.dispatch(changes);
+	}
 
 	return true;
 };