feat: add tui.editor

Author: yoution

package.json

@@ -84,6 +84,7 @@
   },
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^13.4.0",
+    "@toast-ui/editor": "^2.5.1",
     "appirio-tech-react-components": "git+https://github.com/appirio-tech/react-components.git#feature/connectv2",
     "axios": "^0.19.2",
     "brace": "^0.11.1",

src/components/TuiEditor/TuiEditor.scss

@@ -0,0 +1,55 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.editor {
+  background: red;
+
+  > div {
+    h1 {
+      all: revert;
+      font-size: 24px;
+    }
+  } 
+
+  b, 
+  i,
+  s, 
+  hr,
+  blockquote,
+  ul,
+  li,
+  ol,
+  table,
+  thead,
+  tr,
+  th,
+  img,
+  a,
+  code,
+  pre {
+    all: revert;
+  }
+
+  :global {
+    .te-heading-add ul {
+      list-style: none;
+    }    
+
+    .tui-editor-defaultUI .te-mode-switch-section {
+      display: none !important
+    }
+
+    // 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/TuiEditor/index.jsx

@@ -0,0 +1,74 @@
+// wrap toast-ui editor with react and support react 15
+import React from 'react'
+import Editor from '@toast-ui/editor'
+import styles from './TuiEditor.scss'
+import cn from 'classnames'
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.onValueChange = this.onValueChange.bind(this)
+  }
+
+  getRootElement() {
+    return this.refs.rootEl
+  }
+
+  getInstance() {
+    return this.editorInst
+  }
+
+  bindEventHandlers(props) {
+    Object.keys(props)
+      .filter(key => /^on[A-Z][a-zA-Z]+/.test(key))
+      .forEach(key => {
+        const eventName = key[2].toLowerCase() + key.slice(3)
+        this.editorInst.off(eventName)
+        this.editorInst.on(eventName, props[key])
+      })
+  }
+
+  componentDidMount() {
+    const props = {
+      ...this.props,
+      onChange: this.onValueChange
+    }
+    this.editorInst = new Editor({
+      el: this.refs.rootEl,
+      ...props
+    })
+    this.bindEventHandlers(props)
+  }
+
+  onValueChange(){
+    if (this.props.valueChange) {
+      this.props.valueChange(this.getInstance().getMarkdown())
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const instance = this.getInstance()
+    const { height, previewStyle, className } = nextProps
+
+    if (this.props.height !== height) {
+      instance.height(height)
+    }
+
+    if (this.props.previewStyle !== previewStyle) {
+      instance.changePreviewStyle(previewStyle)
+    }
+
+    if (this.props.className !== className) {
+      return true
+    }
+    this.bindEventHandlers(nextProps, this.props)
+
+    return false
+  }
+
+  render() {
+    return <div ref="rootEl" className={cn(styles.editor, this.props.className)} />
+  }
+}

src/projects/detail/components/DescriptionField/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Editor from '../../../../components/TuiEditor'
+
+const DescriptionField = (props) => (
+  <Editor
+    {...props}
+    previewStyle="vertical"
+    height="400px"
+    initialEditType="wysiwyg"
+    initialValue={props.value}
+  />
+)
+
+export default DescriptionField

src/projects/detail/components/JobPickerRow/JobPickerRow.jsx

@@ -7,6 +7,7 @@ import IconAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
 import SkillsQuestion from '../SkillsQuestion/SkillsQuestionBase'
 import PositiveNumberInput from '../../../../components/PositiveNumberInput/PositiveNumberInput'
 import SelectDropdown from 'appirio-tech-react-components/components/SelectDropdown/SelectDropdown'
+import DescriptionField from '../DescriptionField'
 
 import styles from './JobPickerRow.scss'
 
@@ -73,8 +74,8 @@ class JobPickerRow extends React.PureComponent {
     this.props.onChange(this.props.rowIndex, 'role', evt)
   }
 
-  handleDescriptionChange(evt) {
-    this.props.onChange(this.props.rowIndex, 'description', evt.target.value)
+  handleDescriptionChange(value) {
+    this.props.onChange(this.props.rowIndex, 'description', value)
   }
 
   resetDuration() {
@@ -229,20 +230,18 @@ class JobPickerRow extends React.PureComponent {
         />
       </div>
     )
+
     const descriptionColumn = (
       <div styleName="col col-skill-selection">
         <label className="tc-label" styleName="label">
           Job Description
         </label>
-        <div styleName="job-description">
-          <textarea
-            className={`job-textarea ${isRowIncomplete && !value.description.trim() ? 'error' : 'empty'}`}
-            onChange={this.handleDescriptionChange}
-            placeholder="Job Description"
-            type="text"
-            value={value.description || ''}
-          />
-        </div>
+        <DescriptionField
+          className={`${isRowIncomplete && !value.description.trim() ? 'error' : ''}`}
+          valueChange={this.handleDescriptionChange}
+          placeholder="Job Description"
+          value={value.description || ''}
+        />
       </div>
     )
 

src/projects/detail/components/JobPickerRow/JobPickerRow.scss

@@ -45,6 +45,11 @@
 }
 
 .col {
+  :global {
+    .error > .tui-editor-defaultUI {
+      border: 1px solid #ff5b52
+    }
+  }
   padding: 4px 7.5px;
   flex-grow: 0;
   flex-shrink: 0;