react-dom-markdown-editor

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

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

$3

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

$3

``
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};
}

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 (


};
`

$3

- 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'
}
})
`

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

$3

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';
`

$3

`
git clone git@github.com:stevenkaspar/react-dom-markdown-editor.git
cd react-dom-markdown-editor
npm install
npm run dev
...
npm run build
// create pull request
``