Commit 126c0c3b authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files

Markdown editor with preview

parent 2807eb9f
import * as React from 'react';
import Input from 'material-ui/Input';
import { withStyles } from 'material-ui/styles';
import compose from 'recompose/compose';
import FormControl from 'ui/common/forms/FormControl';
import Markdown from 'ui/common/markdown';
const styles = {
markdown: {
marginTop: '22px',
},
};
class MarkdownField extends React.Component<any, any> {
public constructor(props: any) {
super(props);
this.state = {
previewMode: false,
};
}
private onChangePreviewMode = () => {
this.setState({ previewMode: !this.state.previewMode });
}
public render() {
const {classes, basicMarkdown, input, label, required, meta, meta: {touched, error}, ...custom} = this.props;
const basic: boolean = basicMarkdown === undefined || null ? false : basicMarkdown;
return (
<div>
{ !this.state.previewMode ?
<FormControl fullWidth required={ required } meta={ meta } label={ label }>
<Input error={ touched && error } multiline={ !basic } { ...input } { ...custom } />
<h6>
<a onClick={ this.onChangePreviewMode }>Preview Markdown</a>
<span> { basic ? 'Basic markdown supported: * **' : 'Full markdown supported' }</span>
</h6>
</FormControl>
:
<FormControl fullWidth required={ required } meta={ meta } label={ label }>
<Markdown className={ classes.markdown } basic={ basic } source={ input.value } />
<h6><a onClick={ this.onChangePreviewMode }>Edit Markdown</a></h6>
</FormControl>
}
</div>
);
}
}
export default compose(withStyles(styles))(MarkdownField);
import * as React from 'react';
import * as MarkdownComponent from 'react-markdown';
import Input from 'material-ui/Input';
import FormControl from 'ui/common/forms/FormControl';
import MarkdownField from './MarkdownField';
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string;
......@@ -10,7 +9,7 @@ interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
}
// TODO Add textLength attribute to trim text here, not in the parent
export default function Markdown({source, textLength, style, className, basic}: IMarkdownTextProps) {
function Markdown({source, textLength, style, className, basic}: IMarkdownTextProps) {
if (source) {
const trimmedSource: string = textLength === undefined || textLength === null ? source : source.substring(0, textLength) + '...';
......@@ -36,12 +35,4 @@ export default function Markdown({source, textLength, style, className, basic}:
}
}
export const MarkdownField = ({basicMarkdown, input, InputLabelProps, label, required, meta, meta: {touched, error}, ...custom}) => {
const basic: boolean = basicMarkdown === undefined || null ? false : basicMarkdown;
return (
<FormControl fullWidth required={ required } meta={ meta } label={ label }>
<Input error={ touched && error } multiline={ !basic } { ...input } { ...custom } />
<h6>{ basic ? 'Basic markdown supported: * **' : 'Full markdown supported' }</h6>
</FormControl>
);
};
export { Markdown as default, MarkdownField };
......@@ -6,7 +6,7 @@ import languages from 'data/Languages';
import {Partner} from 'model/partner.model';
import {TextField} from 'ui/common/text-field';
import {MarkdownField} from 'ui/common/markdown';
import MarkdownField from 'ui/common/markdown/MarkdownField';
import SelectPartner from 'ui/catalog/partner/SelectPartner';
import MaterialAutosuggest from 'ui/common/material-autosuggest';
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment