Support markdown makeup in claim description #242
6 changed files with 54 additions and 21 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -17,3 +17,5 @@ dist
|
|||
|
||||
build/daemon.zip
|
||||
.vimrc
|
||||
|
||||
ui/yarn.lock
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -163,4 +163,8 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
.form-field__helper {
|
||||
color: $color-help;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
height: auto !important;
|
||||
}
|
Loading…
Reference in a new issue
I'm decently confident this is possible, maybe with
this._element = <SimpleMDE>
orthis._element = SimpleMDE
? Worth looking into. If it's not, this can still be cleaned up by compacting the shared properties to one declaration and passing them in with an extract operator.