imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix view source and devtools showing hljs warnings (#7759)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-09 09:09:06 +00:00 • committed by GitHub
parent 094b29bb21
commit 2b72a2cc2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/structures/ViewSource.tsx
View file

@ -71,13 +71,13 @@ export default class ViewSource extends React.Component<IProps, IState> {
<summary>
<span className="mx_ViewSource_heading">{ _t("Decrypted event source") }</span>
</summary>
<SyntaxHighlight className="json">{ JSON.stringify(decryptedEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ JSON.stringify(decryptedEventSource, null, 2) }</SyntaxHighlight>
</details>
<details className="mx_ViewSource_details">
<summary>
<span className="mx_ViewSource_heading">{ _t("Original event source") }</span>
</summary>
<SyntaxHighlight className="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
</details>
</>
);
@ -85,7 +85,7 @@ export default class ViewSource extends React.Component<IProps, IState> {
return (
<>
<div className="mx_ViewSource_heading">{ _t("Original event source") }</div>
<SyntaxHighlight className="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
<SyntaxHighlight language="json">{ JSON.stringify(originalEventSource, null, 2) }</SyntaxHighlight>
</>
);
}

4
src/components/views/dialogs/DevtoolsDialog.tsx
View file

@ -501,7 +501,7 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
return <div className="mx_ViewSource">
<div className="mx_Dialog_content">
<SyntaxHighlight className="json">
<SyntaxHighlight language="json">
{ JSON.stringify(this.state.event.event, null, 2) }
</SyntaxHighlight>
</div>
@ -634,7 +634,7 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
return <div className="mx_ViewSource">
<div className="mx_DevTools_content">
<SyntaxHighlight className="json">
<SyntaxHighlight language="json">
{ JSON.stringify(this.state.event.event, null, 2) }
</SyntaxHighlight>
</div>

37
src/components/views/elements/SyntaxHighlight.tsx
View file

@ -15,41 +15,26 @@ limitations under the License.
*/
import React from 'react';
import highlight from 'highlight.js';
import hljs from 'highlight.js';
import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps {
className?: string;
children?: React.ReactNode;
language?: string;
children: string;
}
@replaceableComponent("views.elements.SyntaxHighlight")
export default class SyntaxHighlight extends React.Component<IProps> {
private el: HTMLPreElement = null;
constructor(props: IProps) {
super(props);
}
// componentDidUpdate used here for reusability
public componentDidUpdate(): void {
if (this.el) highlight.highlightElement(this.el);
}
// call componentDidUpdate because _ref is fired on initial render
// which does not fire componentDidUpdate
private ref = (el: HTMLPreElement): void => {
this.el = el;
this.componentDidUpdate();
};
export default class SyntaxHighlight extends React.PureComponent<IProps> {
public render(): JSX.Element {
const { className, children } = this.props;
const { children: content, language } = this.props;
const highlighted = language ? hljs.highlight(language, content) : hljs.highlightAuto(content);
return <pre className={`${className} mx_SyntaxHighlight`} ref={this.ref}>
<code>{ children }</code>
</pre>;
return (
<pre className={`mx_SyntaxHighlight hljs language-${highlighted.language}`}>
<code dangerouslySetInnerHTML={{ __html: highlighted.value }} />
</pre>
);
}
}