Desktop: New Markdown editor: Fix horizontal rule button when cursor is not on a new line (#11085)

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.ts

@@ -88,7 +88,7 @@ const useEditorCommands = (props: Props) => {
 					editorRef.current.updateBody(newBody);
 				}
 			},
-			textHorizontalRule: () => editorRef.current.insertText('* * *'),
+			textHorizontalRule: () => editorRef.current.execCommand(EditorCommandType.InsertHorizontalRule),
 			'editor.execCommand': (value: CommandValue) => {
 				if (!('args' in value)) value.args = [];
 

packages/editor/CodeMirror/editorCommands/editorCommands.ts

@@ -3,6 +3,7 @@ import { EditorCommandType, ListType } from '../../types';
 import { undo, redo, selectAll, indentSelection, cursorDocStart, cursorDocEnd, cursorLineStart, cursorLineEnd, deleteToLineStart, deleteToLineEnd, undoSelection, redoSelection, cursorPageDown, cursorPageUp, cursorCharRight, cursorCharLeft, insertNewlineAndIndent, cursorLineDown, cursorLineUp, toggleComment, deleteLine, moveLineUp, moveLineDown } from '@codemirror/commands';
 import {
 	decreaseIndent, increaseIndent,
+	insertHorizontalRule,
 	toggleBolded, toggleCode,
 	toggleHeaderLevel, toggleItalicized,
 	toggleList, toggleMath,
@@ -41,6 +42,7 @@ const editorCommands: Record<EditorCommandType, EditorCommandFunction> = {
 	[EditorCommandType.ToggleHeading3]: toggleHeaderLevel(3),
 	[EditorCommandType.ToggleHeading4]: toggleHeaderLevel(4),
 	[EditorCommandType.ToggleHeading5]: toggleHeaderLevel(5),
+	[EditorCommandType.InsertHorizontalRule]: insertHorizontalRule,
 
 	[EditorCommandType.ScrollSelectionIntoView]: editor => {
 		editor.dispatch(editor.state.update({

packages/editor/CodeMirror/markdown/markdownCommands.test.ts

@@ -1,5 +1,6 @@
 import { EditorSelection } from '@codemirror/state';
 import {
+	insertHorizontalRule,
 	insertOrIncreaseIndent,
 	toggleBolded, toggleCode, toggleHeaderLevel, toggleItalicized, toggleMath, updateLink,
 } from './markdownCommands';
@@ -293,5 +294,35 @@ describe('markdownCommands', () => {
 			to: 6,
 		});
 	});
+
+	it('insertHorizontalRule should insert a horizontal rule after the current line', async () => {
+		const initialText = 'testing\n\n> this is a test\n> ';
+		const editor = await createTestEditor(
+			initialText,
+			EditorSelection.cursor(0),
+			[],
+		);
+
+		// Add a second selection
+		editor.dispatch({
+			selection: editor.state.selection.addRange(EditorSelection.cursor(initialText.length)),
+		});
+		expect(editor.state.selection.ranges).toHaveLength(2);
+
+		insertHorizontalRule(editor);
+
+		expect(editor.state.doc.toString()).toBe('testing\n* * *\n\n> this is a test\n> * * *');
+		expect(editor.state.selection.ranges).toMatchObject([{
+			from: 'testing\n* * *'.length,
+			empty: true,
+		}, {
+			from: editor.state.doc.length,
+			empty: true,
+		}]);
+
+		insertHorizontalRule(editor);
+
+		expect(editor.state.doc.toString()).toBe('testing\n* * *\n* * *\n\n> this is a test\n> * * *\n> * * *');
+	});
 });
 

packages/editor/CodeMirror/markdown/markdownCommands.ts

@@ -401,6 +401,30 @@ export const toggleHeaderLevel = (level: number): Command => {
 	};
 };
 
+export const insertHorizontalRule: Command = (view: EditorView) => {
+	view.dispatch(view.state.changeByRange(selection => {
+		const line = view.state.doc.lineAt(selection.to);
+		const processedLineText = stripBlockquote(line);
+		const inBlockQuote = processedLineText !== line.text;
+		const needsNewLine = processedLineText !== '';
+
+		let prefix = inBlockQuote && needsNewLine ? '> ' : '';
+		if (needsNewLine) {
+			prefix = `\n${prefix}`;
+		}
+		const insert = `${prefix}* * *`;
+
+		return {
+			range: EditorSelection.cursor(line.to + insert.length),
+			changes: {
+				from: line.to,
+				insert,
+			},
+		};
+	}));
+	return true;
+};
+
 // Prepends the given editor's indentUnit to all lines of the current selection
 // and re-numbers modified ordered lists (if any).
 export const increaseIndent: Command = (view: EditorView): boolean => {

packages/editor/CodeMirror/testUtil/createTestEditor.ts

@@ -26,6 +26,7 @@ const createTestEditor = async (
 			}),
 			indentUnit.of('\t'),
 			EditorState.tabSize.of(4),
+			EditorState.allowMultipleSelections.of(true),
 			extraExtensions,
 		],
 	});

packages/editor/types.ts

@@ -30,6 +30,8 @@ export enum EditorCommandType {
 	ToggleHeading4 = 'textHeading4',
 	ToggleHeading5 = 'textHeading5',
 
+	InsertHorizontalRule = 'textHorizontalRule',
+
 	// Find commands
 	ShowSearch = 'find',
 	HideSearch = 'hideSearchDialog',