fix: add easymde #4298

Author: yoution

package.json

@@ -55,6 +55,7 @@
     "html-webpack-plugin": "^2.30.1",
     "ignore-styles": "^1.2.0",
     "jsdom": "^7.2.2",
+    "marked": "^2.0.0",
     "mocha": "^2.4.5",
     "mocha-jsdom": "~1.1.0",
     "nock": "^8.0.0",
@@ -96,6 +97,7 @@
     "draft-js-mention-plugin": "^2.0.0-rc2",
     "draft-js-plugins-editor": "^2.0.0-rc2",
     "draft-js-utils": "^0.1.7",
+    "easymde": "^2.14.0",
     "expression-evaluator": "git+https://github.com/topcoder-platform/expression-evaluator.git#dev",
     "fbemitter": "^2.1.1",
     "fbjs": "^0.8.12",

src/components/MarkdownText/MarkdownText.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import styles from './MarkdownText.scss'
+import PropTypes from 'prop-types'
+import EasyMDE from 'easymde'
+import marked from 'marked'
+import cn from 'classnames'
+import _ from 'lodash'
+
+class MarkdownText extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isChanged: false
+    }
+    this.blurTheField = this.blurTheField.bind(this)
+    this.updateDescriptionThrottled = _.throttle(this.updateDescription.bind(this), 10000) // 10s
+  }
+
+  blurTheField () {
+    const { onChange } = this.props
+    onChange(this.easymde.value())
+  }
+
+  updateDescription () {
+    const { onChange } = this.props
+    onChange(this.easymde.value())
+  }
+
+  componentDidMount () {
+    const { value, readOnly } = this.props
+    if (!readOnly) {
+      this.easymde = new EasyMDE({ element: this.refs.textarea, initialValue: value })
+      this.easymde.codemirror.on('change', () => {
+        this.setState({ isChanged: true })
+        this.updateDescriptionThrottled(this.easymde.value())
+      })
+      this.easymde.codemirror.on('blur', () => {
+        if (this.state.isChanged) {
+          this.setState({ isChanged: false })
+          this.blurTheField()
+        }
+      })
+    } else {
+      this.ref.current.innerHTML = value ? marked(value) : ''
+    }
+  }
+
+  render () {
+    const { isPrivate, readOnly, placeholder, className } = this.props
+    return (<div className={cn(className, styles.editor, { [styles.isPrivate]: isPrivate })}>
+      {readOnly ? (
+        <div ref="textarea" />
+      ) : (
+        <textarea
+          ref="textarea" 
+          placeholder={placeholder}
+        />
+      )}
+    </div>)
+  }
+}
+
+MarkdownText.defaultProps = {
+  isPrivate: false,
+  readOnly: false
+}
+
+MarkdownText.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  isPrivate: PropTypes.bool,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool
+}
+export default MarkdownText

src/components/MarkdownText/MarkdownText.scss

@@ -0,0 +1,26 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.editor {
+  @include roboto-light();
+
+  width: 100%;
+  // margin: 0 30px;
+  border-radius: 2px;
+  font-size: 16px;
+  max-height: 410px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  &.isPrivate {
+    max-height: 205px;
+  }
+
+  :global {
+    .CodeMirror.CodeMirror-wrap {
+      min-height: 0;
+      flex: 1;
+    }
+  }
+
+}

src/index.jsx

@@ -6,6 +6,7 @@ import _ from 'lodash'
 import { render } from 'react-dom'
 import { SEGMENT_KEY } from './config/constants'
 import App from './App'
+import 'easymde/dist/easymde.min.css'
 
 import 'styles/main.scss'
 

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

@@ -6,6 +6,7 @@ import IconX from '../../../../assets/icons/ui-16px-1_bold-remove.svg'
 import IconAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
 import SkillsQuestion from '../SkillsQuestion/SkillsQuestionBase'
 import PositiveNumberInput from '../../../../components/PositiveNumberInput/PositiveNumberInput'
+import MarkdownText from  '../../../../components/MarkdownText/MarkdownText'
 import SelectDropdown from 'appirio-tech-react-components/components/SelectDropdown/SelectDropdown'
 
 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() {
@@ -234,13 +235,11 @@ class JobPickerRow extends React.PureComponent {
         <label className="tc-label" styleName="label">
           Job Description
         </label>
-        <div styleName="job-description">
-          <textarea
-            className={`job-textarea ${isRowIncomplete && !value.description.trim() ? 'error' : 'empty'}`}
+        <div styleName={`job-description ${isRowIncomplete && !value.description.trim() ? 'error' : ''}`} >
+          <MarkdownText 
+            value={value.description || ''}
             onChange={this.handleDescriptionChange}
             placeholder="Job Description"
-            type="text"
-            value={value.description || ''}
           />
         </div>
       </div>

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

@@ -86,22 +86,15 @@
     display: block;
   }
 
-  .job-description textarea,
-  .job-textarea[type="text"] {
-    &.empty {
-      color: $tc-gray-30;
+  .job-description {
+    &.error {
+      :global {
+        .CodeMirror {
+          border:1px solid $tc-red-70;
+        }
+      }
     }
-    min-height : 90px;
-  
-    @include placeholder {
-      @include roboto;
-      color: $tc-gray-30;
-      text-transform: none;
-      font-style: italic;
-      font-size: $base-unit*3;
-      line-height: $base-unit*4;
-    }
-  }  
+  }
 }
 
 .col-role-container {