From 7b2f1e22e17d8008d60fca6ee804120c8557e281 Mon Sep 17 00:00:00 2001
From: olivialivia <94136530+olivialivia@users.noreply.github.com>
Date: Mon, 11 Apr 2022 19:37:52 +0100
Subject: [PATCH] Add copy button to View Source screen (#8278)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_ViewSource.scss      |  5 +++
 src/components/structures/ViewSource.tsx | 44 ++++++++++++++++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index e3d6135ef3..f1ada65786 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -34,8 +34,13 @@ limitations under the License.
     padding: 0.5em 1em 0.5em 1em;
     word-wrap: break-word;
     white-space: pre-wrap;
+    overflow-wrap: anywhere;
 }
 
 .mx_ViewSource_details {
     margin-top: 0.8em;
 }
+
+.mx_ViewSource_container {
+    max-width: calc(100% - 24px);
+}
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index 477dd4ca9a..e84a26409e 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -29,6 +29,7 @@ import BaseDialog from "../views/dialogs/BaseDialog";
 import { DevtoolsContext } from "../views/dialogs/devtools/BaseTool";
 import { StateEventEditor } from "../views/dialogs/devtools/RoomState";
 import { stringify, TimelineEventEditor } from "../views/dialogs/devtools/Event";
+import CopyableText from "../views/elements/CopyableText";
 
 interface IProps extends IDialogProps {
     mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu
@@ -63,29 +64,58 @@ export default class ViewSource extends React.Component<IProps, IState> {
         // @ts-ignore
         const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private
         const originalEventSource = mxEvent.event;
-
+        const copyOriginalFunc = (): string => {
+            return stringify(originalEventSource);
+        };
         if (isEncrypted) {
+            const copyDecryptedFunc = (): string => {
+                return stringify(decryptedEventSource);
+            };
             return (
                 <>
                     <details open className="mx_ViewSource_details">
                         <summary>
-                            <span className="mx_ViewSource_heading">{ _t("Decrypted event source") }</span>
+                            <span className="mx_ViewSource_heading">
+                                { _t("Decrypted event source") }
+                            </span>
                         </summary>
-                        <SyntaxHighlight language="json">{ stringify(decryptedEventSource) }</SyntaxHighlight>
+                        <div className="mx_ViewSource_container">
+                            <CopyableText getTextToCopy={copyDecryptedFunc}>
+                                <SyntaxHighlight language="json">
+                                    { stringify(decryptedEventSource) }
+                                </SyntaxHighlight>
+                            </CopyableText>
+                        </div>
                     </details>
                     <details className="mx_ViewSource_details">
                         <summary>
-                            <span className="mx_ViewSource_heading">{ _t("Original event source") }</span>
+                            <span className="mx_ViewSource_heading">
+                                { _t("Original event source") }
+                            </span>
                         </summary>
-                        <SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
+                        <div className="mx_ViewSource_container">
+                            <CopyableText getTextToCopy={copyOriginalFunc}>
+                                <SyntaxHighlight language="json">
+                                    { stringify(originalEventSource) }
+                                </SyntaxHighlight>
+                            </CopyableText>
+                        </div>
                     </details>
                 </>
             );
         } else {
             return (
                 <>
-                    <div className="mx_ViewSource_heading">{ _t("Original event source") }</div>
-                    <SyntaxHighlight language="json">{ stringify(originalEventSource) }</SyntaxHighlight>
+                    <div className="mx_ViewSource_heading">
+                        { _t("Original event source") }
+                    </div>
+                    <div className="mx_ViewSource_container">
+                        <CopyableText getTextToCopy={copyOriginalFunc}>
+                            <SyntaxHighlight language="json">
+                                { stringify(originalEventSource) }
+                            </SyntaxHighlight>
+                        </CopyableText>
+                    </div>
                 </>
             );
         }