Merge pull request #4306 from appirio-tech/revert-4302-issue-4298

Revert "fix: add easymde #4298"

Author: maxceem

package.json

@@ -96,7 +96,6 @@
     "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

@@ -6,7 +6,6 @@ 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/components/MarkdownText/MarkdownText.scss

@@ -6,7 +6,6 @@ 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'
@@ -74,8 +73,8 @@ class JobPickerRow extends React.PureComponent {
     this.props.onChange(this.props.rowIndex, 'role', evt)
   }
 
-  handleDescriptionChange(value) {
-    this.props.onChange(this.props.rowIndex, 'description', value)
+  handleDescriptionChange(evt) {
+    this.props.onChange(this.props.rowIndex, 'description', evt.target.value)
   }
 
   resetDuration() {
@@ -235,11 +234,13 @@ class JobPickerRow extends React.PureComponent {
         <label className="tc-label" styleName="label">
           Job Description
         </label>
-        <div styleName={`job-description ${isRowIncomplete && !value.description.trim() ? 'error' : ''}`} >
-          <MarkdownText 
-            value={value.description || ''}
+        <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>
       </div>

src/index.jsx

@@ -86,15 +86,22 @@
     display: block;
   }
 
-  .job-description {
-    &.error {
-      :global {
-        .CodeMirror {
-          border:1px solid $tc-red-70;
-        }
-      }
+  .job-description textarea,
+  .job-textarea[type="text"] {
+    &.empty {
+      color: $tc-gray-30;
     }
-  }
+    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 {