From bcfda3ffa1fe69d1a1814f775fa140a1b1f44820 Mon Sep 17 00:00:00 2001 From: Le Long 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.props.children} - - ); + const element = this._element === "SimpleMDE" + ? + {this.props.children} + + : + {this.props.children} + ; return (
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 {