Skip to content

Commit b15f3c7

Browse files
albertocaparrosalbertocaparros
committed
#3-Ace-Editor-example-review
1 parent d758d7c commit b15f3c7

File tree

7 files changed

+96
-25
lines changed

7 files changed

+96
-25
lines changed

‎front/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@
2727
"@emotion/core": "^10.0.35",
2828
"@material-ui/core": "^4.10.1",
2929
"@material-ui/icons": "^4.9.1",
30+
"ace-builds": "^1.4.12",
3031
"axios": "^0.19.2",
3132
"emotion": "^10.0.27",
3233
"lodash.merge": "^4.6.2",
3334
"react": "^16.12.0",
35+
"react-ace": "^9.2.0",
3436
"react-dom": "^16.12.0",
3537
"react-hot-loader": "^4.12.18",
3638
"react-router-dom": "^5.2.0",

‎front/src/pods/student/student.component.tsx

+26-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import * as classes from './student.styles';
33
// Material UI ~ components
44
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
55
import Typography from '@material-ui/core/Typography';
6+
// Code Editor
7+
import AceEditor from 'react-ace';
8+
import 'ace-builds/src-noconflict/mode-typescript';
9+
import 'ace-builds/src-noconflict/theme-monokai';
610

711
interface Props {
812
room: string;
@@ -22,12 +26,30 @@ export const StudentComponent: React.FC<Props> = props => {
2226
<label className={labelTextarea} htmlFor="session">
2327
Content
2428
</label>
25-
<TextareaAutosize
26-
id="session"
27-
rowsMax={40}
28-
rowsMin={40}
29+
<AceEditor
30+
//id="session"
31+
placeholder=""
32+
mode="typescript"
33+
theme="monokai"
34+
name="blah2"
35+
//onChange={(value, e) => handleOnChange(value, e)}
36+
fontSize={14}
37+
showPrintMargin={true}
38+
showGutter={true}
39+
highlightActiveLine={true}
40+
setOptions={{
41+
enableBasicAutocompletion: false,
42+
enableLiveAutocompletion: true,
43+
enableSnippets: false,
44+
showLineNumbers: true,
45+
tabSize: 2,
46+
showPrintMargin: false,
47+
wrap: true,
48+
}}
2949
className={studentBoard}
50+
width="auto"
3051
value={log}
52+
readOnly={true}
3153
/>
3254
</main>
3355
</>

‎front/src/pods/student/student.styles.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ export const studentBoard = css`
1111
box-sizing: border-box;
1212
width: 100%;
1313
margin-top: ${spacing(10)};
14+
margin-bottom: ${spacing(10)};
1415
padding: ${spacing(10)};
15-
font-family: ${typography.fontFamily};
16-
background-color: ${palette.background.paper};
16+
//font-family: ${typography.fontFamily};
17+
//background-color: ${palette.background.paper};
1718
resize: none;
1819
border-radius: ${spacing(4)};
1920
border: 1px solid ${palette.primary.main};

‎front/src/pods/trainer/components/new-text.component.tsx

+32-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ import * as classes from './new-text.styles';
33
// Material UI ~ components
44
import Button from '@material-ui/core/Button';
55
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
6+
// Code Editor
7+
import AceEditor from 'react-ace';
8+
import 'ace-builds/src-noconflict/mode-typescript';
9+
import 'ace-builds/src-noconflict/theme-monokai';
610

711
interface Props {
8-
handleAppendTrainerText: (trainerText: string,) => void;
12+
handleAppendTrainerText: (trainerText: string) => void;
913
}
1014

1115
export const NewTextComponent: React.FC<Props> = props => {
@@ -27,9 +31,12 @@ export const NewTextComponent: React.FC<Props> = props => {
2731
trainerTextRef.current = '';
2832
};
2933

30-
const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
31-
trainerTextRef.current = e.target.value;
32-
setTrainerText(e.target.value);
34+
const handleOnChange = (
35+
value: string,
36+
e: React.ChangeEvent<HTMLTextAreaElement>
37+
): void => {
38+
trainerTextRef.current = value;
39+
setTrainerText(value);
3340
};
3441

3542
React.useEffect(() => {
@@ -48,13 +55,29 @@ export const NewTextComponent: React.FC<Props> = props => {
4855
<label className={labelTextarea} htmlFor="new-text">
4956
New text
5057
</label>
51-
<TextareaAutosize
52-
rowsMax={10}
53-
rowsMin={10}
54-
className={editTextArea}
55-
onChange={e => handleOnChange(e)}
58+
<AceEditor
59+
placeholder=""
60+
mode="typescript"
61+
theme="monokai"
62+
name="blah2"
63+
onChange={(value, e) => handleOnChange(value, e)}
64+
fontSize={14}
65+
showPrintMargin={true}
66+
showGutter={true}
67+
highlightActiveLine={true}
5668
value={trainerText}
69+
setOptions={{
70+
enableBasicAutocompletion: false,
71+
enableLiveAutocompletion: true,
72+
enableSnippets: false,
73+
showLineNumbers: true,
74+
tabSize: 2,
75+
showPrintMargin: false,
76+
}}
77+
className={editTextArea}
78+
width="auto"
5779
/>
80+
5881
<Button
5982
variant="contained"
6083
color="primary"

‎front/src/pods/trainer/components/new-text.styles.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export const labelTextarea = css`
1313

1414
export const editTextArea = css`
1515
box-sizing: border-box;
16-
width: 100%;
16+
//width: 100%;
1717
margin-bottom: ${spacing(10)};
1818
margin-top: ${spacing(10)};
1919
padding: ${spacing(10)};
20-
font-family: ${typography.fontFamily};
21-
background-color: ${palette.background.paper};
20+
//font-family: ${typography.fontFamily};
21+
//background-color: ${palette.background.paper};
2222
resize: none;
2323
border-radius: ${spacing(4)};
2424
border: 1px solid ${palette.primary.main};

‎front/src/pods/trainer/components/session.component.tsx

+27-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import * as classes from './session.styles';
33
// Material UI ~ components
44
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
55
import Button from '@material-ui/core/Button';
6+
// Code Editor
7+
import AceEditor from 'react-ace';
8+
import 'ace-builds/src-noconflict/mode-typescript';
9+
import 'ace-builds/src-noconflict/theme-monokai';
610

711
interface Props {
812
log: string;
@@ -37,11 +41,30 @@ export const SessionComponent: React.FC<Props> = props => {
3741
<label className={labelTextarea} htmlFor="session">
3842
Session
3943
</label>
40-
<TextareaAutosize
41-
id="session"
42-
rowsMax={20}
43-
rowsMin={20}
44+
<AceEditor
45+
//id="session"
46+
placeholder=""
47+
mode="typescript"
48+
theme="monokai"
49+
name="blah2"
50+
//onChange={(value, e) => handleOnChange(value, e)}
51+
fontSize={14}
52+
showPrintMargin={true}
53+
showGutter={true}
54+
highlightActiveLine={true}
55+
setOptions={{
56+
enableBasicAutocompletion: false,
57+
enableLiveAutocompletion: true,
58+
enableSnippets: false,
59+
showLineNumbers: true,
60+
tabSize: 2,
61+
showPrintMargin: false,
62+
wrap: true,
63+
}}
4464
className={studentBoard}
65+
width="auto"
66+
value={log}
67+
readOnly={true}
4568
/>
4669
<Button
4770
variant="contained"

‎front/src/pods/trainer/components/session.styles.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ const { palette, spacing, typography } = theme;
44

55
export const studentBoard = css`
66
box-sizing: border-box;
7-
width: 100%;
7+
//width: 100%;
88
margin-bottom: ${spacing(10)};
99
margin-top: ${spacing(10)};
1010
padding: ${spacing(10)};
11-
font-family: ${typography.fontFamily};
12-
background-color: ${palette.background.paper};
11+
//font-family: ${typography.fontFamily};
12+
//background-color: ${palette.background.paper};
1313
resize: none;
1414
border-radius: ${spacing(4)};
1515
border: 1px solid ${palette.primary.main};

0 commit comments

Comments
 (0)