#3-Ace-Editor-example-review

front/package.json

@@ -27,10 +27,12 @@
     "@emotion/core": "^10.0.35",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
+    "ace-builds": "^1.4.12",
     "axios": "^0.19.2",
     "emotion": "^10.0.27",
     "lodash.merge": "^4.6.2",
     "react": "^16.12.0",
+    "react-ace": "^9.2.0",
     "react-dom": "^16.12.0",
     "react-hot-loader": "^4.12.18",
     "react-router-dom": "^5.2.0",

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

@@ -3,6 +3,10 @@ import * as classes from './student.styles';
 // Material UI ~ components
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
+// Code Editor
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-typescript';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 interface Props {
   room: string;
@@ -22,12 +26,30 @@ export const StudentComponent: React.FC<Props> = props => {
         <label className={labelTextarea} htmlFor="session">
           Content
         </label>
-        <TextareaAutosize
-          id="session"
-          rowsMax={40}
-          rowsMin={40}
+        <AceEditor
+          //id="session"
+          placeholder=""
+          mode="typescript"
+          theme="monokai"
+          name="blah2"
+          //onChange={(value, e) => handleOnChange(value, e)}
+          fontSize={14}
+          showPrintMargin={true}
+          showGutter={true}
+          highlightActiveLine={true}
+          setOptions={{
+            enableBasicAutocompletion: false,
+            enableLiveAutocompletion: true,
+            enableSnippets: false,
+            showLineNumbers: true,
+            tabSize: 2,
+            showPrintMargin: false,
+            wrap: true,
+          }}
           className={studentBoard}
+          width="auto"
           value={log}
+          readOnly={true}
         />
       </main>
     </>

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

@@ -11,9 +11,10 @@ export const studentBoard = css`
   box-sizing: border-box;
   width: 100%;
   margin-top: ${spacing(10)};
+  margin-bottom: ${spacing(10)};
   padding: ${spacing(10)};
-  font-family: ${typography.fontFamily};
-  background-color: ${palette.background.paper};
+  //font-family: ${typography.fontFamily};
+  //background-color: ${palette.background.paper};
   resize: none;
   border-radius: ${spacing(4)};
   border: 1px solid ${palette.primary.main};

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

@@ -3,9 +3,13 @@ import * as classes from './new-text.styles';
 // Material UI ~ components
 import Button from '@material-ui/core/Button';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+// Code Editor
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-typescript';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 interface Props {
-  handleAppendTrainerText: (trainerText: string,) => void;
+  handleAppendTrainerText: (trainerText: string) => void;
 }
 
 export const NewTextComponent: React.FC<Props> = props => {
@@ -27,9 +31,12 @@ export const NewTextComponent: React.FC<Props> = props => {
     trainerTextRef.current = '';
   };
 
-  const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
-    trainerTextRef.current = e.target.value;
-    setTrainerText(e.target.value);
+  const handleOnChange = (
+    value: string,
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ): void => {
+    trainerTextRef.current = value;
+    setTrainerText(value);
   };
 
   React.useEffect(() => {
@@ -48,13 +55,29 @@ export const NewTextComponent: React.FC<Props> = props => {
         <label className={labelTextarea} htmlFor="new-text">
           New text
         </label>
-        <TextareaAutosize
-          rowsMax={10}
-          rowsMin={10}
-          className={editTextArea}
-          onChange={e => handleOnChange(e)}
+        <AceEditor
+          placeholder=""
+          mode="typescript"
+          theme="monokai"
+          name="blah2"
+          onChange={(value, e) => handleOnChange(value, e)}
+          fontSize={14}
+          showPrintMargin={true}
+          showGutter={true}
+          highlightActiveLine={true}
           value={trainerText}
+          setOptions={{
+            enableBasicAutocompletion: false,
+            enableLiveAutocompletion: true,
+            enableSnippets: false,
+            showLineNumbers: true,
+            tabSize: 2,
+            showPrintMargin: false,
+          }}
+          className={editTextArea}
+          width="auto"
         />
+
         <Button
           variant="contained"
           color="primary"

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

@@ -13,12 +13,12 @@ export const labelTextarea = css`
 
 export const editTextArea = css`
   box-sizing: border-box;
-  width: 100%;
+  //width: 100%;
   margin-bottom: ${spacing(10)};
   margin-top: ${spacing(10)};
   padding: ${spacing(10)};
-  font-family: ${typography.fontFamily};
-  background-color: ${palette.background.paper};
+  //font-family: ${typography.fontFamily};
+  //background-color: ${palette.background.paper};
   resize: none;
   border-radius: ${spacing(4)};
   border: 1px solid ${palette.primary.main};

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

@@ -3,6 +3,10 @@ import * as classes from './session.styles';
 // Material UI ~ components
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import Button from '@material-ui/core/Button';
+// Code Editor
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-typescript';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 interface Props {
   log: string;
@@ -37,11 +41,30 @@ export const SessionComponent: React.FC<Props> = props => {
       <label className={labelTextarea} htmlFor="session">
         Session
       </label>
-      <TextareaAutosize
-        id="session"
-        rowsMax={20}
-        rowsMin={20}
+      <AceEditor
+        //id="session"
+        placeholder=""
+        mode="typescript"
+        theme="monokai"
+        name="blah2"
+        //onChange={(value, e) => handleOnChange(value, e)}
+        fontSize={14}
+        showPrintMargin={true}
+        showGutter={true}
+        highlightActiveLine={true}
+        setOptions={{
+          enableBasicAutocompletion: false,
+          enableLiveAutocompletion: true,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+          showPrintMargin: false,
+          wrap: true,
+        }}
         className={studentBoard}
+        width="auto"
+        value={log}
+        readOnly={true}
       />
       <Button
         variant="contained"

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

@@ -4,12 +4,12 @@ const { palette, spacing, typography } = theme;
 
 export const studentBoard = css`
   box-sizing: border-box;
-  width: 100%;
+  //width: 100%;
   margin-bottom: ${spacing(10)};
   margin-top: ${spacing(10)};
   padding: ${spacing(10)};
-  font-family: ${typography.fontFamily};
-  background-color: ${palette.background.paper};
+  //font-family: ${typography.fontFamily};
+  //background-color: ${palette.background.paper};
   resize: none;
   border-radius: ${spacing(4)};
   border: 1px solid ${palette.primary.main};