fix: TaskItem display and copy issues with HTML tags in task messages.

[forestyoo]

Closes: #3866

Description

This PR fixes TaskItem display and copy issues with HTML tags in task messages.

Display issue: HTML tags not displaying in HistoryView.

• Reason: In HistoryView, HTML tags within task message are rendered due to the use of dangerouslySetInnerHTML.
• Solution: Only when the task message needs to be highlighted, should it be escaped and displayed using the dangerouslySetInnerHTML with the escaped string.

Copy issue: HTML tags in message are removed when clicking the copy button in TaskItem.

• Reason: There was existing code logic that stripped HTML tags from the message during the copy operation, leading to incomplete copied content.
• Solution:
  1. Removed the aforementioned code logic.
  2. When the task message needs to be highlighted, put the processed message into the highlight field instead of modifying the task field.

Test Procedure

Send Roo the message explain this html code <div>Test</div> to create a task.

• Display issue: In HistoryView, the <div> tags are not displayed; the message appears as explain this html code Test.
• Copy issue: When copying the message from HistoryView and pasting it, the copied content is explain this html code Test (HTML tags are lost).

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

record.mov

Documentation Updates

Additional Notes

Get in Touch

Discord: forestyoo

---

Important

Fixes display and copy issues with HTML tags in task messages by adjusting HTML handling in TaskItem and CopyButton, and adding HTML escaping in highlight.ts.

• Display Fix:
  • In TaskItem.tsx, use dangerouslySetInnerHTML only when highlight is present, ensuring HTML tags are displayed correctly.
  • Introduce highlight field in DisplayHistoryItem to store processed message.
• Copy Fix:
  • In CopyButton.tsx, remove logic stripping HTML tags, allowing full message copy.
• HTML Escaping:
  • Add escapeHtml() in highlight.ts to escape HTML characters in highlightFzfMatch().
• Misc:
  • Modify useTaskSearch.ts to use highlight field for storing highlighted messages.

^{This description was created by for 4322529. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Hey @forestyoo, thank you for working on this fix.

It looks good, I added LRU cache to the escapeHtml since this function is called on every render for every single task, this should help with performance.

Other than that this looks like a good fix!

[forestyoo]

Hi @daniel-lxs ,

Thanks for the review and for adding the LRU cache optimization—great improvement! Glad the fix looks good.

Appreciate your time!

[forestyoo]

Hey @daniel-lxs ,
For this PR, when a task message needs highlighting, I don't modify the task field (instead, the highlighted message goes into the the highlight field). Therefore, I've removed the stripHistoryHighlightSpans logic from CopyButton.

[antoine-ak]

Thank you !!