fix(editor): Fix SQL editor issue (#7236)

Github issue / Community forum post (link here to close automatically):

packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -320,7 +320,7 @@ export default defineComponent({
 			...readOnlyEditorExtensions,
 			EditorState.readOnly.of(isReadOnly),
 			EditorView.editable.of(!isReadOnly),
-			codeNodeEditorTheme({ isReadOnly }),
+			codeNodeEditorTheme({ isReadOnly, customMinHeight: this.rows }),
 		];
 
 		if (!isReadOnly) {
@@ -354,16 +354,8 @@ export default defineComponent({
 		const [languageSupport, ...otherExtensions] = this.languageExtensions;
 		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
 
-		let doc = this.modelValue ?? this.placeholder;
-
-		const lines = doc.split('\n');
-
-		if (lines.length < this.rows) {
-			doc += '\n'.repeat(this.rows - lines.length);
-		}
-
 		const state = EditorState.create({
-			doc,
+			doc: this.modelValue ?? this.placeholder,
 			extensions,
 		});
 

packages/editor-ui/src/components/CodeNodeEditor/theme.ts

@@ -32,9 +32,14 @@ const cssStyleDeclaration = getComputedStyle(document.documentElement);
 interface ThemeSettings {
 	isReadOnly?: boolean;
 	customMaxHeight?: string;
+	customMinHeight?: number;
 }
 
-export const codeNodeEditorTheme = ({ isReadOnly, customMaxHeight }: ThemeSettings) => [
+export const codeNodeEditorTheme = ({
+	isReadOnly,
+	customMaxHeight,
+	customMinHeight,
+}: ThemeSettings) => [
 	EditorView.theme({
 		'&': {
 			'font-size': BASE_STYLING.fontSize,
@@ -82,7 +87,9 @@ export const codeNodeEditorTheme = ({ isReadOnly, customMaxHeight }: ThemeSettin
 			overflow: 'auto',
 
 			maxHeight: customMaxHeight ?? '100%',
-			...(isReadOnly ? {} : { minHeight: '1.3em' }),
+			...(isReadOnly
+				? {}
+				: { minHeight: customMinHeight ? `${Number(customMinHeight) * 1.3}em` : '10em' }),
 		},
 		'.cm-diagnosticAction': {
 			backgroundColor: BASE_STYLING.diagnosticButton.backgroundColor,

packages/editor-ui/src/components/ParameterInput.vue

@@ -120,7 +120,7 @@
 					:dialect="getArgument('sqlDialect')"
 					:isReadOnly="isReadOnly"
 					:rows="getArgument('rows')"
-					@valueChanged="valueChangedDebounced"
+					@update:modelValue="valueChangedDebounced"
 				/>
 
 				<code-node-editor

packages/editor-ui/src/components/SqlEditor/SqlEditor.vue

@@ -141,7 +141,11 @@ export default defineComponent({
 			const extensions = [
 				sqlWithN8nLanguageSupport(),
 				expressionInputHandler(),
-				codeNodeEditorTheme({ isReadOnly: this.isReadOnly, customMaxHeight: '350px' }),
+				codeNodeEditorTheme({
+					isReadOnly: this.isReadOnly,
+					customMaxHeight: '350px',
+					customMinHeight: this.rows,
+				}),
 				lineNumbers(),
 				EditorView.lineWrapping,
 				EditorState.readOnly.of(this.isReadOnly),
@@ -188,15 +192,7 @@ export default defineComponent({
 	mounted() {
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
 
-		let doc = this.modelValue;
-
-		const lines = doc.split('\n');
-
-		if (lines.length < this.rows) {
-			doc += '\n'.repeat(this.rows - lines.length);
-		}
-
-		const state = EditorState.create({ doc, extensions: this.extensions });
+		const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
 
 		this.editor = new EditorView({ parent: this.$refs.sqlEditor as HTMLDivElement, state });
 		this.editorState = this.editor.state;