diff --git a/README.md b/README.md index 4148f2b..b0820fd 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ http://insidersbyte.github.io/react-markdown-editor ## Installing ```bash -npm install @insidersbyte/react-markdown-editor +npm install @insidersbyte/react-markdown-editor --save ``` ## Usage @@ -31,42 +31,42 @@ import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css'; class App extends React.Component { constructor() { - super(); - - this.state = { - markdown: '# This is a H1 \n## This is a H2 \n###### This is a H6', - }; - - this.updateMarkdown = this.updateMarkdown.bind(this); - } - - onImageDrop(file) { - // This is where you would upload your files to whatever storage you are using - // You just need to return a promise with the original filename and the url of the uploaded file - - return new Promise((resolve) => { - setTimeout(() => { - resolve({ - filename: file.name, - url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg', - }); - }, 3000); - }); - } - - updateMarkdown(event) { - this.setState({ markdown: event.target.value }); - } + super(); + + this.state = { + markdown: '# This is a H1 \n## This is a H2 \n###### This is a H6', + }; + + this.updateMarkdown = this.updateMarkdown.bind(this); + } + + onImageDrop(file) { + // This is where you would upload your files to whatever storage you are using + // You just need to return a promise with the original filename and the url of the uploaded file - render() { - return ( - - ); - } + return new Promise((resolve) => { + setTimeout(() => { + resolve({ + filename: file.name, + url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg', + }); + }, 3000); + }); + } + + updateMarkdown(event) { + this.setState({ markdown: event.target.value }); + } + + render() { + return ( + + ); + } } ReactDOM.render(, document.getElementById('app')); @@ -77,6 +77,7 @@ ReactDOM.render(, document.getElementById('app')); * value (*string*) - the raw markdown that will be converted to html (**required**) * onChange (*function*) - called when a change is made (**required**) * onImageDrop (*function*) - called per image dropped on the textarea +* options (*object*) - the options for remarkable (see [here](https://github.com/jonschlinkert/remarkable#options)) (default: { }) ## Contributing diff --git a/package.json b/package.json index 53bd72f..2513446 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "rimraf": "^2.5.2", "stats-webpack-plugin": "^0.3.1", "style-loader": "^0.13.1", - "stylus": "^0.54.3", + "stylus": "^0.54.4", "stylus-loader": "^2.0.0", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" diff --git a/src/index.js b/src/index.js index aa36f9c..8dbbe91 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,11 @@ export default class MarkdownEditor extends React.Component { value: React.PropTypes.string.isRequired, onChange: React.PropTypes.func.isRequired, onImageDrop: React.PropTypes.func, + options: React.PropTypes.object, + }; + + static defaultProps = { + options: {}, }; state = { @@ -73,11 +78,15 @@ export default class MarkdownEditor extends React.Component { }; render() { - const textAreaClassName = this.state.draggingOver ? 'dragover' : null; + let textAreaClassName = 'markdown-editor__textarea'; + + if (this.state.draggingOver) { + textAreaClassName += ' markdown-editor__textarea--dragover'; + } return (
-
+

Markdown