1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- 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": <FontAwesomeIcon icon="bold" />,
- "heading": <FontAwesomeIcon icon="heading" />,
- "italic": <FontAwesomeIcon icon="italic" />,
- "strikethrough": <FontAwesomeIcon icon="strikethrough" />,
- "link": <FontAwesomeIcon icon="link" />,
- "quote-right": <FontAwesomeIcon icon="quote-right" />,
- "code": <FontAwesomeIcon icon="code" />,
- "image": <FontAwesomeIcon icon="image" />,
- "list-ul": <FontAwesomeIcon icon="list-ul" />,
- "list-ol": <FontAwesomeIcon icon="list-ol" />,
- "tasks": <FontAwesomeIcon icon="tasks" />,
- };
-
- const iconProvider = (name) => {
- return icons[name] || "❓";
- };
-
-
- export default class MarkdownEditor extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- mdeState: null,
- };
- this.converter = new Showdown.Converter({
- tables: true,
- simplifiedAutoLink: true,
- strikethrough: true,
- tasklists: true
- });
- }
-
- handleValueChange = (mdeState) => {
- this.setState({mdeState});
- }
-
- render() {
- return (
- <div className="container">
- <ReactMde
- layout="horizontal"
- buttonContentOptions={{ iconProvider }}
- onChange={this.handleValueChange}
- editorState={this.state.mdeState}
- generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
- />
- </div>
- );
- }
- }
|