Completely refactored code, now using a new markdown engine.

Author: lwansbrough

Markdown.js

@@ -1,49 +1,12 @@
 var React = require('react-native');
 var {
-  Image,
-  Text,
-  View,
+  View
 } = React;
 var _ = require('lodash');
-var Buffer = require('buffer');
-var marked = require('marked');
-var renderer = require('./renderer');
-
-function transform(jsxString, scope) {
-  var header = '/** @jsx React.DOM */';
-  jsxString = header + '\n' + jsxString;
-  return require('react-tools').transform(jsxString);
-}
-
-function exec(jsxString, lexicalScope) {
-  var jsx = transform(jsxString);
-
-  var thunkTemplate = [
-    '(function () {    ',
-    '  <%- vars %>     ',
-    '  return (        ',
-    '    <%= code %>   ',
-    '  );              ',
-    '})                '
-  ].join('\n');
-
-  var lexicalVarTemplate = 'var <%- key %> = lexicalScope.<%- key %>;';
-  var lexicalVars = _.map(lexicalScope, function (val, key) {
-    return _.template(lexicalVarTemplate)({ key: key });
-  });
-
-  var thunkCode = _.template(thunkTemplate)({
-    vars: lexicalVars.join('\n'),
-    code: jsx
-  });
-
-  var thunk = eval(thunkCode);
-
-  return thunk.apply(null);
-}
+var SimpleMarkdown = require('simple-markdown');
 
 var styles = {
-  emphasis: {
+  u: {
     fontFamily: 'HelveticaNeue-Italic'
   },
   paragraph: {
@@ -54,16 +17,25 @@ var styles = {
   }
 };
 
-var Markdown = React.createClass({
 
-  render: function() {
+var Markdown = React.createClass({
 
-    var children = this.props.children.toString();
+  componentWillMount: function() {
+    var rules = require('./rules')(_.merge(styles, this.props.style));
+    rules = _.merge(SimpleMarkdown.defaultRules, rules);
 
-    var jsxString = marked(children, { renderer: renderer })
-    var jsx = exec(jsxString, { styles: _.merge(styles, this.props.style) });
+    var parser = SimpleMarkdown.parserFor(rules);
+    this.parse = function(source) {
+      var blockSource = source + '\n\n';
+      return parser(blockSource, {inline: false});
+    };
+    this.renderer = SimpleMarkdown.outputFor(SimpleMarkdown.ruleOutput(rules, 'react'));
+  },
 
-    return jsx;
+  render: function() {
+    var child = this.props.children.toString();
+    var tree = this.parse(child);
+    return <View>{this.renderer(tree)}</View>;
   }
 });
 

README.md

@@ -2,12 +2,6 @@
 
 A component for rendering Markdown in React Native. This component is still in early development.
 
-## Known issues
-
-**~~Warning: This module currently uses `eval` and is susceptible to JS injection. Working on a fix for this.~~**
-
-**I'm not convinced we can avoid using `eval`, though I believe I have resolved the injection issue.**
-
 ## Getting started
 
 1. `npm install react-native-markdown --save`
@@ -49,24 +43,26 @@ Default style properties will be applied to the markdown. You will likely want t
 
 *Note: The text inside the parentheses denotes the element type.*
 
-- `emphasis` (`<Text>`)
-- `paragraph` (`<Text>`)
-- `strong` (`<Text>`)
-- `strong` (`<Text>`)
-- `emphasis` (`<Text>`)
-- `codespan` (`<Text>`)
-- `break` (`<View>`)
-- `deleted` (`<Text>`)
-- `link` (`Not implemented`)
+- `autolink` (`Not implemented`)
+- `blockQuote` (`Not implemented`)
+- `br` (`Not implemented`)
+- `codeBlock` (`Not implemented`)
+- `def` (`Not implemented`)
+- `del` (`Not implemented`)
+- `em` (`Not implemented`)
+- `fence` (`Not implemented`)
+- `heading` (`Not implemented`) - Also `heading1` through `heading6`
+- `hr` (`Not implemented`)
 - `image` (`<Image>`)
-- `code` (`<Text>`)
-- `blockquote` (`Not implemented`)
-- `html` (`<Text>`)
-- `heading` (`<Text>`) - Also `heading1` through `heading6`
-- `horizontalRule` (`<View>`)
+- `inlineCode` (`Not implemented`)
+- `link` (`Not implemented`)
 - `list` (`Not implemented`)
-- `listitem` (`Not implemented`)
+- `mailto` (`Not implemented`)
+- `newline` (`Not implemented`)
 - `paragraph` (`<Text>`)
-- `table` (`Not implemented`)
-- `tablerow` (`Not implemented`)
-- `tablecell` (`Not implemented`)
+- `refimage` (`Not implemented`)
+- `reflink` (`Not implemented`)
+- `strong` (`<Text>`)
+- `text` (`<Text>`)
+- `u` (`<Text>`)
+- `url` (`Not implemented`)

package.json

@@ -9,9 +9,8 @@
   "main": "Markdown.js",
   "author": "Lochlan Wansbrough <lochie@live.com> (http://lwansbrough.com)",
   "dependencies": {
-    "buffer": "^3.1.2",
     "lodash": "^3.6.0",
-    "marked": "https://github.com/lwansbrough/marked.git",
-    "react-native": "^0.3.1"
+    "react-native": "^0.3.1",
+    "simple-markdown": "git://github.com/lwansbrough/simple-markdown.git"
   }
 }

renderer.js

@@ -0,0 +1,43 @@
+var React = require('react-native');
+var {
+  Image,
+  Text,
+  View,
+} = React;
+var SimpleMarkdown = require('simple-markdown');
+
+module.exports = function(styles) {
+  return {
+    image: {
+      react: function(node, output) {
+        return React.createElement(Image, {
+          source: { uri: node.target },
+          style: styles.image
+        }, output(node.content));
+      }
+    },
+    paragraph: {
+      // Finally transform this syntax node into a
+      // React element
+      react: function(node, output) {
+        return React.createElement(Text, { style: styles.paragraph }, output(node.content));
+      }
+    },
+    text: {
+
+      // Finally transform this syntax node into a
+      // React element
+      react: function(node, output) {
+        return React.createElement(Text, { style: styles.text }, node.content);
+      }
+    },
+    u: {
+
+      // Finally transform this syntax node into a
+      // React element
+      react: function(node, output) {
+        return React.createElement(Text, { style: styles.u }, output(node.content));
+      }
+    },
+  }
+};