Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add copy button to View Source screen (#8278)

Browse Source 
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
olivialivia 2022-04-11 19:37:52 +01:00 committed by GitHub
parent 9ba55d1d14
commit 7b2f1e22e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/structures/_ViewSource.scss
View File

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

44
src/components/structures/ViewSource.tsx
View File

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