Skip to content

Commit d82188a

Browse files
kemurukemuru
committed
feat: style improvements
1 parent e7971b8 commit d82188a

File tree

5 files changed

+321
-267
lines changed

5 files changed

+321
-267
lines changed

‎web/src/components/MarkdownEditor.tsx‎

Lines changed: 22 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -24,113 +24,15 @@ import {
2424
Separator,
2525
} from "@mdxeditor/editor";
2626

27-
import "@mdxeditor/editor/style.css";
28-
2927
import InfoIcon from "svgs/icons/info-circle.svg";
3028

31-
const Container = styled.div<{ isEmpty: boolean }>`
32-
width: 100%;
29+
import { sanitizeMarkdown } from "utils/markdownSanitization";
3330

34-
[class*="mdxeditor-toolbar"] {
35-
background-color: ${({ theme }) => theme.lightGrey};
36-
border: 1px solid ${({ theme }) => theme.stroke} !important;
37-
border-radius: 3px;
38-
font-family: "Open Sans", sans-serif;
31+
import { MDXEditorContainer, MDXEditorGlobalStyles } from "styles/mdxEditorTheme";
3932

40-
* svg {
41-
color: ${({ theme }) => theme.primaryText} !important;
42-
}
43-
44-
[class*="selectTrigger"] {
45-
background-color: ${({ theme }) => theme.whiteBackground} !important;
46-
color: ${({ theme }) => theme.primaryText} !important;
47-
cursor: pointer !important;
48-
}
49-
50-
button:hover {
51-
background-color: ${({ theme }) => theme.lightGrey}80 !important;
52-
cursor: pointer;
53-
}
54-
55-
button[data-state="on"],
56-
button[aria-pressed="true"] {
57-
background-color: ${({ theme }) => theme.whiteBackground} !important;
58-
}
59-
60-
button:disabled,
61-
button[data-disabled="true"] {
62-
opacity: 0.4 !important;
63-
cursor: not-allowed !important;
64-
65-
svg {
66-
color: ${({ theme }) => theme.secondaryText} !important;
67-
}
68-
}
69-
}
70-
71-
[class*="contentEditable"] {
72-
background-color: ${({ theme }) => theme.whiteBackground} !important;
73-
border: 1px solid ${({ theme }) => theme.stroke} !important;
74-
border-radius: 3px;
75-
color: ${({ theme }) => theme.primaryText} !important;
76-
min-height: 200px;
77-
padding: 16px;
78-
font-size: 16px;
79-
line-height: 1.5;
80-
81-
p {
82-
color: ${({ theme, isEmpty }) => (isEmpty ? theme.secondaryText : theme.primaryText)} !important;
83-
margin: 0 0 12px 0;
84-
}
85-
86-
p:empty::before {
87-
color: ${({ theme }) => theme.secondaryText} !important;
88-
opacity: 0.6 !important;
89-
}
90-
91-
h1,
92-
h2,
93-
h3,
94-
h4,
95-
h5,
96-
h6 {
97-
color: ${({ theme }) => theme.primaryText} !important;
98-
font-weight: 600;
99-
margin: 16px 0 8px 0;
100-
}
101-
102-
blockquote {
103-
color: ${({ theme }) => theme.secondaryText} !important;
104-
border-left: 3px solid ${({ theme }) => theme.mediumBlue} !important;
105-
font-style: italic;
106-
margin: 16px 0;
107-
padding-left: 12px;
108-
}
109-
110-
code {
111-
background-color: ${({ theme }) => theme.lightGrey} !important;
112-
color: ${({ theme }) => theme.primaryText} !important;
113-
}
114-
115-
pre {
116-
background-color: ${({ theme }) => theme.lightGrey} !important;
117-
color: ${({ theme }) => theme.primaryText} !important;
118-
}
119-
120-
a {
121-
color: ${({ theme }) => theme.primaryBlue} !important;
122-
}
123-
124-
th {
125-
background-color: ${({ theme }) => theme.lightGrey} !important;
126-
color: ${({ theme }) => theme.primaryText} !important;
127-
}
33+
import "@mdxeditor/editor/style.css";
12834

129-
td {
130-
color: ${({ theme }) => theme.primaryText} !important;
131-
}
132-
}
133-
`;
35+
const Container = styled(MDXEditorContainer)<{ isEmpty: boolean }>``;
13436

13537
const MessageContainer = styled.div`
13638
display: flex;
@@ -180,7 +82,8 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
18082

18183
const handleChange = (markdown: string) => {
18284
const cleanedMarkdown = markdown === "\u200B" ? "" : markdown.replace(/^\u200B/, "");
183-
onChange(cleanedMarkdown);
85+
const sanitizedMarkdown = sanitizeMarkdown(cleanedMarkdown);
86+
onChange(sanitizedMarkdown);
18487
};
18588

18689
const handleContainerClick = () => {
@@ -230,19 +133,22 @@ const MarkdownEditor: React.FC<IMarkdownEditor> = ({
230133
};
231134

232135
return (
233-
<Container isEmpty={isEmpty} onClick={handleContainerClick}>
234-
<MDXEditor ref={editorRef} {...editorProps} />
235-
{showMessage && (
236-
<MessageContainer>
237-
<StyledInfoIcon />
238-
<MessageText>
239-
Please provide a comprehensive justification for your decision. Quality explanations are essential for the
240-
parties involved and may be eligible for additional compensation in accordance with our justification
241-
policy.
242-
</MessageText>
243-
</MessageContainer>
244-
)}
245-
</Container>
136+
<>
137+
<MDXEditorGlobalStyles />
138+
<Container isEmpty={isEmpty} onClick={handleContainerClick} role="region" aria-label="Markdown editor">
139+
<MDXEditor ref={editorRef} {...editorProps} aria-label="Rich text editor for markdown content" />
140+
{showMessage && (
141+
<MessageContainer>
142+
<StyledInfoIcon />
143+
<MessageText>
144+
Please provide a comprehensive justification for your decision. Quality explanations are essential for the
145+
parties involved and may be eligible for additional compensation in accordance with our justification
146+
policy.
147+
</MessageText>
148+
</MessageContainer>
149+
)}
150+
</Container>
151+
</>
246152
);
247153
};
248154

‎web/src/components/MarkdownRenderer.tsx‎

Lines changed: 9 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import styled from "styled-components";
32

43
import {
54
MDXEditor,
@@ -13,154 +12,11 @@ import {
1312
tablePlugin,
1413
} from "@mdxeditor/editor";
1514

16-
import "@mdxeditor/editor/style.css";
17-
18-
const Container = styled.div`
19-
width: 100%;
20-
21-
[class*="mdxeditor"] {
22-
background: transparent !important;
23-
border: none !important;
24-
}
25-
26-
[class*="toolbar"] {
27-
display: none !important;
28-
}
29-
30-
[class*="contentEditable"] {
31-
background: transparent !important;
32-
border: none !important;
33-
padding: 0 !important;
34-
font-size: 16px;
35-
line-height: 1.5;
36-
37-
p {
38-
margin: 0 0 12px 0;
39-
color: ${({ theme }) => theme.primaryText} !important;
40-
}
41-
42-
p:last-child {
43-
margin-bottom: 0;
44-
}
45-
46-
h1,
47-
h2,
48-
h3,
49-
h4,
50-
h5,
51-
h6 {
52-
margin: 16px 0 8px 0;
53-
font-weight: 600;
54-
color: ${({ theme }) => theme.primaryText} !important;
55-
}
56-
57-
h1 {
58-
font-size: 24px;
59-
}
60-
h2 {
61-
font-size: 20px;
62-
}
63-
h3 {
64-
font-size: 18px;
65-
}
66-
h4 {
67-
font-size: 16px;
68-
}
69-
h5 {
70-
font-size: 14px;
71-
}
72-
h6 {
73-
font-size: 12px;
74-
}
75-
76-
ul,
77-
ol {
78-
margin: 8px 0;
79-
padding-left: 24px;
80-
}
81-
82-
li {
83-
margin: 4px 0;
84-
color: ${({ theme }) => theme.primaryText} !important;
85-
}
15+
import { sanitizeMarkdown } from "utils/markdownSanitization";
8616

87-
blockquote {
88-
border-left: 3px solid ${({ theme }) => theme.mediumBlue} !important;
89-
padding-left: 12px;
90-
margin: 16px 0;
91-
color: ${({ theme }) => theme.secondaryText} !important;
92-
font-style: italic;
93-
}
17+
import { MDXRendererContainer } from "styles/mdxEditorTheme";
9418

95-
code {
96-
background-color: ${({ theme }) => theme.lightGrey} !important;
97-
color: ${({ theme }) => theme.primaryText} !important;
98-
padding: 2px 4px;
99-
border-radius: 3px;
100-
font-family: "Monaco", "Consolas", monospace;
101-
font-size: 14px;
102-
}
103-
104-
pre {
105-
background-color: ${({ theme }) => theme.lightGrey} !important;
106-
color: ${({ theme }) => theme.primaryText} !important;
107-
padding: 12px;
108-
border-radius: 3px;
109-
overflow-x: auto;
110-
margin: 16px 0;
111-
}
112-
113-
pre code {
114-
background: transparent !important;
115-
padding: 0;
116-
}
117-
118-
table {
119-
border-collapse: collapse;
120-
width: 100%;
121-
margin: 16px 0;
122-
}
123-
124-
th,
125-
td {
126-
border: 1px solid ${({ theme }) => theme.stroke} !important;
127-
padding: 8px 12px;
128-
text-align: left;
129-
color: ${({ theme }) => theme.primaryText} !important;
130-
}
131-
132-
th {
133-
background-color: ${({ theme }) => theme.lightGrey} !important;
134-
font-weight: 600;
135-
}
136-
137-
a {
138-
color: ${({ theme }) => theme.primaryBlue} !important;
139-
text-decoration: none;
140-
}
141-
142-
a:hover {
143-
text-decoration: underline;
144-
color: ${({ theme }) => theme.secondaryBlue} !important;
145-
}
146-
147-
hr {
148-
border: none;
149-
border-top: 1px solid ${({ theme }) => theme.stroke} !important;
150-
margin: 24px 0;
151-
}
152-
153-
img {
154-
max-width: 100%;
155-
height: auto;
156-
}
157-
158-
* {
159-
cursor: default !important;
160-
user-select: text !important;
161-
}
162-
}
163-
`;
19+
import "@mdxeditor/editor/style.css";
16420

16521
interface IMarkdownRenderer {
16622
content: string;
@@ -172,8 +28,10 @@ const MarkdownRenderer: React.FC<IMarkdownRenderer> = ({ content, className }) =
17228
return null;
17329
}
17430

31+
const sanitizedContent = sanitizeMarkdown(content);
32+
17533
const editorProps: MDXEditorProps = {
176-
markdown: content,
34+
markdown: sanitizedContent,
17735
readOnly: true,
17836
plugins: [
17937
headingsPlugin(),
@@ -187,9 +45,9 @@ const MarkdownRenderer: React.FC<IMarkdownRenderer> = ({ content, className }) =
18745
};
18846

18947
return (
190-
<Container className={className}>
191-
<MDXEditor {...editorProps} />
192-
</Container>
48+
<MDXRendererContainer className={className} role="region" aria-label="Markdown content">
49+
<MDXEditor {...editorProps} aria-label="Rendered markdown content" />
50+
</MDXRendererContainer>
19351
);
19452
};
19553

0 commit comments

Comments
 (0)