npm install --save react-dom-markdown-editor

Mimimal Markdown editor meant to be basic for easy styling and customization

Demo

https://stevenkaspar.github.io/react-dom-markdown-editor/

Example

import React          from 'react';
import ReactDOM       from 'react-dom';
import marked         from 'marked';
import MarkdownEditor from 'react-dom-markdown-editor';
import 'react-dom-markdown-editor/styles/base.css';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      value: ''
    };

    this.markdownEditorChange = this.markdownEditorChange.bind(this);
  }

  markdownEditorChange(value){
    this.setState({
      value: value
    });
  }

  static handleFileClick({value, files}, cb){

    let file_string = '';
    for(let file of files){
      file_string += `[${file.file_name}](data:${file.file.type};base64,${file.data})`;
    }

    cb({ new_value: `${value}\n\n${file_string}` });
  }

  static handleH1Click(data, cb){
    cb({ wrap: { start: '# ', end: '' } });
  }
  static handleListClick(data, cb){
    cb({ wrap: { start: '- ', end: '' } });
  }
  static handleTableClick(data, cb){
    cb({ wrap: { start: '|',      end: '|b|\n|---|---|\n|1|2|' } });
  }

  render(){
    return (
      <div>
        <h4>React Markdown Editor</h4>
        <MarkdownEditor
          height={400}
          toolbar={[
            { html: '<span style="background: aliceblue;">- list</span>',    handler: App.handleListClick },
            { label: 'h1',    handler: App.handleH1Click },
            { label: 'table', handler: App.handleTableClick },
            { label: 'file',  handler: App.handleFileClick, is_file: true },
          ]}
          value={this.state.value}
          onChange={this.markdownEditorChange}/>
        <button onClick={() => alert(this.state.value)}>alert input value</button>
        <button onClick={() => alert(marked(this.state.value))}>alert HTML output</button>
      </div>
    );
  }

};

Props

• height PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])

  Default: 'auto'

  Initial height of the textarea. The textarea and preview window will resize together

• value PropTypes.string

  Default: ''

  Initial value of the input

• marked_options PropTypes.object

  Default: {}

  Options to pass to marked.setOptions

marked.setOptions(marked_options) ```

• toolbar

PropTypes.arrayOf(PropTypes.shape({ className: PropTypes.string, html: PropTypes.string, label: PropTypes.string, handler: PropTypes.func.isRequired, is_file: PropTypes.bool })) ```

`tool.handler` will be called with 2 arguments `data`, `cb`

`data`

```

{ value: '', //current value, selection: { value: '', // selection value, start: 0, // selection start index, end: 10 // selection end index }, target: textarea, // HTML DOM Element files: [] // if is_file: true }

 `cb`

 cb should be executed to either set a new value or wrap the selection

 To set a new value execute the cb with

 ```
// set the value to xxx. This is useful for async needs
cb({
 new_value: 'xxx'
})
 ```

 To wrap the selection execute the cb with

 ```
// create a link making the selection the link target
cb({
 wrap: {
   start: '[Display Text](', /* selection here */ end: ')'
 }
})
 ```

 `tool.is_file` if true then on click the browsers file selector will be shown and the cb will include a `files` key which will be an array of file data

 ```
{
 file_name: 'xxx.png',
 data: base64 String,
 file: File
}
 ```

- **tabs** `PropTypes.bool`

 `Default`: `false`

 use `true` to show as tabs with a `Markdown` and `Preview` tab

- **onChange** `PropTypes.func`

 callback function which will receive the markdown string value when it changes

 ```
onChange={(value) => {
 this.setState({
   value: value
 });
}}
 ```


- **markdown_tab_label** `PropTypes.string`

`Default`: `Markdown`

- **preview_tab_label** `PropTypes.string`

`Default`: `Preview`

### CSS / Styling

`react-dom-markdown-editor` comes with some basic styling to get you going

#### Base

To have the base styling for side by side view and what not

import 'react-dom-markdown-editor/styles/base.css';

#### Flex

To have the `MarkdownEditor` `flex: auto` you must import that `flex.css`

import 'react-dom-markdown-editor/styles/flex.css';

> Note: The parent element must have something like `display: flex; flex-direction: column` for this to do anything

#### Markdown Style

To use a somewhat standard markdown CSS

import 'react-dom-markdown-editor/styles/markdown/standard.css';

### Development

git clone [email protected]:stevenkaspar/react-dom-markdown-editor.git cd react-dom-markdown-editor npm install npm run dev ... npm run build // create pull request