@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/CommentsPanel/components/CommentPanelListItem.js

@@ -0,0 +1,366 @@
+import { jsxs as u, jsx as s, Fragment as le } from "react/jsx-runtime";
+import { useState as V } from "react";
+import { useMantineColorScheme as oe, LoadingOverlay as de, Button as ce } from "@mantine/core";
+import { IconFile as ae } from "@tabler/icons-react";
+import { format as me } from "date-fns";
+import { CommentComposer as J } from "../../CommentComposer/index.js";
+import { ProjectIcon as ue } from "../../ProjectIcon/ProjectIcon.js";
+import { UserAvatar as re } from "../../UserAvatar/index.js";
+import { useCommentsStore as fe } from "../store.js";
+import { cutDeleteImageId as Ce } from "../utils.js";
+import { CommentActions as pe } from "./CommentActions.js";
+import { CommentsUploadFilesPreview as ge } from "./CommentsUploadFilesPreview.js";
+import o from "../CommentsPanel.module.css.js";
+function Pe(e, C, f) {
+  const c = new Date(e);
+  return me(c, "dd/MM/yyyy, HH:mm") + (C ? ` (${f.edited})` : "");
+}
+function ye(e, C, f) {
+  if (C) return e.repliesToggle?.hide;
+  const c = f === 1 ? "show_one" : "show_other";
+  return e.repliesToggle?.[c]?.replace("{{count}}", String(f));
+}
+const he = ({
+  commentOrThread: e,
+  handleClickThread: C,
+  markNodeMap: f,
+  parentThreadOrGeneral: c,
+  submitAddComment: A,
+  removeCommentReactions: x,
+  updateThreadId: M,
+  addCommentReaction: R,
+  deleteCommentImage: N,
+  activeIDs: y,
+  updateCommentTextOrImage: $,
+  resolveThreat: X,
+  toggleRepliesInput: h,
+  locales: p,
+  deleteCommentOrThread: k,
+  replyInput: F
+}) => {
+  const [r, g] = V({
+    replyList: [],
+    editCommentId: "",
+    editedContent: ""
+  }), [j, v] = V({
+    value: "",
+    files: []
+  }), [Y, D] = V(!1), { workspaceMembers: Z, currentUser: L, getEditor: U, isGuest: E, adminPermission: G } = fe(), { colorScheme: T } = oe(), O = T === "dark", ee = y && y[0] === e.id, W = L?.id === e.authorId, _ = r.replyList.includes(e.id), S = e.id.includes("temp"), I = e.type !== "comment" && e.children ? e.children.filter(
+    (t) => !t.deleted
+  ) : [], z = _ ? I : I.slice(0, 1), te = e.id === F, ie = (t, i = !1) => {
+    r.replyList.includes(t) && i || g((n) => ({
+      ...n,
+      replyList: n.replyList.includes(t) ? n.replyList.filter((l) => l !== t) : [...n.replyList, t]
+    }));
+  }, se = (t) => {
+    F && h(""), g((i) => ({
+      ...i,
+      editCommentId: t.id,
+      editedContent: t.text
+    })), v({ value: t.text, files: t.files });
+  }, w = () => {
+    g((t) => ({
+      ...t,
+      editCommentId: ""
+    })), v({ value: "", files: [] }), h("");
+  }, b = async (t) => {
+    const i = String(t), n = Ce(i), a = (e?.files || []).length === 1, d = (e?.text || "").replace(/<[^>]*>/g, "").replace(/\s|&nbsp;/g, "");
+    a && d.length === 0 ? k(e, c) : c ? N(
+      n,
+      c.id,
+      e?.id
+    ) : N(n, e?.id);
+  }, B = e.type !== "comment" && e.resolution === "ACCEPTED", H = e.id, ne = (e?.reactions || []).reduce(
+    (t, i) => (t[i.reaction] || (t[i.reaction] = {
+      count: 0,
+      id: i.id,
+      authors: /* @__PURE__ */ new Set()
+    }), t[i.reaction].count += 1, t[i.reaction].authors.add(i.userId), t),
+    {}
+  ), Q = (t) => {
+    const { isDuplicateReaction: i, hasTempReaction: n } = e.reactions.reduce(
+      (l, { reaction: a, userId: m, id: d }) => (a === t && m === L?.id && (d.startsWith("temp") ? l.hasTempReaction = !0 : l.isDuplicateReaction = !0), l),
+      { isDuplicateReaction: !1, hasTempReaction: !1 }
+    );
+    if (!n) {
+      if (i) {
+        const l = e.reactions.find(
+          ({ reaction: a, userId: m }) => a === t && m === L?.id
+        )?.id;
+        c ? x(
+          l,
+          c,
+          e
+        ) : x(
+          l,
+          e,
+          c
+        );
+      } else
+        R(t, e, c);
+      D(!1);
+    }
+  }, q = (t) => {
+    const i = new Set(t.files.map((d) => d.id)), n = t.files.filter((d) => d.id?.startsWith("temp-")), a = {
+      deletedFile: e.files.filter(
+        (d) => !!d.id && !i.has(d.id)
+      ),
+      newFiles: n
+    }, m = {
+      value: t.value,
+      restore: e.text !== t.value
+    };
+    $(
+      m,
+      a,
+      r.editCommentId,
+      c?.id
+    ), w();
+  }, P = Z?.find(
+    (t) => t.userId === e.authorId
+  ), K = P ? {
+    id: P.userId,
+    name: P.name,
+    email: P.email,
+    avatar: P.avatarUrl
+  } : {
+    id: e.authorId,
+    name: "Deleted user",
+    email: "",
+    avatar: ""
+  };
+  return /* @__PURE__ */ u(
+    "li",
+    {
+      onMouseDown: C,
+      "data-id": e.id,
+      className: `${o.commentPluginCommentsPanelListThread} ${f?.has(H) ? "interactive" : ""} ${y ? y.indexOf(H) === -1 ? "" : "active" : ""}
+        ${B ? `${o.commentPluginCommentsPanelListThreadAccepted}` : ""}`,
+      children: [
+        /* @__PURE__ */ u("div", { className: o.commentPluginThreadContainer, children: [
+          /* @__PURE__ */ s(re, { user: K }),
+          /* @__PURE__ */ u("div", { className: o.commentPluginThreadWrapper, children: [
+            /* @__PURE__ */ u("div", { className: o.commentPluginCommentsPanelListThreadQuoteBox, children: [
+              /* @__PURE__ */ u("div", { className: o.commentPluginCommentsPanelListDetails, children: [
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    className: o.commentPluginCommentsPanelListCommentAuthor,
+                    children: K.name
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    className: o.commentPluginCommentsPanelListCommentTime,
+                    children: Pe(
+                      e.timeStamp ?? 0,
+                      e.edited,
+                      p
+                    )
+                  }
+                )
+              ] }),
+              !S && (G || !E) && /* @__PURE__ */ s(
+                pe,
+                {
+                  hasPermission: W,
+                  accepted: B,
+                  showEmojiPicker: Y,
+                  setShowEmojiPicker: D,
+                  resolveThreat: X,
+                  commentOrThread: e,
+                  commentSelected: ee,
+                  handleBlur: w,
+                  toggleRepliesInput: h,
+                  deleteCommentOrThread: k,
+                  handleEditClick: se,
+                  handleReactionClick: Q
+                }
+              )
+            ] }),
+            /* @__PURE__ */ u(
+              "div",
+              {
+                className: o.commentPluginCommentsPanelListContentContainer,
+                children: [
+                  e.type === "thread" && /* @__PURE__ */ s(
+                    "blockquote",
+                    {
+                      className: o.commentPluginCommentsPanelListThreadQuote,
+                      children: /* @__PURE__ */ s(
+                        "span",
+                        {
+                          className: o.commentPluginCommentsPanelListThreadQuoteText,
+                          children: e.quote
+                        }
+                      )
+                    }
+                  ),
+                  r.editCommentId !== e.id && /* @__PURE__ */ u(le, { children: [
+                    /* @__PURE__ */ s("div", { className: "doc-space-styles-provider", children: /* @__PURE__ */ s(
+                      "div",
+                      {
+                        className: o.commentPluginCommentThreadResponses,
+                        dangerouslySetInnerHTML: {
+                          __html: e.text
+                        }
+                      }
+                    ) }),
+                    e.files && e.files.length && r.editCommentId !== e.id ? /* @__PURE__ */ s(
+                      ge,
+                      {
+                        hasPermission: W,
+                        removeImage: b,
+                        files: e.files,
+                        showLoading: !S
+                      }
+                    ) : null
+                  ] }),
+                  r.editCommentId !== e.id && /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: `${o.commentPluginCommentsPanelReactionsContainer} ${E ? o.guest : ""}`,
+                      children: Object.entries(ne).map(
+                        ([t, i], n) => {
+                          const l = i.authors.has(
+                            L?.id || ""
+                          );
+                          return /* @__PURE__ */ u(
+                            "div",
+                            {
+                              style: {
+                                background: l && (O ? "rgba(67, 155, 255, 0.24)" : "rgba(35, 131, 226, 0.14)") || void 0
+                              },
+                              onClick: E ? void 0 : () => Q(t),
+                              children: [
+                                /* @__PURE__ */ s(
+                                  ue,
+                                  {
+                                    size: 16,
+                                    fz: 16,
+                                    icon: t,
+                                    fallback: /* @__PURE__ */ s(ae, { size: "16px" })
+                                  },
+                                  n
+                                ),
+                                /* @__PURE__ */ s("span", { children: i.count })
+                              ]
+                            },
+                            n
+                          );
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        r.editCommentId === e.id && /* @__PURE__ */ s(
+          J,
+          {
+            commentValue: j,
+            setCommentValue: v,
+            isEditInput: !0,
+            updateThreadId: M,
+            removeCommentImage: b,
+            setCommentActions: g,
+            submitAddComment: A || (() => {
+            }),
+            handleEditComment: q,
+            handleBlur: w,
+            placeholder: p.replyComment,
+            children: ({
+              onSubmit: t,
+              handleBlur: i,
+              autoFocus: n,
+              setCommentValue: l,
+              commentValue: a,
+              registerClearEditor: m,
+              editorRef: d
+            }) => U?.({
+              onSubmit: t,
+              handleBlur: i,
+              autoFocus: n,
+              setCommentValue: l,
+              commentValue: a,
+              initialContent: e.text,
+              registerClearEditor: m,
+              editorRef: d
+            })
+          }
+        ),
+        /* @__PURE__ */ s(de, { visible: S }),
+        z.length ? /* @__PURE__ */ s("ul", { className: o.commentPluginCommentsPanelListThreadComments, children: z.map((t) => {
+          const i = t.id;
+          return /* @__PURE__ */ s(
+            he,
+            {
+              commentOrThread: t,
+              locales: p,
+              deleteCommentOrThread: () => k(t, e),
+              deleteCommentImage: N,
+              addCommentReaction: R,
+              removeCommentReactions: x,
+              updateCommentTextOrImage: $,
+              toggleRepliesInput: h,
+              parentThreadOrGeneral: e
+            },
+            t.clientKey ?? i
+          );
+        }) }) : null,
+        !B && te && /* @__PURE__ */ s(
+          J,
+          {
+            commentValue: j,
+            setCommentValue: v,
+            thread: e,
+            isEditInput: !1,
+            updateThreadId: M,
+            removeCommentImage: b,
+            setCommentActions: g,
+            submitAddComment: A || (() => {
+            }),
+            handleEditComment: q,
+            handleBlur: w,
+            placeholder: p.replyComment,
+            children: ({
+              onSubmit: t,
+              handleBlur: i,
+              autoFocus: n,
+              setCommentValue: l,
+              commentValue: a,
+              registerClearEditor: m,
+              editorRef: d
+            }) => U?.({
+              onSubmit: t,
+              handleBlur: i,
+              autoFocus: n,
+              setCommentValue: l,
+              commentValue: a,
+              registerClearEditor: m,
+              editorRef: d
+            })
+          }
+        ),
+        e.type !== "comment" && I.length - 1 > 0 ? /* @__PURE__ */ s(
+          ce,
+          {
+            onClick: () => ie(e.id),
+            variant: "default",
+            fullWidth: !0,
+            radius: "sm",
+            className: o.commentPluginShowMoreBtn,
+            children: ye(p, _, I.length - 1)
+          }
+        ) : null
+      ]
+    },
+    e.clientKey ?? e.id
+  );
+};
+export {
+  he as CommentPanelListItem
+};

package/dist/components/CommentsPanel/components/CommentTabFilter.js

@@ -0,0 +1,53 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { Tabs as e, Divider as c } from "@mantine/core";
+import { useCommentsStore as a } from "../store.js";
+import { toggleFilter as d } from "../utils.js";
+const f = ({
+  commentsFilter: i,
+  setCommentsFilter: t,
+  listRef: n
+}) => {
+  const l = a((r) => r.commentsLocales), s = a((r) => r.isSidebar);
+  return /* @__PURE__ */ o(
+    e,
+    {
+      value: i.resolved,
+      onChange: (r) => {
+        r && d(t, "resolved", r, n);
+      },
+      variant: "pills",
+      color: "light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3))",
+      styles: {
+        list: {
+          gap: 4
+        },
+        tab: {
+          color: "light-dark(black, var(--mantine-color-gray-3))"
+        },
+        root: {
+          marginBottom: 16,
+          marginTop: 6,
+          marginLeft: 4
+        }
+      },
+      children: /* @__PURE__ */ m(e.List, { children: [
+        /* @__PURE__ */ o(e.Tab, { value: "not-resolved", children: l.filter?.open }),
+        /* @__PURE__ */ o(e.Tab, { value: "resolved", children: l.filter?.resolved }),
+        !s && /* @__PURE__ */ o(
+          c,
+          {
+            mx: "2px",
+            my: -2,
+            size: "xs",
+            orientation: "vertical",
+            color: "light-dark(#DEE2E6, var(--mantine-color-gray-7))"
+          }
+        ),
+        /* @__PURE__ */ o(e.Tab, { value: "all", children: l.filter?.all })
+      ] })
+    }
+  );
+};
+export {
+  f as CommentTabFilter
+};

package/dist/components/CommentsPanel/components/CommentsEmptyPlaceholder.js

@@ -0,0 +1,17 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import r from "./Icon.js";
+import m from "../CommentsPanel.module.css.js";
+import { useCommentsStore as c } from "../store.js";
+const y = ({
+  commentsFilter: o,
+  listRef: t
+}) => {
+  const s = c((l) => l.commentsLocales).emptyState[o.resolved];
+  return /* @__PURE__ */ n("div", { ref: t, className: m.commentPluginCommentsPanelEmpty, children: [
+    /* @__PURE__ */ e(r, { name: "messages", color: "#ADB5BD", size: 24 }),
+    /* @__PURE__ */ e("div", { className: m.commentPluginCommentsPanelEmptyTitle, children: s })
+  ] });
+};
+export {
+  y as CommentsEmptyPlaceholder
+};

package/dist/components/CommentsPanel/components/CommentsFilterHeader.js

@@ -0,0 +1,83 @@
+import { jsxs as m, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { CommentComposer as F } from "../../CommentComposer/index.js";
+import { CommentFilterMenu as G } from "../../CommentFilterMenu/index.js";
+import { ActionIcon as H, Divider as V } from "@mantine/core";
+import { useCommentsStore as t } from "../store.js";
+import { CommentTabFilter as W } from "./CommentTabFilter.js";
+import j from "./Icon.js";
+import r from "../CommentsPanel.module.css.js";
+const L = ({
+  commentsFilter: n,
+  setCommentsFilter: a,
+  commentValue: i,
+  updateThreadId: c,
+  listRef: d,
+  setCommentValue: l,
+  submitAddComment: p
+}) => {
+  const s = t(
+    (o) => o.commentOptions?.setShowComments
+  ), { getEditor: u, isSidebar: h, isGuest: C } = t.getState(), f = t((o) => o.commentsLocales), v = () => {
+    l({ files: [], value: "" });
+  };
+  return /* @__PURE__ */ m(y, { children: [
+    h && /* @__PURE__ */ m("div", { className: r.commentsHeaderWrapper, children: [
+      /* @__PURE__ */ m("div", { className: r.commentsHeaderTitle, children: [
+        /* @__PURE__ */ e(
+          H,
+          {
+            color: "black",
+            size: "md",
+            "aria-label": "Close",
+            variant: "transparent",
+            onClick: () => s && s(!1),
+            children: /* @__PURE__ */ e(j, { size: 20, name: "close-panel" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          G,
+          {
+            commentsFilter: n,
+            setCommentsFilter: a
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(V, { my: "md" })
+    ] }),
+    /* @__PURE__ */ m("div", { className: r.commentsBodyWrapper, children: [
+      /* @__PURE__ */ e(
+        W,
+        {
+          listRef: d,
+          commentsFilter: n,
+          setCommentsFilter: a
+        }
+      ),
+      !C && /* @__PURE__ */ e("div", { className: r.commentPluginGeneralCommentWrapper, children: /* @__PURE__ */ e(
+        F,
+        {
+          commentValue: i,
+          setCommentValue: l,
+          handleBlur: v,
+          autoFocus: !1,
+          isGeneral: !0,
+          updateThreadId: c,
+          submitAddComment: p,
+          placeholder: f.generalComment,
+          children: ({ onSubmit: o, handleBlur: g, autoFocus: S, setCommentValue: b, commentValue: B, registerClearEditor: N, editorRef: x }) => u?.({
+            onSubmit: o,
+            handleBlur: g,
+            autoFocus: S,
+            setCommentValue: b,
+            commentValue: B,
+            registerClearEditor: N,
+            editorRef: x
+          })
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  L as CommentsFilterHeader
+};

package/dist/components/CommentsPanel/components/CommentsListItemMenu.js

@@ -0,0 +1,63 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { openRemoveConfirmModal as a } from "../../modals/RemoveConfirmModal.js";
+import { Menu as t, ActionIcon as d } from "@mantine/core";
+import { IconPencil as p, IconTrash as f } from "@tabler/icons-react";
+import { useCommentsStore as h } from "../store.js";
+import { getDescription as I, getTitle as C } from "../utils.js";
+import u from "./Icon.js";
+import M from "../CommentsPanel.module.css.js";
+const y = ({
+  handleEditClick: c,
+  commentOrThread: n,
+  deleteCommentOrThread: l,
+  hasPermission: r
+}) => {
+  const o = h((m) => m.commentsLocales), s = () => {
+    a({
+      title: C(n.type, o),
+      labels: {
+        cancel: o.deleteModal.actions.cancel,
+        confirm: o.deleteModal.actions.remove
+      },
+      children: I(n.type, o),
+      onConfirm: () => {
+        l(n);
+      }
+    });
+  };
+  return /* @__PURE__ */ i(t, { shadow: "md", width: 200, children: [
+    /* @__PURE__ */ e(t.Target, { children: /* @__PURE__ */ e(
+      d,
+      {
+        color: "black",
+        size: 16,
+        "aria-label": "Settings",
+        className: M.threadActionIcon,
+        variant: "transparent",
+        children: /* @__PURE__ */ e(u, { name: "dots-vertical" })
+      }
+    ) }),
+    /* @__PURE__ */ i(t.Dropdown, { children: [
+      r && /* @__PURE__ */ e(
+        t.Item,
+        {
+          onClick: () => c(n),
+          leftSection: /* @__PURE__ */ e(p, { size: 16 }),
+          children: o.menuActions.edit
+        }
+      ),
+      /* @__PURE__ */ e(
+        t.Item,
+        {
+          color: "red",
+          onClick: s,
+          leftSection: /* @__PURE__ */ e(f, { size: 16 }),
+          children: o.menuActions.delete
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  y as CommentsListItemMenu
+};

package/dist/components/CommentsPanel/components/CommentsPanelList.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
-import { RangeSelection, NodeKey } from '@layers-app/editor';
 import { Comment, Comments, GeneralComment, ICommentFile, SharedCommentProps, Thread, UpdateCommentTextArgs } from '../types.ts';
 import * as React from 'react';
+type RangeSelection = any;
+type NodeKey = string;
 interface CommentsPanelListProps extends Omit<SharedCommentProps, 'commentOrThread'> {
     activeIDs: string[];
     comments: Comments;

package/dist/components/CommentsPanel/components/CommentsPanelList.js

@@ -0,0 +1,74 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as i, useEffect as R } from "react";
+import { useCommentsStore as c } from "../store.js";
+import { CommentPanelListItem as S } from "./CommentPanelListItem.js";
+import j from "../CommentsPanel.module.css.js";
+function F({
+  activeIDs: n,
+  comments: m,
+  deleteCommentOrThread: u,
+  listRef: a,
+  addCommentReaction: p,
+  updateThreadId: f,
+  submitAddComment: d,
+  deleteCommentImage: g,
+  removeCommentReactions: y,
+  markNodeMap: o,
+  resolveThreat: C,
+  updateCommentTextOrImage: L
+}) {
+  const { selectMarkNode: P } = c(), [s, k] = i(0), [x, E] = i(""), h = c((t) => t.commentsLocales);
+  R(() => {
+    const t = setTimeout(() => {
+      k(s + 1);
+    }, 1e4);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [s]);
+  const I = (t) => {
+    E((e) => e === t ? "" : t);
+  };
+  return /* @__PURE__ */ r(
+    "ul",
+    {
+      className: j.commentPluginCommentsPanelList,
+      ref: a,
+      children: m.map((t) => {
+        const e = t.id;
+        if (t.type === "thread" || t.type === "general")
+          return /* @__PURE__ */ r(
+            S,
+            {
+              commentOrThread: t,
+              locales: h,
+              deleteCommentOrThread: u,
+              deleteCommentImage: g,
+              addCommentReaction: p,
+              removeCommentReactions: y,
+              handleClickThread: (K) => {
+                if (!K.target || t.type !== "thread") return;
+                const l = o?.get(e);
+                if (l !== void 0 && (n === null || n.indexOf(e) === -1)) {
+                  const N = document.activeElement;
+                  P?.(l, N);
+                }
+              },
+              markNodeMap: o,
+              replyInput: x,
+              updateThreadId: f,
+              toggleRepliesInput: I,
+              updateCommentTextOrImage: L,
+              resolveThreat: C,
+              activeIDs: n,
+              submitAddComment: d
+            },
+            t.clientKey ?? e
+          );
+      })
+    }
+  );
+}
+export {
+  F as CommentsPanelList
+};