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
|
import { useMemo, useState } from "react";
import { marked } from "marked";
import classNames from "classnames";
import {
HttpTimelinePostInfo,
getHttpTimelineClient,
} from "~src/http/timeline";
import { useAutoUnsubscribePromise } from "~src/components/hooks";
import Skeleton from "~src/components/Skeleton";
import "./MarkdownPostView.css";
interface MarkdownPostViewProps {
post?: HttpTimelinePostInfo;
className?: string;
}
export default function MarkdownPostView({
post,
className,
}: MarkdownPostViewProps) {
const [markdown, setMarkdown] = useState<string | null>(null);
useAutoUnsubscribePromise(
() => {
if (post) {
return getHttpTimelineClient().getPostDataAsString(
post.timelineOwnerV2,
post.timelineNameV2,
post.id,
);
}
},
setMarkdown,
[post],
);
const markdownHtml = useMemo<string | null>(() => {
if (markdown == null) return null;
return marked.parse(markdown, {
mangle: false,
headerIds: false,
});
}, [markdown]);
return (
<div className={classNames("timeline-view-markdown-container", className)}>
{markdownHtml == null ? (
<Skeleton />
) : (
<div
className="timeline-view-markdown"
dangerouslySetInnerHTML={{ __html: markdownHtml }}
/>
)}
</div>
);
}
|
