From 3d64d140e9eb4cd9fc58c673a307cf1ac83654b5 Mon Sep 17 00:00:00 2001
From: Jaakko Husso <jaakko@n8n.io>
Date: Thu, 3 Apr 2025 12:57:40 +0300
Subject: [PATCH] fix(editor): Fix search highlights on node details view table
 schema (#14379)

---
 .../frontend/editor-ui/src/components/RunDataTable.vue   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/RunDataTable.vue b/packages/frontend/editor-ui/src/components/RunDataTable.vue
index 35a22b78af..2e68993872 100644
--- a/packages/frontend/editor-ui/src/components/RunDataTable.vue
+++ b/packages/frontend/editor-ui/src/components/RunDataTable.vue
@@ -616,21 +616,22 @@ watch(focusedMappableInput, (curr) => {
 						/>
 						<N8nTree v-else-if="isObject(data)" :node-class="$style.nodeClass" :value="data">
 							<template #label="{ label, path }">
-								<span
+								<TextWithHighlights
+									data-target="mappable"
 									:class="{
 										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
 										[$style.draggingKey]: isDraggingKey(path, index2),
 										[$style.dataKey]: true,
 										[$style.mappable]: mappingEnabled,
 									}"
-									data-target="mappable"
+									:content="label || i18n.baseText('runData.unnamedField')"
+									:search="search"
 									:data-name="getCellPathName(path, index2)"
 									:data-value="getCellExpression(path, index2)"
 									:data-depth="path.length"
 									@mouseenter="() => onMouseEnterKey(path, index2)"
 									@mouseleave="onMouseLeaveKey"
-									>{{ label || i18n.baseText('runData.unnamedField') }}</span
-								>
+								/>
 							</template>
 
 							<template #value="{ value }">