upgraded inline-comment v2

demo/src/App.tsx

@@ -11,6 +11,7 @@ import {
   TagType,
 } from '@fileverse/ui';
 import { useMediaQuery } from 'usehooks-ts';
+import { IComment } from '../../package/extensions/comment';
 
 const sampleTags = [
   { name: 'Talks & Presentations', isActive: true, color: '#F6B1B2' },
@@ -30,7 +31,6 @@ function App() {
   const [selectedTags, setSelectedTags] = useState<TagType[]>([]);
   const [isCommentSectionOpen, setIsCommentSectionOpen] = useState(false);
   const [isPresentationMode, setIsPresentationMode] = useState(false);
-
   const [inlineCommentData, setInlineCommentData] = useState({
     inlineCommentText: '',
     highlightedTextContent: '',
@@ -43,6 +43,48 @@ function App() {
 
   const collaborationId = window.location.pathname.split('/')[2]; // example url - /doc/1234, that why's used second element of array
 
+  //To handle comments from consumer side
+  const [commentDrawerOpen, setCommentDrawerOpen] = useState(false);
+  const [initialComments, setInitialComment] = useState<IComment[]>([]);
+  const handleReplyOnComment = (id: string, reply: IComment) => {
+    setInitialComment((prev) =>
+      prev.map((comment) => {
+        if (comment.id === id) {
+          return {
+            ...comment,
+            replies: [...(comment.replies || []), reply],
+          };
+        }
+        return comment; // Ensure you return the unchanged comment
+      }),
+    );
+  };
+  const handleNewComment = (comment: IComment) => {
+    setInitialComment((prev) => [...prev, comment]);
+  };
+  const handleResolveComment = (commentId: string) => {
+    setInitialComment(
+      initialComments.map((comment) =>
+        comment.id === commentId ? { ...comment, resolved: true } : comment,
+      ),
+    );
+  };
+
+  const handleUnresolveComment = (commentId: string) => {
+    setInitialComment(
+      initialComments.map((comment) =>
+        comment.id === commentId ? { ...comment, resolved: false } : comment,
+      ),
+    );
+  };
+  const handleDeleteComment = (commentId: string) => {
+    setInitialComment(
+      initialComments.filter((comment) => comment.id !== commentId),
+    );
+  };
+
+  //To handle comments from consumer side
+
   useEffect(() => {
     if (collaborationId) {
       const name = prompt('Whats your username');
@@ -86,8 +128,21 @@ function App() {
           </div>
         </div>
         <div className="flex gap-2">
-          <IconButton variant={'ghost'} icon="Presentation" size="md" onClick={() => setIsPresentationMode(true)} />
-          <IconButton variant={'ghost'} icon="MessageSquareText" size="md" />
+          <IconButton
+            variant={'ghost'}
+            icon="Presentation"
+            size="md"
+            onClick={() => {
+              commentDrawerOpen && setCommentDrawerOpen(false);
+              setIsPresentationMode(true);
+            }}
+          />
+          <IconButton
+            variant={'ghost'}
+            icon="MessageSquareText"
+            size="md"
+            onClick={() => setCommentDrawerOpen((prev) => !prev)}
+          />
           <IconButton
             variant={'ghost'}
             icon="Share2"
@@ -140,6 +195,8 @@ function App() {
         setIsCommentSectionOpen={setIsCommentSectionOpen}
         setInlineCommentData={setInlineCommentData}
         inlineCommentData={inlineCommentData}
+        commentDrawerOpen={commentDrawerOpen}
+        setCommentDrawerOpen={setCommentDrawerOpen}
         isPresentationMode={isPresentationMode}
         setIsPresentationMode={setIsPresentationMode}
         zoomLevel={zoomLevel}
@@ -149,6 +206,13 @@ function App() {
         onInlineComment={(): void => {}}
         onMarkdownImport={(): void => {}}
         onMarkdownExport={(): void => {}}
+        initialComments={initialComments}
+        onCommentReply={handleReplyOnComment}
+        onNewComment={handleNewComment}
+        setInitialComments={setInitialComment}
+        onResolveComment={handleResolveComment}
+        onUnresolveComment={handleUnresolveComment}
+        onDeleteComment={handleDeleteComment}
       />
       <Toaster
         position={!isMobile ? 'bottom-right' : 'center-top'}

demo/tailwind.config.js

@@ -8,5 +8,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 };

package.json

@@ -2,7 +2,7 @@
   "name": "@fileverse-dev/ddoc",
   "private": false,
   "description": "DDoc",
-  "version": "2.1.1-patch-8",
+  "version": "2.1.1-v2-patch-8",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "exports": {
@@ -72,6 +72,7 @@
     "base64-js": "^1.5.1",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.1.6",
     "embla-carousel-react": "^8.1.5",
     "ethers": "^6.13.1",