fix(editor): Enable explicit undo keyboard shortcut across all code e…

…ditors (#8178) Fixes [ADO-801](https://linear.app/n8n/issue/ADO-801), [PAY-632](https://linear.app/n8n/issue/PAY-632), and [PAY-730](https://linear.app/n8n/issue/PAY-730) Also fixes #5297 ## Review / Merge checklist - [x] PR title and summary are descriptive
n8n-io · Dec 28, 2023 · cf7f668 · cf7f668
1 parent e418d42
commit cf7f668
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 84 deletions.
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -26,15 +26,15 @@
     "test:dev": "vitest"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.1.0",
-    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-python": "^6.1.2",
-    "@codemirror/language": "^6.2.1",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/state": "^6.1.4",
-    "@codemirror/view": "^6.5.1",
+    "@codemirror/lang-python": "^6.1.3",
+    "@codemirror/language": "^6.9.3",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/state": "^6.3.3",
+    "@codemirror/view": "^6.22.3",
     "@fontsource/open-sans": "^4.5.0",
     "@jsplumb/browser-ui": "^5.13.2",
     "@jsplumb/common": "^5.13.2",

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -86,6 +86,7 @@ export default defineComponent({
 		mode: {
 			type: String as PropType<CodeExecutionMode>,
 			validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
+			required: true,
 		},
 		language: {
 			type: String as PropType<CodeNodeEditorLanguage>,
@@ -103,6 +104,7 @@ export default defineComponent({
 		},
 		modelValue: {
 			type: String,
+			required: true,
 		},
 	},
 	setup() {

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
@@ -16,6 +16,7 @@ import {
 	toggleComment,
 	redo,
 	deleteCharBackward,
+	undo,
 } from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
 import type { Extension } from '@codemirror/state';
@@ -43,6 +44,7 @@ export const writableEditorExtensions: readonly Extension[] = [
 		{ key: 'Tab', run: acceptCompletion },
 		{ key: 'Enter', run: acceptCompletion },
 		{ key: 'Mod-/', run: toggleComment },
+		{ key: 'Mod-z', run: undo },
 		{ key: 'Mod-Shift-z', run: redo },
 		{ key: 'Backspace', run: deleteCharBackward, shift: deleteCharBackward },
 		indentWithTab,

diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -6,7 +6,7 @@
 import { defineComponent } from 'vue';
 import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Prec } from '@codemirror/state';
-import { history, redo } from '@codemirror/commands';
+import { history, redo, undo } from '@codemirror/commands';
 
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { expressionManager } from '@/mixins/expressionManager';
@@ -26,12 +26,15 @@ export default defineComponent({
 	props: {
 		modelValue: {
 			type: String,
+			required: true,
 		},
 		path: {
 			type: String,
+			required: true,
 		},
 		isReadOnly: {
 			type: Boolean,
+			default: false,
 		},
 	},
 	data() {
@@ -56,6 +59,7 @@ export default defineComponent({
 							return false;
 						},
 					},
+					{ key: 'Mod-z', run: undo },
 					{ key: 'Mod-Shift-z', run: redo },
 				]),
 			),

diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -19,6 +19,7 @@ export default defineComponent({
 	props: {
 		segments: {
 			type: Array as PropType<Segment[]>,
+			required: true,
 		},
 	},
 	data() {

diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -11,7 +11,7 @@ import jsParser from 'prettier/plugins/babel';
 import * as estree from 'prettier/plugins/estree';
 import { htmlLanguage, autoCloseTags, html } from 'codemirror-lang-html-n8n';
 import { autocompletion } from '@codemirror/autocomplete';
-import { indentWithTab, insertNewlineAndIndent, history, redo } from '@codemirror/commands';
+import { indentWithTab, insertNewlineAndIndent, history, redo, undo } from '@codemirror/commands';
 import {
 	bracketMatching,
 	ensureSyntaxTree,
@@ -92,6 +92,7 @@ export default defineComponent({
 				keymap.of([
 					indentWithTab,
 					{ key: 'Enter', run: insertNewlineAndIndent },
+					{ key: 'Mod-z', run: undo },
 					{ key: 'Mod-Shift-z', run: redo },
 				]),
 				indentOnInput(),

diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -8,7 +8,7 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { EditorView, keymap } from '@codemirror/view';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
-import { history, redo } from '@codemirror/commands';
+import { history, redo, undo } from '@codemirror/commands';
 import { acceptCompletion, autocompletion, completionStatus } from '@codemirror/autocomplete';
 
 import { useNDVStore } from '@/stores/ndv.store';
@@ -29,6 +29,7 @@ export default defineComponent({
 	props: {
 		modelValue: {
 			type: String,
+			required: true,
 		},
 		isReadOnly: {
 			type: Boolean,
@@ -40,6 +41,7 @@ export default defineComponent({
 		},
 		path: {
 			type: String,
+			required: true,
 		},
 		additionalData: {
 			type: Object as PropType<IDataObject>,
@@ -103,6 +105,7 @@ export default defineComponent({
 							return false;
 						},
 					},
+					{ key: 'Mod-z', run: undo },
 					{ key: 'Mod-Shift-z', run: redo },
 				]),
 			),

diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { acceptCompletion, autocompletion, ifNotIn } from '@codemirror/autocomplete';
-import { indentWithTab, history, redo, toggleComment } from '@codemirror/commands';
+import { indentWithTab, history, redo, toggleComment, undo } from '@codemirror/commands';
 import { bracketMatching, foldGutter, indentOnInput, LanguageSupport } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import type { Line, Extension } from '@codemirror/state';
@@ -146,6 +146,7 @@ export default defineComponent({
 				extensions.push(
 					history(),
 					keymap.of([
+						{ key: 'Mod-z', run: undo },
 						{ key: 'Mod-Shift-z', run: redo },
 						{ key: 'Mod-/', run: toggleComment },
 						{ key: 'Tab', run: acceptCompletion },