Cache transformed body
This commit is contained in:
parent
f5a5fcf22a
commit
3fd5fd8568
@ -9,6 +9,7 @@ import LazyImage from "./LazyImage";
|
|||||||
import Hashtag from "./Hashtag";
|
import Hashtag from "./Hashtag";
|
||||||
|
|
||||||
import './Text.css'
|
import './Text.css'
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
function transformHttpLink(a) {
|
function transformHttpLink(a) {
|
||||||
try {
|
try {
|
||||||
@ -37,11 +38,11 @@ function transformHttpLink(a) {
|
|||||||
return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
||||||
}
|
}
|
||||||
} else if (tweetId) {
|
} else if (tweetId) {
|
||||||
return (
|
return (
|
||||||
<div className="tweet" key={tweetId}>
|
<div className="tweet" key={tweetId}>
|
||||||
<TwitterTweetEmbed tweetId={tweetId} />
|
<TwitterTweetEmbed tweetId={tweetId} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
} else if (youtubeId) {
|
} else if (youtubeId) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -141,16 +142,16 @@ function extractHashtags(fragments) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function transformLi({ body, tags, users }) {
|
function transformLi({ body, tags, users }) {
|
||||||
let fragments = transformText({ body, tags, users })
|
let fragments = transformText({ body, tags, users })
|
||||||
return <li>{fragments}</li>
|
return <li>{fragments}</li>
|
||||||
}
|
}
|
||||||
|
|
||||||
function transformParagraph({ body, tags, users }) {
|
function transformParagraph({ body, tags, users }) {
|
||||||
const fragments = transformText({ body, tags, users })
|
const fragments = transformText({ body, tags, users })
|
||||||
if (fragments.every(f => typeof f === 'string')) {
|
if (fragments.every(f => typeof f === 'string')) {
|
||||||
return <p>{fragments}</p>
|
return <p>{fragments}</p>
|
||||||
}
|
}
|
||||||
return <>{fragments}</>
|
return <>{fragments}</>
|
||||||
}
|
}
|
||||||
|
|
||||||
function transformText({ body, tags, users }) {
|
function transformText({ body, tags, users }) {
|
||||||
@ -162,11 +163,13 @@ function transformText({ body, tags, users }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Text({ content, tags, users }) {
|
export default function Text({ content, tags, users }) {
|
||||||
const components = {
|
const components = useMemo(() => {
|
||||||
p: (props) => transformParagraph({ body: props.children, tags, users }),
|
return {
|
||||||
a: (props) => transformHttpLink(props.href),
|
p: (props) => transformParagraph({ body: props.children, tags, users }),
|
||||||
li: (props) => transformLi({ body: props.children, tags, users }),
|
a: (props) => transformHttpLink(props.href),
|
||||||
}
|
li: (props) => transformLi({ body: props.children, tags, users }),
|
||||||
|
};
|
||||||
|
}, [content]);
|
||||||
return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown>
|
return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user