Add copy button to View Source screen (#8278)

Co-authored-by: Michael Telatynski <[email protected]>

Author: olivialivia

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);
+}

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>
                 </>
             );
         }