Page MenuHomePhabricator

[web] Create a MarkdownSpoiler component for the web implementation to render when parsed
ClosedPublic

Authored by rohan on Nov 7 2022, 6:13 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Nov 21, 3:18 PM
Unknown Object (File)
Thu, Nov 21, 3:17 PM
Unknown Object (File)
Wed, Nov 20, 5:04 PM
Unknown Object (File)
Sun, Oct 27, 2:16 PM
Unknown Object (File)
Sat, Oct 26, 5:09 AM
Unknown Object (File)
Sep 27 2024, 8:22 PM
Unknown Object (File)
Sep 27 2024, 8:22 PM
Unknown Object (File)
Sep 27 2024, 8:22 PM

Details

Summary

We create a custom MarkdownSpoiler component to render spoiler content in-line, but to add additional functionality within the component in order to not dilute rules.react.js.

Linear:
https://linear.app/comm/issue/ENG-2194/create-a-markdownspoiler-component-for-the-web-implementation-to

Depends on D5546

Test Plan

The expected behavior is the same as the previous diff - the spoiler text still renders in a span.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

Harbormaster returned this revision to the author for changes because remote builds failed.Nov 7 2022, 6:22 PM
Harbormaster failed remote builds in B13243: Diff 18170!
rohan requested review of this revision.Nov 8 2022, 5:44 AM
rohan edited the test plan for this revision. (Show Details)
web/markdown/markdown-spoiler.react.js
15

My reasoning for containing the Spoiler text in React.useMemo() is I believe there's a linear task to track editing / deleting messages, so ultimately when that makes progress it's possible that the text prop will change and we can trigger the dependency change to not get the cached value, but for all other use cases we don't need to keep re-rendering the same spoiler text when the text content is not changing.

atul requested changes to this revision.Nov 8 2022, 7:18 AM

Can we remove the children prop? Doesn't look like it's being used in this diff

web/markdown/markdown-spoiler.react.js
9

It doesn't look like we're using this children prop?

This revision now requires changes to proceed.Nov 8 2022, 7:18 AM

Removed the children prop

This revision is now accepted and ready to land.Nov 8 2022, 8:35 AM
web/markdown/markdown-spoiler.react.js
14–16 ↗(On Diff #18210)

Instead of memoizing the return value you should just wrap the whole component in React.memo

Add unique key to each MarkdownSpoiler component

web/markdown/markdown-spoiler.react.js
11–17 ↗(On Diff #18332)

Let's avoid the increased indentation level here

web/markdown/markdown-spoiler.react.js
11–17 ↗(On Diff #18332)

Thanks for the feedback - do you mind clarifying what you mean exactly about the indentation?

web/markdown/markdown-spoiler.react.js
11–17 ↗(On Diff #18332)

Something like this example in the codebase:

37873d.png (788×1 px, 162 KB)

web/markdown/markdown-spoiler.react.js
11–17 ↗(On Diff #18332)

Ah makes sense, thanks for the reference!

Update React.memo use to match the example