Add copy button to View Source screen

[olivialivia]

Fixes element-hq/element-web#21482

Signed-off-by: Olivia Jedynak jedynaoli2@gmail.com

---

Here's what your changelog entry will look like:

✨ Features

• Add copy button to View Source screen (#8278). Fixes Add copy buttons to event source modal element-hq/element-web#21482. Contributed by @olivialivia.

Preview: https://pr8278--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[HarHarLinks]

Is there a button for the decrypted source if as well if the event is encrypted? Also could you add the buttons to copy event and room id respectively? Thanks

[olivialivia]

Yes, it works on encrypted events as well. I've not added one for event id and room id. I'm not sure how they would want it presented as there are buttons for copying multiple lines, but I've not seen any single line copy buttons. Eg:

[SimonBrandner]

Could you please put Fixes <issue link> into the PR description, so that Github auto-closes the issue when the PR is merged?

[olivialivia]

Thanks, done

[t3chguy]

For the room ID & event ID it could just be a case of them being AccessibleButton kind=link which copy on-click

[t3chguy]

Looks good to me, thanks. Let me know if you want to also solve the copying of room ID & event ID as part of this PR.

[codecov]

Codecov Report

Merging #8278 (fc37407) into develop (9ba55d1) will decrease coverage by 0.26%.
The diff coverage is 0.00%.

❗ Current head fc37407 differs from pull request most recent head d323fc7. Consider uploading reports for the commit d323fc7 to get more accurate results

@@             Coverage Diff             @@
##           develop    #8278      +/-   ##
===========================================
- Coverage    29.51%   29.25%   -0.27%     
===========================================
  Files          869      863       -6     
  Lines        49961    49880      -81     
  Branches     12708    12696      -12     
===========================================
- Hits         14747    14592     -155     
- Misses       35214    35288      +74     

Impacted Files	Coverage Δ
src/components/structures/ViewSource.tsx	0.00% <0.00%> (ø)
src/components/views/messages/MBeaconBody.tsx	7.14% <0.00%> (-92.86%)	⬇️
...c/components/views/location/LocationViewDialog.tsx	0.00% <0.00%> (-92.31%)	⬇️
src/components/views/messages/MLocationBody.tsx	70.37% <0.00%> (-23.38%)	⬇️
src/utils/WellKnownUtils.ts	44.11% <0.00%> (-17.65%)	⬇️
src/TextForEvent.tsx	35.73% <0.00%> (-8.12%)	⬇️
src/stores/OwnBeaconStore.ts	96.73% <0.00%> (-1.12%)	⬇️
src/languageHandler.tsx	72.35% <0.00%> (-0.82%)	⬇️
src/components/views/rooms/RoomTile.tsx	47.49% <0.00%> (ø)
src/components/views/location/Marker.tsx	100.00% <0.00%> (ø)
... and 8 more

[olivialivia]

Yeah, I'm happy to work on those as well. I can do it in another PR.

[t3chguy]

Sorry, needs a small stylistic change

When the content is wide enough to wrap it causes the right edge to not have a margin similar to the left, please remedy this then we can merge :)

[olivialivia]

I had to play around around with the margins as the container goes outside the normal bounds due to <CopyableText> being a flexbox . This should look fine now for both encrypted and unencrypted messages.

[t3chguy]

Instead of this can we just use something like

1.125em isn't actually right and makes it asymetrical

[olivialivia]

Sure, hopefully this is fine now

[t3chguy]

Thanks!!