Skip to content

Commit e7fd5b2

Browse files
author
Rajat Saxena
committed
Comment formatting fix and consistent formatting for text editor
1 parent cc170b6 commit e7fd5b2

File tree

4 files changed

+92
-77
lines changed

4 files changed

+92
-77
lines changed

‎apps/web/components/community/comment-section.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export default function CommentSection({
3030
const [post, setPost] = useState<CommunityPost>();
3131
const { profile } = useContext(ProfileContext);
3232
const { toast } = useToast();
33+
const [isPosting, setIsPosting] = useState(false);
3334

3435
const scrollToBottom = () => {
3536
commentsEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -221,6 +222,7 @@ export default function CommentSection({
221222
.setIsGraphQLEndpoint(true)
222223
.build();
223224

225+
setIsPosting(true);
224226
try {
225227
const response = await fetch.exec();
226228
if (response.comment) {
@@ -244,6 +246,8 @@ export default function CommentSection({
244246
title: "Error",
245247
description: err.message,
246248
});
249+
} finally {
250+
setIsPosting(false);
247251
}
248252
};
249253

@@ -607,6 +611,7 @@ export default function CommentSection({
607611
)
608612
}
609613
onDelete={handleDeleteComment}
614+
isPosting={isPosting}
610615
/>
611616
))}
612617
<div ref={commentsEndRef} />
@@ -627,7 +632,9 @@ export default function CommentSection({
627632
value={content}
628633
onChange={(e) => setContent(e.target.value)}
629634
/>
630-
<Button onClick={handlePostComment}>Post Comment</Button>
635+
<Button onClick={handlePostComment} disabled={isPosting}>
636+
{isPosting ? "Posting..." : "Post Comment"}
637+
</Button>
631638
</div>
632639
)}
633640
</div>

‎apps/web/components/community/comment.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ interface CommentProps {
4747
onDelete: (comment: CommunityComment | CommunityCommentReply) => void;
4848
depth?: number;
4949
membership: Pick<Membership, "status" | "role" | "rejectionReason">;
50+
isPosting?: boolean;
5051
}
5152

5253
export function Comment({
@@ -57,6 +58,7 @@ export function Comment({
5758
onDelete,
5859
membership,
5960
depth = 0,
61+
isPosting = false,
6062
}: CommentProps) {
6163
const [isReplying, setIsReplying] = useState(false);
6264
const [replyContent, setReplyContent] = useState("");
@@ -238,7 +240,7 @@ export function Comment({
238240
</DropdownMenu>
239241
)}
240242
</div>
241-
<p className="text-sm mt-1">
243+
<p className="text-sm mt-1 whitespace-pre-wrap">
242244
{comment.deleted ? (
243245
<span className="italic text-gray-500">
244246
{DELETED_COMMENT_PLACEHOLDER}
@@ -302,8 +304,9 @@ export function Comment({
302304
setIsReplying(false);
303305
}
304306
}}
307+
disabled={isPosting}
305308
>
306-
Reply
309+
{isReplying ? "Replying..." : "Reply"}
307310
</Button>
308311
</div>
309312
</div>

‎apps/web/components/community/index.tsx‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1430,45 +1430,6 @@ export function CommunityForum({
14301430
{post.commentsCount}
14311431
</Button>
14321432
</div>
1433-
{/*
1434-
<div className="space-y-4 max-h-[300px] overflow-y-auto">
1435-
{post.comments.map((comment) => (
1436-
<Comment
1437-
key={comment.id}
1438-
comment={comment}
1439-
onLike={(commentId) =>
1440-
handleCommentLike(
1441-
post.id,
1442-
commentId,
1443-
)
1444-
}
1445-
onReply={(commentId, content) =>
1446-
handleCommentReply(
1447-
post.id,
1448-
commentId,
1449-
content,
1450-
)
1451-
}
1452-
/>
1453-
))}
1454-
<div ref={commentsEndRef} />
1455-
</div>
1456-
<Textarea
1457-
placeholder="Add a comment..."
1458-
value={newComments[post.postId] || ""}
1459-
onChange={(e) =>
1460-
handleNewCommentChange(
1461-
post.postId,
1462-
e.target.value,
1463-
)
1464-
}
1465-
/>
1466-
<Button
1467-
onClick={() => handlePostComment(post.postId)}
1468-
>
1469-
Post Comment
1470-
</Button>
1471-
*/}
14721433
<CommentSection
14731434
membership={membership}
14741435
postId={post.postId}

‎packages/components-library/src/styles.css‎

Lines changed: 79 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,92 +4,136 @@
44

55
.text-editor {
66
.remirror-theme {
7-
:is(a) {
8-
@apply underline;
9-
}
10-
11-
:is(ul, ol) {
12-
@apply mb-4;
13-
14-
:is(p) {
15-
@apply !mb-0;
16-
}
17-
}
18-
19-
:is(ul) {
20-
@apply list-disc ml-6;
21-
}
22-
23-
:is(ol) {
24-
@apply list-decimal ml-6;
25-
}
26-
27-
:is(ol) {
28-
@apply list-decimal;
29-
}
30-
7+
/* Base paragraph spacing for consistent rhythm */
318
:is(p) {
32-
@apply leading-loose mb-4;
9+
@apply leading-relaxed mb-6 text-base;
10+
line-height: 1.7;
3311
}
3412

13+
/* Consistent heading spacing with proper hierarchy */
3514
*:not(:first-child) ~ :is(h1, h2, h3, h4, h5, h6) {
36-
@apply mt-12;
15+
@apply mt-16 mb-6;
3716
}
3817

3918
:is(h1) {
40-
@apply text-4xl font-bold mb-4;
19+
@apply text-4xl font-bold mb-8 mt-16;
4120
color: inherit;
21+
line-height: 1.2;
4222
}
4323

4424
:is(h2) {
45-
@apply text-3xl font-bold mb-4;
25+
@apply text-3xl font-bold mb-6 mt-12;
4626
color: inherit;
27+
line-height: 1.3;
4728
}
4829

4930
:is(h3) {
50-
@apply text-2xl font-semibold mb-4;
31+
@apply text-2xl font-semibold mb-5 mt-10;
5132
color: inherit;
33+
line-height: 1.4;
5234
}
5335

5436
:is(h4) {
55-
@apply text-xl font-semibold mb-4;
37+
@apply text-xl font-semibold mb-4 mt-8;
5638
color: inherit;
39+
line-height: 1.4;
5740
}
5841

5942
:is(h5) {
60-
@apply text-lg font-semibold mb-4;
43+
@apply text-lg font-semibold mb-4 mt-6;
6144
color: inherit;
45+
line-height: 1.5;
6246
}
6347

6448
:is(h6) {
65-
@apply text-base font-semibold mb-4;
49+
@apply text-base font-semibold mb-3 mt-5;
6650
color: inherit;
51+
line-height: 1.5;
6752
}
6853

54+
/* List spacing for better readability */
55+
:is(ul, ol) {
56+
@apply mb-6 mt-2;
57+
58+
:is(p) {
59+
@apply !mb-0;
60+
}
61+
62+
:is(li) {
63+
@apply mb-3 leading-relaxed;
64+
line-height: 1.6;
65+
}
66+
}
67+
68+
:is(ul) {
69+
@apply list-disc ml-6;
70+
}
71+
72+
:is(ol) {
73+
@apply list-decimal ml-6;
74+
}
75+
76+
/* Remove duplicate rule */
77+
/* :is(ol) {
78+
@apply list-decimal;
79+
} */
80+
81+
/* Remove margin from last paragraph in divs */
6982
:is(div) > p:last-of-type {
7083
@apply mb-0;
7184
}
7285

86+
/* Code block styling */
7387
:is(pre) {
88+
@apply mb-6 mt-4 p-4 bg-gray-50 rounded-lg;
89+
7490
:is(code) {
7591
@apply !bg-transparent !px-0 !py-0 !rounded-none !border-none !text-base;
7692
}
7793
}
7894

95+
/* Blockquote with better spacing */
7996
:is(blockquote) {
80-
@apply italic border-l-4 border-slate-200 text-slate-500 pl-2;
97+
@apply italic border-l-4 border-slate-200 text-slate-500 pl-6 py-2 mb-6 mt-4;
98+
line-height: 1.6;
8199

82100
:is(p) {
83101
@apply !mb-0;
84102
}
85103
}
86104

105+
/* Inline code styling */
87106
:is(code) {
88-
@apply bg-gray-100 px-1 py-0.5 rounded border border-gray-200;
107+
@apply bg-gray-100 px-2 py-1 rounded border border-gray-200 text-sm;
89108
}
90109

110+
/* Image spacing for better visual flow */
91111
:is(img) {
92-
@apply !w-full !h-auto mb-4 !rounded mt-2 border;
112+
@apply !w-full !h-auto mb-8 mt-6;
113+
}
114+
115+
/* Link styling */
116+
:is(a) {
117+
@apply underline decoration-dotted decoration-2 underline-offset-2 transition-all duration-200 hover:decoration-solid;
118+
}
119+
120+
/* Better spacing for content sections */
121+
:is(div) {
122+
@apply mb-6;
123+
}
124+
125+
/* Table spacing */
126+
:is(table) {
127+
@apply mb-6 mt-4 w-full;
128+
}
129+
130+
:is(th, td) {
131+
@apply p-3 border border-gray-200;
132+
}
133+
134+
/* Horizontal rule spacing */
135+
:is(hr) {
136+
@apply my-8 border-gray-200;
93137
}
94138
}
95139
}

0 commit comments

Comments
 (0)