Post Text

1'use client';
2 
3import React from 'react';
4import ReactMarkdown, { Components } from 'react-markdown';
5import remarkGfm from 'remark-gfm';
6import { ParsedText } from '@/lib/utils/deso';
7import { cn } from '@/lib/utils/deso';
8import { useTruncation } from '@/hooks/useTruncation';
9import { Button } from '@/components/ui/button';
10 
11export interface PostTextProps {
12  text: string;
13  variant?: 'simple' | 'rich';
14  className?: string;
15  lineClamp?: number;
16  showMoreText?: string;
17  showLessText?: string;
18  shouldTruncate?: boolean;
19}
20 
21const markdownComponents: Components = {
22  h2: ({ node, ...props }) => <h2 {...props} />,
23  h3: ({ node, ...props }) => <h3 {...props} />,
24  ul: ({ node, ...props }) => <ul {...props} />,
25  ol: ({ node, ...props }) => <ol {...props} />,
26  a: ({ node, ...props }) => <a {...props} />,
27};
28 
29export const PostText: React.FC<PostTextProps> = ({
30  text,
31  variant = 'simple',
32  className,
33  lineClamp,
34  showMoreText = 'Show more',
35  showLessText = 'Show less',
36  shouldTruncate = false,
37}) => {
38  const { isExpanded, toggleExpanded, containerStyle } =
39    useTruncation({
40      text,
41      lineClamp,
42    });
43  
44  const content =
45    variant === 'rich' ? (
46      <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
47        {text}
48      </ReactMarkdown>
49    ) : (
50      <p className="whitespace-pre-wrap text-foreground">
51        <ParsedText text={text} />
52      </p>
53    );
54 
55  const proseClasses = cn(
56    'mt-2',
57    'prose',
58    'prose-pre:whitespace-pre-wrap',
59    'prose-h1:text-2xl',
60    'prose-h2:text-xl',
61    'prose-h3:text-lg',
62    'prose-h4:text-base',
63    'prose-h5:text-sm',
64    className);
65 
66  return (
67    <div className={cn('relative', className)}>
68      <div style={containerStyle} className={proseClasses}>{content}</div>
69      {shouldTruncate && (
70        <Button
71          variant="link"
72          className="p-0 h-auto text-sm mt-4 hover:underline text-blue-500 cursor-pointer"
73          onClick={toggleExpanded}
74        >
75          {isExpanded ? showLessText : showMoreText}
76        </Button>
77      )}
78    </div>
79  );
80};