@edifice.io/react 2.1.2-develop-pedago.20250318161520 → 2.1.2-develop-pedago.20250319191946

package/dist/modules/comments/components/Comment.d.ts

@@ -1,8 +1,7 @@
 import { UserProfile } from '@edifice.io/client';
 import { CommentProps } from '../types';
-export declare const Comment: ({ comment, userId, profile, onReply, }: {
+export declare const Comment: ({ comment, userId, profile, }: {
     comment: CommentProps;
     userId: string;
     profile: UserProfile[number];
-    onReply?: (commentId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/Comment.js

@@ -9,13 +9,14 @@ import { CommentAvatar } from "./CommentAvatar.js";
 import { CommentDate } from "./CommentDate.js";
 import { CommentTitle } from "./CommentTitle.js";
 import { TextCounter } from "./TextCounter.js";
+import { CommentDeleted } from "./CommentDeleted.js";
+import { CommentReplies } from "./CommentReplies.js";
 import Button from "../../../components/Button/Button.js";
 import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
 const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comment = ({
   comment,
   userId,
-  profile,
-  onReply
+  profile
 }) => {
   const [value, setValue] = useState(""), {
     id,
@@ -23,10 +24,12 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
     authorName,
     createdAt,
     updatedAt,
-    comment: content
+    comment: content,
+    replyTo
   } = comment, [ref, onFocus, resizeTextarea] = useAutosizeTextarea(!0), [isDeleteModalOpen, setIsDeleteModalOpen] = useState(!1), {
     t
   } = useTranslation(), {
+    comments,
     editCommentId,
     options,
     type,
@@ -34,44 +37,52 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
     handleDeleteComment: onDeleteComment,
     handleModifyComment,
     handleReset,
-    handleUpdateComment
-  } = useCommentsContext(), isEditing = editCommentId === comment.id, handleChangeContent = (event) => {
+    handleUpdateComment,
+    handleReplyToComment
+  } = useCommentsContext(), replies = (comments == null ? void 0 : comments.filter((comm) => comm.replyTo === comment.id)) ?? [], hasReplies = replies.length > 0, hasAllDeletedReplies = replies.every((reply) => reply.deleted), isEditing = editCommentId === comment.id, handleChangeContent = (event) => {
     resizeTextarea(), setValue(event.target.value);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
-      /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
-        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
-          /* @__PURE__ */ jsx(CommentTitle, { children: authorName }),
-          /* @__PURE__ */ jsx(BadgeProfile, { profile }),
-          /* @__PURE__ */ jsx(CommentDate, { createdAt, updatedAt })
-        ] }),
-        isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: /* @__PURE__ */ jsx("textarea", { id: "update-comment", ref, value, className: "form-control", placeholder: t("comment.placeholder"), maxLength: options.maxCommentLength, onChange: handleChangeContent, rows: 1, style: {
-            resize: "none",
-            overflow: "hidden"
-          }, onFocus }) }),
-          /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
-            /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
-              /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
-              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+    comment.deleted && hasReplies && !hasAllDeletedReplies && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CommentDeleted, {}),
+      /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment })
+    ] }),
+    !comment.deleted && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
+        /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
+          /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+            /* @__PURE__ */ jsx(CommentTitle, { children: authorName }),
+            /* @__PURE__ */ jsx(BadgeProfile, { profile }),
+            /* @__PURE__ */ jsx(CommentDate, { createdAt, updatedAt })
+          ] }),
+          isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: /* @__PURE__ */ jsx("textarea", { id: "update-comment", ref, value, className: "form-control", placeholder: t("comment.placeholder"), maxLength: options.maxCommentLength, onChange: handleChangeContent, rows: 1, style: {
+              resize: "none",
+              overflow: "hidden"
+            }, onFocus }) }),
+            /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
+              /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
+                /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
+            type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
+              !replyTo && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => handleReplyToComment(comment.id), children: t("comment.reply") }),
+              userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
+                handleModifyComment(comment.id), setValue(content);
+              }, children: t("comment.edit") }),
+              (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
             ] })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "mt-8 mb-4", children: content }),
-          type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
-            !comment.replyTo && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => onReply == null ? void 0 : onReply(comment.id), children: t("comment.reply") }),
-            userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
-              handleModifyComment(comment.id), setValue(content);
-            }, children: t("comment.edit") }),
-            (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
           ] })
         ] })
-      ] })
-    ] }, id),
-    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: isDeleteModalOpen && /* @__PURE__ */ jsx(DeleteModal, { isOpen: isDeleteModalOpen, onCancel: () => setIsDeleteModalOpen(!1), onSuccess: () => onDeleteComment(id) }) })
+      ] }, id),
+      /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment }),
+      /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingScreen, { position: !1 }), children: isDeleteModalOpen && /* @__PURE__ */ jsx(DeleteModal, { isOpen: isDeleteModalOpen, onCancel: () => setIsDeleteModalOpen(!1), onSuccess: () => onDeleteComment(id) }) })
+    ] })
   ] });
 };
 export {

package/dist/modules/comments/components/CommentDeleted.d.ts

@@ -0,0 +1 @@
+export declare const CommentDeleted: () => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentDeleted.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const CommentDeleted = () => {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200 my-16", children: t("comment.deleted") });
+};
+export {
+  CommentDeleted
+};

package/dist/modules/comments/components/CommentList.js

@@ -1,27 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
 import { useCommentsContext } from "../hooks/useCommentsContext.js";
 import { Comment } from "./Comment.js";
-import { CommentReplies } from "./CommentReplies.js";
 function CommentList() {
-  const [replyFormCommentId, setReplyFormCommentId] = useState(""), {
+  const {
     user
   } = useEdificeClient(), {
     comments,
     profiles
-  } = useCommentsContext(), handleReply = (commentId) => {
-    setReplyFormCommentId(commentId);
-  };
+  } = useCommentsContext();
   return comments == null ? void 0 : comments.map((comment) => {
     var _a;
     const {
       authorId
     } = comment, profile = ((_a = profiles == null ? void 0 : profiles.find((user2) => (user2 == null ? void 0 : user2.userId) === authorId)) == null ? void 0 : _a.profile) ?? "Guest";
-    return /* @__PURE__ */ jsxs("div", { children: [
-      !comment.replyTo && /* @__PURE__ */ jsx(Comment, { comment, profile, userId: user == null ? void 0 : user.userId, onReply: handleReply }),
-      /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment, replyFormCommentId })
-    ] }, comment.id);
+    return /* @__PURE__ */ jsx("div", { children: !comment.replyTo && /* @__PURE__ */ jsx(Comment, { comment, profile, userId: user == null ? void 0 : user.userId }) }, comment.id);
   });
 }
 export {

package/dist/modules/comments/components/CommentReplies.d.ts

@@ -1,5 +1,4 @@
 import { CommentProps } from '../types';
-export declare const CommentReplies: ({ parentComment, replyFormCommentId, }: {
+export declare const CommentReplies: ({ parentComment, }: {
     parentComment: CommentProps;
-    replyFormCommentId: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentReplies.js

@@ -5,13 +5,13 @@ import { CommentForm } from "./CommentForm.js";
 import { useCommentReplies } from "../hooks/useCommentReplies.js";
 import Button from "../../../components/Button/Button.js";
 const CommentReplies = ({
-  parentComment,
-  replyFormCommentId
+  parentComment
 }) => {
   const {
     comments,
     profiles,
-    options
+    options,
+    replyToCommentId
   } = useCommentsContext(), {
     t,
     user,
@@ -24,10 +24,13 @@ const CommentReplies = ({
     comments,
     profiles,
     options
-  });
+  }), showCommentForm = replyToCommentId === parentComment.id && !parentComment.deleted;
   return /* @__PURE__ */ jsxs("div", { className: "comments-replies-container", children: [
-    replyFormCommentId === parentComment.id && /* @__PURE__ */ jsx("div", { className: "comments-replies-form", children: /* @__PURE__ */ jsx(CommentForm, { userId: user == null ? void 0 : user.userId, replyTo: parentComment.id }) }),
-    /* @__PURE__ */ jsx("div", { className: "comments-replies-list", children: slicedReplies.map((reply) => /* @__PURE__ */ jsx("div", { className: "comments-replies-reply", children: /* @__PURE__ */ jsx(Comment, { comment: reply, profile, userId: user == null ? void 0 : user.userId }) }, reply.id)) }),
+    showCommentForm && /* @__PURE__ */ jsx("div", { className: "comments-replies-form", children: /* @__PURE__ */ jsx(CommentForm, { userId: user == null ? void 0 : user.userId, replyTo: parentComment.id }) }),
+    /* @__PURE__ */ jsx("div", { className: "comments-replies-list", children: slicedReplies.map((reply) => {
+      if (!reply.deleted)
+        return /* @__PURE__ */ jsx("div", { className: "comments-replies-reply", children: /* @__PURE__ */ jsx(Comment, { comment: reply, profile, userId: user == null ? void 0 : user.userId }) }, reply.id);
+    }) }),
     slicedReplies.length < (defaultReplies == null ? void 0 : defaultReplies.length) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreReplies, className: "ms-24", children: t("comment.more.replies") })
   ] });
 };

package/dist/modules/comments/context/Context.d.ts

@@ -3,14 +3,17 @@ import { CommentOptions, CommentProps, CommentType, UserProfileResult } from '..
 export declare const CommentContext: import('react').Context<{
     comments: CommentProps[] | undefined;
     editCommentId: string | null;
+    replyToCommentId: string | null;
     profiles: (UserProfileResult | undefined)[];
     options: Partial<CommentOptions>;
     type: CommentType;
     userRights?: Record<RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
+    setReplyToCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
     handleCreateComment: (content: string, replyTo?: string) => void;
     handleUpdateComment: (comment: string) => void;
     handleDeleteComment: (id: string) => void;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 } | null>;

package/dist/modules/comments/hooks/useComments.d.ts

@@ -19,6 +19,8 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
     comments: CommentProps[];
     editCommentId: string | null;
     setEditCommentId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    replyToCommentId: string | null;
+    setReplyToCommentId: import('react').Dispatch<import('react').SetStateAction<string | null>>;
     commentsCount: number;
     t: import('i18next').TFunction<"translation", undefined>;
     handleMoreComments: () => void;
@@ -26,5 +28,6 @@ export declare const useComments: ({ defaultComments, options, type, callbacks,
     handleCreateComment: (content: string, replyTo?: string) => void;
     handleModifyComment: (commentId: string) => void;
     handleUpdateComment: (comment: string) => Promise<void>;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 };

package/dist/modules/comments/hooks/useComments.js

@@ -9,7 +9,8 @@ const useComments = ({
   type,
   callbacks
 }) => {
-  const [editCommentId, setEditCommentId] = useState(null), [commentLimit, setCommentLimit] = useState(options.maxComments), {
+  var _a, _b;
+  const [editCommentId, setEditCommentId] = useState(null), [replyToCommentId, setReplyToCommentId] = useState(null), [commentLimit, setCommentLimit] = useState(options.maxComments), {
     t
   } = useTranslation(), {
     user
@@ -17,7 +18,7 @@ const useComments = ({
     () => type === "edit" ? (defaultComments == null ? void 0 : defaultComments.sort((a, b) => b.createdAt - a.createdAt).slice(0, commentLimit)) ?? [] : (defaultComments == null ? void 0 : defaultComments.sort((a, b) => b.createdAt - a.createdAt)) ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [commentLimit, defaultComments]
-  ), commentsCount = (comments == null ? void 0 : comments.length) ?? 0, defaultCommentsCount = (defaultComments == null ? void 0 : defaultComments.length) ?? 0, title = defaultCommentsCount && defaultCommentsCount > 1 ? t("comment.several", {
+  ), commentsCount = ((_a = comments == null ? void 0 : comments.filter((comment) => !comment.deleted)) == null ? void 0 : _a.length) ?? 0, defaultCommentsCount = ((_b = defaultComments == null ? void 0 : defaultComments.filter((comment) => !comment.deleted)) == null ? void 0 : _b.length) ?? 0, title = defaultCommentsCount && defaultCommentsCount > 1 ? t("comment.several", {
     number: defaultCommentsCount
   }) : t("comment.little", {
     number: defaultCommentsCount
@@ -31,6 +32,8 @@ const useComments = ({
     comments,
     editCommentId,
     setEditCommentId,
+    replyToCommentId,
+    setReplyToCommentId,
     commentsCount,
     t,
     handleMoreComments: () => {
@@ -41,7 +44,7 @@ const useComments = ({
       type === "edit" && (callbacks == null || callbacks.delete(id));
     },
     handleCreateComment: (content, replyTo) => {
-      type === "edit" && (callbacks == null || callbacks.post(content, replyTo));
+      type === "edit" && (callbacks == null || callbacks.post(content, replyTo)), replyTo && setReplyToCommentId(null);
     },
     handleModifyComment: (commentId) => {
       setEditCommentId(commentId);
@@ -52,6 +55,9 @@ const useComments = ({
         commentId: editCommentId
       })), setEditCommentId(null));
     },
+    handleReplyToComment: (commentId) => {
+      setReplyToCommentId(commentId);
+    },
     handleReset: () => {
       editCommentId && setEditCommentId(null);
     }

package/dist/modules/comments/hooks/useCommentsContext.d.ts

@@ -1,14 +1,17 @@
 export declare const useCommentsContext: () => {
     comments: import('../types').CommentProps[] | undefined;
     editCommentId: string | null;
+    replyToCommentId: string | null;
     profiles: (import('../types').UserProfileResult | undefined)[];
     options: Partial<import('../types').CommentOptions>;
     type: import('../types').CommentType;
     userRights?: Record<import('@edifice.io/client').RightRole, boolean>;
     setEditCommentId: (value: string | null) => void;
+    setReplyToCommentId: (value: string | null) => void;
     handleModifyComment: (commentId: string) => void;
     handleCreateComment: (content: string, replyTo?: string) => void;
     handleUpdateComment: (comment: string) => void;
     handleDeleteComment: (id: string) => void;
+    handleReplyToComment: (commentId: string) => void;
     handleReset: () => void;
 };

package/dist/modules/comments/provider/CommentProvider.js

@@ -32,6 +32,8 @@ const CommentProvider = ({
     comments,
     editCommentId,
     setEditCommentId,
+    replyToCommentId,
+    setReplyToCommentId,
     commentsCount,
     t,
     handleMoreComments,
@@ -39,6 +41,7 @@ const CommentProvider = ({
     handleCreateComment,
     handleModifyComment,
     handleUpdateComment,
+    handleReplyToComment,
     handleReset
   } = useComments({
     type,
@@ -50,14 +53,17 @@ const CommentProvider = ({
       comments,
       profiles: profilesQueries.data,
       editCommentId,
+      replyToCommentId,
       options,
       type,
       userRights,
       setEditCommentId,
+      setReplyToCommentId,
       handleCreateComment,
       handleModifyComment,
       handleUpdateComment,
       handleDeleteComment,
+      handleReplyToComment,
       handleReset
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/modules/comments/types.d.ts

@@ -28,6 +28,10 @@ export interface CommentProps {
      * The comment parent ID.
      */
     replyTo?: string;
+    /**
+     * If the comment is deleted.
+     */
+    deleted?: boolean;
 }
 export interface CommentCallbacks {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.1.2-develop-pedago.20250318161520",
+  "version": "2.1.2-develop-pedago.20250319191946",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.1.2-develop-pedago.20250318161520",
-    "@edifice.io/tiptap-extensions": "2.1.2-develop-pedago.20250318161520",
-    "@edifice.io/utilities": "2.1.2-develop-pedago.20250318161520"
+    "@edifice.io/bootstrap": "2.1.2-develop-pedago.20250319191946",
+    "@edifice.io/tiptap-extensions": "2.1.2-develop-pedago.20250319191946",
+    "@edifice.io/utilities": "2.1.2-develop-pedago.20250319191946"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.1.2-develop-pedago.20250318161520",
-    "@edifice.io/config": "2.1.2-develop-pedago.20250318161520"
+    "@edifice.io/config": "2.1.2-develop-pedago.20250319191946",
+    "@edifice.io/client": "2.1.2-develop-pedago.20250319191946"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",