Howdy! Thanks for the great repo - we've found it really useful!

We're running into a bug whenever we have italic nested inside of bold or vice versa.

Any tips for approaching it?

Github markdown seems to work when attempting this:
bold and italic
italic and bold

Demo:

var React = require('react');
var ReactDOM = require('react-dom/server');
var MTRC = require('markdown-to-react-components');

console.log(ReactDOM.renderToStaticMarkup(
  React.createElement('div', {}, MTRC('> Demo').tree))
);

{
  "name": "mtrc-demo",
  "version": "1.0.0",
  "description": "",
  "main": "demo.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "markdown-to-react-components": "^0.1.4",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  }
}

This yields:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. See p > ... > p.
<div><blockquote><p><p>Demo</p></p></blockquote></div>

There shouldn't be a p inside p.

Current "react": "^0.13.3" doesn't work for 0.14. It might be a good idea to use a broader range like >=0.11.0 <1.0.0.

Hi there,

I'm trying to display alt text that comes from image tags in my markdown, but after passing them through MTRC, it returns null. I've confirmed they're coming in before processing the markdown... somehow the img function in the configuration just can't see it.

Not sure if anyone has reported this yet — I can send more information about the bug and my setup if needed be. Thanks!

Given that result is a global var, I believe it's possible for the output to get corrupted (call 2 overwriting call 1's result), if MTRC gets invoked multiple times simultaneously. It appears, though, that both MTRC and Marked are fully synchronous, so there's no opportunity for multi-tasking to kick in between exec call and its completion, but I had to examine Marked to be sure of that. A quick comment on this somewhere in the code or in the readme would be helpful. Thanks.

Something like the following appears to drop the video element from the rendered output.

# Title

Paragraph text

<video src="..." />

Blockquote and list have two problems working with nested elements.
If there are two line breaks, elements gets duplicated outside the blockquote;

List

1. Item

2. Item

The same occurs if other elements are nested, but the inner version returns as undefined;

> # Title
> Some text
>
> More Text

If i have this
config:

Markdown.configure({
	a: ({ children, href, title, target }) => {
		console.log(target);
                return <a target={target} href={href}>{children}</a>
	},
});

and having this in my code

<div>{ Markdown('[google](http://www.google.se)').tree }</div>

target is always "new" no matter what the markdown is

I know you're planning a rewrite - so not to add to the pile - but perhaps this adds motivation :)

If you have two lines of text, with no blank line separating them, and you add two or more trailing spaces to the end of the upper line - it throws a 'Expected a string' error and causes the rendering to crash.

I am trying to put code such as

class MonadObject {
  constructor(ob) {

    this.x = mobservable.makeReactive(ob);

    this.bnd = (func, ...args) => {
      return func(this.x, ...args);
    };

    this.ret = w => {
      Object.assign(this.x, w);
      return this;
    }
  }
}

on a web page. I don't know how to put the whole snippet in quotes, other than concatenating line by line. Here is what I see in the Chrome browser console log after I insert the code in a running app:

code: "class Monad {↵ constructor(z) {↵↵ this.x = mobservable.makeReactive(z);↵↵ this.bnd = (func, ...args) => {↵ return func(this.x(), ...args);↵ };↵↵ this.ret = a => {↵ this.x(a);↵ return this;↵ };↵ }↵};"

Firefox shows the same thing I get when I put the Chrome text in markdown, namely:

class MonadObject {  constructor(ob) {    this.x = mobservable.makeReactive(ob);    this.bnd = (func, ...args) => {      return func(this.x, ...args);    };    this.ret = w => {      Object.assign(this.x, w);      return this;    }  }}

I might soon have use for the full functionality of "markdown-to-react-components", but right now I don't need anything dynamic or interactive. I just want "this.state.content = ?" where ? never changes. I am trying "MTRC(x).tree, but I don't know how to substitute my "Monad" code for "x".

The examples show only single-line arguments for MTRC. If there is a way to use it with multiple lines of text, I think that would be of general interest. Or maybe I have a blind spot and everybody else already knows how to handle this.

Thanks to anybody who can point me in the right direction. This is great software and I feel confident that it is quite capable of handling my use case. But how?

Input:

var React = require('react');
var MTRC = require('markdown-to-react-components');

var img = '[![build status](https://secure.travis-ci.org/survivejs/react-component-boilerplate.png)](http://travis-ci.org/survivejs/react-component-boilerplate)';
var output = React.renderToStaticMarkup(React.createElement(
  'div',
  { key: 'documentation' },
  MTRC(img).tree
));

console.log(output);

Output:

<div><p><a href="http://travis-ci.org/survivejs/react-component-boilerplate" target="new">{{0}}</a></p></div>

Expected output:

<div><p><a href="http://travis-ci.org/survivejs/react-component-boilerplate" target="new"><img src="https://secure.travis-ci.org/survivejs/react-component-boilerplate.png" title="build status" /></a></p></div>

It seems like the library is missing some handling for this case.

I would prefer to use Prism with React code. It simply works better with JSX. It might be nice to make it possible to swap the highlighter.

It returns just code element. By the looks of it, CodeComponent does just

this.refs.code.getDOMNode().innerHTML = hljs.highlight(this.props.language, this.props.code).value;

on componentDidMount and componentDidUpdate.

There has to be some better way to deal with this.

Hey, thanks for the really cool library! I'm trying to integrate this into my app, but am hitting an issue and I'm not sure what's causing it.

When I run a markdown string through MRTC, I'm getting back a list of objects that are not react components. Basically, this is all I have so far:

const MTRC = require('markdown-to-react-components')
MTRC.configure({})

const md = "# Header text"
const components = MTRC(md)

console.log(components.tree)

...however, the .tree I'm getting back is an array of 'plain' objects, not React components.

"{
  "type": "p",
  "key": "1",
  "ref": null,
  "props": {
    "children": [
      "Header text",
    ]
  },
  "_owner": null,
  "_store": {}
}"

When I run the example from this repo, the objects returned from MTRC are react components (eg, with the $$typeof key and everything else).

The only thing I can think that might be relevant is that I'm using React 15, while this library is using React 0.14. It probably has something to with this.

Any tips or pointers for getting around this?