mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
+65
-12
@@ -1,20 +1,73 @@
|
||||
import React from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Link } from 'react-router-dom';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
const Post = ({ content }) => {
|
||||
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 = (handlequoteclick, comment, children) => {
|
||||
const text = children.map((child) => (typeof child === 'string' ? child : child.props.children)).join('');
|
||||
const regex = /(\s|^)(c\/[A-Za-z0-9]{12}|c\/[A-Za-z0-9]{45})(?=\s|$)/g;
|
||||
const parts = text.split(regex);
|
||||
|
||||
return parts.flatMap((part, i) => {
|
||||
if (regex.test(part)) {
|
||||
return [
|
||||
<Link
|
||||
key={`link-${i}`}
|
||||
className="quotelink"
|
||||
to=""
|
||||
onClick={handlequoteclick}
|
||||
>
|
||||
{part.trim()}
|
||||
</Link>,
|
||||
];
|
||||
} else {
|
||||
return [part];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const Post = ({ content, handlequoteclick, comment }) => {
|
||||
const sanitizedContent = DOMPurify.sanitize(content);
|
||||
|
||||
const lines = sanitizedContent.split(/(?:\r\n|\r|\n)/);
|
||||
const greentextLines = lines.map((line, index) => {
|
||||
if (line.startsWith('>')) {
|
||||
return <div className="greentext" key={`gt-${index}`}>{line}</div>;
|
||||
} else if (line === '') {
|
||||
return <div key={`empty-${index}`}> </div>;
|
||||
}
|
||||
return <div key={`line-${index}`}>{line}</div>;
|
||||
});
|
||||
|
||||
return <>{greentextLines}</>;
|
||||
return (
|
||||
<ReactMarkdown
|
||||
children={sanitizedContent}
|
||||
remarkPlugins={[blockquoteToGreentext]}
|
||||
components={{
|
||||
img: () => null,
|
||||
video: () => null,
|
||||
source: () => null,
|
||||
gif: () => null,
|
||||
p: ({ children }) => (
|
||||
<p>{createQuotelink(handlequoteclick, comment, children)}</p>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Post;
|
||||
Reference in New Issue
Block a user