fix: change style for markdown text

Author: yoution

package.json

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

src/components/MarkdownText/MarkdownText.jsx

@@ -2,9 +2,7 @@ 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'
+import { markdownToHTML } from '../../helpers/markdownToState'
 
 class MarkdownText extends Component {
   constructor (props) {
@@ -13,7 +11,8 @@ class MarkdownText extends Component {
       isChanged: false
     }
     this.blurTheField = this.blurTheField.bind(this)
-    this.updateDescriptionThrottled = _.throttle(this.updateDescription.bind(this), 10000) // 10s
+    this.updateDescriptionThrottled = this.updateDescription.bind(this)
+    // this.updateDescriptionThrottled = _.throttle(this.updateDescription.bind(this), 10000) // 10s
   }
 
   blurTheField () {
@@ -41,13 +40,13 @@ class MarkdownText extends Component {
         }
       })
     } else {
-      this.ref.current.innerHTML = value ? marked(value) : ''
+      this.ref.current.innerHTML = value ? markdownToHTML(value) : ''
     }
   }
 
   render () {
-    const { isPrivate, readOnly, placeholder, className } = this.props
-    return (<div className={cn(className, styles.editor, { [styles.isPrivate]: isPrivate })}>
+    const { readOnly, placeholder } = this.props
+    return (<div className={styles.editor}>
       {readOnly ? (
         <div ref="textarea" />
       ) : (
@@ -61,14 +60,12 @@ class MarkdownText extends Component {
 }
 
 MarkdownText.defaultProps = {
-  isPrivate: false,
   readOnly: false
 }
 
 MarkdownText.propTypes = {
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string,
-  isPrivate: PropTypes.bool,
   placeholder: PropTypes.string,
   readOnly: PropTypes.bool
 }

src/components/MarkdownText/MarkdownText.scss

@@ -3,20 +3,226 @@
 .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 {
+    .EasyMDEContainer {
+      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;