Merge pull request #4302 from yoution/issue-4298

fix: add easymde #4298

Author: maxceem

package.json

@@ -96,6 +96,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,55 @@
+import React, { Component } from 'react'
+import styles from './MarkdownText.scss'
+import PropTypes from 'prop-types'
+import EasyMDE from 'easymde'
+import { markdownToHTML } from '../../helpers/markdownToState'
+
+class MarkdownText extends Component {
+  constructor (props) {
+    super(props)
+    this.updateDescription = this.updateDescription.bind(this)
+  }
+
+  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.updateDescription()
+      })
+    } else {
+      this.refs.textarea.innerHTML = value ? markdownToHTML(value) : ''
+    }
+  }
+
+  render () {
+    const { readOnly, placeholder } = this.props
+    return (<div className={styles.editor}>
+      {readOnly ? (
+        <div ref="textarea" className="EasyMDEContainer-readonly"/>
+      ) : (
+        <textarea
+          ref="textarea" 
+          placeholder={placeholder}
+        />
+      )}
+    </div>)
+  }
+}
+
+MarkdownText.defaultProps = {
+  readOnly: false
+}
+
+MarkdownText.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool
+}
+export default MarkdownText

src/components/MarkdownText/MarkdownText.scss

@@ -0,0 +1,238 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.editor {
+  @include roboto-light();
+
+  border-radius: 2px;
+  font-size: 16px;
+  max-height: 410px;
+  display: flex;
+
+  :global {
+    .EasyMDEContainer-readonly {
+      border: 1px solid #aaaaab;
+      border-radius: 4px;
+      padding: 0 10px;
+    }
+
+    .EasyMDEContainer, .EasyMDEContainer-readonly {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      overflow: auto;
+
+      // preview styles
+      .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
+          text-align:initial;
+          margin-bottom: .5rem;
+          font-weight: 500;
+          line-height: 1.2
+      }
+
+      .h1,h1 {
+          font-size: 2.5rem
+      }
+
+      .h2,h2 {
+          font-size: 2rem
+      }
+
+      .h3,h3 {
+          font-size: 1.75rem
+      }
+
+      .h4,h4 {
+          font-size: 1.5rem
+      }
+
+      .h5,h5 {
+          font-size: 1.25rem
+      }
+
+      .h6,h6 {
+          font-size: 1rem
+      }
+      h1,h2,h3,h4,h5,h6 {
+          margin-top: 0;
+          margin-bottom: .5rem
+      }
+
+      p {
+          margin-top: 0;
+          margin-bottom: 1rem
+      }
+
+
+      dl,ol,ul {
+          margin-top: 0;
+          margin-bottom: 1rem;
+          padding: revert;
+      }
+      ul {
+        list-style-type: disc;
+      }
+      ul ul {
+        list-style-type: circle;
+      }
+      ul ul ul {
+          list-style-type: square;
+      }
+      ol {
+        list-style-type: decimal;
+      }
+
+      ol ol,ol ul,ul ol,ul ul {
+          margin-bottom: 0
+      }
+
+      dt {
+          font-weight: 700
+      }
+
+      dd {
+          margin-bottom: .5rem;
+          margin-left: 0
+      }
+
+      blockquote {
+          margin: 0 0 1rem
+      }
+
+      b,strong {
+          font-weight: bolder
+      }
+
+      small {
+          font-size: 80%
+      }
+
+      sub,sup {
+          position: relative;
+          font-size: 75%;
+          line-height: 0;
+          vertical-align: initial
+      }
+
+      sub {
+          bottom: -.25em
+      }
+
+      sup {
+          top: -.5em
+      }
+
+      a {
+          color: #007bff;
+          text-decoration: none;
+          background-color: initial
+      }
+
+      a:hover {
+          color: #0056b3;
+          text-decoration: underline
+      }
+
+      a:not([href]),a:not([href]):hover {
+          color: inherit;
+          text-decoration: none
+      }
+
+      code,kbd,pre,samp {
+          font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+          font-size: 1em
+      }
+
+      pre {
+          margin-top: 0;
+          margin-bottom: 1rem;
+          overflow: auto
+      }
+
+      figure {
+          margin: 0 0 1rem
+      }
+
+      img {
+          border-style: none
+      }
+
+      img,svg {
+          vertical-align: middle
+      }
+
+      svg {
+          overflow: hidden
+      }
+
+      table {
+          border-collapse: collapse
+      }
+
+      caption {
+          padding-top: .75rem;
+          padding-bottom: .75rem;
+          color: #6c757d;
+          text-align: left;
+          caption-side: bottom
+      }
+
+      th {
+          text-align: inherit
+      }
+
+
+      small {
+          font-size: 80%;
+          font-weight: 400
+      }
+
+      mark {
+          padding: .2em;
+          background-color: #fcf8e3
+      }
+
+      code {
+          font-size: 87.5%;
+          color: #e83e8c;
+          word-wrap: break-word
+      }
+
+      a>code {
+          color: inherit
+      }
+
+      kbd {
+          padding: .2rem .4rem;
+          font-size: 87.5%;
+          color: #fff;
+          background-color: #212529;
+          border-radius: .2rem
+      }
+
+      kbd kbd {
+          padding: 0;
+          font-size: 100%;
+          font-weight: 700
+      }
+
+      pre {
+          display: block;
+          font-size: 87.5%;
+          color: #212529
+      }
+
+      pre code {
+          font-size: inherit;
+          color: inherit;
+          word-break: normal
+      }
+
+    }
+
+    .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 {