Remarkable plugins support

README.md

@@ -13,14 +13,15 @@ npm install --save react-remarkable
 
 var React = require('react');
 var Markdown = require('react-remarkable');
+var Emoji = require('remarkable-emoji');
 
 var MyComponent = React.createClass({
 
   render() {
     return (
       <div>
         {/* Pass Markdown source to the `source` prop */}
-        <Markdown source="**Markdown is awesome!**" />
+        <Markdown source="**Markdown is awesome! :)**" plugins={[Emoji]} />
 
         {/* Or pass it as children */}
         {/* You can nest React components, too */}
@@ -47,6 +48,7 @@ Available props:
 - `options` - Hash of Remarkable options
 - `source`  - Markdown source. You can also pass the source as children, which allows you to mix React components and Markdown.
 - `container` - Element to use as container. Defaults to `div`.
+- `plugins` - Array of remarkable plugins
 
 ## Syntax Highlighting
 

package.json

@@ -8,10 +8,22 @@
     "url": "https://github.com/acdlite/react-remarkable.git"
   },
   "dependencies": {
-    "remarkable": "^1.4.1"
+    "remarkable": "^1.7.1"
   },
   "devDependencies": {
-    "babel": "^5.1.13"
+    "@babel/core": "^7.4.3",
+    "@babel/cli": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0"
+  },
+  "babel": {
+    "plugins": [
+      "@babel/plugin-transform-modules-commonjs"
+    ],
+    "presets": [
+      "@babel/preset-react",
+      "@babel/preset-env"
+    ]
   },
   "scripts": {
     "build": "babel src -d dist --modules common",

src/index.js

@@ -17,7 +17,7 @@ class Remarkable extends React.Component {
 
   componentWillUpdate(nextProps, nextState) {
     if (nextProps.options !== this.props.options) {
-      this.md = new Markdown(nextProps.options);
+      this.md = this.createMarkdown(nextProps.options, nextProps.plugins);
     }
   }
 
@@ -39,16 +39,23 @@ class Remarkable extends React.Component {
 
   renderMarkdown(source) {
     if (!this.md) {
-      this.md = new Markdown(this.props.options);
+      this.md = this.createMarkdown(this.props.options, this.props.plugins);
     }
 
     return this.md.render(source);
   }
+
+  createMarkdown(options, plugins) {
+    return plugins.reduce((md, plugin) => {
+      return md.use(plugin);
+    }, new Markdown(options));
+  }
 }
 
 Remarkable.defaultProps = {
   container: 'div',
   options: {},
+  plugins: [],
 };
 
 export default Remarkable;