From bcfda3ffa1fe69d1a1814f775fa140a1b1f44820 Mon Sep 17 00:00:00 2001
From: Le Long <hoanglong25588@gmail.com>
Date: Fri, 16 Jun 2017 00:55:18 +0200
Subject: [PATCH] add SimpleMDE support for claim description input

---
 .gitignore                         |  2 +
 package.json                       |  4 ++
 ui/js/component/form.js            | 61 ++++++++++++++++++++----------
 ui/js/page/publish/view.jsx        |  2 +-
 ui/package.json                    |  2 +
 ui/scss/component/_form-field.scss |  4 ++
 6 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 022473023..cc4d5aab7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ dist
 
 build/daemon.zip
 .vimrc
+
+ui/yarn.lock
\ No newline at end of file
diff --git a/package.json b/package.json
index 0d7c8eea1..b3858d055 100644
--- a/package.json
+++ b/package.json
@@ -59,5 +59,9 @@
     "electron": "^1.4.15",
     "electron-builder": "^11.7.0",
     "electron-debug": "^1.1.0"
+  },
+  "dependencies": {
+    "react-simplemde-editor": "^3.6.11",
+    "style-loader": "^0.18.2"
   }
 }
diff --git a/ui/js/component/form.js b/ui/js/component/form.js
index 7ab78325c..eb386b789 100644
--- a/ui/js/component/form.js
+++ b/ui/js/component/form.js
@@ -1,6 +1,8 @@
 import React from "react";
 import FileSelector from "./file-selector.js";
 import { Icon } from "./common.js";
+import SimpleMDE from "react-simplemde-editor";
+import style from "react-simplemde-editor/dist/simplemde.min.css";
 
 var formFieldCounter = 0,
   formFieldFileSelectorTypes = ["file", "directory"],
@@ -38,6 +40,9 @@ export class FormField extends React.PureComponent {
     } else if (this.props.type == "text-number") {
       this._element = "input";
       this._type = "text";
+    } else if (this.props.type == "SimpleMDE") {
+      this._element = "SimpleMDE";
+      this._type = "textarea";
     } else if (formFieldFileSelectorTypes.includes(this.props.type)) {
       this._element = "input";
       this._type = "hidden";
@@ -106,26 +111,42 @@ export class FormField extends React.PureComponent {
     delete otherProps.className;
     delete otherProps.postfix;
     delete otherProps.prefix;
-
-    const element = (
-      <this._element
-        id={elementId}
-        type={this._type}
-        name={this.props.name}
-        ref="field"
-        placeholder={this.props.placeholder}
-        className={
-          "form-field__input form-field__input-" +
-          this.props.type +
-          " " +
-          (this.props.className || "") +
-          (isError ? "form-field__input--error" : "")
-        }
-        {...otherProps}
-      >
-        {this.props.children}
-      </this._element>
-    );
+    const element = this._element === "SimpleMDE"
+      ? <SimpleMDE
+          id={elementId}
+          type={this._type}
+          name={this.props.name}
+          ref="field"
+          placeholder={this.props.placeholder}
+          className={
+            "form-field__input form-field__input-" +
+            this.props.type +
+            " " +
+            (this.props.className || "") +
+            (isError ? "form-field__input--error" : "")
+          }
+          name={this.props.name}
+          {...otherProps}
+        >
+          {this.props.children}
+        </SimpleMDE>
+      : <this._element // can't be applied to SimpleMDE idk why
+          id={elementId}
+          type={this._type}
+          name={this.props.name}
+          ref="field"
+          placeholder={this.props.placeholder}
+          className={
+            "form-field__input form-field__input-" +
+            this.props.type +
+            " " +
+            (this.props.className || "") +
+            (isError ? "form-field__input--error" : "")
+          }
+          {...otherProps}
+        >
+          {this.props.children}
+        </this._element>;
 
     return (
       <div className={"form-field form-field--" + this.props.type}>
diff --git a/ui/js/page/publish/view.jsx b/ui/js/page/publish/view.jsx
index 2628e01e8..e54be1eaf 100644
--- a/ui/js/page/publish/view.jsx
+++ b/ui/js/page/publish/view.jsx
@@ -520,7 +520,7 @@ class PublishPage extends React.PureComponent {
                   <div className="card__content">
                     <FormRow
                       label={__("Description")}
-                      type="textarea"
+                      type="SimpleMDE"
                       ref="meta_description"
                       name="description"
                       placeholder={__("Description of your content")}
diff --git a/ui/package.json b/ui/package.json
index 276a96b60..ba585e104 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -54,6 +54,7 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.18.0",
+    "css-loader": "^0.28.4",
     "eslint": "^3.10.2",
     "eslint-config-airbnb": "^13.0.0",
     "eslint-loader": "^1.6.1",
@@ -65,6 +66,7 @@
     "lint-staged": "^3.6.0",
     "node-sass": "^3.13.0",
     "prettier": "^1.4.2",
+    "style-loader": "^0.18.2",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.4",
     "webpack-notifier": "^1.5.0",
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 8fd86efef..4b71c2bd9 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -163,4 +163,8 @@ input[type="text"].input-copyable {
 }
 .form-field__helper {
   color: $color-help;
+}
+
+.CodeMirror-scroll {
+  height: auto !important;
 }
\ No newline at end of file