fix: add markdown editor

Author: yoution

package.json

@@ -56,7 +56,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "@reach/router": "^1.3.4",
-    "@toast-ui/react-editor": "^2.5.1",
+    "@toast-ui/editor": "^2.5.1",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "express": "^4.17.1",

src/components/FormField/index.jsx

@@ -9,7 +9,7 @@ import { Field } from "react-final-form";
 import { FORM_FIELD_TYPE } from "../../constants";
 import TextInput from "../../components/TextInput";
 import TextArea from "../../components/TextArea";
-import TuiEditor from "../../components/TuiEditor";
+import MarkdownEditor from "../../components/MarkdownEditor";
 import ReactSelect from "../../components/ReactSelect";
 import DateInput from "../../components/DateInput";
 import "./styles.module.scss";
@@ -60,13 +60,13 @@ const FormField = ({ field }) => {
               step={field.step}
             />
           )}
-          {field.type === FORM_FIELD_TYPE.TUIEDITOR && (
-            <TuiEditor
+          {field.type === FORM_FIELD_TYPE.MARKDOWNEDITOR && (
+            <MarkdownEditor
               placeholder={field.placeholder}
               value={input?.value ?? ""}
               onChange={input.onChange}
-              // onBlur={input.onBlur}
-              // onFocus={input.onFocus}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
               className={meta.error && meta.touched ? "error" : ""}
             />
           )}

src/components/MarkdownEditor/index.jsx

@@ -0,0 +1,39 @@
+/*
+ * MarkdownEditor
+ */
+
+import React, { useState, useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import cn from "classnames";
+import TuiEditor from "../TuiEditor";
+import styles from "./styles.module.scss";
+
+const MarkdownEditor = (props) => {
+  const editorElement = useRef(null);
+
+  const onChange = useCallback(() => {
+    const mk = editorElement.current.editorInst.getMarkdown();
+    props.onChange(mk);
+  }, []);
+
+  return (
+    <div className={cn(styles["editor-container"], props.className)}>
+      <TuiEditor
+        {...props}
+        ref={editorElement}
+        onChange={onChange}
+        initialValue={props.value}
+      />
+    </div>
+  );
+};
+
+MarkdownEditor.propTypes = {
+  value: PropTypes.string,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+export default MarkdownEditor;

src/components/TuiEditor/styles.module.scss renamed to src/components/MarkdownEditor/styles.module.scss

@@ -0,0 +1,17 @@
+/*
+ * MarkdownViewer
+ */
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import TuiEditorViewer from "../TuiEditorViewer";
+
+const MarkdownViewer = (props) => (
+  <TuiEditorViewer initialValue={props.value} />
+);
+
+MarkdownViewer.propTypes = {
+  value: PropTypes.string,
+};
+
+export default MarkdownViewer;

src/components/MarkdownEditorViewer/index.jsx

@@ -1,30 +1,68 @@
 /*
  * TuiEditor
+ * wrap toast-ui editor with react
  */
-
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import cn from "classnames";
-import { Editor } from "@toast-ui/react-editor";
-import styles from "./styles.module.scss";
+import Editor from "@toast-ui/editor";
 
-const TuiEditor = (props) => {
-  const [editorElement, setEditorElement] = useState(null);
-  const onChange = () => {
-    const mk = editorElement.editorInst.getMarkdown();
-    props.onChange(mk);
-  };
-  return (
-    <div className={cn(styles["editor-container"], props.className)}>
-      <Editor
-        {...props}
-        ref={setEditorElement}
-        onChange={onChange}
-        initialValue={props.value}
-      />
-    </div>
-  );
-};
+class TuiEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.rootEl = React.createRef();
+    this.editorInst = null;
+  }
+
+  getRootElement() {
+    return this.rootEl.current;
+  }
+
+  getInstance() {
+    return this.editorInst;
+  }
+
+  bindEventHandlers(props) {
+    Object.keys(this.props)
+      .filter((key) => /^on[A-Z][a-zA-Z]+/.test(key))
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        // off function has issue
+        // when add `onFocus` function, the headings popup will not hide automatically
+        // this.editorInst.off(eventName, props[key]);
+        this.editorInst.on(eventName, props[key]);
+      });
+  }
+
+  componentDidMount() {
+    this.editorInst = new Editor({
+      el: this.rootEl.current,
+      ...this.props,
+    });
+
+    this.bindEventHandlers(this.props);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const instance = this.getInstance();
+    const { height, previewStyle } = nextProps;
+
+    if (this.props.height !== height) {
+      instance.height(height);
+    }
+
+    if (this.props.previewStyle !== previewStyle) {
+      instance.changePreviewStyle(previewStyle);
+    }
+
+    this.bindEventHandlers(nextProps, this.props);
+
+    return false;
+  }
+
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}
 
 TuiEditor.defaultProps = {
   height: "320px",
@@ -44,8 +82,7 @@ TuiEditor.defaultProps = {
 
 TuiEditor.propTypes = {
   // Editor's initial value
-  value: PropTypes.string,
-  className: PropTypes.string,
+  initialValue: PropTypes.string,
   // Markdown editor's preview style (tab, vertical)
   previewStyle: PropTypes.string.isRequired,
   // Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'

src/components/TuiEditor/index.jsx

@@ -1,15 +1,59 @@
 /*
  * TuiEditorViewer
  */
-
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { Viewer } from "@toast-ui/react-editor";
+import Viewer from "@toast-ui/editor/dist/toastui-editor-viewer";
+
+class TuiViewer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.rootEl = React.createRef();
+    this.viewerInst = null;
+  }
+
+  getRootElement() {
+    return this.rootEl.current;
+  }
+
+  getInstance() {
+    return this.viewerInst;
+  }
+
+  bindEventHandlers(props) {
+    Object.keys(this.props)
+      .filter((key) => /^on[A-Z][a-zA-Z]+/.test(key))
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        // off function has issue
+        // when add `onFocus` function, the headings popup will not hide automatically
+        // this.editorInst.off(eventName, props[key]);
+        this.viewerInst.on(eventName, props[key]);
+      });
+  }
+
+  componentDidMount() {
+    this.viewerInst = new Viewer({
+      el: this.rootEl.current,
+      ...this.props,
+    });
+
+    this.bindEventHandlers(this.props);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this.bindEventHandlers(nextProps, this.props);
+
+    return false;
+  }
 
-const TuiEditorViewer = (props) => <Viewer initialValue={props.value} />;
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}
 
-TuiEditorViewer.propTypes = {
-  value: PropTypes.string,
+TuiViewer.propTypes = {
+  initialValue: PropTypes.string,
 };
 
-export default TuiEditorViewer;
+export default TuiViewer;

src/components/TuiEditorViewer/index.jsx

@@ -168,7 +168,7 @@ export const ACTION_TYPE = {
 export const FORM_FIELD_TYPE = {
   TEXT: "text",
   TEXTAREA: "textarea",
-  TUIEDITOR: "tuieditor",
+  MARKDOWNEDITOR: "markdowneditor",
   NUMBER: "number",
   SELECT: "select",
   MULTISELECT: "multiselect",

src/constants/index.js

@@ -12,7 +12,7 @@ import { useData } from "hooks/useData";
 import { getJobById } from "services/jobs";
 import { getSkills } from "services/skills";
 import LoadingIndicator from "../../components/LoadingIndicator";
-import TuiEditorViewer from "../../components/TuiEditorViewer";
+import MarkdownEditorViewer from "../../components/MarkdownEditorViewer";
 import withAuthentication from "../../hoc/withAuthentication";
 import DataItem from "../../components/DataItem";
 import IconSkill from "../../assets/images/icon-skill.svg";
@@ -65,7 +65,7 @@ const JobDetails = ({ teamId, jobId }) => {
                 {job.title}
               </DataItem>
               <DataItem title="Job Description" icon={<IconDescription />}>
-                <TuiEditorViewer value={job.description} />
+                <MarkdownEditorViewer value={job.description} />
               </DataItem>
               <DataItem title="Number of Openings" icon={<IconOpenings />}>
                 {job.numPositions}

src/routes/JobDetails/index.jsx

@@ -42,7 +42,7 @@ export const getEditJobConfig = (skillOptions, onSubmit) => {
       },
       {
         label: "Job Description",
-        type: FORM_FIELD_TYPE.TUIEDITOR,
+        type: FORM_FIELD_TYPE.MARKDOWNEDITOR,
         name: "description",
         placeholder: "Job Description",
       },

src/routes/JobForm/utils.js

@@ -5,6 +5,6 @@
 @import "~react-responsive-modal/styles";
 @import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 
-// toast-ui.react-editor styles
+// toast-ui.editor styles
 @import "~codemirror/lib/codemirror.css";
 @import "~@toast-ui/editor/dist/toastui-editor.css"