feat(desktop): add highlighting on active topic and payload search

Author: muzaffarmhd

src/components/MessageList.vue

@@ -11,10 +11,17 @@
           v-if="!item.out"
           :key="item.id"
           :msgId="item.id"
+          :searchParams="searchParams"
+          v-bind="item"
+          @showmenu="handleShowContextMenu(arguments, item)"
+        />
+        <MsgRightItem
+          v-else
+          :key="item.id"
+          :searchParams="searchParams"
           v-bind="item"
           @showmenu="handleShowContextMenu(arguments, item)"
         />
-        <MsgRightItem v-else :key="item.id" v-bind="item" @showmenu="handleShowContextMenu(arguments, item)" />
       </template>
     </div>
     <span v-show="showAfterLoadingIcon" class="loading-icon after"><i class="el-icon-loading"></i></span>
@@ -40,6 +47,10 @@ export default class MessageList extends Vue {
   @Prop({ required: true }) height!: number
   @Prop({ required: true }) subscriptions!: SubscriptionModel[]
   @Prop({ required: true }) marginTop!: number
+  @Prop({ required: false, default: () => ({ topic: '', payload: '' }) }) searchParams!: {
+    topic: string
+    payload: string
+  }
 
   public showMessages: MessageModel[] = []
   public showBeforeLoadingIcon: boolean = false

src/components/MsgLeftItem.vue

@@ -30,14 +30,14 @@
     </span>
     <div ref="leftPayload" class="left-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="left-info">
-        <span class="topic">Topic: {{ topic }}</span>
+        <span class="topic">Topic: <span v-html="highlightedTopic"></span></span>
         <span class="qos">QoS: {{ qos }}</span>
         <span v-if="retain" class="retain">Retained</span>
       </p>
       <MqttProperties class="meta" :properties="properties" direction="left" />
       <template v-if="isLargeMsg">
-        <div class="large-message { .el-button { margin-top: 12px;}}">
-          <pre>{{ payload.substr(0, showMaxLen) }}<span><i class="iconfont icon-more"></i></span></pre>
+        <div class="large-message">
+          <pre v-html="highlightedPayloadPreview"></pre>
           <el-tooltip
             placement="bottom"
             :effect="theme !== 'light' ? 'light' : 'dark'"
@@ -51,8 +51,8 @@
         </div>
       </template>
       <template v-else>
-        <pre v-if="!hightlight">{{ payload }}</pre>
-        <pre v-else><code class="language-js" >{{ payload }}</code></pre>
+        <pre v-if="!hightlight" v-html="highlightedPayload"></pre>
+        <pre v-else ref="highlightedCode"><code class="language-js">{{ payload }}</code></pre>
       </template>
     </div>
     <p class="left-time time">{{ createAt }}</p>
@@ -61,12 +61,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import FullMsgDialog from './FullMsgDialog.vue'
 import Prism from 'prismjs'
 import { Getter } from 'vuex-class'
 import { SHOW_MAX_LENGTH } from '@/utils/data'
 import MqttProperties from './MqttProperties.vue'
+import { highlightSearchTerm, highlightInPrismCode } from '@/utils/highlightSearch'
 
 @Component({
   components: {
@@ -84,6 +85,10 @@ export default class MsgLeftItem extends Vue {
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
+  @Prop({ required: false, default: () => ({ topic: '', payload: '' }) }) public searchParams!: {
+    topic: string
+    payload: string
+  }
 
   @Getter('jsonHighlight') private jsonHighlight!: boolean
   @Getter('currentTheme') private theme!: Theme
@@ -92,6 +97,35 @@ export default class MsgLeftItem extends Vue {
 
   private showFullMsg: boolean = false
 
+  @Watch('searchParams', { deep: true })
+  private onSearchParamsChanged() {
+    this.$nextTick(() => {
+      this.applyHighlighting()
+    })
+  }
+
+  get highlightedTopic(): string {
+    if (this.searchParams.topic) {
+      return highlightSearchTerm(this.topic, this.searchParams.topic, 'search-highlight')
+    }
+    return this.topic
+  }
+
+  get highlightedPayload(): string {
+    if (this.searchParams.payload) {
+      return highlightSearchTerm(this.payload, this.searchParams.payload, 'search-highlight')
+    }
+    return this.payload
+  }
+
+  get highlightedPayloadPreview(): string {
+    const preview = this.payload.substr(0, this.showMaxLen)
+    if (this.searchParams.payload) {
+      return highlightSearchTerm(preview, this.searchParams.payload, 'search-highlight')
+    }
+    return preview
+  }
+
   public customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)
   }
@@ -131,6 +165,27 @@ export default class MsgLeftItem extends Vue {
     return SHOW_MAX_LENGTH
   }
 
+  private applyHighlighting() {
+    if (this.hightlight && this.searchParams.payload) {
+      const codeElement = this.$refs.highlightedCode as HTMLElement
+      if (codeElement) {
+        this.clearHighlights(codeElement)
+        highlightInPrismCode(codeElement, this.searchParams.payload, 'search-highlight')
+      }
+    }
+  }
+
+  private clearHighlights(element: HTMLElement) {
+    const highlights = element.querySelectorAll('.search-highlight')
+    highlights.forEach((highlight) => {
+      const parent = highlight.parentNode
+      if (parent) {
+        parent.replaceChild(document.createTextNode(highlight.textContent || ''), highlight)
+        parent.normalize()
+      }
+    })
+  }
+
   private hightlightJSON() {
     if (this.jsonHighlight === false) {
       return
@@ -140,6 +195,7 @@ export default class MsgLeftItem extends Vue {
         this.hightlight = true
         this.$nextTick(() => {
           Prism.highlightAllUnder(this.$refs.msgLeftItem as HTMLElement)
+          this.applyHighlighting()
         })
       }
     } catch (e) {
@@ -212,5 +268,12 @@ body.night {
       }
     }
   }
+  .search-highlight {
+    background-color: #ffeb3b !important;
+    color: #000 !important;
+    padding: 1px 2px;
+    border-radius: 2px;
+    font-weight: bold;
+  }
 }
 </style>

src/components/MsgRightItem.vue

@@ -16,11 +16,11 @@
     </div>
     <div class="right-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="right-info">
-        <span class="topic">Topic: {{ topic }}</span>
+        <span class="topic">Topic: <span v-html="highlightedTopic"></span></span>
         <span class="qos">QoS: {{ qos }}</span>
       </p>
       <MqttProperties class="meta" :properties="properties" direction="right" />
-      <pre>{{ payload }}</pre>
+      <pre v-html="highlightedPayload"></pre>
     </div>
     <p class="right-time time">{{ createAt }}</p>
   </div>
@@ -29,19 +29,38 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import MqttProperties from './MqttProperties.vue'
+import { highlightSearchTerm } from '@/utils/highlightSearch'
 
 @Component({
   components: {
     MqttProperties,
   },
 })
-export default class MsgrightItem extends Vue {
+export default class MsgRightItem extends Vue {
   @Prop({ required: true }) public topic!: string
   @Prop({ required: true }) public qos!: number
   @Prop({ required: true }) public payload!: string
   @Prop({ required: true }) public createAt!: string
   @Prop({ required: false }) public meta?: string
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
+  @Prop({ required: false, default: () => ({ topic: '', payload: '' }) }) public searchParams!: {
+    topic: string
+    payload: string
+  }
+
+  get highlightedTopic(): string {
+    if (this.searchParams.topic) {
+      return highlightSearchTerm(this.topic, this.searchParams.topic, 'search-highlight')
+    }
+    return this.topic
+  }
+
+  get highlightedPayload(): string {
+    if (this.searchParams.payload) {
+      return highlightSearchTerm(this.payload, this.searchParams.payload, 'search-highlight')
+    }
+    return this.payload
+  }
 
   public customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)
@@ -81,5 +100,12 @@ export default class MsgrightItem extends Vue {
       border: 1px solid var(--color-border-right_metainfo) !important;
     }
   }
+  .search-highlight {
+    background-color: #ffeb3b !important;
+    color: #000 !important;
+    padding: 1px 2px;
+    border-radius: 2px;
+    font-weight: bold;
+  }
 }
 </style>

src/utils/highlightSearch.ts

@@ -0,0 +1,68 @@
+/**
+ * Highlights search terms in text while preserving HTML structure
+ * @param text - The text to highlight
+ * @param searchTerm - The term to search for
+ * @param className - CSS class for highlighting
+ * @returns HTML string with highlighted terms
+ */
+export function highlightSearchTerm(text: string, searchTerm: string, className: string = 'search-highlight'): string {
+  if (!searchTerm || !text) {
+    return escapeHtml(text)
+  }
+
+  const escapedText = escapeHtml(text)
+  const escapedSearchTerm = escapeRegExp(searchTerm)
+  const regex = new RegExp(`(${escapedSearchTerm})`, 'gi')
+
+  return escapedText.replace(regex, `<span class="${className}">$1</span>`)
+}
+
+/**
+ * Highlights search terms in JSON-highlighted code
+ * @param element - The DOM element containing Prism-highlighted code
+ * @param searchTerm - The term to search for
+ * @param className - CSS class for highlighting
+ */
+export function highlightInPrismCode(
+  element: HTMLElement,
+  searchTerm: string,
+  className: string = 'search-highlight',
+): void {
+  if (!searchTerm || !element) return
+
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
+    acceptNode: (node: Node) => NodeFilter.FILTER_ACCEPT,
+  })
+
+  const textNodes: Text[] = []
+  let node: Node | null
+
+  while ((node = walker.nextNode())) {
+    textNodes.push(node as Text)
+  }
+
+  textNodes.forEach((textNode) => {
+    const text = textNode.textContent || ''
+    if (text.toLowerCase().includes(searchTerm.toLowerCase())) {
+      const highlightedHTML = highlightSearchTerm(text, searchTerm, className)
+      const tempDiv = document.createElement('div')
+      tempDiv.innerHTML = highlightedHTML
+
+      const fragment = document.createDocumentFragment()
+      while (tempDiv.firstChild) {
+        fragment.appendChild(tempDiv.firstChild)
+      }
+      textNode.parentNode?.replaceChild(fragment, textNode)
+    }
+  })
+}
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

src/views/connections/ConnectionsDetail.vue

@@ -277,6 +277,7 @@
           :messages="recordMsgs.list"
           :height="messageListHeight"
           :marginTop="messageListMarginTop"
+          :searchParams="searchParams"
           @showContextMenu="handleContextMenu"
           @loadMoreMsg="loadMoreMessages"
           @hideNewMsgsTip="hideNewMsgsTip"
@@ -2202,6 +2203,17 @@ export default class ConnectionsDetail extends Vue {
       this.setMessageListHeight()
     })
   }
+
+  get activeSearchTerms() {
+    const terms = []
+    if (this.searchParams.payload && this.searchParams.payload.trim()) {
+      terms.push(this.searchParams.payload.trim())
+    }
+    if (this.searchParams.topic && this.searchParams.topic.trim()) {
+      terms.push(this.searchParams.topic.trim())
+    }
+    return terms
+  }
 }
 </script>