Master plus source prs

README.md

@@ -10,43 +10,37 @@ npm install --save react-remarkable
 ## Usage
 
 ```jsx
+import React from 'react';
+import Markdown from 'react-remarkable';
+import Emoji from 'remarkable-emoji'
 
-var React = require('react');
-var Markdown = require('react-remarkable');
+const MyComponent = () => (
+  <div>
+    {/* Pass Markdown source to the `source` prop */}
+    <Markdown source="**Markdown is awesome! :)**" plugins={[Emoji]} />
 
-var MyComponent = React.createClass({
+    {/* Or pass it as children */}
+    {/* You can nest React components, too */}
+    <Markdown>{`
+      ## Reasons React is great
 
-  render() {
-    return (
-      <div>
-        {/* Pass Markdown source to the `source` prop */}
-        <Markdown source="**Markdown is awesome!**" />
+      1. Server-side rendering
+      2. This totally works:
 
-        {/* Or pass it as children */}
-        {/* You can nest React components, too */}
-        <Markdown>{`
-          ## Reasons React is great
-
-          1. Server-side rendering
-          2. This totally works:
-
-          <SomeOtherAmazingComponent />
-
-          Pretty neat!
-        `}</Markdown>
-      </div>
-    );
-  }
-
-});
+      <SomeOtherAmazingComponent />
 
+      Pretty neat!
+    `}</Markdown>
+  </div>
+);
 ```
 
 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

@@ -1,6 +1,6 @@
 {
   "name": "react-remarkable",
-  "version": "1.1.2",
+  "version": "1.1.3-alpha.2",
   "description": "A React component for rendering Markdown with remarkable",
   "main": "dist/index.js",
   "repository": {

src/index.js

@@ -1,34 +1,70 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Markdown from 'remarkable';
 
 class Remarkable extends React.Component {
+  static propTypes = {
+    container: PropTypes.string,
+    options: PropTypes.object,
+    source: PropTypes.string,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ])
+  }
+
+  static defaultProps = {
+    container: 'div',
+    options: {}
+  }
 
   render() {
-    var Container = this.props.container;
+    var {
+      container: Container,
+      children, options, source, // ⬅ remove Remarkable props
+      ...props // ⬅ only pass non-Remarkable props
+    } = this.props;
 
     return (
-      <Container>
+      <Container {...props}>
         {this.content()}
       </Container>
     );
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.options !== this.props.options) {
+      return true;
+    }
+    else if (this.props.source) {
+      return this.props.source !== nextProps.source;
+    }
+    else if (React.Children.count(this.props.children) === 1 && React.Children.count(nextProps.children) === 1) {
+      return (typeof this.props.children === 'string') && this.props.children !== nextProps.children;
+    }
+    else {
+      return true;
+    }
+  }
+
   componentWillUpdate(nextProps, nextState) {
     if (nextProps.options !== this.props.options) {
-      this.md = new Markdown(nextProps.options);
+      this.md = this.createMarkdown(nextProps.options, nextProps.plugins);
     }
   }
 
   content() {
+    var Wrapper = this.props.contentWrapper;
+
     if (this.props.source) {
-      return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
+      return <Wrapper dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
     }
     else {
       return React.Children.map(this.props.children, child => {
         if (typeof child === 'string') {
-          return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
+          return <Wrapper dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
         }
         else {
           return child;
@@ -39,16 +75,24 @@ 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',
+  contentWrapper: 'span',
   options: {},
+  plugins: [],
 };
 
 export default Remarkable;