feat(editor): Support newlines in node errors

packages/editor-ui/src/components/Error/NodeErrorView.vue

@@ -24,6 +24,7 @@ import InlineAskAssistantButton from 'n8n-design-system/components/InlineAskAssi
 import { useUIStore } from '@/stores/ui.store';
 import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
 import { useAIAssistantHelpers } from '@/composables/useAIAssistantHelpers';
+import MultiLineText from '../MultiLineText/MultiLineText.vue';
 
 type Props = {
 	// TODO: .node can be undefined
@@ -423,9 +424,7 @@ async function onAskAssistantClick() {
 	<div class="node-error-view">
 		<div class="node-error-view__header">
 			<div class="node-error-view__header-message" data-test-id="node-error-message">
-				<div>
-					{{ getErrorMessage() }}
-				</div>
+				<MultiLineText :text="getErrorMessage()" />
 			</div>
 			<div
 				v-if="error.description || error.context?.descriptionKey"

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+/**
+ * Component that splits the given text by new lines and renders
+ * each line in a separate span element joined by a line break.
+ */
+import { computed } from 'vue';
+
+const props = defineProps<{
+	text: string;
+}>();
+
+const lines = computed(() => {
+	return props.text ? props.text.split('\n') : [];
+});
+</script>
+
+<template>
+	<div>
+		<span v-for="(line, index) in lines" :key="index">
+			{{ line }}<br v-if="index < lines.length - 1" />
+		</span>
+	</div>
+</template>

packages/editor-ui/src/components/MultiLineText/__tests__/MultiLineText.test.ts

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/vue';
+
+import MultiLineText from '../MultiLineText.vue';
+
+describe('MultiLineText', () => {
+	it('renders multiline text correctly', () => {
+		const { container } = render(MultiLineText, {
+			props: {
+				text: 'The quick brown fox\njumps over the lazy dog',
+			},
+		});
+
+		expect(container).toMatchSnapshot();
+	});
+});

packages/editor-ui/src/components/MultiLineText/__tests__/__snapshots__/MultiLineText.test.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MultiLineText > renders multiline text correctly 1`] = `
+<div>
+  <div>
+    
+    <span>
+      The quick brown fox
+      <br />
+    </span>
+    <span>
+      jumps over the lazy dog
+      <!--v-if-->
+    </span>
+    
+  </div>
+</div>
+`;