Succinct way to filter/reduce on custom elements

[iamdustan]

I’m looking for a succinct way to provide custom extensions to default markdown elements and easily pass back off to the original implementation.

For example, I would like to hijack all links that look like [gist#username/1234-id](https://gist.github.com/username/1234-id.js) to render my custom Gist component and seamlessly pass everyone else through. I’ve attached the code from a current project for an example. It’s a bit murky to do this filtering inside of render and then pass back in to the original implementation where buildValues is going to be called again.

Do you have any thoughts on what this might look like?

/* @flow */

import React, {Component} from 'react';
import Markdown from 'markdown-react';
import Gist from 'Gist';

var defaultComponents = Markdown.getDefaultReactComponents();
var ourComponents = Markdown.getDefaultReactComponents();

var OriginalLink = Markdown.EL.LINK;

class MarkdownLink extends Component {
  render(): ReactElement {
    var children = this.props.builder.buildValues(this.props.component.values);
    if (/^gist#/.test(children[0])) {
      return <Gist id={children[0].split('gist#')[1]} />
    }

    console.log(this.props, OriginalLink);
    return <OriginalLink {...this.props} />
  }
}

// inject our custom builder elements
components[Markdown.EL.LINK] = MarkdownLink;

var Builder = new Markdown.ReactBuilder(components);

export default function markdown(text) {
  var ast = Markdown.buildMarkdownAST(text);
  return React.renderToStaticMarkup(Builder.build(ast));
}