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,