Support remarkable plugins and filtering the remarkable output

.gitignore

@@ -25,6 +25,3 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
-
-# Compiled files
-dist

README.md

@@ -13,6 +13,8 @@ npm install --save react-remarkable
 
 var React = require('react');
 var Markdown = require('react-remarkable');
+var RemarkableEmoji = require('remarkable-emoji');
+var twemoji = require('twemoji');
 
 var MyComponent = React.createClass({
 
@@ -34,6 +36,10 @@ var MyComponent = React.createClass({
 
           Pretty neat!
         </Markdown>
+
+        {/* Pass remarkable plugins to the `plugins` prop */}
+        {/* and transforms to the `transforms` prop */}
+        <Markdown source="**Markdown is awesome!**" plugins={[RemarkableEmoji]} transforms={[twemoji.parse]} />
       </div>
     );
   }
@@ -47,6 +53,8 @@ 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 `span`.
+- `plugins` - Array of remarkable plugins
+- `transforms` - Array of string transforms
 
 ## License
 MIT

dist/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequire = function (obj) {
+  return obj && (obj["default"] || obj);
+};
+
+"use strict";
+
+var React = _interopRequire(require('react'));
+
+var Markdown = _interopRequire(require('remarkable'));
+
+var Remarkable = React.createClass({
+  displayName: "Remarkable",
+
+
+  getDefaultProps: function () {
+    return {
+      container: "div",
+      options: {},
+      plugins: [],
+      transforms: []
+    };
+  },
+
+  render: function () {
+    var Container = this.props.container;
+
+    return (React.createElement(Container, null, this.content()));
+  },
+
+  componentWillReceiveProps: function (nextProps) {
+    this.md = this.makeMarkdown(nextProps.options, nextProps.plugins);
+  },
+
+  content: function () {
+    var _this = this;
+    if (this.props.source) {
+      return React.createElement("span", {
+        dangerouslySetInnerHTML: { __html: this.renderMarkdown(this.props.source) }
+      });
+    } else {
+      return React.Children.map(this.props.children, function (child) {
+        if (typeof child === "string") {
+          return React.createElement("span", {
+            dangerouslySetInnerHTML: { __html: _this.renderMarkdown(child) }
+          });
+        } else {
+          return child;
+        }
+      });
+    }
+  },
+
+  makeMarkdown: function (options, plugins) {
+    return plugins.reduce(function (md, plugin) {
+      return md.use(plugin);
+    }, new Markdown(options));
+  },
+
+  renderMarkdown: function (source) {
+    if (!this.md) {
+      this.md = this.makeMarkdown(this.props.options, this.props.plugins);
+    }
+
+    return this.props.transforms.reduce(function (src, transform) {
+      return transform(src);
+    }, this.md.render(source));
+  }
+
+});
+
+module.exports = Remarkable;

src/index.js

@@ -9,6 +9,8 @@ var Remarkable = React.createClass({
     return {
       container: 'div',
       options: {},
+      plugins: [],
+      transforms: []
     };
   },
 
@@ -22,10 +24,8 @@ var Remarkable = React.createClass({
     );
   },
 
-  componentWillUpdate(nextProps, nextState) {
-    if (nextProps.options !== this.props.options) {
-      this.md = new Markdown(nextProps.options);
-    }
+  componentWillReceiveProps(nextProps) {
+    this.md = this.makeMarkdown(nextProps.options, nextProps.plugins);
   },
 
   content() {
@@ -44,12 +44,20 @@ var Remarkable = React.createClass({
     }
   },
 
+  makeMarkdown(options, plugins) {
+    return plugins.reduce((md, plugin) => {
+      return md.use(plugin);
+    }, new Markdown(options));
+  },
+
   renderMarkdown(source) {
     if (!this.md) {
-      this.md = new Markdown(this.props.options);
+      this.md = this.makeMarkdown(this.props.options, this.props.plugins);
     }
 
-    return this.md.render(source);
+    return this.props.transforms.reduce((src, transform) => {
+      return transform(src);
+    }, this.md.render(source));
   }
 
 });