JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<div id="root"/>

React

import React, { Component } from 'react';
import { render } from 'react-dom';

const MATCHERS = [
  { // Link
    pattern: /\[(.+?)\]\((.+?)\)/,
    key: 0,
    render: ([ text, url ]) => <a href={url} target="_blank" rel="noopener noreferrer">{text}</a>
  },
  { // Bold
    pattern: /__(.+?)__/,
    render: ([ text ]) => <strong>{text}</strong>
  },
  {
    pattern: /\*\*(.+?)\*\*/,
    render: ([ text ]) => <strong>{text}</strong>
  },
  { // Italic
    pattern: /_(.+?)_/,
    render: ([ text ]) => <em>{text}</em>
  },
];

function parse(source, node = <React.Fragment/>) {
  const tokenizer = new RegExp(MATCHERS.map(({ pattern }) => `(?:${pattern.source})`).join('|'), 'gim');
  let token = tokenizer.exec(source);
  while (token) {
    const [ value ] = token;
    const { pattern, key = 0 } = MATCHERS.find(({ pattern }) => pattern.test(value));
    const props = value.match(pattern).splice(1);
    const text = props[key];
    a.push(text);
    console.log(' - lastIndex', tokenizer.lastIndex);
    console.log(' - pattern:', pattern.toString());
    console.log(' - value:', value);
    console.log(' - props:', props);
    console.log(' - text:', text);
    token = tokenizer.exec(source);
  }
}

class Markdown extends React.Component {
  render() {
    parse(this.props.source);
    return (
      'f'
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Markdown source="some __bold text _italics_ and a [link](http://foo.bar)__ in it"/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));