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
 
 
 
1x
 
1x
 
9x
 
 
 
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
1x
 
1x
 
 
 
10x
 
 
 
1x
 
 
 
3x
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
1x
 
 
 
 
1x
 
13x
 
 
 
 
 
13x
 
 
13x
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {Component} from 'react';
import Markdown from './Markdown';
 
const LineBreak = () => <br />;
 
export const DOMComponents = {
  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>,
};
 
class DOMMarkdown extends Component {
  Document = props => <DOMComponents.Document {...props} className={this.props.className} />;
 
  render() {
    return (
      <Markdown
        {...this.props}
        components={{
          ...DOMComponents,
          Document: this.Document,
        }}
      />
    );
  }
}
 
export default DOMMarkdown;