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
-
diff --git a/src/react-markdown-editor.styl b/src/react-markdown-editor.styl
index 0d46107..c893830 100644
--- a/src/react-markdown-editor.styl
+++ b/src/react-markdown-editor.styl
@@ -5,24 +5,26 @@
min-height 500px
margin-bottom 15px
- > *
- flex 1 1 50%
- max-width 50%
- max-height 100%
- margin 0 5px
- display flex
- flex-direction column
+.markdown-editor__editor-container
+.markdown-editor__preview-container
+ flex 1 1 50%
+ max-width 50%
+ max-height 100%
+ margin 0 5px
+ display flex
+ flex-direction column
- > *:last-child
- flex 1
+.markdown-editor__textarea
+.markdown-editor__preview
+ flex 1
- .markdown-editor__preview
- img
- max-width 100%
+.markdown-editor__textarea--dragover
+ border 1px solid #c9ff00
+ box-shadow 0 0 10px #719ECE
- :last-child
- margin-bottom: 0;
+.markdown-editor__preview
+ img
+ max-width 100%
- .dragover
- border 1px solid #c9ff00
- box-shadow 0 0 10px #719ECE
+ :last-child
+ margin-bottom 0