diff --git a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
index fd6fcc41..01ea9f93 100644
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/comments/task-comments.tsx
@@ -18,6 +18,7 @@ import { colors } from '@/styles/colors';
import AttachmentsGrid from '../attachments/attachments-grid';
import { TFunction } from 'i18next';
import SingleAvatar from '@/components/common/single-avatar/single-avatar';
+import { sanitizeHtml } from '@/utils/sanitizeInput';
// Helper function to format date for time separators
const formatDateForSeparator = (date: string) => {
@@ -56,6 +57,32 @@ const processMentions = (content: string) => {
return content.replace(/@(\w+)/g, '@$1');
};
+// Utility to linkify URLs in text
+const linkify = (text: string) => {
+ if (!text) return '';
+ // Regex to match URLs (http, https, www)
+ return text.replace(/(https?:\/\/[^\s]+|www\.[^\s]+)/g, (url) => {
+ let href = url;
+ if (!href.startsWith('http')) {
+ href = 'http://' + href;
+ }
+ return `${url}`;
+ });
+};
+
+// Helper function to process mentions and links in content
+const processContent = (content: string) => {
+ if (!content) return '';
+ // First, linkify URLs
+ let processed = linkify(content);
+ // Then, process mentions (if not already processed)
+ if (!hasProcessedMentions(processed)) {
+ processed = processMentions(processed);
+ }
+ // Sanitize the final HTML (allowing and )
+ return sanitizeHtml(processed);
+};
+
const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {
const [loading, setLoading] = useState(true);
const [comments, setComments] = useState([]);
@@ -80,10 +107,10 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {
return dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1;
});
- // Process mentions in content
+ // Process content (mentions and links)
sortedComments.forEach(comment => {
- if (comment.content && !hasProcessedMentions(comment.content)) {
- comment.content = processMentions(comment.content);
+ if (comment.content) {
+ comment.content = processContent(comment.content);
}
});
@@ -184,9 +211,9 @@ const TaskComments = ({ taskId, t }: { taskId?: string, t: TFunction }) => {
const commentUpdated = (comment: ITaskCommentViewModel) => {
comment.edit = false;
- // Process mentions in updated content
- if (comment.content && !hasProcessedMentions(comment.content)) {
- comment.content = processMentions(comment.content);
+ // Process content (mentions and links) in updated comment
+ if (comment.content) {
+ comment.content = processContent(comment.content);
}
setComments([...comments]); // Force re-render
};
diff --git a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
index fbd3ba43..daa33603 100644
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
@@ -103,7 +103,6 @@ const InfoTabFooter = () => {
})) ?? [];
const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => {
- console.log('member', member);
if (!member?.value || !member?.label) return;
// Find the member ID from the members list using the name
diff --git a/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx b/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx
index 684cb5f9..171440d2 100644
--- a/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx
+++ b/worklenz-frontend/src/pages/projects/project-view-1/updates/project-view-updates.tsx
@@ -1,5 +1,5 @@
-import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography } from 'antd';
-import { useEffect, useState, useCallback } from 'react';
+import { Button, ConfigProvider, Flex, Form, Mentions, Skeleton, Space, Tooltip, Typography, Dropdown, Menu, Popconfirm } from 'antd';
+import { useEffect, useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import DOMPurify from 'dompurify';
import { useParams } from 'react-router-dom';
@@ -10,7 +10,6 @@ import {
IMentionMemberSelectOption,
IMentionMemberViewModel,
} from '@/types/project/projectComments.types';
-import { projectsApiService } from '@/api/projects/projects.api.service';
import { projectCommentsApiService } from '@/api/projects/comments/project-comments.api.service';
import { IProjectUpdateCommentViewModel } from '@/types/project/project.types';
import { calculateTimeDifference } from '@/utils/calculate-time-difference';
@@ -21,6 +20,19 @@ import { DeleteOutlined } from '@ant-design/icons';
const MAX_COMMENT_LENGTH = 2000;
+// Compile RegExp once for linkify
+const urlRegex = /((https?:\/\/|www\.)[\w\-._~:/?#[\]@!$&'()*+,;=%]+)/gi;
+
+function linkify(text: string): string {
+ return text.replace(
+ urlRegex,
+ url => {
+ const href = url.startsWith('http') ? url : `https://${url}`;
+ return `${url}`;
+ }
+ );
+}
+
const ProjectViewUpdates = () => {
const { projectId } = useParams();
const [characterLength, setCharacterLength] = useState(0);
@@ -68,7 +80,7 @@ const ProjectViewUpdates = () => {
}
}, [projectId]);
- const handleAddComment = async () => {
+ const handleAddComment = useCallback(async () => {
if (!projectId || characterLength === 0) return;
try {
@@ -88,7 +100,16 @@ const ProjectViewUpdates = () => {
const res = await projectCommentsApiService.createProjectComment(body);
if (res.done) {
- await getComments();
+ setComments(prev => [
+ ...prev,
+ {
+ ...(res.body as IProjectUpdateCommentViewModel),
+ created_by: getUserSession()?.name || '',
+ created_at: new Date().toISOString(),
+ content: commentValue.trim(),
+ mentions: (res.body as IProjectUpdateCommentViewModel).mentions ?? [undefined, undefined],
+ }
+ ]);
handleCancel();
}
} catch (error) {
@@ -96,15 +117,13 @@ const ProjectViewUpdates = () => {
} finally {
setIsSubmitting(false);
setCommentValue('');
-
-
}
- };
+ }, [projectId, characterLength, commentValue, selectedMembers, getComments]);
useEffect(() => {
void getMembers();
void getComments();
- }, [getMembers, getComments,refreshTimestamp]);
+ }, [getMembers, getComments, refreshTimestamp]);
const handleCancel = useCallback(() => {
form.resetFields(['comment']);
@@ -113,14 +132,16 @@ const ProjectViewUpdates = () => {
setSelectedMembers([]);
}, [form]);
- const mentionsOptions =
+ const mentionsOptions = useMemo(() =>
members?.map(member => ({
value: member.id,
label: member.name,
- })) ?? [];
+ })) ?? [], [members]
+ );
const memberSelectHandler = useCallback((member: IMentionMemberSelectOption) => {
if (!member?.value || !member?.label) return;
+
setSelectedMembers(prev =>
prev.some(mention => mention.id === member.value)
? prev
@@ -131,13 +152,11 @@ const ProjectViewUpdates = () => {
const parts = prev.split('@');
const lastPart = parts[parts.length - 1];
const mentionText = member.label;
- // Keep only the part before the @ and add the new mention
return prev.slice(0, prev.length - lastPart.length) + mentionText;
});
}, []);
const handleCommentChange = useCallback((value: string) => {
- // Only update the value without trying to replace mentions
setCommentValue(value);
setCharacterLength(value.trim().length);
}, []);
@@ -157,56 +176,98 @@ const ProjectViewUpdates = () => {
[getComments]
);
+ // Memoize link click handler for comment links
+ const handleCommentLinkClick = useCallback((e: React.MouseEvent) => {
+ const target = e.target as HTMLElement;
+ if (target.tagName === 'A') {
+ e.preventDefault();
+ const href = (target as HTMLAnchorElement).getAttribute('href');
+ if (href) {
+ window.open(href, '_blank', 'noopener,noreferrer');
+ }
+ }
+ }, []);
+
+ const configProviderTheme = useMemo(() => ({
+ components: {
+ Button: {
+ defaultColor: colors.lightGray,
+ defaultHoverColor: colors.darkGray,
+ },
+ },
+ }), []);
+
+ // Context menu for each comment (memoized)
+ const getCommentMenu = useCallback((commentId: string) => (
+
+ ), [handleDeleteComment]);
+
+ const renderComment = useCallback(
+ (comment: IProjectUpdateCommentViewModel) => {
+ const linkifiedContent = linkify(comment.content || '');
+ const sanitizedContent = DOMPurify.sanitize(linkifiedContent);
+ const timeDifference = calculateTimeDifference(comment.created_at || '');
+ const themeClass = theme === 'dark' ? 'dark' : 'light';
+
+ return (
+
+
+
+
+
+
+
+ {comment.created_by || ''}
+
+
+
+ {timeDifference}
+
+
+
+
+
+
+
+
+