[MM-57711] Convert ./components/latex_inline/latex_inline.tsx from Class Component to Function Component (#28129)
* Changed the class component to functional * Updated the tests for latex_inline * Updated the snapshots and tests * Updated the tests, snapshots and changed div to span * Updated snapshots and tests * used renderWithContext instead of render in tests --------- Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Nikhil Kulkarni
коммит произвёл
GitHub
GitHub
родитель
5a511a14ee
Коммит
6d51307ddf
@@ -1,31 +1,198 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/LatexBlock error in katex 1`] = `
|
||||
<span
|
||||
className="post-body--code inline-tex"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<span class=\\"katex-error\\" title=\\"ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: e^{i\\\\pi + 1 = 0\\" style=\\"color:#cc0000\\">e^{i\\\\pi + 1 = 0</span>",
|
||||
}
|
||||
}
|
||||
/>
|
||||
exports[`components/LatexInline error in katex 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="post-body--code inline-tex"
|
||||
data-testid="latex-enabled"
|
||||
>
|
||||
<span
|
||||
class="katex-error"
|
||||
style="color:#cc0000"
|
||||
title="ParseError: KaTeX parse error: Expected '}', got 'EOF' at end of input: e^{i\\\\pi + 1 = 0"
|
||||
>
|
||||
e^{i\\pi + 1 = 0
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/LatexBlock latex is disabled 1`] = `
|
||||
<span
|
||||
className="post-body--code inline-tex"
|
||||
>
|
||||
$e^{i\\pi} + 1 = 0$
|
||||
</span>
|
||||
exports[`components/LatexInline latex is disabled 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="post-body--code inline-tex"
|
||||
data-testid="latex-disabled"
|
||||
>
|
||||
$e^{i\\pi} + 1 = 0$
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/LatexBlock should match snapshot 1`] = `
|
||||
<span
|
||||
className="post-body--code inline-tex"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></mrow><annotation encoding=\\"application/x-tex\\">e^{i\\\\pi} + 1 = 0</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.908em;vertical-align:-0.0833em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathnormal\\">e</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8247em;\\"><span style=\\"top:-3.063em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mathnormal mtight\\" style=\\"margin-right:0.03588em;\\">iπ</span></span></span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.6444em;\\"></span><span class=\\"mord\\">1</span><span class=\\"mspace\\" style=\\"margin-right:0.2778em;\\"></span><span class=\\"mrel\\">=</span><span class=\\"mspace\\" style=\\"margin-right:0.2778em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.6444em;\\"></span><span class=\\"mord\\">0</span></span></span></span>",
|
||||
}
|
||||
}
|
||||
/>
|
||||
exports[`components/LatexInline should match snapshot 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="post-body--code inline-tex"
|
||||
data-testid="latex-enabled"
|
||||
>
|
||||
<span
|
||||
class="katex"
|
||||
>
|
||||
<span
|
||||
class="katex-mathml"
|
||||
>
|
||||
<math
|
||||
xmlns="http://www.w3.org/1998/Math/MathML"
|
||||
>
|
||||
<semantics>
|
||||
<mrow>
|
||||
<msup>
|
||||
<mi>
|
||||
e
|
||||
</mi>
|
||||
<mrow>
|
||||
<mi>
|
||||
i
|
||||
</mi>
|
||||
<mi>
|
||||
π
|
||||
</mi>
|
||||
</mrow>
|
||||
</msup>
|
||||
<mo>
|
||||
+
|
||||
</mo>
|
||||
<mn>
|
||||
1
|
||||
</mn>
|
||||
<mo>
|
||||
=
|
||||
</mo>
|
||||
<mn>
|
||||
0
|
||||
</mn>
|
||||
</mrow>
|
||||
<annotation
|
||||
encoding="application/x-tex"
|
||||
>
|
||||
e^{i\\pi} + 1 = 0
|
||||
</annotation>
|
||||
</semantics>
|
||||
</math>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="katex-html"
|
||||
>
|
||||
<span
|
||||
class="base"
|
||||
>
|
||||
<span
|
||||
class="strut"
|
||||
style="height:0.908em;vertical-align:-0.0833em;"
|
||||
/>
|
||||
<span
|
||||
class="mord"
|
||||
>
|
||||
<span
|
||||
class="mord mathnormal"
|
||||
>
|
||||
e
|
||||
</span>
|
||||
<span
|
||||
class="msupsub"
|
||||
>
|
||||
<span
|
||||
class="vlist-t"
|
||||
>
|
||||
<span
|
||||
class="vlist-r"
|
||||
>
|
||||
<span
|
||||
class="vlist"
|
||||
style="height:0.8247em;"
|
||||
>
|
||||
<span
|
||||
style="top:-3.063em;margin-right:0.05em;"
|
||||
>
|
||||
<span
|
||||
class="pstrut"
|
||||
style="height:2.7em;"
|
||||
/>
|
||||
<span
|
||||
class="sizing reset-size6 size3 mtight"
|
||||
>
|
||||
<span
|
||||
class="mord mtight"
|
||||
>
|
||||
<span
|
||||
class="mord mathnormal mtight"
|
||||
style="margin-right:0.03588em;"
|
||||
>
|
||||
iπ
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="mspace"
|
||||
style="margin-right:0.2222em;"
|
||||
/>
|
||||
<span
|
||||
class="mbin"
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<span
|
||||
class="mspace"
|
||||
style="margin-right:0.2222em;"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="base"
|
||||
>
|
||||
<span
|
||||
class="strut"
|
||||
style="height:0.6444em;"
|
||||
/>
|
||||
<span
|
||||
class="mord"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="mspace"
|
||||
style="margin-right:0.2778em;"
|
||||
/>
|
||||
<span
|
||||
class="mrel"
|
||||
>
|
||||
=
|
||||
</span>
|
||||
<span
|
||||
class="mspace"
|
||||
style="margin-right:0.2778em;"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="base"
|
||||
>
|
||||
<span
|
||||
class="strut"
|
||||
style="height:0.6444em;"
|
||||
/>
|
||||
<span
|
||||
class="mord"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,21 +1,28 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import {shallow} from 'enzyme';
|
||||
import React from 'react';
|
||||
import {act} from 'react-dom/test-utils';
|
||||
|
||||
import LatexInline from 'components/latex_inline/latex_inline';
|
||||
|
||||
describe('components/LatexBlock', () => {
|
||||
import {withIntl} from 'tests/helpers/intl-test-helper';
|
||||
import {renderWithContext} from 'tests/react_testing_utils';
|
||||
|
||||
describe('components/LatexInline', () => {
|
||||
const defaultProps = {
|
||||
content: 'e^{i\\pi} + 1 = 0',
|
||||
enableInlineLatex: true,
|
||||
};
|
||||
|
||||
test('should match snapshot', async () => {
|
||||
const wrapper = shallow(<LatexInline {...defaultProps}/>);
|
||||
await import('katex'); //manually import katex
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
let container;
|
||||
|
||||
await act(async () => {
|
||||
const result = renderWithContext(withIntl(<LatexInline {...defaultProps}/>));
|
||||
container = result.container;
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('latex is disabled', async () => {
|
||||
@@ -24,9 +31,13 @@ describe('components/LatexBlock', () => {
|
||||
enableInlineLatex: false,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<LatexInline {...props}/>);
|
||||
await import('katex'); //manually import katex
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
let container;
|
||||
|
||||
await act(async () => {
|
||||
const result = renderWithContext(withIntl(<LatexInline {...props}/>));
|
||||
container = result.container;
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('error in katex', async () => {
|
||||
@@ -35,8 +46,12 @@ describe('components/LatexBlock', () => {
|
||||
enableInlineLatex: true,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<LatexInline {...props}/>);
|
||||
await import('katex'); //manually import katex
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
let container;
|
||||
|
||||
await act(async () => {
|
||||
const result = renderWithContext(withIntl(<LatexInline {...props}/>));
|
||||
container = result.container;
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import type {KatexOptions} from 'katex';
|
||||
import React from 'react';
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
type Katex = typeof import('katex');
|
||||
@@ -12,64 +12,57 @@ type Props = {
|
||||
enableInlineLatex: boolean;
|
||||
};
|
||||
|
||||
type State = {
|
||||
katex?: Katex;
|
||||
}
|
||||
const LatexInline = ({content, enableInlineLatex}: Props) => {
|
||||
const [katex, setKatex] = useState<Katex | undefined>(undefined);
|
||||
|
||||
export default class LatexInline extends React.PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
katex: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
import('katex').then((katex) => {
|
||||
this.setState({katex: katex.default});
|
||||
useEffect(() => {
|
||||
import('katex').then((katexModule) => {
|
||||
setKatex(katexModule.default);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!enableInlineLatex || katex === undefined) {
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
data-testid='latex-disabled'
|
||||
>
|
||||
{'$' + content + '$'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
render(): React.ReactNode {
|
||||
if (!this.props.enableInlineLatex || this.state.katex === undefined) {
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
>
|
||||
{'$' + this.props.content + '$'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
try {
|
||||
const katexOptions: KatexOptions = {
|
||||
throwOnError: false,
|
||||
displayMode: false,
|
||||
maxSize: 200,
|
||||
maxExpand: 100,
|
||||
fleqn: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const katexOptions: KatexOptions = {
|
||||
throwOnError: false,
|
||||
displayMode: false,
|
||||
maxSize: 200,
|
||||
maxExpand: 100,
|
||||
fleqn: true,
|
||||
};
|
||||
const html = katex.renderToString(content, katexOptions);
|
||||
|
||||
const html = this.state.katex.renderToString(this.props.content, katexOptions);
|
||||
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
dangerouslySetInnerHTML={{__html: html}}
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
data-testid='latex-enabled'
|
||||
dangerouslySetInnerHTML={{__html: html}}
|
||||
/>
|
||||
);
|
||||
} catch (e) {
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
data-testid='latex-error'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='katex.error'
|
||||
defaultMessage='Could not compile your Latex code. Please review the syntax and try again.'
|
||||
/>
|
||||
);
|
||||
} catch (e) {
|
||||
return (
|
||||
<span
|
||||
className='post-body--code inline-tex'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='katex.error'
|
||||
defaultMessage="Couldn't compile your Latex code. Please review the syntax and try again."
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default React.memo(LatexInline);
|
||||
|
||||
Ссылка в новой задаче
Block a user