OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix error when viewing source of redacted events (#9914) 

* Fix viewing source of redacted events

Clicking 'View Source' in the context menu of a redacted event causes an error,
and the user gets no visible result.

This fixes <ViewSource /> to indicate that the source is unavailable when a
message has been redacted. The original source remains available.

<SyntaxHighlight /> requires a non-null string for its `content` prop, and, in
the case of redacted events, <ViewSource /> was passing `undefined`. This is
ultimately because redacting an event causes `MatrixEvent.clearEvent` to be
`undefined`, which <ViewSource /> wasn't checking.

Fixes https://github.com/vector-im/element-web/issues/24165

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Use correct highlight.js call

Previous call signature was deprecated.

See https://github.com/highlightjs/highlight.js/issues/2277

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
t3chguy/dedup-icons-17oct
Clark Fischer 2023-01-15 16:22:59 +00:00 committed by GitHub
parent badb2c4b27
commit 2417482667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 138 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016, 2019, 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -77,9 +76,13 @@ export default class ViewSource extends React.Component<IProps, IState> {
<summary>
<span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
</summary>
<CopyableText getTextToCopy={copyDecryptedFunc}>
<SyntaxHighlight language="json">{stringify(decryptedEventSource)}</SyntaxHighlight>
</CopyableText>
{decryptedEventSource ? (
<CopyableText getTextToCopy={copyDecryptedFunc}>
<SyntaxHighlight language="json">{stringify(decryptedEventSource)}</SyntaxHighlight>
</CopyableText>
) : (
<div>{_t("Decrypted source unavailable")}</div>
)}
</details>
<details className="mx_ViewSource_details">
<summary>

3
src/components/views/elements/SyntaxHighlight.tsx
View File

@ -1,5 +1,6 @@
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -25,7 +26,7 @@ interface IProps {
export default class SyntaxHighlight extends React.PureComponent<IProps> {
public render(): JSX.Element {
const { children: content, language } = this.props;
const highlighted = language ? hljs.highlight(language, content) : hljs.highlightAuto(content);
const highlighted = language ? hljs.highlight(content, { language }) : hljs.highlightAuto(content);
return (
<pre className={`mx_SyntaxHighlight hljs language-${highlighted.language}`}>

1
src/i18n/strings/en_EN.json
View File

@ -3452,6 +3452,7 @@
"User menu": "User menu",
"Could not load user profile": "Could not load user profile",
"Decrypted event source": "Decrypted event source",
"Decrypted source unavailable": "Decrypted source unavailable",
"Original event source": "Original event source",
"Event ID: %(eventId)s": "Event ID: %(eventId)s",
"Thread root ID: %(threadRootId)s": "Thread root ID: %(threadRootId)s",

59
test/components/structures/ViewSource-test.tsx Normal file
View File

@ -0,0 +1,59 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from "@testing-library/react";
import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
import React from "react";
import ViewSource from "../../../src/components/structures/ViewSource";
import { mkEvent, stubClient } from "../../test-utils/test-utils";
describe("ThreadView", () => {
const ROOM_ID = "!roomId:example.org";
const SENDER = "@alice:example.org";
let messageEvent: MatrixEvent;
const redactionEvent = mkEvent({
user: SENDER,
event: true,
type: EventType.RoomRedaction,
content: {},
});
beforeEach(() => {
messageEvent = new MatrixEvent({
type: EventType.RoomMessageEncrypted,
room_id: ROOM_ID,
sender: SENDER,
content: {},
state_key: undefined,
});
messageEvent.makeRedacted(redactionEvent);
});
beforeEach(stubClient);
// See https://github.com/vector-im/element-web/issues/24165
it("doesn't error when viewing redacted encrypted messages", () => {
// Sanity checks
expect(messageEvent.isEncrypted()).toBeTruthy();
// @ts-ignore clearEvent is private, but it's being used directly <ViewSource />
expect(messageEvent.clearEvent).toBe(undefined);
expect(() => render(<ViewSource mxEvent={messageEvent} onFinished={() => {}} />)).not.toThrow();
});
});

38
test/components/views/elements/SyntaxHighlight-test.tsx Normal file
View File

@ -0,0 +1,38 @@
/* eslint @typescript-eslint/no-unused-vars: ["error", { "varsIgnorePattern": "^_" }] */
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from "@testing-library/react";
import hljs, { type HighlightOptions } from "highlight.js";
import React from "react";
import SyntaxHighlight from "../../../../src/components/views/elements/SyntaxHighlight";
describe("<SyntaxHighlight />", () => {
it("renders", () => {
const { container } = render(<SyntaxHighlight>console.log("Hello, World!");</SyntaxHighlight>);
expect(container).toMatchSnapshot();
});
it.each(["json", "javascript", "css"])("uses the provided language", (lang) => {
const mock = jest.spyOn(hljs, "highlight");
render(<SyntaxHighlight language={lang}>// Hello, World</SyntaxHighlight>);
const [_lang, opts] = mock.mock.lastCall!;
expect((opts as HighlightOptions)["language"]).toBe(lang);
});
});

30
test/components/views/elements/__snapshots__/SyntaxHighlight-test.tsx.snap Normal file
View File

@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SyntaxHighlight /> renders 1`] = `
<div>
<pre
class="mx_SyntaxHighlight hljs language-arcade"
>
<code>
<span
class="hljs-built_in"
>
console
</span>
.
<span
class="hljs-built_in"
>
log
</span>
(
<span
class="hljs-string"
>
"Hello, World!"
</span>
);
</code>
</pre>
</div>
`;