Page MenuHomePhabricator

[web] Introduce markdown component for chat mentions
ClosedPublic

Authored by patryk on Aug 17 2023, 10:28 AM.
Tags
None
Referenced Files
F3140731: D8852.diff
Sun, Nov 3, 5:10 AM
Unknown Object (File)
Mon, Oct 28, 12:51 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Unknown Object (File)
Sun, Oct 27, 2:21 PM
Subscribers

Details

Summary

Solution for ENG-4560.
This diff creates a new component for chat mentions which handles bolding mentions when user has access to given chat.

Depends on D8851.

Test Plan

Before testing, please apply the entire web stack.

  1. Create a community with three users.
  2. Create a private chat for two chosen users.
  3. Mention private chat in community chat (e. g. @[[256|8282:default text]]).

For users assigned to previously created private chat, the mention should be bold and render current thread name:

t1.png (1×1 px, 206 KB)

For users who are not in private chat, the mention should be rendered with plain text message style:
t2.png (1×1 px, 167 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

patryk held this revision as a draft.
patryk edited the test plan for this revision. (Show Details)
patryk added reviewers: tomek, inka, rohan.
web/markdown/markdown.css
79–81 ↗(On Diff #30111)

We need to change link colour to match user mention style

97 ↗(On Diff #30111)

Without this line chat mention is visible through spoiler.

rohan added inline comments.
web/markdown/markdown-chat-mention.react.js
10 ↗(On Diff #30111)

Is this prop used somewhere else?

This revision is now accepted and ready to land.Aug 24 2023, 7:07 AM
inka requested changes to this revision.Aug 28 2023, 4:22 AM
inka added inline comments.
web/markdown/markdown-chat-mention.react.js
29–30 ↗(On Diff #30111)

Is the memoization necessary? It doesn't seem like an expensive component... Moreover you will be passing a different text all the time, so it doesn't seem like the memoization can help much, since

The caching strategy React has adopted has a size of 1. That is, they only keep around the most recent value of the input and result.

(source)
I'd recommend that you read for example this post. If you think I'm wrong, let me know

This revision now requires changes to proceed.Aug 28 2023, 4:22 AM
web/markdown/markdown-chat-mention.react.js
10 ↗(On Diff #30111)

It is not, will add it in the next diff!

29–30 ↗(On Diff #30111)

I added memoization based on the reasoning in D5553. Since the hasAccessToChat flag is a 'decision maker' and the calculations are not expensive, memoization is not necessary. Thanks for sharing those interesting resources!

Remove memoization and threadInfo prop

This revision is now accepted and ready to land.Aug 31 2023, 8:16 AM
tomek requested changes to this revision.Sep 12 2023, 2:18 AM
tomek added inline comments.
web/markdown/markdown-chat-mention.react.js
20

We have to make sure that we're not rendering this inside another a.

web/markdown/markdown.css
73

Do we apply other link styles, e.g. cursor: pointer?

80

Why we're setting it always to be black?

This revision now requires changes to proceed.Sep 12 2023, 2:18 AM
web/markdown/markdown-chat-mention.react.js
20

Then probably it's better to wrap <a> with <strong>

web/markdown/markdown.css
73

div.markdown a styles are applied and cursor: pointer also so I'm assuming that all default styles are applied.

80

To match user mention styles (we render strong tag for chat mentions, but as said in above comment, wrapping <a> with <strong> should enable color inheritance).

tomek added inline comments.
web/markdown/markdown-chat-mention.react.js
20

This shouldn't change too much - the rule about not including one anchor within another is about any descendants and not just children. Also, maybe we should put strong inside a - what do you think?

This revision is now accepted and ready to land.Sep 19 2023, 9:02 AM