@focus-reactive/payload-plugin-comments 1.0.0

package/dist/collection/index.js

@@ -0,0 +1,139 @@
+import { setAuthorBeforeCreate } from "./hooks/setAuthorBeforeCreate";
+import { setTenantBeforeCreate } from "./hooks/setTenantBeforeCreate";
+import { DEFAULT_COLLECTION_SLUG } from "../constants";
+import { isAuth } from "./access/isAuth";
+const baseCollection = (tenantConfig) => ({
+  slug: DEFAULT_COLLECTION_SLUG,
+  labels: {
+    singular: { en: "Comment", es: "Comentario" },
+    plural: { en: "Comments", es: "Comentarios" }
+  },
+  admin: {
+    hidden: true,
+    useAsTitle: "text",
+    defaultColumns: ["author", "collectionSlug", "status", "createdAt"]
+  },
+  access: {
+    create: isAuth,
+    read: isAuth,
+    update: isAuth,
+    delete: isAuth
+  },
+  hooks: {
+    beforeChange: [setAuthorBeforeCreate, ...tenantConfig?.enabled ? [setTenantBeforeCreate] : []]
+  },
+  timestamps: true,
+  fields: [
+    {
+      name: "documentId",
+      type: "number",
+      index: true
+    },
+    {
+      name: "collectionSlug",
+      type: "text",
+      index: true
+    },
+    {
+      name: "globalSlug",
+      type: "text",
+      index: true,
+      admin: {
+        description: "Slug of the Payload global being commented on. Null = collection document comment."
+      }
+    },
+    {
+      name: "fieldPath",
+      type: "text",
+      index: true,
+      admin: {
+        description: "Dot-notation path of the field being commented on. Null = document-level."
+      }
+    },
+    {
+      name: "locale",
+      type: "text",
+      required: false,
+      index: true,
+      admin: {
+        description: "Locale for field-level comments. Null = document-level (shown in all locales)."
+      }
+    },
+    {
+      name: "text",
+      type: "textarea",
+      required: true,
+      label: "Comment"
+    },
+    {
+      name: "mentions",
+      type: "array",
+      label: "Mentions",
+      admin: {
+        readOnly: true
+      },
+      fields: [
+        {
+          name: "user",
+          type: "relationship",
+          relationTo: "users",
+          required: true
+        }
+      ]
+    },
+    {
+      name: "author",
+      type: "relationship",
+      relationTo: "users",
+      required: true,
+      label: "Author",
+      admin: {
+        position: "sidebar"
+      }
+    },
+    {
+      name: "isResolved",
+      type: "checkbox",
+      defaultValue: false,
+      label: "Resolved",
+      admin: {
+        position: "sidebar"
+      }
+    },
+    {
+      name: "resolvedBy",
+      type: "relationship",
+      relationTo: "users",
+      label: "Resolved by",
+      admin: {
+        position: "sidebar",
+        condition: (_data, siblingData) => siblingData?.status === "resolved"
+      }
+    },
+    {
+      name: "resolvedAt",
+      type: "date",
+      label: "Resolved at",
+      admin: {
+        position: "sidebar",
+        condition: (_data, siblingData) => siblingData?.status === "resolved"
+      }
+    },
+    ...tenantConfig?.enabled ? [
+      {
+        name: "tenant",
+        type: "relationship",
+        relationTo: tenantConfig.collectionSlug ?? "tenants",
+        index: true,
+        label: "Tenant",
+        admin: {
+          position: "sidebar"
+        }
+      }
+    ] : []
+  ]
+});
+export {
+  baseCollection
+};
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collection/index.ts"],"sourcesContent":["import type { CollectionConfig, CollectionSlug } from \"payload\";\nimport { setAuthorBeforeCreate } from \"./hooks/setAuthorBeforeCreate\";\nimport { setTenantBeforeCreate } from \"./hooks/setTenantBeforeCreate\";\nimport { DEFAULT_COLLECTION_SLUG } from \"../constants\";\nimport type { TenantPluginConfig } from \"../types\";\nimport { isAuth } from \"./access/isAuth\";\n\nexport const baseCollection = (tenantConfig?: TenantPluginConfig): CollectionConfig => ({\n  slug: DEFAULT_COLLECTION_SLUG,\n  labels: {\n    singular: { en: \"Comment\", es: \"Comentario\" },\n    plural: { en: \"Comments\", es: \"Comentarios\" },\n  },\n  admin: {\n    hidden: true,\n    useAsTitle: \"text\",\n    defaultColumns: [\"author\", \"collectionSlug\", \"status\", \"createdAt\"],\n  },\n  access: {\n    create: isAuth,\n    read: isAuth,\n    update: isAuth,\n    delete: isAuth,\n  },\n  hooks: {\n    beforeChange: [setAuthorBeforeCreate, ...(tenantConfig?.enabled ? [setTenantBeforeCreate] : [])],\n  },\n  timestamps: true,\n  fields: [\n    {\n      name: \"documentId\",\n      type: \"number\",\n      index: true,\n    },\n    {\n      name: \"collectionSlug\",\n      type: \"text\",\n      index: true,\n    },\n    {\n      name: \"globalSlug\",\n      type: \"text\",\n      index: true,\n      admin: {\n        description: \"Slug of the Payload global being commented on. Null = collection document comment.\",\n      },\n    },\n    {\n      name: \"fieldPath\",\n      type: \"text\",\n      index: true,\n      admin: {\n        description: \"Dot-notation path of the field being commented on. Null = document-level.\",\n      },\n    },\n    {\n      name: \"locale\",\n      type: \"text\",\n      required: false,\n      index: true,\n      admin: {\n        description: \"Locale for field-level comments. Null = document-level (shown in all locales).\",\n      },\n    },\n    {\n      name: \"text\",\n      type: \"textarea\",\n      required: true,\n      label: \"Comment\",\n    },\n    {\n      name: \"mentions\",\n      type: \"array\",\n      label: \"Mentions\",\n      admin: {\n        readOnly: true,\n      },\n      fields: [\n        {\n          name: \"user\",\n          type: \"relationship\",\n          relationTo: \"users\",\n          required: true,\n        },\n      ],\n    },\n    {\n      name: \"author\",\n      type: \"relationship\",\n      relationTo: \"users\",\n      required: true,\n      label: \"Author\",\n      admin: {\n        position: \"sidebar\",\n      },\n    },\n    {\n      name: \"isResolved\",\n      type: \"checkbox\",\n      defaultValue: false,\n      label: \"Resolved\",\n      admin: {\n        position: \"sidebar\",\n      },\n    },\n    {\n      name: \"resolvedBy\",\n      type: \"relationship\",\n      relationTo: \"users\",\n      label: \"Resolved by\",\n      admin: {\n        position: \"sidebar\",\n        condition: (_data, siblingData) => siblingData?.status === \"resolved\",\n      },\n    },\n    {\n      name: \"resolvedAt\",\n      type: \"date\",\n      label: \"Resolved at\",\n      admin: {\n        position: \"sidebar\",\n        condition: (_data, siblingData) => siblingData?.status === \"resolved\",\n      },\n    },\n    ...(tenantConfig?.enabled ?\n      [\n        {\n          name: \"tenant\",\n          type: \"relationship\" as const,\n          relationTo: (tenantConfig.collectionSlug ?? \"tenants\") as CollectionSlug,\n          index: true,\n          label: \"Tenant\",\n          admin: {\n            position: \"sidebar\" as const,\n          },\n        },\n      ]\n    : []),\n  ],\n});\n"],"mappings":"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","names":[]}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,11 @@
+import type { ClientUser } from "payload";
+import type { User } from "../../types";
+interface Props {
+    className?: string;
+    user?: User | ClientUser | null;
+    usernameFieldPath?: string;
+    fallbackName: string;
+}
+export declare function Avatar({ user, usernameFieldPath, fallbackName }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAGxC,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,YAAY,EAAE,EAAE,KAAK,2CAStE"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { resolveUsername } from "../../utils/user/resolveUsername";
+function Avatar({ user, usernameFieldPath, fallbackName }) {
+  const userName = resolveUsername(user, usernameFieldPath, fallbackName);
+  const userInitial = userName.charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-full bg-(--theme-elevation-150) text-(--theme-text) flex items-center justify-center text-[14px] font-semibold", children: userInitial });
+}
+export {
+  Avatar
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import type { ClientUser } from \"payload\";\nimport type { User } from \"../../types\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\n\ninterface Props {\n  className?: string;\n  user?: User | ClientUser | null;\n  usernameFieldPath?: string;\n  fallbackName: string;\n}\n\nexport function Avatar({ user, usernameFieldPath, fallbackName }: Props) {\n  const userName = resolveUsername(user, usernameFieldPath, fallbackName);\n  const userInitial = userName.charAt(0).toUpperCase();\n\n  return (\n    <div className=\"w-9 h-9 rounded-full bg-(--theme-elevation-150) text-(--theme-text) flex items-center justify-center text-[14px] font-semibold\">\n      {userInitial}\n    </div>\n  );\n}\n"],"mappings":"AAgBI;AAdJ,SAAS,uBAAuB;AASzB,SAAS,OAAO,EAAE,MAAM,mBAAmB,aAAa,GAAU;AACvE,QAAM,WAAW,gBAAgB,MAAM,mBAAmB,YAAY;AACtE,QAAM,cAAc,SAAS,OAAO,CAAC,EAAE,YAAY;AAEnD,SACE,oBAAC,SAAI,WAAU,kIACZ,uBACH;AAEJ;","names":[]}

package/dist/components/CommentEditor/ActionPanel.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    className?: string;
+    onMention: (e: React.MouseEvent) => void;
+    onAddComment: () => void;
+}
+export declare function ActionPanel({ className, onMention, onAddComment }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ActionPanel.d.ts.map

package/dist/components/CommentEditor/ActionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,2CAgBxE"}

package/dist/components/CommentEditor/ActionPanel.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AtSign, SendHorizontal } from "lucide-react";
+import { IconButton } from "../IconButton";
+import { useTranslation } from "@payloadcms/ui";
+import { cn } from "../../utils/general/cn";
+function ActionPanel({ className, onMention, onAddComment }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end items-center gap-1 pt-2", className), "data-popup-prevent-close": true, children: [
+    /* @__PURE__ */ jsx(IconButton, { title: "Mention user", onClick: onMention, children: /* @__PURE__ */ jsx(AtSign, { size: 16 }) }),
+    /* @__PURE__ */ jsx("hr", { className: "w-px h-[20px] bg-(--theme-elevation-150) m-0" }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "primary", title: t("comments:comment"), onClick: onAddComment, children: /* @__PURE__ */ jsx(SendHorizontal, { size: 16 }) })
+  ] });
+}
+export {
+  ActionPanel
+};
+//# sourceMappingURL=ActionPanel.js.map

package/dist/components/CommentEditor/ActionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"sourcesContent":["import { AtSign, SendHorizontal } from \"lucide-react\";\nimport { IconButton } from \"../IconButton\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\n\ninterface Props {\n  className?: string;\n  onMention: (e: React.MouseEvent) => void;\n  onAddComment: () => void;\n}\n\nexport function ActionPanel({ className, onMention, onAddComment }: Props) {\n  const { t } = useTranslation();\n\n  return (\n    <div className={cn(\"flex justify-end items-center gap-1 pt-2\", className)} data-popup-prevent-close>\n      <IconButton title=\"Mention user\" onClick={onMention}>\n        <AtSign size={16} />\n      </IconButton>\n\n      <hr className=\"w-px h-[20px] bg-(--theme-elevation-150) m-0\" />\n\n      <IconButton variant=\"primary\" title={t(\"comments:comment\" as never)} onClick={onAddComment}>\n        <SendHorizontal size={16} />\n      </IconButton>\n    </div>\n  );\n}\n"],"mappings":"AAeI,SAEI,KAFJ;AAfJ,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAQZ,SAAS,YAAY,EAAE,WAAW,WAAW,aAAa,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAAG,4BAAwB,MACjG;AAAA,wBAAC,cAAW,OAAM,gBAAe,SAAS,WACxC,8BAAC,UAAO,MAAM,IAAI,GACpB;AAAA,IAEA,oBAAC,QAAG,WAAU,gDAA+C;AAAA,IAE7D,oBAAC,cAAW,SAAQ,WAAU,OAAO,EAAE,kBAA2B,GAAG,SAAS,cAC5E,8BAAC,kBAAe,MAAM,IAAI,GAC5B;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentEditor/index.d.ts

@@ -0,0 +1,23 @@
+import { type RefObject } from "react";
+export interface CommentEditorHandle {
+    getValue: () => string;
+    clear: () => void;
+    focus: () => void;
+    insertAt: () => void;
+}
+interface CommentEditorProps {
+    disabled?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    ref?: RefObject<CommentEditorHandle | null>;
+    fieldPath?: string | null;
+    documentId?: number;
+    collectionSlug?: string;
+    globalSlug?: string;
+    onSuccessAddComment?: () => void;
+    onEnterPress?: () => void;
+    onEscapePress?: () => void;
+}
+export declare function CommentEditor({ disabled, autoFocus, placeholder: placeholderProp, ref, fieldPath, documentId, collectionSlug, globalSlug, onSuccessAddComment, onEnterPress, onEscapePress, }: CommentEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAc/F,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,GAAG,EACH,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,YAAY,EACZ,aAAa,GACd,EAAE,kBAAkB,2CAwRpB"}

package/dist/components/CommentEditor/index.js

@@ -0,0 +1,265 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useImperativeHandle, startTransition } from "react";
+import { useAuth, useLocale, useTranslation } from "@payloadcms/ui";
+import { useComments } from "../../providers/CommentsProvider";
+import { MentionDropdown } from "../MentionDropdown";
+import { MentionLabel } from "../MentionLabel";
+import { serializeEditor } from "../../utils/comment/serializeEditor";
+import { isSelfMention } from "../../utils/mention/isSelfMention";
+import { createRoot } from "react-dom/client";
+import { FALLBACK_USERNAME } from "../../constants";
+import { resolveUsername } from "../../utils/user/resolveUsername";
+import { ActionPanel } from "./ActionPanel";
+import { Avatar } from "../Avatar";
+function CommentEditor({
+  disabled,
+  autoFocus,
+  placeholder: placeholderProp,
+  ref,
+  fieldPath,
+  documentId,
+  collectionSlug,
+  globalSlug,
+  onSuccessAddComment,
+  onEnterPress,
+  onEscapePress
+}) {
+  const { mentionUsers: users, addComment } = useComments();
+  const { code: locale } = useLocale();
+  const { user } = useAuth();
+  const [mentionQuery, setMentionQuery] = useState(null);
+  const [triggerRange, setTriggerRange] = useState(null);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { usernameFieldPath } = useComments();
+  const { t } = useTranslation();
+  const editorRef = useRef(null);
+  const editorWrapperRef = useRef(null);
+  const unknownLabel = t("comments:unknownAuthor") ?? FALLBACK_USERNAME;
+  const currentUserId = user?.id;
+  const placeholder = placeholderProp ?? t("comments:writeComment") ?? "Add a comment";
+  const detectMention = () => {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) {
+      setMentionQuery(null);
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      setMentionQuery(null);
+      return;
+    }
+    const text = node.textContent ?? "";
+    const offset = range.startOffset;
+    let i = offset - 1;
+    while (i >= 0 && text[i] !== " " && text[i] !== "\n") {
+      if (text[i] === "@") {
+        const query = text.slice(i + 1, offset);
+        if (query.includes(" ")) {
+          setMentionQuery(null);
+          return;
+        }
+        const atRange = document.createRange();
+        atRange.setStart(node, i);
+        atRange.setEnd(node, offset);
+        setTriggerRange(atRange.cloneRange());
+        setMentionQuery(query);
+        setFilteredUsers(
+          users.filter(
+            (u) => resolveUsername(u, usernameFieldPath, unknownLabel).toLowerCase().includes(query.toLowerCase())
+          )
+        );
+        setSelectedIndex(0);
+        return;
+      }
+      i--;
+    }
+    setMentionQuery(null);
+  };
+  const insertMention = (user2) => {
+    if (!triggerRange || !editorRef.current) return;
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(triggerRange);
+    sel.deleteFromDocument();
+    const { id: userId } = user2;
+    const mentionLabelContainer = document.createElement("span");
+    const mentionLabelContainerRoot = createRoot(mentionLabelContainer);
+    mentionLabelContainerRoot.render(
+      /* @__PURE__ */ jsx(
+        MentionLabel,
+        {
+          name: resolveUsername(user2, usernameFieldPath, unknownLabel),
+          isSelf: isSelfMention(currentUserId, userId)
+        }
+      )
+    );
+    mentionLabelContainer.contentEditable = "false";
+    mentionLabelContainer.dataset.mentionId = String(userId);
+    const range2 = sel.getRangeAt(0);
+    range2.insertNode(mentionLabelContainer);
+    const zws = document.createTextNode("\u200B");
+    mentionLabelContainer.after(zws);
+    const newRange = document.createRange();
+    newRange.setStartAfter(zws);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+    setMentionQuery(null);
+    setTriggerRange(null);
+    editorRef.current?.focus();
+  };
+  const insertAt = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.focus();
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) {
+      const range = document.createRange();
+      range.selectNodeContents(editor);
+      range.collapse(false);
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    }
+    document.execCommand("insertText", false, "@");
+    detectMention();
+  };
+  const updateEmptyClass = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const isEmpty = editor.innerHTML === "" || editor.innerHTML === "<br>";
+    editor.classList.toggle("is-empty", isEmpty);
+  };
+  const getEditorValue = () => {
+    if (!editorRef.current) return "";
+    return serializeEditor(editorRef.current).trim();
+  };
+  const clearEditor = () => {
+    setMentionQuery(null);
+    setTriggerRange(null);
+    if (editorRef.current) {
+      editorRef.current.innerHTML = "";
+      editorRef.current.classList.add("is-empty");
+    }
+  };
+  const focusEditor = () => {
+    editorRef.current?.focus();
+  };
+  useImperativeHandle(ref, () => ({
+    getValue: getEditorValue,
+    clear: clearEditor,
+    focus: focusEditor,
+    insertAt
+  }));
+  const handleAddComment = () => {
+    const serialized = getEditorValue();
+    if (!serialized) return;
+    clearEditor();
+    startTransition(async () => {
+      const res = await addComment(serialized, fieldPath, documentId, collectionSlug, locale, globalSlug);
+      if (res.success) {
+        onSuccessAddComment?.();
+      }
+    });
+  };
+  const handleKeyDown = (e) => {
+    if (mentionQuery !== null) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelectedIndex((prev) => (prev + 1) % filteredUsers.length);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelectedIndex((prev) => (prev - 1 + filteredUsers.length) % filteredUsers.length);
+        return;
+      }
+      if (e.key === "Enter" && filteredUsers.length > 0) {
+        e.preventDefault();
+        const selectedUser = filteredUsers[selectedIndex];
+        if (selectedUser) insertMention(selectedUser);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setMentionQuery(null);
+        setTriggerRange(null);
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleAddComment();
+      onEnterPress?.();
+    } else if (e.key === "Escape") {
+      onEscapePress?.();
+    }
+  };
+  const handleInput = () => {
+    detectMention();
+    updateEmptyClass();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
+    /* @__PURE__ */ jsx(Avatar, { className: "shrink-0", user, usernameFieldPath, fallbackName: unknownLabel }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: editorWrapperRef,
+        className: "relative flex-1 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+                is-empty w-full min-h-5 leading-5
+                text-(--theme-text) text-[13px] outline-none box-border
+                [&.is-empty]:before:content-[attr(data-placeholder)] [&.is-empty]:before:text-(--theme-elevation-450)
+                [&.is-empty]:before:pointer-events-none [&.is-empty]:before:absolute
+              `,
+              ref: editorRef,
+              contentEditable: !disabled,
+              autoFocus,
+              role: "textbox",
+              "aria-multiline": "true",
+              "aria-label": placeholder,
+              "data-placeholder": placeholder,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown
+            }
+          ) }),
+          mentionQuery !== null && /* @__PURE__ */ jsx(
+            MentionDropdown,
+            {
+              users: filteredUsers,
+              selectedIndex,
+              onSelect: insertMention,
+              onClose: () => {
+                setMentionQuery(null);
+                setTriggerRange(null);
+                editorRef.current?.focus();
+              },
+              anchorRef: editorWrapperRef
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionPanel,
+            {
+              className: "hidden group-focus-within:flex",
+              onMention: () => insertAt(),
+              onAddComment: handleAddComment
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  CommentEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CommentEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentEditor/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useImperativeHandle, type RefObject, startTransition } from \"react\";\nimport { useAuth, useLocale, useTranslation } from \"@payloadcms/ui\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { MentionDropdown } from \"../MentionDropdown\";\nimport { MentionLabel } from \"../MentionLabel\";\nimport { serializeEditor } from \"../../utils/comment/serializeEditor\";\nimport { isSelfMention } from \"../../utils/mention/isSelfMention\";\nimport { createRoot } from \"react-dom/client\";\nimport type { User } from \"../../types\";\nimport { FALLBACK_USERNAME } from \"../../constants\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { ActionPanel } from \"./ActionPanel\";\nimport { Avatar } from \"../Avatar\";\n\nexport interface CommentEditorHandle {\n  getValue: () => string;\n  clear: () => void;\n  focus: () => void;\n  insertAt: () => void;\n}\n\ninterface CommentEditorProps {\n  disabled?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  ref?: RefObject<CommentEditorHandle | null>;\n  fieldPath?: string | null;\n  documentId?: number;\n  collectionSlug?: string;\n  globalSlug?: string;\n  onSuccessAddComment?: () => void;\n  onEnterPress?: () => void;\n  onEscapePress?: () => void;\n}\n\nexport function CommentEditor({\n  disabled,\n  autoFocus,\n  placeholder: placeholderProp,\n  ref,\n  fieldPath,\n  documentId,\n  collectionSlug,\n  globalSlug,\n  onSuccessAddComment,\n  onEnterPress,\n  onEscapePress,\n}: CommentEditorProps) {\n  const { mentionUsers: users, addComment } = useComments();\n  const { code: locale } = useLocale();\n  const { user } = useAuth();\n\n  const [mentionQuery, setMentionQuery] = useState<string | null>(null);\n  const [triggerRange, setTriggerRange] = useState<Range | null>(null);\n  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const { usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n\n  const editorRef = useRef<HTMLDivElement>(null);\n  const editorWrapperRef = useRef<HTMLDivElement>(null);\n\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const currentUserId = user?.id;\n  const placeholder = placeholderProp ?? t(\"comments:writeComment\" as never) ?? \"Add a comment\";\n\n  // Methods\n  const detectMention = () => {\n    const sel = window.getSelection();\n\n    if (!sel || !sel.rangeCount) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const range = sel.getRangeAt(0);\n    const node = range.startContainer;\n\n    if (node.nodeType !== Node.TEXT_NODE) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const text = node.textContent ?? \"\";\n    const offset = range.startOffset;\n\n    let i = offset - 1;\n    while (i >= 0 && text[i] !== \" \" && text[i] !== \"\\n\") {\n      if (text[i] === \"@\") {\n        const query = text.slice(i + 1, offset);\n        if (query.includes(\" \")) {\n          setMentionQuery(null);\n          return;\n        }\n\n        const atRange = document.createRange();\n        atRange.setStart(node, i);\n        atRange.setEnd(node, offset);\n        setTriggerRange(atRange.cloneRange());\n        setMentionQuery(query);\n        setFilteredUsers(\n          users.filter((u) =>\n            resolveUsername(u, usernameFieldPath, unknownLabel).toLowerCase().includes(query.toLowerCase()),\n          ),\n        );\n        setSelectedIndex(0);\n\n        return;\n      }\n\n      i--;\n    }\n\n    setMentionQuery(null);\n  };\n\n  const insertMention = (user: User) => {\n    if (!triggerRange || !editorRef.current) return;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    sel.removeAllRanges();\n    sel.addRange(triggerRange);\n    sel.deleteFromDocument();\n\n    const { id: userId } = user;\n\n    const mentionLabelContainer = document.createElement(\"span\");\n    const mentionLabelContainerRoot = createRoot(mentionLabelContainer);\n\n    mentionLabelContainerRoot.render(\n      <MentionLabel\n        name={resolveUsername(user, usernameFieldPath, unknownLabel)}\n        isSelf={isSelfMention(currentUserId, userId)}\n      />,\n    );\n\n    mentionLabelContainer.contentEditable = \"false\";\n    mentionLabelContainer.dataset.mentionId = String(userId);\n\n    const range2 = sel.getRangeAt(0);\n    range2.insertNode(mentionLabelContainer);\n\n    const zws = document.createTextNode(\"\\u200b\");\n    mentionLabelContainer.after(zws);\n\n    const newRange = document.createRange();\n    newRange.setStartAfter(zws);\n    newRange.collapse(true);\n    sel.removeAllRanges();\n    sel.addRange(newRange);\n\n    setMentionQuery(null);\n    setTriggerRange(null);\n    editorRef.current?.focus();\n  };\n\n  const insertAt = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    editor.focus();\n\n    const sel = window.getSelection();\n    if (!sel || !sel.rangeCount) {\n      const range = document.createRange();\n      range.selectNodeContents(editor);\n      range.collapse(false);\n      sel?.removeAllRanges();\n      sel?.addRange(range);\n    }\n\n    document.execCommand(\"insertText\", false, \"@\");\n    detectMention();\n  };\n\n  const updateEmptyClass = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    const isEmpty = editor.innerHTML === \"\" || editor.innerHTML === \"<br>\";\n\n    editor.classList.toggle(\"is-empty\", isEmpty);\n  };\n\n  // Editor API\n  const getEditorValue = () => {\n    if (!editorRef.current) return \"\";\n\n    return serializeEditor(editorRef.current).trim();\n  };\n\n  const clearEditor = () => {\n    setMentionQuery(null);\n    setTriggerRange(null);\n\n    if (editorRef.current) {\n      editorRef.current.innerHTML = \"\";\n      editorRef.current.classList.add(\"is-empty\");\n    }\n  };\n\n  const focusEditor = () => {\n    editorRef.current?.focus();\n  };\n\n  useImperativeHandle(ref, () => ({\n    getValue: getEditorValue,\n    clear: clearEditor,\n    focus: focusEditor,\n    insertAt,\n  }));\n\n  // Handlers\n  const handleAddComment = () => {\n    const serialized = getEditorValue();\n    if (!serialized) return;\n\n    clearEditor();\n\n    startTransition(async () => {\n      const res = await addComment(serialized, fieldPath, documentId, collectionSlug, locale, globalSlug);\n\n      if (res.success) {\n        onSuccessAddComment?.();\n      }\n    });\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (mentionQuery !== null) {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev + 1) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev - 1 + filteredUsers.length) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"Enter\" && filteredUsers.length > 0) {\n        e.preventDefault();\n        const selectedUser = filteredUsers[selectedIndex];\n        if (selectedUser) insertMention(selectedUser);\n        return;\n      }\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        setMentionQuery(null);\n        setTriggerRange(null);\n        return;\n      }\n    }\n\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n\n      handleAddComment();\n      onEnterPress?.();\n    } else if (e.key === \"Escape\") {\n      onEscapePress?.();\n    }\n  };\n\n  const handleInput = () => {\n    detectMention();\n    updateEmptyClass();\n  };\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar className=\"shrink-0\" user={user} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div\n          ref={editorWrapperRef}\n          className=\"relative flex-1 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent transition-colors\">\n          <div className=\"relative\">\n            <div\n              className={`\n                is-empty w-full min-h-5 leading-5\n                text-(--theme-text) text-[13px] outline-none box-border\n                [&.is-empty]:before:content-[attr(data-placeholder)] [&.is-empty]:before:text-(--theme-elevation-450)\n                [&.is-empty]:before:pointer-events-none [&.is-empty]:before:absolute\n              `}\n              ref={editorRef}\n              contentEditable={!disabled}\n              autoFocus={autoFocus}\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-label={placeholder}\n              data-placeholder={placeholder}\n              onInput={handleInput}\n              onKeyDown={handleKeyDown}\n            />\n          </div>\n\n          {mentionQuery !== null && (\n            <MentionDropdown\n              users={filteredUsers}\n              selectedIndex={selectedIndex}\n              onSelect={insertMention}\n              onClose={() => {\n                setMentionQuery(null);\n                setTriggerRange(null);\n                editorRef.current?.focus();\n              }}\n              anchorRef={editorWrapperRef}\n            />\n          )}\n\n          <ActionPanel\n            className=\"hidden group-focus-within:flex\"\n            onMention={() => insertAt()}\n            onAddComment={handleAddComment}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["user"]}

package/dist/components/CommentItem/ToolsPanel.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    isResolved: boolean;
+    canDelete: boolean;
+    onResolve: () => void;
+    onDelete: () => void;
+}
+export declare function ToolsPanel({ isResolved, canDelete, onDelete, onResolve }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ToolsPanel.d.ts.map

package/dist/components/CommentItem/ToolsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CommentItem/ToolsPanel.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,2CAsB/E"}

package/dist/components/CommentItem/ToolsPanel.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, Trash2, Undo2 } from "lucide-react";
+import { useTranslation } from "@payloadcms/ui";
+import { IconButton } from "../IconButton";
+function ToolsPanel({ isResolved, canDelete, onDelete, onResolve }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "absolute top-3 right-3 flex bg-(--theme-elevation-0) p-1 border rounded-md border-(--theme-elevation-100) opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none group-hover:pointer-events-auto", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onResolve,
+        title: isResolved ? t("comments:reopen") ?? "Reopen" : t("comments:resolve") ?? "Resolve",
+        children: isResolved ? /* @__PURE__ */ jsx(Undo2, { size: 16 }) : /* @__PURE__ */ jsx(CircleCheck, { size: 16 })
+      }
+    ),
+    canDelete && /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, title: t("comments:delete") ?? "Delete", children: /* @__PURE__ */ jsx(Trash2, { size: 16 }) })
+  ] });
+}
+export {
+  ToolsPanel
+};
+//# sourceMappingURL=ToolsPanel.js.map

package/dist/components/CommentItem/ToolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentItem/ToolsPanel.tsx"],"sourcesContent":["import { CircleCheck, Trash2, Undo2 } from \"lucide-react\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { IconButton } from \"../IconButton\";\n\ninterface Props {\n  isResolved: boolean;\n  canDelete: boolean;\n  onResolve: () => void;\n  onDelete: () => void;\n}\n\nexport function ToolsPanel({ isResolved, canDelete, onDelete, onResolve }: Props) {\n  const { t } = useTranslation();\n\n  return (\n    <div className=\"absolute top-3 right-3 flex bg-(--theme-elevation-0) p-1 border rounded-md border-(--theme-elevation-100) opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none group-hover:pointer-events-auto\">\n      <IconButton\n        onClick={onResolve}\n        title={\n          isResolved ? (t(\"comments:reopen\" as never) ?? \"Reopen\") : (t(\"comments:resolve\" as never) ?? \"Resolve\")\n        }>\n        {isResolved ?\n          <Undo2 size={16} />\n        : <CircleCheck size={16} />}\n      </IconButton>\n\n      {canDelete && (\n        <IconButton onClick={onDelete} title={t(\"comments:delete\" as never) ?? \"Delete\"}>\n          <Trash2 size={16} />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAeI,SAOM,KAPN;AAfJ,SAAS,aAAa,QAAQ,aAAa;AAC3C,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AASpB,SAAS,WAAW,EAAE,YAAY,WAAW,UAAU,UAAU,GAAU;AAChF,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,qBAAC,SAAI,WAAU,mOACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,OACE,aAAc,EAAE,iBAA0B,KAAK,WAAa,EAAE,kBAA2B,KAAK;AAAA,QAE/F,uBACC,oBAAC,SAAM,MAAM,IAAI,IACjB,oBAAC,eAAY,MAAM,IAAI;AAAA;AAAA,IAC3B;AAAA,IAEC,aACC,oBAAC,cAAW,SAAS,UAAU,OAAO,EAAE,iBAA0B,KAAK,UACrE,8BAAC,UAAO,MAAM,IAAI,GACpB;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/CommentItem/index.d.ts

@@ -0,0 +1,8 @@
+import type { Comment } from "../../types";
+interface Props {
+    comment: Comment;
+    currentUserId: number | null;
+}
+export declare function CommentItem({ comment, currentUserId }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentItem/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAS3C,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,2CA2D5D"}