External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added markdown and greentext

Browse Source
This commit is contained in:
plebbitor
2023-03-29 13:37:36 +02:00
parent 6c7de6d69b
commit 281f87d54b
7 changed files with 76 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post.jsx
+44
View File
@@ -0,0 +1,44 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { visit } from 'unist-util-visit';
import DOMPurify from 'dompurify';
const blockquoteToGreentext = () => (tree) => {
visit(tree, 'blockquote', (node) => {
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 Post = ({ content }) => {
const sanitizedContent = DOMPurify.sanitize(content);
return (
<ReactMarkdown
children={sanitizedContent}
remarkPlugins={[blockquoteToGreentext]}
components={{
img: () => null,
video: () => null,
source: () => null,
gif: () => null,
}}
/>
);
};
export default Post;
src/components/views/Board.jsx
+14 -13
View File
@@ -8,6 +8,7 @@ import useAppStore from '../../useAppStore';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
import CaptchaModal from '../CaptchaModal';
import ImageBanner from '../ImageBanner';
import Post from '../Post';
import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
import SettingsModal from '../SettingsModal';
@@ -378,7 +379,7 @@ const Board = () => {
loadMore={tryLoadMore}
hasMore={hasMore}
>
{feed.map((thread) => {
{selectedFeed.map((thread) => {
const { replies: { pages: { topAll: { comments } } } } = thread;
const { renderedComments, omittedCount } = renderComments(comments);
const commentMediaInfo = getCommentMediaInfo(thread);
@@ -495,10 +496,10 @@ const Board = () => {
</div>
</span>
{thread.content ? (
thread.content.length > 2000 ?
thread.content.length > 1000 ?
<Fragment key={`fragment5-${thread.cid}`}>
<blockquote key={`bq-${thread.cid}`}>
{thread.content.slice(0, 2000)}
<Post content={thread.content.slice(0, 1000)} key={`post-${thread.cid}`} />
<span key={`ttl-s-${thread.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
Post too long.&nbsp;
@@ -507,7 +508,7 @@ const Board = () => {
</blockquote>
</Fragment>
: <blockquote key={`bq-${thread.cid}`}>
{thread.content}
<Post content={thread.content} key={`post-${thread.cid}`} />
</blockquote>)
: null}
</div>
@@ -586,13 +587,13 @@ const Board = () => {
</div>
</div>
{reply.content ? (
reply.content.length > 1000 ?
reply.content.length > 500 ?
<Fragment key={`fragment8-${reply.cid}`}>
<blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={handleVoidClick}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content.slice(0, 1000)}
<Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} />
<span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
@@ -604,7 +605,7 @@ const Board = () => {
<Link to={handleVoidClick} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content}
<Post content={reply.content} key={`post-${reply.cid}`} />
</blockquote>)
: null}
</div>
@@ -705,10 +706,10 @@ const Board = () => {
) : null
) : null}
{thread.content ? (
thread.content.length > 1500 ?
thread.content.length > 500 ?
<Fragment key={`fragment12-${thread.cid}`}>
<blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
{thread.content.slice(0, 1500)}
<Post content={thread.content.slice(0, 500)} key={`post-mobile-${thread.cid}`} />
<span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp;
@@ -717,7 +718,7 @@ const Board = () => {
</blockquote>
</Fragment>
: <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
{thread.content}
<Post content={thread.content} key={`post-mobile-${thread.cid}`} />
</blockquote>)
: null}
</div>
@@ -773,13 +774,13 @@ const Board = () => {
</span>
</div>
{reply.content ? (
reply.content.length > 1000 ?
reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={handleVoidClick}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content.slice(0, 1000)}
<Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} />
<span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
@@ -791,7 +792,7 @@ const Board = () => {
<Link to={handleVoidClick} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content}
<Post content={reply.content} key={`post-mobile-${reply.cid}`} />
</blockquote>)
: null}
</div>
src/components/views/Catalog.jsx
+3 -1
View File
@@ -10,6 +10,7 @@ import { TopBar } from './styles/Thread.styled';
import CaptchaModal from '../CaptchaModal';
import CatalogLoader from '../CatalogLoader';
import ImageBanner from '../ImageBanner';
import Post from '../Post';
import SettingsModal from '../SettingsModal';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleStyleChange from '../../utils/handleStyleChange';
@@ -385,7 +386,8 @@ const Catalog = () => {
</div>
<div key={`t-${thread.cid}`} className="teaser">
<b key={`b2-${thread.cid}`}>{thread.title ? `${thread.title}` : null}</b>
{thread.content ? `: ${thread.content}` : null}
{thread.content && `: `}
{thread.content && <Post content={thread.content} key="post"/>}
</div>
</div>
</Link>
src/components/views/Thread.jsx
+6 -5
View File
@@ -8,6 +8,7 @@ import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm }
import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
import CaptchaModal from '../CaptchaModal';
import ImageBanner from '../ImageBanner';
import Post from '../Post';
import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
import SettingsModal from '../SettingsModal';
@@ -503,8 +504,8 @@ const Thread = () => {
}
</div>
</span>
<blockquote>
{comment.content}
<blockquote key={`blockquote-${comment.cid}`}>
<Post content={comment.content} key={`post-${comment.cid}`} />
</blockquote>
</div>
</div>
@@ -580,7 +581,7 @@ const Thread = () => {
onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content}
<Post content={reply.content} key={`post-${reply.cid}`} />
</blockquote>
</div>
</div>
@@ -682,7 +683,7 @@ const Thread = () => {
<blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
{comment.content ? (
<>
{comment.content}
<Post content={comment.content} key={`post-mobile-${comment.cid}`} />
</>
) : null}
</blockquote>
@@ -743,7 +744,7 @@ const Thread = () => {
onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
{reply.content}
<Post content={reply.content} key={`post-mobile-${reply.cid}`} />
</blockquote>
</div>
</div>
src/components/views/styles/Board.styled.jsx
+7 -18
View File
@@ -1691,7 +1691,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #789922;
}
}
@@ -1805,7 +1804,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #789922;
}
}
@@ -1922,7 +1920,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #789922;
}
}
@@ -2035,7 +2032,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #789922;
}
}
@@ -2159,7 +2155,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #b5bd68;
}
}
@@ -2277,7 +2272,6 @@ export const BoardForm = styled.div`
}
p:first-of-type::before {
content: '>';
color: #789922;
}
}
@@ -2607,8 +2601,7 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #789922;
}
@@ -2765,8 +2758,7 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #789922;
}
@@ -2925,8 +2917,7 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #789922;
}
@@ -3089,8 +3080,7 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #789922;
}
@@ -3246,8 +3236,7 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #b5bd68;
}
@@ -3408,8 +3397,8 @@ export const BoardForm = styled.div`
font-weight: 700;
}
blockquote > p:first-of-type::before {
content: '>';
.greentext {
color: #789922;
}