feat: add tui editor

package.json

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

src/components/FormField/index.jsx

@@ -9,6 +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 MarkdownEditor from "../../components/MarkdownEditor";
 import ReactSelect from "../../components/ReactSelect";
 import DateInput from "../../components/DateInput";
 import "./styles.module.scss";
@@ -59,6 +60,16 @@ const FormField = ({ field }) => {
               step={field.step}
             />
           )}
+          {field.type === FORM_FIELD_TYPE.MARKDOWNEDITOR && (
+            <MarkdownEditor
+              placeholder={field.placeholder}
+              value={input?.value ?? ""}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
+            />
+          )}
           {field.type === FORM_FIELD_TYPE.TEXTAREA && (
             <TextArea
               placeholder={field.placeholder}

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/MarkdownEditor/styles.module.scss

@@ -0,0 +1,37 @@
+@import "styles/include";
+
+.editor-container {
+  margin-top: 10px;
+
+  :global {
+    // reset style for heading list in  headings selection popup
+    .tui-popup-body {
+      h1,h2,h3,h4,h4,h5,h6 {
+        font-weight: revert;
+        line-height: revert;
+      }
+    }    
+
+    // reset border color
+    .tui-editor-defaultUI {
+      border: 1px solid #aaaaab
+    }
+
+    .te-toolbar-section {
+      border-bottom: 1px solid #aaaaab
+    }
+
+    // hide uplodd file
+    .tui-editor-popup{
+        box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26);
+    }
+
+    .te-popup-add-image .te-tab button, .te-popup-add-image .te-file-type{
+      display: none !important;
+    }
+
+    .te-popup-add-image .te-url-type{
+      display: block !important;
+    }
+  }
+}

src/components/MarkdownEditorViewer/index.jsx

@@ -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/TuiEditor/index.jsx

@@ -0,0 +1,138 @@
+/*
+ * TuiEditor
+ * wrap toast-ui editor with react
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import Editor from "@toast-ui/editor";
+
+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",
+  minHeight: "320px",
+  initialValue: "",
+  previewStyle: "",
+  initialEditType: "wysiwyg",
+  language: "en-US",
+  useCommandShortcut: true,
+  customHTMLSanitizer: null,
+  frontMatter: false,
+  hideModeSwitch: true,
+  referenceDefinition: false,
+  usageStatistics: false,
+  useDefaultHTMLSanitizer: true,
+};
+
+TuiEditor.propTypes = {
+  // Editor's initial value
+  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'
+  height: PropTypes.string,
+  // Initial editor type (markdown, wysiwyg)
+  initialEditType: PropTypes.string,
+  // Editor's min-height style value in pixel ex) '300px'
+  minHeight: PropTypes.string,
+  // The placeholder text of the editable element.
+  placeholder: PropTypes.string,
+  // hide mode switch tab bar
+  hideModeSwitch: PropTypes.bool,
+  // language, 'en-US'
+  language: PropTypes.string,
+  // whether use keyboard shortcuts to perform commands
+  useCommandShortcut: PropTypes.bool,
+  // It would be emitted when editor fully load1
+  onLoad: PropTypes.func,
+  // It would be emitted when content changed
+  onChange: PropTypes.func,
+  // It would be emitted when format change by cursor position
+  onStateChange: PropTypes.func,
+  // It would be emitted when editor get focus
+  onFocus: PropTypes.func,
+  // It would be emitted when editor loose focus
+  onBlur: PropTypes.func,
+  // hooks
+  hooks: PropTypes.arrayOf(PropTypes.object),
+  // send hostname to google analytics
+  usageStatistics: PropTypes.bool,
+  // use default htmlSanitizer
+  useDefaultHTMLSanitizer: PropTypes.bool,
+  // toolbar items.
+  toolbarItems: PropTypes.arrayOf(PropTypes.object),
+  // Array of plugins. A plugin can be either a function or an array in the form of [function, options].
+  plugins: PropTypes.arrayOf(PropTypes.object),
+  // Using extended Autolinks specified in GFM spec
+  extendedAutolinks: PropTypes.object,
+  // convertor extention
+  customConvertor: PropTypes.object,
+  // Attributes of anchor element that should be rel, target, contenteditable, hreflang, type
+  linkAttribute: PropTypes.object,
+  // Object containing custom renderer functions correspond to markdown node
+  customHTMLRenderer: PropTypes.object,
+  // whether use the specification of link reference definition
+  referenceDefinition: PropTypes.bool,
+  // custom HTML sanitizer
+  customHTMLSanitizer: PropTypes.func,
+  // whether use the front matter
+  frontMatter: PropTypes.bool,
+};
+
+export default TuiEditor;

src/components/TuiEditorViewer/index.jsx

@@ -0,0 +1,59 @@
+/*
+ * TuiEditorViewer
+ */
+import React from "react";
+import PropTypes from "prop-types";
+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;
+  }
+
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}
+
+TuiViewer.propTypes = {
+  initialValue: PropTypes.string,
+};
+
+export default TuiViewer;

src/constants/index.js

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

src/routes/JobDetails/index.jsx

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

src/routes/JobForm/utils.js

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

src/styles/main.vendor.scss

@@ -4,3 +4,7 @@
 @import "~react-redux-toastr/src/styles/index";
 @import "~react-responsive-modal/styles";
 @import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+
+// toast-ui.editor styles
+@import "~codemirror/lib/codemirror.css";
+@import "~@toast-ui/editor/dist/toastui-editor.css"