#158 add codemirror in new text section

front/package.json

@@ -24,17 +24,21 @@
  "license": "MIT",
  "homepage": "",
  "dependencies": {
+ "@codemirror/language-data": "^6.1.0",
  "@emotion/css": "^11.10.5",
  "@emotion/react": "^11.10.5",
  "@emotion/styled": "^11.10.5",
  "@mui/icons-material": "^5.11.0",
  "@mui/material": "^5.11.8",
  "axios": "^1.3.2",
+ "codemirror": "^6.0.1",
  "lodash.merge": "^4.6.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-markdown": "^8.0.6",
  "react-router-dom": "^6.8.1",
  "regenerator-runtime": "^0.13.11",
+ "remark-gfm": "^3.0.1",
  "socket.io": "^2.5.0"
  },
  "devDependencies": {
@@ -71,7 +75,7 @@
  "lint-staged": "^13.1.1",
  "mini-css-extract-plugin": "^2.7.2",
  "npm-run-all": "^4.1.5",
- "prettier": "^2.8.4",
+ "prettier": "^2.8.7",
  "pretty-quick": "^3.1.3",
  "react-test-renderer": "^18.2.0",
  "rimraf": "^4.1.2",

front/src/common/index.ts

@@ -1,2 +1,4 @@
 export * from './hooks';
 export * from './global-window';
+export * from './markdown-editor';
+export * from './markdown-view';

front/src/common/markdown-editor/index.ts

@@ -0,0 +1 @@
+export * from './markdown-editor.component';

front/src/common/markdown-editor/markdown-editor.component.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { basicSetup, EditorView } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { markdown } from '@codemirror/lang-markdown';
+import { languages } from '@codemirror/language-data';
+import { tags } from '@lezer/highlight';
+import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
+import * as classes from './markdown-editor.styles';
+
+const editorStyles = HighlightStyle.define([
+ { tag: tags.heading1, class: classes.headerH1 },
+ { tag: tags.heading2, class: classes.headerH2 },
+ { tag: tags.heading3, class: classes.headerH3 },
+]);
+
+interface Props {
+ value: string;
+ onChange?: (value: string) => void;
+ className?: string;
+ onAppendTrainerTextInternal?: () => void;
+}
+
+export const MarkdownEditor: React.FC<Props> = (props) => {
+ const { value, onChange, className, onAppendTrainerTextInternal } = props;
+
+ const refContainer = React.useRef(null);
+ const editorView = React.useRef<EditorView>();
+
+ React.useEffect(() => {
+ if (!refContainer.current) return;
+
+ editorView.current = new EditorView({
+ state: EditorState.create({
+ doc: value,
+ extensions: [
+ basicSetup,
+ markdown({
+ codeLanguages: languages,
+ }),
+ syntaxHighlighting(editorStyles),
+ EditorView.lineWrapping,
+ EditorView.updateListener.of((update) => {
+ onChange(update.state.doc.toString());
+ }),
+ EditorView.theme({
+ '&': {
+ border: '2px solid #070707',
+ height: '300px',
+ },
+ }),
+ ],
+ }),
+ parent: refContainer.current,
+ });
+
+ return () => editorView.current?.destroy();
+ }, []);
+
+ const scrollToEnd = () => {
+ if (!refContainer.current) return;
+
+ const scrollHeight = refContainer.current.scrollHeight;
+ const clientHeight = refContainer.current.clientHeight;
+ editorView.current.scrollDOM.scrollTop = scrollHeight - clientHeight;
+ };
+
+ React.useEffect(() => {
+ const state = editorView.current?.state;
+ const currentValue = state?.doc.toString();
+ if (state && currentValue !== value) {
+ const update = state.update({
+ changes: { from: 0, to: state.doc.length, insert: value },
+ });
+ editorView.current?.update([update]);
+ scrollToEnd();
+ }
+ }, [value]);
+ // TODO HAY QUE ARREGLARLO PARA EL SESION
+ // ?. si existe llama a la función, de lo contrario, se ignora
+ return (
+ <div
+ role="log"
+ id="session"
+ ref={refContainer}
+ className={className}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' && event.ctrlKey) {
+ onAppendTrainerTextInternal?.();
+ }
+ }}
+ />
+ );
+};

front/src/common/markdown-editor/markdown-editor.styles.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/css';
+
+export const headerH1 = css`
+ font-size: 2.3rem;
+`;
+
+export const headerH2 = css`
+ font-size: 1.8rem;
+`;
+
+export const headerH3 = css`
+ font-size: 1.3rem;
+`;

front/src/common/markdown-view/index.ts

@@ -0,0 +1 @@
+export * from './markdown-view';

front/src/common/markdown-view/markdown-view.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface Props {
+ value: string;
+ className?: string;
+}
+
+export const MarkdownViewer: React.FC<Props> = (props) => {
+ return (
+ <div role="log" className={props.className}>
+ <ReactMarkdown children={props.value} remarkPlugins={[remarkGfm]} />
+ </div>
+ );
+};

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

@@ -1,27 +1,22 @@
 import React from 'react';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Typography from '@mui/material/Typography';
-
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-
-import * as innerClasses from './student.styles';
 import { useAutoScroll } from 'common/hooks/auto-scroll.hook';
+import { MarkdownViewer } from 'common/markdown-view/markdown-view';
+import * as innerClasses from './student.styles';
 
 interface Props {
  room: string;
  log: string;
+ className?: string;
 }
 
-export const StudentComponent: React.FC<Props> = props => {
+export const StudentComponent: React.FC<Props> = (props) => {
  const { room, log } = props;
 
- const {
- isAutoScrollEnabled,
- setIsAutoScrollEnabled,
- textAreaRef,
- doAutoScroll,
- } = useAutoScroll();
+ const { isAutoScrollEnabled, setIsAutoScrollEnabled, doAutoScroll } =
+ useAutoScroll();
 
  React.useEffect(() => {
  doAutoScroll();
@@ -40,24 +35,13 @@ export const StudentComponent: React.FC<Props> = props => {
  <label className={innerClasses.label} htmlFor="session">
  Content
  </label>
- <div role="log">
- <TextareaAutosize
- ref={textAreaRef}
- data-testid="session"
- id="session"
- maxRows={30}
- minRows={30}
- className={innerClasses.textarea}
- value={log ?? ''}
- readOnly={true}
- />
- </div>
+ <MarkdownViewer value={log ?? ''} className={innerClasses.textView} />
  <FormControlLabel
- label="Disable AutoScroll"
+ label="Enable AutoScroll"
  control={
  <Checkbox
  checked={isAutoScrollEnabled}
- onChange={e => setIsAutoScrollEnabled(e.target.checked)}
+ onChange={(e) => setIsAutoScrollEnabled(e.target.checked)}
  color="primary"
  />
  }

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

@@ -40,8 +40,10 @@ export const label = css`
  font-size: 1.125rem;
 `;
 
-export const textarea = css`
+export const textView = css`
  width: 100%;
+ height: 600px;
+ overflow: auto;
  box-sizing: border-box;
  padding: ${spacing(2)};
  font-family: ${typography.fontFamily};

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

@@ -2,45 +2,48 @@ import React from 'react';
 import { cx } from '@emotion/css';
 import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
 import Button from '@mui/material/Button';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
 import * as innerClasses from './new-text.styles';
+import { SelectComponent } from './select.component';
+import { MarkdownEditor } from 'common/markdown-editor/markdown-editor.component';
 
 interface Props {
  handleAppendTrainerText: (trainerText: string) => void;
  className?: string;
 }
 
 export const NewTextComponent: React.FC<Props> = (props) => {
- const { handleAppendTrainerText, className } = props;
+ const [language, setLanguage] = React.useState('');
  const [trainerText, setTrainerText] = React.useState<string>('');
 
+ const applyLanguageSelected = (language: string): string =>
+ language === '' ? '' : `\`\`\`${language}\n\n\`\`\``;
+
+ const { handleAppendTrainerText, className } = props;
+
  const handleAppendTrainerTextInternal = (): void => {
  if (trainerText) {
  handleAppendTrainerText(trainerText);
- setTrainerText('');
+ setTrainerText(applyLanguageSelected(language));
+ setLanguage(language);
  }
  };
 
- const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
- setTrainerText(e.target.value);
- };
+ React.useEffect(() => {
+ if (language) {
+ setTrainerText(applyLanguageSelected(language));
+ }
+ }, [language]);
 
  return (
  <form className={cx(innerClasses.root, className)}>
  <label className={innerClasses.label} htmlFor="new-text">
  New text
  </label>
- <TextareaAutosize
- maxRows={10}
- minRows={10}
- className={innerClasses.textarea}
- onChange={(e) => handleOnChange(e)}
- onKeyDown={(event) => {
- if (event.key === 'Enter' && event.ctrlKey) {
- handleAppendTrainerTextInternal();
- }
- }}
+ <SelectComponent value={language} onChange={setLanguage} />
+ <MarkdownEditor
  value={trainerText}
+ onChange={setTrainerText}
+ onAppendTrainerTextInternal={handleAppendTrainerTextInternal}
  />
  <Button
  variant="contained"

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { languageFormat } from '../trainer.constants';
+
+interface Props {
+ onChange: (value: string) => void;
+ value: string;
+}
+
+export const SelectComponent: React.FC<Props> = (props) => {
+ const { onChange, value } = props;
+
+ const handleSelectChange = (event) => {
+ onChange(event.target.value as string);
+ };
+
+ return (
+ <FormControl variant="outlined">
+ <InputLabel htmlFor="select">Language</InputLabel>
+ <Select
+ id="select"
+ label="Language"
+ value={value}
+ onChange={handleSelectChange}
+ >
+ {languageFormat.map((language) => (
+ <MenuItem key={language.id} value={language.id}>
+ {language.label}
+ </MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ );
+};