Skip to content

Commit 1ed2503

Browse files
righrigh
committed
prettier
1 parent 99079be commit 1ed2503

File tree

12 files changed

+233
-280
lines changed

12 files changed

+233
-280
lines changed

‎.prettierrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"printWidth": 120,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": true,
7+
"bracketSpacing": true,
8+
"arrowParens": "always"
9+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"build": "rm -rf ./dist && webpack",
1111
"analyze": "rm -rf ./dist && webpack --analyze",
1212
"storybook": "storybook dev -p 6006",
13+
"prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
1314
"build-storybook": "storybook build",
1415
"build-default-css": "lessc --clean-css ./src/styles/default.less ./dist/styles/default.css",
1516
"build-dark-css": "lessc --clean-css ./src/styles/dark.less ./dist/styles/dark.css",
@@ -72,7 +73,7 @@
7273
"less": "^4.1.1",
7374
"less-loader": "7.3.0",
7475
"less-plugin-clean-css": "^1.5.1",
75-
"prettier": "2.2.1",
76+
"prettier": "^3.2.5",
7677
"react": ">=16.9.0",
7778
"react-dom": ">=16.9.0",
7879
"react-is": "^16.13.1",

‎src/components/Cell.tsx‎

Lines changed: 45 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,39 @@
1-
import React from "react";
2-
import Ansi from "ansi-to-react";
3-
import { Prism } from "react-syntax-highlighter";
1+
import React from 'react';
2+
import Ansi from 'ansi-to-react';
3+
import { Prism } from 'react-syntax-highlighter';
44

5-
import * as PrismStyles from "react-syntax-highlighter/dist/cjs/styles/prism";
5+
import * as PrismStyles from 'react-syntax-highlighter/dist/cjs/styles/prism';
66

7-
import {
8-
CellType,
9-
} from "../types";
10-
import { Context } from "../context";
7+
import { CellType } from '../types';
8+
import { Context } from '../context';
119

1210
type CellProps = {
1311
cell: CellType;
1412
seq: number;
1513
};
1614

1715
export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
18-
const {
19-
syntaxTheme,
20-
language,
21-
bgTransparent,
22-
htmlFilter,
23-
seqAsExecutionCount,
24-
Markdown,
25-
} = React.useContext(Context);
16+
const { syntaxTheme, language, bgTransparent, htmlFilter, seqAsExecutionCount, Markdown } = React.useContext(Context);
2617
const prismStyle = PrismStyles[syntaxTheme];
2718
const styleOverridden = {
2819
'code[class*="language-"]': {
2920
...prismStyle['code[class*="language-"]'],
30-
boxShadow: "none",
21+
boxShadow: 'none',
3122
},
3223
'pre[class*="language-"]': {
3324
...prismStyle['pre[class*="language-"]'],
34-
border: "none",
35-
boxShadow: "none",
25+
border: 'none',
26+
boxShadow: 'none',
3627
},
3728
};
3829
if (bgTransparent) {
3930
styleOverridden['code[class*="language-"]'] = {
4031
...styleOverridden['code[class*="language-"]'],
41-
background: "transparent",
32+
background: 'transparent',
4233
};
4334
styleOverridden['pre[class*="language-"]'] = {
4435
...styleOverridden['pre[class*="language-"]'],
45-
background: "transparent",
36+
background: 'transparent',
4637
};
4738
}
4839
if (!cell.outputs?.length && !cell.source?.length) {
@@ -53,33 +44,30 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
5344
<div className="cell border-box-sizing code_cell rendered">
5445
<div className="input">
5546
<div className="prompt input_prompt">
56-
{cell.cell_type === "code" ? (
47+
{cell.cell_type === 'code' ? (
5748
<span>
58-
In [
59-
{seqAsExecutionCount
60-
? seq
61-
: cell.execution_count || cell.prompt_number || " "}
49+
In [{seqAsExecutionCount ? seq : cell.execution_count || cell.prompt_number || ' '}
6250
]:
6351
</span>
6452
) : null}
6553
</div>
6654
<div className="inner_cell">
6755
{(() => {
68-
let source = "";
56+
let source = '';
6957
if (cell.input) {
7058
source = stringify(cell.input);
7159
} else if (cell.source) {
7260
source = stringify(cell.source);
7361
}
74-
if (cell.cell_type === "markdown") {
62+
if (cell.cell_type === 'markdown') {
7563
return (
7664
<Markdown
7765
className="text_cell_render border-box-sizing rendered_html"
7866
text={embedAttachments(source, cell.attachments)}
7967
/>
8068
);
8169
}
82-
if (cell.cell_type === "code") {
70+
if (cell.cell_type === 'code') {
8371
return (
8472
<div className="input_area">
8573
<div
@@ -98,7 +86,7 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
9886
language={language}
9987
style={{ ...prismStyle, ...styleOverridden }}
10088
customStyle={{
101-
backgroundColor: "transparent",
89+
backgroundColor: 'transparent',
10290
}}
10391
>
10492
{source}
@@ -109,7 +97,7 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
10997
</div>
11098
);
11199
}
112-
if (cell.cell_type === "heading") {
100+
if (cell.cell_type === 'heading') {
113101
return <h2>{source}</h2>;
114102
}
115103
})()}
@@ -121,39 +109,28 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
121109
{(cell.outputs || []).map((output, j) => (
122110
<div className="output_area" key={j}>
123111
<div className="prompt output_prompt">
124-
{output.execution_count && (
125-
<>Out [{output.execution_count}]:</>
126-
)}
112+
{output.execution_count && <>Out [{output.execution_count}]:</>}
127113
</div>
128114
{(() => {
129115
if (output.data == null) {
130116
if (output.png) {
131117
return (
132118
<div className="output_png output_subarea">
133-
<img
134-
src={`data:image/png;base64,${output.png}`}
135-
alt="output png"
136-
/>
119+
<img src={`data:image/png;base64,${output.png}`} alt="output png" />
137120
</div>
138121
);
139122
}
140123
if (output.jpeg) {
141124
return (
142125
<div className="output_jpeg output_subarea">
143-
<img
144-
src={`data:image/jpeg;base64,${output.jpeg}`}
145-
alt="output jpeg"
146-
/>
126+
<img src={`data:image/jpeg;base64,${output.jpeg}`} alt="output jpeg" />
147127
</div>
148128
);
149129
}
150130
if (output.gif) {
151131
return (
152132
<div className="output_gif output_subarea">
153-
<img
154-
src={`data:image/gif;base64,${output.gif}`}
155-
alt="output gif"
156-
/>
133+
<img src={`data:image/gif;base64,${output.gif}`} alt="output gif" />
157134
</div>
158135
);
159136
}
@@ -177,23 +154,24 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
177154
);
178155
}
179156
if (output.traceback) {
180-
return <div className="output_subarea output_error">
181-
<Ansi>{stringify(output.traceback)}</Ansi>
182-
</div>
183-
157+
return (
158+
<div className="output_subarea output_error">
159+
<Ansi>{stringify(output.traceback)}</Ansi>
160+
</div>
161+
);
184162
}
185163
return null;
186164
}
187-
if (output.data["text/latex"]) {
165+
if (output.data['text/latex']) {
188166
return (
189167
<Markdown
190168
className="output_latex output_subarea output_execute_result"
191-
text={stringify(output.data["text/latex"])}
169+
text={stringify(output.data['text/latex'])}
192170
/>
193171
);
194172
}
195-
if (output.data["text/html"]) {
196-
const html = stringify(output.data["text/html"]);
173+
if (output.data['text/html']) {
174+
const html = stringify(output.data['text/html']);
197175
return (
198176
<div
199177
className="output_html rendered_html output_subarea"
@@ -203,50 +181,41 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
203181
></div>
204182
);
205183
}
206-
if (output.data["image/png"]) {
184+
if (output.data['image/png']) {
207185
return (
208186
<div className="output_png output_subarea">
209-
<img
210-
src={`data:image/png;base64,${output.data["image/png"]}`}
211-
alt="output png"
212-
/>
187+
<img src={`data:image/png;base64,${output.data['image/png']}`} alt="output png" />
213188
</div>
214189
);
215190
}
216-
if (output.data["image/jpeg"]) {
191+
if (output.data['image/jpeg']) {
217192
return (
218193
<div className="output_jpeg output_subarea">
219-
<img
220-
src={`data:image/jpeg;base64,${output.data["image/jpeg"]}`}
221-
alt="output jpeg"
222-
/>
194+
<img src={`data:image/jpeg;base64,${output.data['image/jpeg']}`} alt="output jpeg" />
223195
</div>
224196
);
225197
}
226-
if (output.data["image/gif"]) {
198+
if (output.data['image/gif']) {
227199
return (
228200
<div className="output_gif output_subarea">
229-
<img
230-
src={`data:image/gif;base64,${output.data["image/gif"]}`}
231-
alt="output gif"
232-
/>
201+
<img src={`data:image/gif;base64,${output.data['image/gif']}`} alt="output gif" />
233202
</div>
234203
);
235204
}
236-
if (output.data["image/svg+xml"]) {
205+
if (output.data['image/svg+xml']) {
237206
return (
238207
<div
239208
className="output_svg output_subarea"
240209
dangerouslySetInnerHTML={{
241-
__html: htmlFilter(output.data["image/svg+xml"]),
210+
__html: htmlFilter(output.data['image/svg+xml']),
242211
}}
243212
></div>
244213
);
245214
}
246-
if (output.data["text/plain"]) {
215+
if (output.data['text/plain']) {
247216
return (
248217
<div className="output_text output_subarea output_execute_result">
249-
<pre className={``}>{output.data["text/plain"]}</pre>
218+
<pre className={``}>{output.data['text/plain']}</pre>
250219
</div>
251220
);
252221
}
@@ -259,25 +228,22 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
259228
);
260229
};
261230

262-
const embedAttachments = (
263-
source: string,
264-
attachments: CellType["attachments"] = {}
265-
) => {
231+
const embedAttachments = (source: string, attachments: CellType['attachments'] = {}) => {
266232
Object.entries(attachments).map(([name, mimes]) => {
267233
const mime = [...Object.keys(mimes)][0];
268234
if (mime == null) {
269235
return;
270236
}
271237
const data = `data:${mime};base64,${mimes[mime]}`;
272-
const re = new RegExp(`attachment:${name}`, "g");
238+
const re = new RegExp(`attachment:${name}`, 'g');
273239
source = source.replace(re, data);
274240
});
275241
return source;
276242
};
277243

278244
const stringify = (output: string | string[]): string => {
279245
if (Array.isArray(output)) {
280-
return output.join("");
246+
return output.join('');
281247
}
282248
return output;
283249
};

‎src/components/MarkdownForKatex.tsx‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
1-
import React from "react";
1+
import React from 'react';
22
import type { Options as RemarkMathOptions } from 'remark-math';
33
import { default as defaultRemarkMath } from 'remark-math';
44
import remarkGfm from 'remark-gfm';
5-
import rehypeRaw from "rehype-raw";
6-
import type { KatexOptions } from "katex";
5+
import rehypeRaw from 'rehype-raw';
6+
import type { KatexOptions } from 'katex';
77

8-
import type { MarkdownProps } from "../types";
9-
import { Context } from "../context";
10-
import { remarkLatexEnvironment } from "../markdown";
11-
import type { PluggableList } from "react-markdown/lib";
8+
import type { MarkdownProps } from '../types';
9+
import { Context } from '../context';
10+
import { remarkLatexEnvironment } from '../markdown';
11+
import type { PluggableList } from 'react-markdown/lib';
1212

1313
export type MarkdownOptionsForKatex = {
1414
remarkMath?: typeof defaultRemarkMath;
1515
remarkMathOptions?: RemarkMathOptions;
1616
katexOptions?: KatexOptions;
1717
};
1818

19-
const ReactMarkdown = React.lazy(() => import("react-markdown"));
19+
const ReactMarkdown = React.lazy(() => import('react-markdown'));
2020

21-
export const MarkdownForKatex: React.FC<MarkdownProps> = ({
22-
className,
23-
text,
24-
}) => {
25-
const {
26-
markdownOptions,
27-
htmlFilter,
28-
} = React.useContext(Context);
21+
export const MarkdownForKatex: React.FC<MarkdownProps> = ({ className, text }) => {
22+
const { markdownOptions, htmlFilter } = React.useContext(Context);
2923
const {
3024
remarkMath = defaultRemarkMath,
3125
remarkMathOptions = {},
@@ -34,28 +28,29 @@ export const MarkdownForKatex: React.FC<MarkdownProps> = ({
3428

3529
const [rehypePlugins, setRehypePlugins] = React.useState<PluggableList>([rehypeRaw]);
3630
React.useEffect(() => {
37-
if (typeof window !== "undefined") { // for SSR
31+
if (typeof window !== 'undefined') {
32+
// for SSR
3833
(async () => {
39-
const rehypeKatex = await import('rehype-katex') as any;
34+
const rehypeKatex = (await import('rehype-katex')) as any;
4035
setRehypePlugins([[rehypeKatex.default, katexOptions], rehypeRaw]);
4136
})();
4237
}
4338
}, []);
4439

45-
return (<div className={className}>
46-
<React.Suspense fallback={<></>}>
47-
<ReactMarkdown
48-
remarkPlugins={[[remarkMath, remarkMathOptions], [remarkLatexEnvironment, {}], remarkGfm]}
49-
rehypePlugins={rehypePlugins}
50-
>
51-
{htmlFilter(replaceForKatex(text))}
52-
</ReactMarkdown>
53-
</React.Suspense>
54-
</div>);
40+
return (
41+
<div className={className}>
42+
<React.Suspense fallback={<></>}>
43+
<ReactMarkdown
44+
remarkPlugins={[[remarkMath, remarkMathOptions], [remarkLatexEnvironment, {}], remarkGfm]}
45+
rehypePlugins={rehypePlugins}
46+
>
47+
{htmlFilter(replaceForKatex(text))}
48+
</ReactMarkdown>
49+
</React.Suspense>
50+
</div>
51+
);
5552
};
5653

5754
const replaceForKatex = (text: string) => {
58-
return text
59-
.replace(/\\\\begin\{eqnarray\}/g, "\\begin{aligned}")
60-
.replace(/\\\\end\{eqnarray\}/g, "\\end{aligned}");
55+
return text.replace(/\\\\begin\{eqnarray\}/g, '\\begin{aligned}').replace(/\\\\end\{eqnarray\}/g, '\\end{aligned}');
6156
};

0 commit comments

Comments
 (0)