+
+
{crossedPost ? (
-
+ {
};
export const postClassName =
- 'font-source text-[16.5px] prose-h1:text-[26.4px] prose-h2:text-[23.1px] prose-h3:text-[19.8px] prose-h4:text-[18.1px] sm:text-[17.6px] sm:prose-h1:text-[28px] sm:prose-h2:text-[24.7px] sm:prose-h3:text-[22.1px] sm:prose-h4:text-[19.4px] lg:text-[19.2px] lg:prose-h1:text-[30.7px] lg:prose-h2:text-[28.9px] lg:prose-h3:text-[23px] lg:prose-h4:text-[21.1px] prose-p:mb-6 prose-p:mt-0 prose-img:cursor-pointer';
+ 'font-source text-[16.5px] prose-h1:text-[26.4px] prose-h2:text-[23.1px] prose-h3:text-[19.8px] prose-h4:text-[18.1px] sm:text-[17.6px] sm:prose-h1:text-[28px] sm:prose-h2:text-[24.7px] sm:prose-h3:text-[22.1px] sm:prose-h4:text-[19.4px] lg:text-[19.2px] lg:prose-h1:text-[30.7px] lg:prose-h2:text-[28.9px] lg:prose-h3:text-[23px] lg:prose-h4:text-[21.1px] prose-p:mb-6 prose-p:mt-0 prose-img:cursor-pointer prose-img:max-w-full prose-img:h-auto';
diff --git a/apps/blog/features/post-editor/reply-textbox.tsx b/apps/blog/features/post-editor/reply-textbox.tsx
index 510aee898846d25682c3b914992a55187a47f4eb..cb0063baace14ac4495edcc5c0d4b2891d794702 100644
--- a/apps/blog/features/post-editor/reply-textbox.tsx
+++ b/apps/blog/features/post-editor/reply-textbox.tsx
@@ -1,6 +1,6 @@
import { Link } from '@hive/ui';
import { Button } from '@ui/components/button';
-import { useEffect, useState, useRef } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from '@/blog/i18n/client';
import { useLocalStorage } from 'usehooks-ts';
import { Icons } from '@ui/components/icons';
@@ -19,6 +19,75 @@ import { useUserClient } from '@smart-signer/lib/auth/use-user-client';
const logger = getLogger('app');
+// Comment draft storage with expiration (1 month)
+const COMMENT_DRAFT_PREFIX = 'replyTo-';
+const COMMENT_DRAFT_EXPIRY_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+
+interface CommentDraft {
+ text: string;
+ expiresAt: number;
+}
+
+function saveCommentDraft(key: string, text: string): void {
+ const draft: CommentDraft = {
+ text,
+ expiresAt: Date.now() + COMMENT_DRAFT_EXPIRY_MS
+ };
+ localStorage.setItem(key, JSON.stringify(draft));
+}
+
+function loadCommentDraft(key: string): string | null {
+ const stored = localStorage.getItem(key);
+ if (!stored) return null;
+
+ try {
+ const parsed = JSON.parse(stored);
+ // Handle legacy format (just string)
+ if (typeof parsed === 'string') {
+ return parsed;
+ }
+ // New format with expiration
+ const draft = parsed as CommentDraft;
+ if (draft.expiresAt && Date.now() > draft.expiresAt) {
+ localStorage.removeItem(key);
+ return null;
+ }
+ return draft.text;
+ } catch {
+ localStorage.removeItem(key);
+ return null;
+ }
+}
+
+function cleanupExpiredCommentDrafts(): void {
+ const keysToRemove: string[] = [];
+
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+ if (key && key.startsWith(COMMENT_DRAFT_PREFIX)) {
+ const stored = localStorage.getItem(key);
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored);
+ // Check if it's the new format with expiration
+ if (typeof parsed === 'object' && parsed.expiresAt) {
+ if (Date.now() > parsed.expiresAt) {
+ keysToRemove.push(key);
+ }
+ }
+ // Legacy format without expiration - convert or remove if very old
+ // We can't know the age, so we leave them for now
+ } catch {
+ // Invalid JSON, remove it
+ keysToRemove.push(key);
+ }
+ }
+ }
+ }
+
+ keysToRemove.forEach((key) => localStorage.removeItem(key));
+}
+
export function ReplyTextbox({
onSetReply,
username,
@@ -39,34 +108,112 @@ export function ReplyTextbox({
discussionPermlink: string;
}) {
const { user } = useUserClient();
- const [storedPost, storePost, removePost] = useLocalStorage(
- `replyTo-/${username}/${permlink}-${user.username}`,
- ''
+ const storageKey = useMemo(
+ () => (user.username ? `replyTo-/${username}/${permlink}-${user.username}` : null),
+ [username, permlink, user.username]
);
+
+ // Memoize comment body to avoid recalculation on every render
+ const commentBody = useMemo(
+ () => (typeof comment === 'string' ? comment : (comment?.body ?? '')),
+ [comment]
+ );
+
const { manabarsData } = useManabars(user.username);
const [preferences] = useLocalStorage(
`user-preferences-${user.username}`,
DEFAULT_PREFERENCES
);
const { t } = useTranslation('common_blog');
- const [text, setText] = useState(
- storedPost ? storedPost : typeof comment === 'string' ? comment : comment.body ? comment.body : ''
- );
+
+ // Initialize with empty string to avoid hydration mismatch, then hydrate from localStorage
+ const [text, setText] = useState('');
+ const [isHydrated, setIsHydrated] = useState(false);
+
const commentMutation = useCommentMutation();
const updateCommentMutation = useUpdateCommentMutation();
+ const btnRef = useRef(null);
+ const debounceTimerRef = useRef(null);
+ // Hydrate text from localStorage or comment body after mount
+ // Also cleanup expired drafts on first mount
useEffect(() => {
- storePost(text);
- }, [text]);
- const btnRef = useRef(null);
+ if (!isHydrated && storageKey) {
+ // Cleanup expired drafts on component mount
+ cleanupExpiredCommentDrafts();
+
+ if (editMode) {
+ // In edit mode, always use current comment body
+ setText(commentBody);
+ } else {
+ // For new replies, check localStorage first
+ const storedText = loadCommentDraft(storageKey);
+ if (storedText) {
+ setText(storedText);
+ } else {
+ setText(commentBody);
+ }
+ }
+ setIsHydrated(true);
+ }
+ }, [isHydrated, editMode, commentBody, storageKey]);
+
+ // In edit mode, update text when comment changes (e.g., after save and re-edit)
+ useEffect(() => {
+ if (isHydrated && editMode) {
+ setText(commentBody);
+ }
+ }, [isHydrated, editMode, commentBody]);
+
+ // Debounced save to localStorage without causing re-renders
+ const saveToStorage = useCallback(
+ (value: string) => {
+ if (!storageKey) return;
+ if (debounceTimerRef.current) {
+ clearTimeout(debounceTimerRef.current);
+ }
+ debounceTimerRef.current = setTimeout(() => {
+ if (value) {
+ saveCommentDraft(storageKey, value);
+ } else {
+ localStorage.removeItem(storageKey);
+ }
+ }, 500);
+ },
+ [storageKey]
+ );
+
+ // Cleanup timer on unmount
+ useEffect(() => {
+ return () => {
+ if (debounceTimerRef.current) {
+ clearTimeout(debounceTimerRef.current);
+ }
+ };
+ }, []);
+
+ const removePost = useCallback(() => {
+ if (storageKey) {
+ localStorage.removeItem(storageKey);
+ }
+ }, [storageKey]);
const handleCancel = () => {
+ // Always remove the reply box state
localStorage.removeItem(storageId);
- if (text === '') return onSetReply(false);
+
+ if (text === '') {
+ // No text to save, just close and cleanup any existing draft
+ removePost();
+ onSetReply(false);
+ return;
+ }
+
+ // Ask user to confirm discarding their draft
const confirmed = confirm(t('post_content.footer.comment.exit_editor'));
if (confirmed) {
- onSetReply(false);
removePost();
+ onSetReply(false);
}
};
@@ -107,8 +254,8 @@ export function ReplyTextbox({
}
}
setText('');
- removePost();
- localStorage.removeItem(storageId);
+ removePost(); // Remove stored comment text
+ localStorage.removeItem(storageId); // Remove reply box state
onSetReply(false);
if (btnRef.current) {
btnRef.current.disabled = true;
@@ -135,12 +282,8 @@ export function ReplyTextbox({
{
- if (value === '') {
- setText(value);
- removePost();
- } else {
- setText(value);
- }
+ setText(value);
+ saveToStorage(value);
}}
persistedValue={text}
placeholder={t('post_content.footer.comment.reply')}
diff --git a/apps/blog/features/post-editor/select-image-item.tsx b/apps/blog/features/post-editor/select-image-item.tsx
index 623ca1a74074173a886c983862691aef36f0c306..d52f51ef7a7897b370115c54f3927afd766b69d2 100644
--- a/apps/blog/features/post-editor/select-image-item.tsx
+++ b/apps/blog/features/post-editor/select-image-item.tsx
@@ -1,5 +1,5 @@
import { Button } from '@ui/components';
-import { proxifyImageUrl } from '@ui/lib/old-profixy';
+import { proxifyImageSrc } from '@ui/lib/proxify-images';
import clsx from 'clsx';
import React, { useState } from 'react';
import { imagePicker } from './lib/utils';
@@ -25,7 +25,7 @@ const SelectImageItem: React.FC = ({ data, onChange, value
onClick={() => onChange(data)}
>
,)
setInvalidImages(true)}
loading="lazy"
diff --git a/apps/blog/features/post-rendering/comment-list-item.tsx b/apps/blog/features/post-rendering/comment-list-item.tsx
index eab3ef85ac1f92ccff0bcd5c1ef069271b91b14e..1a34c545f6c43912b2a1bc4055a51a2d178398d9 100644
--- a/apps/blog/features/post-rendering/comment-list-item.tsx
+++ b/apps/blog/features/post-rendering/comment-list-item.tsx
@@ -7,14 +7,13 @@ import { cn } from '@hive/ui/lib/utils';
import { Link } from '@hive/ui';
import { Separator } from '@ui/components/separator';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@ui/components/accordion';
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
import DetailsCardVoters from '@/blog/features/post-rendering/details-card-voters';
import { ReplyTextbox } from '../post-editor/reply-textbox';
import DetailsCardHover from '../list-of-posts/details-card-hover';
import { IFollowList, Entry } from '@transaction/lib/extended-hive.chain';
import clsx from 'clsx';
import { Badge } from '@ui/components/badge';
-import { useLocalStorage } from 'usehooks-ts';
import { useUserClient } from '@smart-signer/lib/auth/use-user-client';
import DialogLogin from '../../components/dialog-login';
@@ -50,9 +49,9 @@ interface CommentListProps {
children?: ReactNode;
}
export const commentClassName =
- 'font-sanspro text-[12.5px] prose-h1:text-[20px] prose-h2:text-[17.5px] prose-h4:text-[13.7px] sm:text-[13.4px] sm:prose-h1:text-[21.5px] sm:prose-h2:text-[18.7px] sm:prose-h3:text-[16px] sm:prose-h4:text-[14.7px] lg:text-[14.6px] lg:prose-h1:text-[23.3px] lg:prose-h2:text-[20.4px] lg:prose-h3:text-[17.5px] lg:prose-h4:text-[16px] prose-h3:text-[15px] prose-p:mb-[9.6px] prose-p:mt-[1.6px] last:prose-p:mb-[3.2px] prose-img:max-w-[400px] prose-img:max-h-[400px]';
+ 'font-sanspro text-[12.5px] prose-h1:text-[20px] prose-h2:text-[17.5px] prose-h4:text-[13.7px] sm:text-[13.4px] sm:prose-h1:text-[21.5px] sm:prose-h2:text-[18.7px] sm:prose-h3:text-[16px] sm:prose-h4:text-[14.7px] lg:text-[14.6px] lg:prose-h1:text-[23.3px] lg:prose-h2:text-[20.4px] lg:prose-h3:text-[17.5px] lg:prose-h4:text-[16px] prose-h3:text-[15px] prose-p:mb-[9.6px] prose-p:mt-[1.6px] last:prose-p:mb-[3.2px] prose-img:max-w-full prose-img:h-auto prose-img:max-h-[400px]';
-const CommentListItem = ({
+const CommentListItem = memo(function CommentListItem({
permissionToMute,
comment,
parent_depth,
@@ -63,7 +62,7 @@ const CommentListItem = ({
discussionPermlink,
onCommnentLinkClick,
children
-}: CommentListProps) => {
+}: CommentListProps) {
const { t } = useTranslation('common_blog');
const { user } = useUserClient();
const ref = useRef(null);
@@ -73,21 +72,56 @@ const CommentListItem = ({
const [openState, setOpenState] = useState(comment.stats?.gray && hiddenComment ? '' : 'item-1');
const [tempraryHidden, setTemporaryHidden] = useState(false);
const commentId = `@${comment.author}/${comment.permlink}`;
- const storageId = `replybox-/${comment.author}/${comment.permlink}-${user.username}`;
const [edit, setEdit] = useState(false);
- const [storedBox, storeBox, removeBox] = useLocalStorage(storageId, false);
- const [reply, setReply] = useState(storedBox !== undefined ? storedBox : false);
+ const [reply, setReplyState] = useState(false);
+
+ // Build storageId only when user is logged in
+ const storageId = user.isLoggedIn
+ ? `replybox-/${comment.author}/${comment.permlink}-${user.username}`
+ : null;
+
+ // Load reply state from localStorage on mount (with expiration check)
+ useEffect(() => {
+ if (!storageId) return;
+
+ const stored = localStorage.getItem(storageId);
+ if (stored) {
+ try {
+ const data = JSON.parse(stored);
+ // Check expiration (30 days)
+ if (data.expiresAt && Date.now() < data.expiresAt) {
+ setReplyState(true);
+ } else {
+ // Expired, remove it
+ localStorage.removeItem(storageId);
+ }
+ } catch {
+ // Legacy format or invalid - remove it
+ localStorage.removeItem(storageId);
+ }
+ }
+ }, [storageId]);
+
+ const setReply = (value: boolean | ((prev: boolean) => boolean)) => {
+ setReplyState((prev) => {
+ const newValue = typeof value === 'function' ? value(prev) : value;
+ if (storageId) {
+ if (newValue) {
+ // Save with 30-day expiration
+ const data = { expiresAt: Date.now() + 30 * 24 * 60 * 60 * 1000 };
+ localStorage.setItem(storageId, JSON.stringify(data));
+ } else {
+ localStorage.removeItem(storageId);
+ }
+ }
+ return newValue;
+ });
+ };
const userFromDMCA = dmcaUserList.some((e) => e === comment.author);
const legalBlockedUser = userIllegalContent.some((e) => e === comment.author);
const userFromGDPR = gdprUserList.some((e) => e === comment.author);
const parentFromGDPR = gdprUserList.some((e) => e === comment.parent_author);
- useEffect(() => {
- if (reply) {
- storeBox(reply);
- }
- }, [reply]);
-
useEffect(() => {
setOpenState(comment.stats?.gray && hiddenComment ? '' : 'item-1');
setTemporaryHidden(comment.stats?.gray ? true : false);
@@ -117,10 +151,10 @@ const CommentListItem = ({
return (
<>
{currentDepth < 8 ? (
-
-
{t('global.unavailable_for_legal_reasons')}
) : copyRightCheck || userFromDMCA ? (
{t('post_content.body.copyright')}
- ) : mutedPost ? (
- <>
-
- {t('post_content.body.content_were_hidden')}
-
-
-
) : (
-
{!commentSite ? (
@@ -792,85 +790,16 @@ const PostContent = () => {
) : null}
{!!postData && paginatedDiscussionState ? (
-
-
+
- {t('select_sort.sort_comments.sort')}
-
-
-
- {Array.from({ length: paginatedDiscussionState.totalPages }, (_, i) => i + 1).map(
- (pageNum) => {
- // Show only a few pages around the current page
- const showPage =
- pageNum === 1 ||
- pageNum === paginatedDiscussionState.totalPages ||
- (pageNum >= paginatedDiscussionState.currentPage - 2 &&
- pageNum <= paginatedDiscussionState.currentPage + 2);
-
- if (!showPage) {
- // Show ellipses
- if (
- pageNum === paginatedDiscussionState.currentPage - 3 ||
- pageNum === paginatedDiscussionState.currentPage + 3
- ) {
- return (
-
- ...
-
- );
- }
- return null;
- }
-
- return (
-
- );
- }
- )}
-
-
- )}
-
+
+
![{`${comment.author}]()
-
-
+
+
+
{legalBlockedUser ? (
{t('global.unavailable_for_legal_reasons')}
) : userFromDMCA ? (
@@ -320,7 +354,7 @@ const CommentListItem = ({
username={comment.parent_author}
permlink={comment.permlink}
parentPermlink={comment.parent_permlink}
- storageId={storageId}
+ storageId={storageId!}
comment={comment}
discussionPermlink={discussionPermlink}
/>
@@ -379,9 +413,7 @@ const CommentListItem = ({
{user.isLoggedIn ? (