All files DOMMarkdown.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
 
 
 
1x
16x
 
56x
 
 
 
1x
 
1x
 
 
12x
 
 
 
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
1x
 
1x
 
 
 
13x
 
 
 
1x
 
 
 
6x
 
 
 
2x
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
1x
 
 
 
 
1x
 
14x
 
 
 
 
 
 
 
14x
 
 
14x
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { PureComponent } from 'react';
import mapValues from 'lodash.mapvalues';
import Markdown from './Markdown';
 
const pure = render =>
  class extends PureComponent {
    render() {
      return render(this.props);
    }
  };
 
const LineBreak = () => <br />;
 
export const DOMComponents = mapValues(
  {
    Text: ({ children }) =>
      <span>
        {children}
      </span>,
    LineBreak,
    SoftBreak: LineBreak,
    Em: ({ children }) =>
      <em>
        {children}
      </em>,
    Strong: ({ children }) =>
      <strong>
        {children}
      </strong>,
    Link: ({ title, destination, children }) =>
      <a title={title} href={destination}>
        {children}
      </a>,
    Image: ({ title, destination }) => <img src={destination} title={title} />,
    Code: ({ children }) =>
      <code>
        {children}
      </code>,
    Paragraph: ({ children }) =>
      <p>
        {children}
      </p>,
    BlockQuote: ({ children }) =>
      <blockquote>
        {children}
      </blockquote>,
    Item: ({ children }) =>
      <li>
        {children}
      </li>,
    List: ({ children, listType, listStart }) => {
      switch (listType) {
        case 'ordered': {
          return (
            <ol start={listStart}>
              {children}
            </ol>
          );
        }
        default: {
          return (
            <ul>
              {children}
            </ul>
          );
        }
      }
    },
    Heading: ({ children, level }) => {
      const Heading = 'h' + level;
      return (
        <Heading>
          {children}
        </Heading>
      );
    },
    CodeBlock: ({ children, info }) =>
      <pre>
        <code>
          {children}
        </code>
      </pre>,
    ThematicBreak: () => <hr />,
    Document: ({ className, children }) =>
      <div className={className}>
        {children}
      </div>,
  },
  pure,
);
 
class DOMMarkdown extends PureComponent {
  Document = props => <DOMComponents.Document {...props} className={this.props.className} />;
 
  render() {
    return (
      <Markdown
        {...this.props}
        components={{
          ...DOMComponents,
          Document: this.Document,
        }}
      />
    );
  }
}
 
export default DOMMarkdown;