67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import stl from './contentRender.module.css';
|
|
import Highlight from 'react-highlight'
|
|
|
|
const elType = {
|
|
PARAGRAPH: 'paragraph',
|
|
TEXT: 'text',
|
|
QUOTE: 'blockquote',
|
|
CODE_BLOCK: 'codeBlock',
|
|
MENTION: 'mention',
|
|
RULE: 'rule',
|
|
HARD_BREAK: 'hardBreak',
|
|
}
|
|
|
|
const renderElement = (el, provider) => {
|
|
if (provider === 'github')
|
|
return el
|
|
|
|
switch(el.type) {
|
|
case elType.PARAGRAPH:
|
|
return <p className={ stl.para }><ContentRender message={ el } /></p>;
|
|
case elType.QUOTE:
|
|
return <blockquote className={ stl.quote }><ContentRender message={ el } /></blockquote>;
|
|
case elType.CODE_BLOCK:
|
|
return <Highlight className={ stl.codeMirror } language={ el.attrs.language || '' }>{ codeRender(el.content)[0] }</Highlight>;
|
|
// return <CodeMirror
|
|
// className={ stl.codeMirror }
|
|
// value={ codeRender(el.content)[0] }
|
|
// options={{
|
|
// mode: el.attrs.language || '',
|
|
// theme: 'material',
|
|
// lineNumbers: true,
|
|
// readOnly: true,
|
|
// showCursorWhenSelecting: false,
|
|
// scroll: true
|
|
// }}
|
|
// />
|
|
case elType.MENTION:
|
|
return <span className={ stl.mention }>{ `@${el.attrs.text}` }</span>;
|
|
case elType.RULE:
|
|
return <hr className={ stl.rule } />
|
|
case elType.HARD_BREAK:
|
|
return <br />
|
|
case elType.RULE:
|
|
return <hr className={ stl.rule } />
|
|
case elType.TEXT:
|
|
return el.text;
|
|
}
|
|
return <ContentRender key={el.text} message={ el } />;
|
|
}
|
|
|
|
const codeRender = (content) => content.map(el => el.text);
|
|
|
|
const ContentRender = props => {
|
|
const { message, provider } = props;
|
|
return (
|
|
<React.Fragment>
|
|
{ provider === 'github' ? message :
|
|
message && message.content && message.content.map(el => (
|
|
<React.Fragment>{ renderElement(el, provider) }</React.Fragment>
|
|
))
|
|
}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default ContentRender;
|