From 14fdf2d514874852c02d1a1979368f3daeffbb49 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Sun, 25 Jan 2015 14:12:23 -0800 Subject: [PATCH 1/6] Added support for remarkable plugins --- src/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index cdf5499..d1b786c 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,7 @@ var Remarkable = React.createClass({ return { container: 'div', options: {}, + plugins: [] }; }, @@ -23,8 +24,8 @@ var Remarkable = React.createClass({ }, componentWillUpdate(nextProps, nextState) { - if (nextProps.options !== this.props.options) { - this.md = new Markdown(nextProps.options); + if (nextProps.options !== this.props.options || nextProps.plugins !== this.props.plugins) { + this.md = this.makeMarkdown(nextProps.options, nextProps.plugins); } }, @@ -44,9 +45,15 @@ 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); From 1d054d10a86e99e8933792069b97700ffbb09d27 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Sun, 25 Jan 2015 14:17:10 -0800 Subject: [PATCH 2/6] Added postprocessing support --- src/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index d1b786c..4466b01 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,8 @@ var Remarkable = React.createClass({ return { container: 'div', options: {}, - plugins: [] + plugins: [], + filters: [] }; }, @@ -56,7 +57,9 @@ var Remarkable = React.createClass({ this.md = this.makeMarkdown(this.props.options, this.props.plugins); } - return this.md.render(source); + return this.props.filters.reduce((src, filter) => { + return filter(src); + }, this.md.render(source)); } }); From f7ac784c704db658fb717cd953f4717c8a631ca0 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Sun, 25 Jan 2015 23:53:26 -0800 Subject: [PATCH 3/6] Update remarkable instance on receive props --- src/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 4466b01..f1e60ea 100644 --- a/src/index.js +++ b/src/index.js @@ -24,10 +24,8 @@ var Remarkable = React.createClass({ ); }, - componentWillUpdate(nextProps, nextState) { - if (nextProps.options !== this.props.options || nextProps.plugins !== this.props.plugins) { - this.md = this.makeMarkdown(nextProps.options, nextProps.plugins); - } + componentWillReceiveProps(nextProps) { + this.md = this.makeMarkdown(nextProps.options, nextProps.plugins); }, content() { From 8afb927dad47538ffa0b7e7179a2bdc8de325bc7 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Mon, 26 Jan 2015 00:51:45 -0800 Subject: [PATCH 4/6] Add info about plugins and filters to README --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 3d16fb1..043c72e 100644 --- a/README.md +++ b/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! + + {/* Pass remarkable plugins to the `plugins` prop */} + {/* and filters to the `filters` prop */} + ); } @@ -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 +- `filters` - Array of string filters ## License MIT From 85922d8dda807a57d60f75e4a778035cf3e1caa1 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Mon, 26 Jan 2015 00:55:13 -0800 Subject: [PATCH 5/6] Renamed filters to transforms --- README.md | 6 +++--- src/index.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 043c72e..2ef0bd3 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,8 @@ var MyComponent = React.createClass({ {/* Pass remarkable plugins to the `plugins` prop */} - {/* and filters to the `filters` prop */} - + {/* and transforms to the `transforms` prop */} + ); } @@ -54,7 +54,7 @@ Available props: - `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 -- `filters` - Array of string filters +- `transforms` - Array of string transforms ## License MIT diff --git a/src/index.js b/src/index.js index f1e60ea..3550005 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ var Remarkable = React.createClass({ container: 'div', options: {}, plugins: [], - filters: [] + transforms: [] }; }, @@ -55,8 +55,8 @@ var Remarkable = React.createClass({ this.md = this.makeMarkdown(this.props.options, this.props.plugins); } - return this.props.filters.reduce((src, filter) => { - return filter(src); + return this.props.transforms.reduce((src, transform) => { + return transform(src); }, this.md.render(source)); } From bdd22332131088b14c59ff563bf46f3f7a7afc59 Mon Sep 17 00:00:00 2001 From: Seggy Umboh Date: Wed, 4 Feb 2015 17:35:54 -0800 Subject: [PATCH 6/6] Added dist file so we can npm install from github --- .gitignore | 3 --- dist/index.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 dist/index.js diff --git a/.gitignore b/.gitignore index bf7cbbf..d1d5c6d 100644 --- a/.gitignore +++ b/.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 diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..8840ba3 --- /dev/null +++ b/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; \ No newline at end of file