feat(desktop): add highlighting on active topic and payload search #1944
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR implements active highlighting for topics and payloads in the MQTTX desktop application search functionality.
- Passes search parameters to message components.
- Adds computed properties to generate highlighted versions of topics and payloads.
- Introduces utility functions for text highlighting, including integration with Prism for JSON-highlighted code.
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/connections/ConnectionsDetail.vue | Passes searchParams to the message list and adds a getter for active search terms. |
| src/utils/highlightSearch.ts | Introduces utility functions for HTML-based text highlighting. |
| src/components/MsgRightItem.vue | Updates topic and payload rendering to use highlighted text. |
| src/components/MsgLeftItem.vue | Adds computed properties and highlights for topics and payloads, including preview highlighting. |
| src/components/MessageList.vue | Forwards searchParams to message components. |
Comments suppressed due to low confidence (1)
src/components/MsgLeftItem.vue:169
- The property name 'hightlight' appears to be misspelled. Consider renaming it to 'highlight' to improve clarity and maintain consistency throughout the component.
if (this.hightlight && this.searchParams.payload) {
|
@muzaffarmhd Hi! Thank you for your contribution, and sorry for the late review. It looks like it’s working now, but I’m wondering—does it behave the same under other themes as well? |
ysfscream
approved these changes
Jun 20, 2025
Red-Asuka
approved these changes
Jun 20, 2025
|
Hello @ysfscream, Thanks for the review, It's alright. Yes, It does work under other themes, but I'm just unsure how readable it is with that highlighting, but it looked fine to me. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Checklist
If you have any questions, you can refer to the Contributing Guide
What is the current behavior?
Currently, when searching through messages in MQTTX, there is no highlighting of matching text.
Issue Number
#1854
What is the new behavior?
The search functionality now highlights the active payload in message items.
Preview
Does this PR introduce a breaking change?