2021-11-26 20:55:53 +00:00
|
|
|
/*
|
|
|
|
* Renders Markdown that got parsed by core/MarkdownParser
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
|
2022-02-08 21:21:50 +00:00
|
|
|
import MdLink from '../../src/components/MdLink';
|
|
|
|
import MdMention from './MdMention';
|
|
|
|
|
|
|
|
export const MarkdownParagraph = React.memo(({ pArray }) => pArray.map((part) => {
|
2021-11-27 18:35:43 +00:00
|
|
|
if (!Array.isArray(part)) {
|
|
|
|
return part;
|
2021-11-27 04:29:35 +00:00
|
|
|
}
|
2021-11-27 18:35:43 +00:00
|
|
|
const type = part[0];
|
|
|
|
switch (type) {
|
|
|
|
case 'c':
|
|
|
|
return (<code>{part[1]}</code>);
|
|
|
|
case '*':
|
|
|
|
return (
|
|
|
|
<strong>
|
2022-02-08 21:21:50 +00:00
|
|
|
<MarkdownParagraph pArray={part[1]} />
|
2021-11-27 18:35:43 +00:00
|
|
|
</strong>
|
|
|
|
);
|
|
|
|
case '~':
|
|
|
|
return (
|
|
|
|
<s>
|
2022-02-08 21:21:50 +00:00
|
|
|
<MarkdownParagraph pArray={part[1]} />
|
2021-11-27 18:35:43 +00:00
|
|
|
</s>
|
|
|
|
);
|
|
|
|
case '+':
|
|
|
|
return (
|
|
|
|
<em>
|
2022-02-08 21:21:50 +00:00
|
|
|
<MarkdownParagraph pArray={part[1]} />
|
2021-11-27 18:35:43 +00:00
|
|
|
</em>
|
|
|
|
);
|
|
|
|
case '_':
|
|
|
|
return (
|
|
|
|
<u>
|
2022-02-08 21:21:50 +00:00
|
|
|
<MarkdownParagraph pArray={part[1]} />
|
2021-11-27 18:35:43 +00:00
|
|
|
</u>
|
|
|
|
);
|
2022-02-08 21:21:50 +00:00
|
|
|
case 'img':
|
2021-11-29 14:46:33 +00:00
|
|
|
case 'l': {
|
2021-11-29 04:03:46 +00:00
|
|
|
return (
|
2022-02-08 21:21:50 +00:00
|
|
|
<MdLink href={part[2]} title={part[1]} />
|
2021-11-29 04:03:46 +00:00
|
|
|
);
|
2021-11-29 14:46:33 +00:00
|
|
|
}
|
2022-02-08 21:21:50 +00:00
|
|
|
case '@': {
|
2021-11-29 14:46:33 +00:00
|
|
|
return (
|
2022-02-08 21:21:50 +00:00
|
|
|
<MdMention uid={part[2]} name={part[1]} />
|
2021-11-29 14:46:33 +00:00
|
|
|
);
|
|
|
|
}
|
2021-11-27 18:35:43 +00:00
|
|
|
default:
|
|
|
|
return type;
|
|
|
|
}
|
2022-02-08 21:21:50 +00:00
|
|
|
}));
|
2021-11-27 04:29:35 +00:00
|
|
|
|
2021-11-29 14:46:33 +00:00
|
|
|
const Markdown = ({ mdArray }) => mdArray.map((part) => {
|
2021-11-26 20:55:53 +00:00
|
|
|
const type = part[0];
|
|
|
|
switch (type) {
|
|
|
|
/* Heading */
|
|
|
|
case 'a': {
|
|
|
|
const level = Number(part[1]);
|
|
|
|
const heading = part[2];
|
|
|
|
const children = part[3];
|
|
|
|
let headingElem = [];
|
|
|
|
switch (level) {
|
|
|
|
case 1:
|
|
|
|
headingElem = <h1>{heading}</h1>;
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
headingElem = <h2>{heading}</h2>;
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
headingElem = <h3>{heading}</h3>;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
headingElem = <h4>{heading}</h4>;
|
|
|
|
}
|
|
|
|
return [
|
|
|
|
headingElem,
|
|
|
|
<section>
|
|
|
|
<Markdown mdArray={children} />
|
2022-02-08 21:21:50 +00:00
|
|
|
</section>,
|
2021-11-26 20:55:53 +00:00
|
|
|
];
|
|
|
|
}
|
|
|
|
/* Paragraph */
|
|
|
|
case 'p': {
|
2021-11-27 18:35:43 +00:00
|
|
|
return (
|
|
|
|
<p>
|
|
|
|
<MarkdownParagraph pArray={part[1]} />
|
|
|
|
</p>
|
|
|
|
);
|
2021-11-26 20:55:53 +00:00
|
|
|
}
|
|
|
|
/* Code Block */
|
|
|
|
case 'cb': {
|
|
|
|
const content = part[1];
|
|
|
|
return <pre>{content}</pre>;
|
|
|
|
}
|
|
|
|
case '>':
|
|
|
|
case '<': {
|
|
|
|
const children = part[1];
|
|
|
|
return (
|
|
|
|
<blockquote
|
|
|
|
className={(type === '>') ? 'gt' : 'rt'}
|
|
|
|
>
|
|
|
|
<Markdown mdArray={children} />
|
|
|
|
</blockquote>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
case 'ul': {
|
|
|
|
const children = part[1];
|
|
|
|
return (
|
|
|
|
<ul>
|
|
|
|
<Markdown mdArray={children} />
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
2021-11-27 02:10:30 +00:00
|
|
|
case 'ol': {
|
|
|
|
const children = part[1];
|
|
|
|
return (
|
|
|
|
<ol>
|
|
|
|
<Markdown mdArray={children} />
|
|
|
|
</ol>
|
|
|
|
);
|
|
|
|
}
|
2021-11-26 20:55:53 +00:00
|
|
|
case '-': {
|
|
|
|
const children = part[1];
|
|
|
|
return (
|
|
|
|
<li>
|
|
|
|
<Markdown mdArray={children} />
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
default:
|
2021-11-27 04:29:35 +00:00
|
|
|
return part[0];
|
2021-11-26 20:55:53 +00:00
|
|
|
}
|
2021-11-29 14:46:33 +00:00
|
|
|
});
|
2021-11-26 20:55:53 +00:00
|
|
|
|
|
|
|
const MarkdownArticle = ({ mdArray }) => (
|
|
|
|
<article>
|
|
|
|
<Markdown mdArray={mdArray} />
|
|
|
|
</article>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default React.memo(MarkdownArticle);
|