add SimpleMDE support for claim description input

.gitignore

@@ -17,3 +17,5 @@ dist
 
 build/daemon.zip
 .vimrc
+
+ui/yarn.lock

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"
   }
 }

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}>

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")}

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",

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;
 }