Rocket.Chat.ReactNative icon indicating copy to clipboard operation
Rocket.Chat.ReactNative copied to clipboard
verified publisher icon RocketChat

feat: add highlight words feature for messages and user preferences

Open DSingh0304 opened this issue 1 month ago • 3 comments

Proposed changes

This PR implements the highlight words feature in the Rocket.Chat React Native app, bringing it in sync with the web version. Users can now set highlight words in their preferences, and matching words in messages will be highlighted with a red background.

Key Changes:

  • Added highlight words input field in User Preferences view with save functionality
  • Implemented regex-based text highlighting in message rendering
  • Updated API calls to use correct field name (highlights) matching web version
  • Added proper type definitions and translations for the feature

How to test or reproduce

  1. Navigate to User Preferences > Accessibility & Appearance
  2. Add highlight words in the new "Highlight words" field (comma-separated)
  3. Save preferences
  4. Send or view messages containing the highlight words
  5. Verify that matching words are highlighted with red background

##Screenshots

Screenshot from 2025-11-18 20-06-49 Screenshot from 2025-11-18 20-07-07 Screenshot from 2025-11-18 20-07-30

Screen Recording

Screencast from 2025-11-17 22-34-57.webm

Types of changes

  • [ ] Bugfix (non-breaking change which fixes an issue)
  • [ ] Improvement (non-breaking change which improves a current function)
  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Documentation update (if none of the other choices apply)

Checklist

  • [x] I have read the CONTRIBUTING doc
  • [x] I have signed the CLA
  • [x] Lint and unit tests pass locally with my changes
  • [x] I have added tests that prove my fix is effective or that my feature works (if applicable)
  • [ ] I have added necessary documentation (if applicable)
  • [ ] Any dependent changes have been merged and published in downstream modules

Further comments

Files Modified:

  • app/views/UserPreferencesView/index.tsx - Added highlights UI and save logic
  • app/containers/markdown/components/Plain.tsx - Implemented text highlighting
  • app/containers/markdown/contexts/MarkdownContext.ts - Added highlights context
  • app/containers/markdown/index.tsx - Passed highlights to context
  • app/containers/message/Content.tsx - Propagated highlights to Markdown
  • app/containers/message/index.tsx - Added highlight detection logic
  • app/containers/message/interfaces.ts - Added highlights prop
  • app/definitions/IUser.ts - Extended notification preferences
  • app/i18n/locales/en.json - Added translation keys
  • app/views/RoomView/index.tsx - Passed highlights from user settings

Testing Results: ✅ All existing tests pass
✅ Markdown rendering tests: 11/11 passed
✅ No breaking changes to existing functionality

Closes: #6371

This feature aligns the mobile app with the Rocket.Chat web version's highlight words functionality.

Summary by CodeRabbit

  • New Features

    • Message highlighting: user-configurable words are emphasized in messages (case-insensitive, exact-word matching, punctuation-aware, theme-aware colors).

  • UI

    • Preferences: new Highlights input with placeholder, description, dirty/save behavior, save button, and success/failure toasts.
    • Highlights propagate to message lists and rendering; messages compute and apply highlight state; accessibility labels updated for highlighted content.

  • Localization

    • Added UI strings for highlight labels, descriptions, and save feedback.

  • Tests

    • Added tests covering highlight rendering and edge cases.

  • Documentation

    • Story demonstrating highlight behavior added.

✏️ Tip: You can customize this high-level summary in your review settings.

DSingh0304 avatar Nov 17 '25 17:11 DSingh0304

Walkthrough

Adds user-configurable highlight keywords in Preferences, exposes them via MarkdownContext, forwards highlights through RoomView → Message → Markdown, implements case-insensitive escaped-word highlighting in the Plain renderer, adds tests and a Storybook story, and persists highlights with optimistic UI and server sync.

Changes

Cohort / File(s) Summary
Markdown Context
app/containers/markdown/contexts/MarkdownContext.ts		 Added optional highlights?: string[] to IMarkdownContext and initialized highlights: [] in defaultState.
Markdown Component & Renderer
app/containers/markdown/index.tsx, app/containers/markdown/components/Plain.tsx, app/containers/markdown/components/Plain.test.tsx, app/containers/markdown/HighlightWords.stories.tsx		 Markdown now accepts highlights and provides them via context; Plain.tsx normalizes and escapes terms, builds a case-insensitive word regex to split text and wraps matches with theme-aware highlight styling; tests and Storybook story added.
Message Layer
app/containers/message/interfaces.ts, app/containers/message/index.tsx, app/containers/message/Content.tsx		 Added highlights?: string[] to message interfaces/props; forwarded highlights into Markdown; index.tsx computes isHighlighted from existing highlighted or presence of highlight terms in message text.
Views & Propagation
app/views/RoomView/index.tsx		 Passes user.settings?.preferences?.highlights into Message (and LoadMore) components.
User Preferences UI
app/views/UserPreferencesView/index.tsx		 Added UI and logic to edit and save highlights: local/server sync, dirty tracking, optimistic update, persistence calls, validation fetch, toasts, input and save button.
User Model
app/definitions/IUser.ts		 Added highlights?: string[] to INotificationPreferences and tightened preferences typing.
i18n
app/i18n/locales/en.json		 Added translation keys for highlights and save messages.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Prefs as UserPreferencesView
    participant Server
    participant Room as RoomView
    participant Msg as Message
    participant MD as MarkdownProvider
    participant Plain as PlainRenderer

    User->>Prefs: edit highlights
    Prefs->>Prefs: local update & dirty flag
    Prefs->>Server: saveUserPreferences(highlights)
    Server-->>Prefs: save response
    Prefs->>Server: getUserPreferences()
    Server-->>Prefs: confirmed highlights

    Note over Room,Msg: Rendering path for messages
    Room->>Msg: pass highlights (from user prefs)
    Msg->>MD: provide highlights via context
    MD->>Plain: highlights available
    Plain->>Plain: normalize & escape words, build regex, split text
    Plain->>Plain: render segments with highlight styling

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Pay attention to:
    • app/containers/markdown/components/Plain.tsx — regex escaping, normalization, punctuation handling, accessibilityLabel changes.
    • app/views/UserPreferencesView/index.tsx — optimistic update, save/validate flow and error handling.
    • Prop and type propagation across RoomView → Message → MarkdownContext.

Possibly related PRs

  • RocketChat/Rocket.Chat.ReactNative#6725 — overlaps changes to app/containers/markdown/index.tsx (modifies IMarkdownProps) and may conflict with the new highlights prop.

Suggested reviewers

  • OtavioStasiak
  • diegolmello

Poem

🐰 I nibble at prefs and hop with delight,
I polish keywords so messages glow bright,
From settings to plain text I scamper and bound,
Matching carrots of words that I’ve found,
Hop, highlight, hooray — tiny sparks all around! 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly summarizes the main feature being added: a highlight words feature for messages and user preferences, which aligns with the primary objective of adding this functionality to the mobile app.
Linked Issues check ✅ Passed The PR successfully implements all coding requirements from #6371: added highlights section in User Preferences with comma-separated word input, integrated regex-based text highlighting in markdown rendering, propagated highlights through context and components, updated API integration with highlights field, and added necessary translations.
Out of Scope Changes check ✅ Passed All changes are scoped to implementing the highlight words feature: UI preferences, markdown rendering logic, context propagation, type definitions, translations, and tests. No unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 2d741b7d4cca266f7c30ba843525c1da5163d95b and 4e05069cef20a9ab7e21a2a36d4c5f1309376730.

📒 Files selected for processing (2)
  • app/i18n/locales/en.json (1 hunks)
  • app/views/RoomView/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • app/views/RoomView/index.tsx
  • app/i18n/locales/en.json

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Nov 17 '25 17:11 coderabbitai[bot]

Yeah, sure I will make the changes and update the PR.

DSingh0304 avatar Nov 18 '25 03:11 DSingh0304

Hey, I have updated the PR and uploaded the screenshots. Please review once.

DSingh0304 avatar Nov 18 '25 15:11 DSingh0304