mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
refactor Post.jsx with memoization
This commit is contained in:
+81
-82
@@ -1,99 +1,98 @@
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Link } from 'react-router-dom';
|
||||
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
|
||||
import breaks from 'remark-breaks';
|
||||
|
||||
|
||||
const customSchema = {
|
||||
...defaultSchema,
|
||||
tagNames: [...defaultSchema.tagNames, 'div'],
|
||||
attributes: {
|
||||
...defaultSchema.attributes,
|
||||
div: ['className'],
|
||||
},
|
||||
};
|
||||
const Post = ({ content }) => {
|
||||
const doubleNewlineContent = useMemo(() => content?.replaceAll(/\n(?!\n)/g, '\n\n'), [content]);
|
||||
|
||||
const customSchema = useMemo(() => ({
|
||||
...defaultSchema,
|
||||
tagNames: [...defaultSchema.tagNames, 'div'],
|
||||
attributes: {
|
||||
...defaultSchema.attributes,
|
||||
div: ['className'],
|
||||
},
|
||||
}), []);
|
||||
|
||||
|
||||
const blockquoteToGreentext = () => (tree) => {
|
||||
tree.children.forEach((node) => {
|
||||
if (node.type === 'blockquote') {
|
||||
node.children.forEach((child) => {
|
||||
if (child.type === 'paragraph' && child.children.length > 0) {
|
||||
const prefix = {
|
||||
type: 'text',
|
||||
value: '>',
|
||||
};
|
||||
child.children.unshift(prefix);
|
||||
}
|
||||
});
|
||||
node.type = 'div';
|
||||
node.data = {
|
||||
hName: 'div',
|
||||
hProperties: {
|
||||
className: 'greentext',
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const createQuotelink = (children) => {
|
||||
const regexC = /(c\/[A-Za-z0-9]{46}|c\/[A-Za-z0-9]{12})/g;
|
||||
const regexP = /(p\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
|
||||
const regexU = /(u\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
|
||||
const regexPC = /(p\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth)\/c\/[A-Za-z0-9]{46})/g;
|
||||
|
||||
const regexArray = [regexU, regexPC, regexP, regexC];
|
||||
let parts = [children];
|
||||
|
||||
regexArray.forEach(regex => {
|
||||
parts = parts.flatMap((child, i) => {
|
||||
if (typeof child === 'string') {
|
||||
const newParts = [];
|
||||
let match;
|
||||
let lastIndex = 0;
|
||||
|
||||
while ((match = regex.exec(child)) !== null) {
|
||||
const matchedText = match[0];
|
||||
const index = match.index;
|
||||
|
||||
if (index > lastIndex) {
|
||||
newParts.push(child.substring(lastIndex, index));
|
||||
const blockquoteToGreentext = () => (tree) => {
|
||||
tree.children.forEach((node) => {
|
||||
if (node.type === 'blockquote') {
|
||||
node.children.forEach((child) => {
|
||||
if (child.type === 'paragraph' && child.children.length > 0) {
|
||||
const prefix = {
|
||||
type: 'text',
|
||||
value: '>',
|
||||
};
|
||||
child.children.unshift(prefix);
|
||||
}
|
||||
|
||||
newParts.push(
|
||||
<Link
|
||||
key={`link-${i}-${matchedText}`}
|
||||
className="quotelink"
|
||||
to={() => {}}
|
||||
>
|
||||
{matchedText}
|
||||
</Link>
|
||||
);
|
||||
|
||||
lastIndex = index + matchedText.length;
|
||||
}
|
||||
|
||||
if (lastIndex < child.length) {
|
||||
newParts.push(child.substring(lastIndex));
|
||||
}
|
||||
|
||||
return newParts;
|
||||
} else {
|
||||
return child;
|
||||
});
|
||||
node.type = 'div';
|
||||
node.data = {
|
||||
hName: 'div',
|
||||
hProperties: {
|
||||
className: 'greentext',
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return parts;
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const createQuotelink = (children) => {
|
||||
const regexC = /(c\/[A-Za-z0-9]{46}|c\/[A-Za-z0-9]{12})/g;
|
||||
const regexP = /(p\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
|
||||
const regexU = /(u\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
|
||||
const regexPC = /(p\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth)\/c\/[A-Za-z0-9]{46})/g;
|
||||
|
||||
const regexArray = [regexU, regexPC, regexP, regexC];
|
||||
let parts = [children];
|
||||
|
||||
regexArray.forEach(regex => {
|
||||
parts = parts.flatMap((child, i) => {
|
||||
if (typeof child === 'string') {
|
||||
const newParts = [];
|
||||
let match;
|
||||
let lastIndex = 0;
|
||||
|
||||
while ((match = regex.exec(child)) !== null) {
|
||||
const matchedText = match[0];
|
||||
const index = match.index;
|
||||
|
||||
if (index > lastIndex) {
|
||||
newParts.push(child.substring(lastIndex, index));
|
||||
}
|
||||
|
||||
newParts.push(
|
||||
<Link
|
||||
key={`link-${i}-${matchedText}`}
|
||||
className="quotelink"
|
||||
to={() => {}}
|
||||
>
|
||||
{matchedText}
|
||||
</Link>
|
||||
);
|
||||
|
||||
lastIndex = index + matchedText.length;
|
||||
}
|
||||
|
||||
if (lastIndex < child.length) {
|
||||
newParts.push(child.substring(lastIndex));
|
||||
}
|
||||
|
||||
return newParts;
|
||||
} else {
|
||||
return child;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return parts;
|
||||
};
|
||||
|
||||
const Post = ({ content }) => {
|
||||
const doubleNewlineContent = content?.replaceAll(/\n(?!\n)/g, '\n\n');
|
||||
|
||||
return (
|
||||
<ReactMarkdown
|
||||
|
||||
Reference in New Issue
Block a user