Desktop: Fixes #13745: Prevent cut events from being merged with other actions in the undo history (#13791)

Author: personalizedrefrigerator

.eslintignore

@@ -563,6 +563,7 @@ packages/app-desktop/integration-tests/util/evaluateWithRetry.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
 packages/app-desktop/integration-tests/util/getMainWindow.js
+packages/app-desktop/integration-tests/util/mockClipboard.js
 packages/app-desktop/integration-tests/util/retryOnFailure.js
 packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
@@ -1007,6 +1008,7 @@ packages/editor/CodeMirror/CodeMirrorControl.js
 packages/editor/CodeMirror/configFromSettings.js
 packages/editor/CodeMirror/createEditor.test.js
 packages/editor/CodeMirror/createEditor.js
+packages/editor/CodeMirror/editorCommands/cutOrCopyText.js
 packages/editor/CodeMirror/editorCommands/duplicateLine.test.js
 packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js

.gitignore

@@ -535,6 +535,7 @@ packages/app-desktop/integration-tests/util/evaluateWithRetry.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
 packages/app-desktop/integration-tests/util/getMainWindow.js
+packages/app-desktop/integration-tests/util/mockClipboard.js
 packages/app-desktop/integration-tests/util/retryOnFailure.js
 packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
@@ -979,6 +980,7 @@ packages/editor/CodeMirror/CodeMirrorControl.js
 packages/editor/CodeMirror/configFromSettings.js
 packages/editor/CodeMirror/createEditor.test.js
 packages/editor/CodeMirror/createEditor.js
+packages/editor/CodeMirror/editorCommands/cutOrCopyText.js
 packages/editor/CodeMirror/editorCommands/duplicateLine.test.js
 packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx

@@ -13,7 +13,7 @@ import { _ } from '@joplin/lib/locale';
 import bridge from '../../../../../services/bridge';
 import shim from '@joplin/lib/shim';
 import { MarkupToHtml } from '@joplin/renderer';
-const { clipboard } = require('electron');
+import { clipboard } from 'electron';
 import { reg } from '@joplin/lib/registry';
 import ErrorBoundary from '../../../../ErrorBoundary';
 import { EditorKeymap, EditorLanguageType, EditorSettings, SearchState, UserEventSource } from '@joplin/editor/types';
@@ -94,41 +94,13 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 
 	const editorCutText = useCallback(() => {
 		if (editorRef.current) {
-			const selections = editorRef.current.getSelections();
-			if (selections.length > 0 && selections[0]) {
-				clipboard.writeText(selections[0]);
-				// Easy way to wipe out just the first selection
-				selections[0] = '';
-				editorRef.current.replaceSelections(selections);
-			} else {
-				const cursor = editorRef.current.getCursor();
-				const line = editorRef.current.getLine(cursor.line);
-				clipboard.writeText(`${line}\n`);
-				const startLine = editorRef.current.getCursor('head');
-				startLine.ch = 0;
-				const endLine = {
-					line: startLine.line + 1,
-					ch: 0,
-				};
-				editorRef.current.replaceRange('', startLine, endLine);
-			}
+			editorRef.current.cutText(text => clipboard.writeText(text));
 		}
 	}, []);
 
 	const editorCopyText = useCallback(() => {
 		if (editorRef.current) {
-			const selections = editorRef.current.getSelections();
-
-			// Handle the case when there is a selection - copy the selection to the clipboard
-			// When there is no selection, the selection array contains an empty string.
-			if (selections.length > 0 && selections[0]) {
-				clipboard.writeText(selections[0]);
-			} else {
-				// This is the case when there is no selection - copy the current line to the clipboard
-				const cursor = editorRef.current.getCursor();
-				const line = editorRef.current.getLine(cursor.line);
-				clipboard.writeText(line);
-			}
+			editorRef.current.copyText(text => clipboard.writeText(text));
 		}
 	}, []);
 

packages/app-desktop/integration-tests/markdownEditor.spec.ts

@@ -6,6 +6,7 @@ import setFilePickerResponse from './util/setFilePickerResponse';
 import activateMainMenuItem from './util/activateMainMenuItem';
 import setSettingValue from './util/setSettingValue';
 import { toForwardSlashes } from '@joplin/utils/path';
+import mockClipboard from './util/mockClipboard';
 
 
 test.describe('markdownEditor', () => {
@@ -337,5 +338,48 @@ test.describe('markdownEditor', () => {
 		// Should show the legacy editor
 		await expect(mainWindow.locator('.rli-editor .CodeMirror5')).toBeVisible();
 	});
+
+	test('should support the textCopy command', async ({ electronApp, mainWindow }) => {
+		const mainScreen = await new MainScreen(mainWindow).setup();
+		await mainScreen.waitFor();
+
+		await mainScreen.createNewNote('Test copy');
+		const noteEditor = mainScreen.noteEditor;
+		await noteEditor.focusCodeMirrorEditor();
+		await mainWindow.keyboard.type('Test content.');
+
+		const { expectClipboardToMatch } = await mockClipboard(electronApp, 'original');
+
+		await mainScreen.goToAnything.runCommand(electronApp, 'textCopy');
+		await expectClipboardToMatch('Test content.\n');
+	});
+
+	test('should support the textCut and textPaste commands', async ({ electronApp, mainWindow }) => {
+		const mainScreen = await new MainScreen(mainWindow).setup();
+		await mainScreen.waitFor();
+
+		await mainScreen.createNewNote('Test paste');
+		const { expectClipboardToMatch } = await mockClipboard(electronApp, 'test!');
+		await expectClipboardToMatch('test!');
+
+		// Should paste text using the textPaste command
+		const goToAnything = mainScreen.goToAnything;
+		await goToAnything.runCommand(electronApp, 'textPaste');
+		const noteEditor = mainScreen.noteEditor;
+		await noteEditor.expectToHaveText('test!');
+
+		// Should cut text using the textCut command
+		await mainScreen.createNewNote('Test cut');
+		await noteEditor.focusCodeMirrorEditor();
+		await mainWindow.keyboard.type('Test (new content!)');
+
+		await goToAnything.runCommand(electronApp, 'textCut');
+		await noteEditor.expectToHaveText('\n');
+		await expectClipboardToMatch('Test (new content!)\n');
+
+		// Should paste the content again with textPaste
+		await goToAnything.runCommand(electronApp, 'textPaste');
+		await noteEditor.expectToHaveText(/^Test \(new content!\)[\n]+/);
+	});
 });
 

packages/app-desktop/integration-tests/util/mockClipboard.ts

@@ -0,0 +1,29 @@
+import { ElectronApplication } from '@playwright/test';
+import { expect } from './test';
+import getMainWindow from './getMainWindow';
+
+// Currently only supports mocking reading/writing text
+const mockClipboard = async (electronApp: ElectronApplication, clipboardText: string) => {
+	const mainWindow = await getMainWindow(electronApp);
+	await mainWindow.evaluate(async (clipboardText) => {
+		const { clipboard } = require('electron');
+		clipboard.writeText = (text: string) => {
+			clipboardText = text;
+		};
+		clipboard.readText = () => {
+			return clipboardText;
+		};
+	}, clipboardText);
+
+	return {
+		expectClipboardToMatch: async (text: string) => {
+			await expect.poll(async () => {
+				return await mainWindow.evaluate(() => {
+					return require('electron').clipboard.readText();
+				});
+			}).toBe(text);
+		},
+	};
+};
+
+export default mockClipboard;

packages/editor/CodeMirror/CodeMirrorControl.ts

@@ -16,6 +16,7 @@ import jumpToHash from './editorCommands/jumpToHash';
 import { resetImageResourceEffect } from './extensions/rendering/renderBlockImages';
 import Logger from '@joplin/utils/Logger';
 import { searchChangeSourceEffect } from './extensions/searchExtension';
+import cutOrCopyText, { ClipboardAction } from './editorCommands/cutOrCopyText';
 
 const logger = Logger.create('CodeMirrorControl');
 
@@ -260,6 +261,14 @@ export default class CodeMirrorControl extends CodeMirror5Emulation implements E
 		this._callbacks.onRemove();
 	}
 
+	public cutText(writeClipboard: (text: string)=> void) {
+		return cutOrCopyText(writeClipboard, ClipboardAction.Cut)(this.editor);
+	}
+
+	public copyText(writeClipboard: (text: string)=> void) {
+		return cutOrCopyText(writeClipboard, ClipboardAction.Copy)(this.editor);
+	}
+
 	//
 	// CodeMirror-specific methods
 	//

packages/editor/CodeMirror/editorCommands/cutOrCopyText.ts

@@ -0,0 +1,47 @@
+import { isolateHistory } from '@codemirror/commands';
+import { Command } from '@codemirror/view';
+
+export enum ClipboardAction {
+	Cut = 'cut',
+	Copy = 'copy',
+}
+
+type OnWriteClipboard = (text: string)=> void;
+const cutOrCopyText = (onWriteClipboard: OnWriteClipboard, action: ClipboardAction): Command => (view) => {
+	const state = view.state;
+	const selections = state.selection.ranges.map(range => (
+		state.sliceDoc(range.from, range.to)
+	));
+	const nonEmptySelections = selections.filter(s => !!s);
+
+	const cutTransactions = [];
+	if (nonEmptySelections.length > 0) {
+		onWriteClipboard(nonEmptySelections.join('\n'));
+
+		cutTransactions.push(state.replaceSelection(''));
+	} else {
+		const selectedLine = state.doc.lineAt(state.selection.main.anchor);
+		onWriteClipboard(`${selectedLine.text}\n`);
+
+		cutTransactions.push({
+			changes: [{
+				from: selectedLine.from,
+				to: Math.min(selectedLine.to + 1, state.doc.length),
+				insert: '',
+			}],
+		});
+	}
+
+	cutTransactions.push({
+		annotations: [isolateHistory.of('full')],
+		userEvent: 'delete.cut',
+	});
+
+	if (action === ClipboardAction.Cut) {
+		view.dispatch(...cutTransactions);
+	}
+
+	return true;
+};
+
+export default cutOrCopyText;