feat(editor): Harmonize rendering of new-lines in RunData (#9614)

Signed-off-by: Oleg Ivaniv <[email protected]>
Co-authored-by: Giulio Andreini <[email protected]>

packages/design-system/src/css/_tokens.dark.scss

@@ -126,6 +126,8 @@
 	--color-code-gutterBackground: var(--prim-gray-670);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-200);
+	--color-line-break: var(--prim-gray-420);
+	--color-code-line-break: var(--prim-color-secondary-tint-100);
 
 	// Variables
 	--color-variables-usage-font: var(--prim-color-alt-a-tint-300);

packages/design-system/src/css/_tokens.scss

@@ -163,6 +163,8 @@
 	--color-code-gutterBackground: var(--prim-gray-0);
 	--color-code-gutterForeground: var(--prim-gray-320);
 	--color-code-tags-comment: var(--prim-gray-420);
+	--color-line-break: var(--prim-gray-320);
+	--color-code-line-break: var(--prim-color-secondary-tint-200);
 
 	// Variables
 	--color-variables-usage-font: var(--color-success);

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

@@ -264,6 +264,7 @@ export default defineComponent({
 <style lang="scss">
 .vjs-tree {
 	color: var(--color-json-default);
+	--color-line-break: var(--color-code-line-break);
 }
 
 .vjs-tree-node {

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

@@ -38,6 +38,7 @@ const key = computed((): string | undefined => {
 const schemaName = computed(() =>
 	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
 );
+
 const text = computed(() =>
 	Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
 );
@@ -114,7 +115,11 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				/>
 			</span>
 		</div>
-		<span v-if="text" :class="$style.text">{{ text }}</span>
+		<span v-if="text" :class="$style.text">
+			<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
+				<span v-if="index > 0" :class="$style.newLine">\n</span>{{ line }}
+			</template>
+		</span>
 		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" checked />
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
@@ -286,6 +291,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	font-size: var(--font-size-2xs);
 	overflow: hidden;
 	word-break: break-word;
+
+	.newLine {
+		font-family: var(--font-family-monospace);
+		color: var(--color-line-break);
+		padding-right: 2px;
+	}
 }
 
 .toggle {

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

@@ -388,7 +388,7 @@ export default defineComponent({
 				return this.$locale.baseText('runData.emptyString');
 			}
 			if (typeof value === 'string') {
-				return value.replaceAll('\n', '\\n');
+				return value;
 			}
 			if (Array.isArray(value) && value.length === 0) {
 				return this.$locale.baseText('runData.emptyArray');

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

@@ -48,5 +48,20 @@ const parts = computed(() => {
 			<span v-else-if="part.content" :key="`span-${index}`">{{ part.content }}</span>
 		</template>
 	</span>
-	<span v-else>{{ props.content }}</span>
+	<span v-else :class="$style.content">
+		<template v-if="typeof props.content === 'string'">
+			<span v-for="(line, index) in props.content.split('\n')" :key="`line-${index}`">
+				<span v-if="index > 0" :class="$style.newLine">\n</span>{{ line }}
+			</span>
+		</template>
+		<span v-else v-text="props.content" />
+	</span>
 </template>
+
+<style lang="scss" module>
+:root .content .newLine {
+	font-family: var(--font-family-monospace);
+	color: var(--color-line-break);
+	padding-right: 2px;
+}
+</style>

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

@@ -21,7 +21,9 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>Test content</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span><!--v-if-->Test content</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -32,18 +34,19 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>1</span>');
+		expect(wrapper.html()).toEqual('<span class="content"><span>1</span></span>');
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
-	it('renders correctly objects when search is not set', () => {
+	it('renders correctly objects when search is not set', async () => {
 		const wrapper = shallowMount(TextWithHighlights, {
 			props: {
 				content: { hello: 'world' },
 			},
 		});
-
-		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span>{\n  "hello": "world"\n}</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -55,7 +58,9 @@ describe('TextWithHighlights', () => {
 			},
 		});
 
-		expect(wrapper.html()).toEqual('<span>{\n  "hello": "world"\n}</span>');
+		expect(wrapper.html()).toEqual(
+			'<span class="content"><span>{\n  "hello": "world"\n}</span></span>',
+		);
 		expect(wrapper.html()).not.toContain('<mark>');
 	});
 
@@ -100,4 +105,16 @@ describe('TextWithHighlights', () => {
 			'<span><span>Test content </span><mark>()^${}[]</mark><span> world</span></span>',
 		);
 	});
+
+	it('renders new lines in the content correctly', () => {
+		const wrapper = shallowMount(TextWithHighlights, {
+			props: {
+				content: 'Line 1\n Line 2\nLine 3',
+			},
+		});
+
+		expect(wrapper.html()).toContain(
+			'<span class="content"><span><!--v-if-->Line 1</span><span><span class="newLine">\\n</span> Line 2</span><span><span class="newLine">\\n</span>Line 3</span></span>',
+		);
+	});
 });