matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: Add a naive greentext implementation

Browse Source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk
2025-02-23 18:33:11 +01:00
parent 4b80a84977
commit 9103148b58
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/pl-fe/src/components/parsed-content.tsx
View File

@ -62,12 +62,12 @@ const uniqueHashtagsWithCaseHandling = (hashtags: string[]) => {
};
function parseContent(props: IParsedContent): ReturnType<typeof domToReact>;
function parseContent(props: IParsedContent, extractHashtags: true): {
function parseContent(props: IParsedContent, extractHashtags: true, greentext: boolean): {
hashtags: Array<string>;
content: ReturnType<typeof domToReact>;
};
function parseContent({ html, mentions, hasQuote, emojis }: IParsedContent, extractHashtags = false) {
function parseContent({ html, mentions, hasQuote, emojis }: IParsedContent, extractHashtags = false, greentext = false) {
if (html.length === 0) {
return extractHashtags ? { content: null, hashtags: [] } : null;
}
@ -85,8 +85,11 @@ function parseContent({ html, mentions, hasQuote, emojis }: IParsedContent, extr
const hashtags: Array<string> = [];
const options: HTMLReactParserOptions = {
replace(domNode, index) {
replace(domNode) {
if (!(domNode instanceof Element)) {
if (greentext && domNode.data.startsWith('>')) {
return <span className='dark:text-accent-green text-green-600'>{domNode.data}</span>;
}
return;
}

4
packages/pl-fe/src/components/status-content.tsx
View File

@ -8,6 +8,7 @@ import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import Emojify from 'pl-fe/features/emoji/emojify';
import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container';
import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
import { useSettings } from 'pl-fe/hooks/use-settings';
import { useStatusTranslation } from 'pl-fe/queries/statuses/use-status-translation';
import { useStatusMetaStore } from 'pl-fe/stores/status-meta';
@ -82,6 +83,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
withMedia,
}) => {
const { displaySpoilers } = useSettings();
const { greentext } = usePlFeConfig();
const [collapsed, setCollapsed] = useState<boolean | null>(null);
const [onlyEmoji, setOnlyEmoji] = useState(false);
@ -144,7 +146,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
mentions: status.mentions,
hasQuote: !!status.quote_id,
emojis: status.emojis,
}, true), [content]);
}, true, greentext), [content]);
useEffect(() => {
setLineClamp(!spoilerNode.current || spoilerNode.current.clientHeight >= 96);