12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- 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.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 (
- <ReactMde {...props} />
- );
- }
- }
|