import * as React from "react";
import ReactMde from 'react-mde';
import * as Showdown from "showdown";
import 'react-mde/lib/styles/css/react-mde-all.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const icons = {
"bold": ,
"heading": ,
"italic": ,
"strikethrough": ,
"link": ,
"quote-right": ,
"code": ,
"image": ,
"list-ul": ,
"list-ol": ,
"tasks": ,
};
const iconProvider = (name) => {
return icons[name] || "❓";
};
export default class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
}
handleValueChange = (mdeState) => {
this.setState({mdeState});
}
render() {
const defaultProps = {
layout: 'horizontal',
buttonContentOptions: { iconProvider },
generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
}
const props= {
...this.props,
...defaultProps,
}
return (
);
}
}