-
Notifications
You must be signed in to change notification settings - Fork 292
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: Move MemberMessage rendering to UI component #15980
Conversation
const handleShowMoreClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { | ||
const clickedOnShowMore = (event.target as HTMLElement).closest('.message-header-show-more'); | ||
if (clickedOnShowMore) { | ||
onClickParticipants(highlightedUsers); | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is now a native React click handler (no more listening to clicks on the parent component)
return <p className="message-header-caption" dangerouslySetInnerHTML={{__html: htmlCaption}}></p>; | ||
export function MessageContent({message, onClickAction}: {message: MemberMessageEntity; onClickAction: () => void}) { | ||
const htmlCaption = getContent(message); | ||
const content = replaceReactComponents(htmlCaption, [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is where the magic happens. We input a string like "hello <strong>felix</strong>"
and, with the right config, the <strong>
part will be replace with a react component.
Codecov Report
@@ Coverage Diff @@
## dev #15980 +/- ##
==========================================
+ Coverage 44.58% 44.60% +0.01%
==========================================
Files 685 686 +1
Lines 22902 22908 +6
Branches 5201 5201
==========================================
+ Hits 10212 10218 +6
- Misses 11373 11375 +2
+ Partials 1317 1315 -2 |
Description
Removes the need to use
dangerouslySetInnerHTML
for member system message rendered in the message list.Instead we do inline replacement of dynamic values in translations using the new
ReactLocalizerUtil
Screenshots/Screencast (for UI changes)
Screen.Recording.2023-10-11.at.16.33.23.mov
Checklist