@focus-reactive/payload-plugin-comments 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/components/FieldCommentLabel/AddCommentPopup.d.ts.map +1 -1
- package/dist/components/FieldCommentLabel/AddCommentPopup.js +1 -0
- package/dist/components/FieldCommentLabel/AddCommentPopup.js.map +1 -1
- package/dist/components/FieldCommentLabel/index.d.ts +1 -1
- package/dist/components/FieldCommentLabel/index.d.ts.map +1 -1
- package/dist/components/FieldCommentLabel/index.js +2 -1
- package/dist/components/FieldCommentLabel/index.js.map +1 -1
- package/dist/components/FieldCommentLabel/types.d.ts +1 -1
- package/dist/components/FieldCommentLabel/types.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
# @focus-reactive/payload-plugin-comments
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
[](https://www.npmjs.com/package/@focus-reactive/payload-plugin-comments)
|
|
4
5
|
|
|
5
6
|
A collaborative commenting plugin for [Payload CMS](https://payloadcms.com/) v3. Adds a full-featured comments system to the Payload admin panel — supporting document-level and field-level comments on both collections and globals, @mentions with email notifications, comment resolution, multi-tenancy, and locale-aware filtering.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddCommentPopup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"AddCommentPopup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA0C1E"}
|
|
@@ -24,6 +24,7 @@ function AddCommentPopup({ fieldPath, showTrigger, onToggle }) {
|
|
|
24
24
|
setTimeout(() => editorAPI.current?.focus());
|
|
25
25
|
},
|
|
26
26
|
onToggleClose: () => {
|
|
27
|
+
onToggle(false);
|
|
27
28
|
editorAPI.current?.clear();
|
|
28
29
|
},
|
|
29
30
|
render: ({ close }) => /* @__PURE__ */ jsxs("div", { className: "w-80", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popup, useTranslation } from \"@payloadcms/ui\";\nimport { IconButton } from \"../IconButton\";\nimport { cn } from \"../../utils/general/cn\";\nimport { MessageSquarePlus } from \"lucide-react\";\nimport { CommentEditor, type CommentEditorHandle } from \"../CommentEditor\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useRef } from \"react\";\n\ninterface Props {\n fieldPath: string;\n showTrigger: boolean;\n onToggle: (isOpen: boolean) => void;\n}\n\nexport function AddCommentPopup({ fieldPath, showTrigger, onToggle }: Props) {\n const { t } = useTranslation();\n const { mode, globalSlug } = useComments();\n const editorAPI = useRef<CommentEditorHandle | null>(null);\n\n const trigger = (\n <IconButton className={cn(showTrigger ? \"opacity-100\" : \"opacity-0\")} size=\"sm\" title={t(\"comments:add\" as never)}>\n <MessageSquarePlus size={14} />\n </IconButton>\n );\n\n return (\n <Popup\n buttonType=\"custom\"\n button={trigger}\n horizontalAlign=\"right\"\n size=\"fit-content\"\n onToggleOpen={(active: boolean) => {\n onToggle(active);\n setTimeout(() => editorAPI.current?.focus());\n }}\n onToggleClose={() => {\n editorAPI.current?.clear();\n }}\n render={({ close }) => (\n <div className=\"w-80\">\n <p className=\"m-0 mb-3 text-[14px] font-semibold text-(--theme-text)\">{t(\"comments:add\" as never)}</p>\n\n <CommentEditor\n ref={editorAPI}\n fieldPath={fieldPath}\n globalSlug={mode === \"global-document\" ? (globalSlug ?? undefined) : undefined}\n autoFocus\n onSuccessAddComment={close}\n onEscapePress={close}\n placeholder={`${t(\"comments:writeComment\" as never)}…`}\n />\n </div>\n )}\n />\n );\n}\n"],"mappings":";AAuBM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popup, useTranslation } from \"@payloadcms/ui\";\nimport { IconButton } from \"../IconButton\";\nimport { cn } from \"../../utils/general/cn\";\nimport { MessageSquarePlus } from \"lucide-react\";\nimport { CommentEditor, type CommentEditorHandle } from \"../CommentEditor\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useRef } from \"react\";\n\ninterface Props {\n fieldPath: string;\n showTrigger: boolean;\n onToggle: (isOpen: boolean) => void;\n}\n\nexport function AddCommentPopup({ fieldPath, showTrigger, onToggle }: Props) {\n const { t } = useTranslation();\n const { mode, globalSlug } = useComments();\n const editorAPI = useRef<CommentEditorHandle | null>(null);\n\n const trigger = (\n <IconButton className={cn(showTrigger ? \"opacity-100\" : \"opacity-0\")} size=\"sm\" title={t(\"comments:add\" as never)}>\n <MessageSquarePlus size={14} />\n </IconButton>\n );\n\n return (\n <Popup\n buttonType=\"custom\"\n button={trigger}\n horizontalAlign=\"right\"\n size=\"fit-content\"\n onToggleOpen={(active: boolean) => {\n onToggle(active);\n setTimeout(() => editorAPI.current?.focus());\n }}\n onToggleClose={() => {\n onToggle(false);\n editorAPI.current?.clear();\n }}\n render={({ close }) => (\n <div className=\"w-80\">\n <p className=\"m-0 mb-3 text-[14px] font-semibold text-(--theme-text)\">{t(\"comments:add\" as never)}</p>\n\n <CommentEditor\n ref={editorAPI}\n fieldPath={fieldPath}\n globalSlug={mode === \"global-document\" ? (globalSlug ?? undefined) : undefined}\n autoFocus\n onSuccessAddComment={close}\n onEscapePress={close}\n placeholder={`${t(\"comments:writeComment\" as never)}…`}\n />\n </div>\n )}\n />\n );\n}\n"],"mappings":";AAuBM,cAmBE,YAnBF;AArBN,SAAS,OAAO,sBAAsB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAClC,SAAS,qBAA+C;AACxD,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAQhB,SAAS,gBAAgB,EAAE,WAAW,aAAa,SAAS,GAAU;AAC3E,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,MAAM,WAAW,IAAI,YAAY;AACzC,QAAM,YAAY,OAAmC,IAAI;AAEzD,QAAM,UACJ,oBAAC,cAAW,WAAW,GAAG,cAAc,gBAAgB,WAAW,GAAG,MAAK,MAAK,OAAO,EAAE,cAAuB,GAC9G,8BAAC,qBAAkB,MAAM,IAAI,GAC/B;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,QAAQ;AAAA,MACR,iBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,cAAc,CAAC,WAAoB;AACjC,iBAAS,MAAM;AACf,mBAAW,MAAM,UAAU,SAAS,MAAM,CAAC;AAAA,MAC7C;AAAA,MACA,eAAe,MAAM;AACnB,iBAAS,KAAK;AACd,kBAAU,SAAS,MAAM;AAAA,MAC3B;AAAA,MACA,QAAQ,CAAC,EAAE,MAAM,MACf,qBAAC,SAAI,WAAU,QACb;AAAA,4BAAC,OAAE,WAAU,0DAA0D,YAAE,cAAuB,GAAE;AAAA,QAElG;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,YAAY,SAAS,oBAAqB,cAAc,SAAa;AAAA,YACrE,WAAS;AAAA,YACT,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,aAAa,GAAG,EAAE,uBAAgC,CAAC;AAAA;AAAA,QACrD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -6,6 +6,6 @@ interface Props extends FieldLabelClientProps {
|
|
|
6
6
|
required?: boolean;
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
|
-
export declare function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props): import("react/jsx-runtime").JSX.Element | null;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,kDAwD3E"}
|
|
@@ -30,6 +30,7 @@ function FieldCommentLabel({ field, htmlFor, path: fieldPath }) {
|
|
|
30
30
|
const handleToggle = (isOpen) => {
|
|
31
31
|
setIsPopupOpen(isOpen);
|
|
32
32
|
};
|
|
33
|
+
if (!resolvedLabel) return null;
|
|
33
34
|
return /* @__PURE__ */ jsxs(
|
|
34
35
|
"div",
|
|
35
36
|
{
|
|
@@ -37,7 +38,7 @@ function FieldCommentLabel({ field, htmlFor, path: fieldPath }) {
|
|
|
37
38
|
onMouseEnter: () => setIsHovered(true),
|
|
38
39
|
onMouseLeave: () => setIsHovered(false),
|
|
39
40
|
children: [
|
|
40
|
-
|
|
41
|
+
/* @__PURE__ */ jsxs("label", { className: "field-label p-0", htmlFor, children: [
|
|
41
42
|
resolvedLabel,
|
|
42
43
|
required && /* @__PURE__ */ jsx("span", { className: "required", children: "*" })
|
|
43
44
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FieldCommentLabel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useTranslation, useLocale } from \"@payloadcms/ui\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport type { FieldLabelClientProps } from \"payload\";\nimport type { Label } from \"./types\";\nimport { resolveLabel } from \"./utils/resolveLabel\";\nimport { excludeComments } from \"./utils/exludeComments\";\nimport { useStablePath } from \"./hooks/useStablePath\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\nimport { AddCommentPopup } from \"./AddCommentPopup\";\n\ninterface Props extends FieldLabelClientProps {\n field: FieldLabelClientProps[\"field\"] & {\n label?: Label;\n required?: boolean;\n };\n}\n\nexport function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props) {\n const { label, required } = field;\n\n const { t } = useTranslation();\n const { code: locale } = useLocale();\n const { open: openDrawer, setScrollTargetPath } = useCommentsDrawer();\n const { visibleComments, setFilter, mode } = useComments();\n\n const [isHovered, setIsHovered] = useState(false);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const resolvedLabel = resolveLabel(label, locale);\n const stablePath = useStablePath(fieldPath ?? \"\");\n const fieldComments = excludeComments(visibleComments, stablePath || undefined, locale);\n const openCommentsCount = fieldComments.length;\n\n const handleOpenDrawer = () => {\n setFilter(\"open\");\n setScrollTargetPath(stablePath || null);\n openDrawer();\n };\n\n const handleToggle = (isOpen: boolean) => {\n setIsPopupOpen(isOpen);\n };\n\n return (\n <div\n className=\"flex items-center gap-1.5 pb-1.25\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}>\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FieldCommentLabel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useTranslation, useLocale } from \"@payloadcms/ui\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport type { FieldLabelClientProps } from \"payload\";\nimport type { Label } from \"./types\";\nimport { resolveLabel } from \"./utils/resolveLabel\";\nimport { excludeComments } from \"./utils/exludeComments\";\nimport { useStablePath } from \"./hooks/useStablePath\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\nimport { AddCommentPopup } from \"./AddCommentPopup\";\n\ninterface Props extends FieldLabelClientProps {\n field: FieldLabelClientProps[\"field\"] & {\n label?: Label;\n required?: boolean;\n };\n}\n\nexport function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props) {\n const { label, required } = field;\n\n const { t } = useTranslation();\n const { code: locale } = useLocale();\n const { open: openDrawer, setScrollTargetPath } = useCommentsDrawer();\n const { visibleComments, setFilter, mode } = useComments();\n\n const [isHovered, setIsHovered] = useState(false);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const resolvedLabel = resolveLabel(label, locale);\n const stablePath = useStablePath(fieldPath ?? \"\");\n const fieldComments = excludeComments(visibleComments, stablePath || undefined, locale);\n const openCommentsCount = fieldComments.length;\n\n const handleOpenDrawer = () => {\n setFilter(\"open\");\n setScrollTargetPath(stablePath || null);\n openDrawer();\n };\n\n const handleToggle = (isOpen: boolean) => {\n setIsPopupOpen(isOpen);\n };\n\n if (!resolvedLabel) return null;\n\n return (\n <div\n className=\"flex items-center gap-1.5 pb-1.25\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}>\n <label className=\"field-label p-0\" htmlFor={htmlFor}>\n {resolvedLabel}\n\n {required && <span className=\"required\">*</span>}\n </label>\n\n {fieldPath && (mode === \"document\" || mode === \"global-document\") && (\n <div className=\"relative flex items-center\">\n {openCommentsCount > 0 ?\n <IconButton\n className=\"w-auto px-1 gap-1 text-[12px] font-semibold leading-none\"\n size=\"sm\"\n title={t(\"comments:openComments\" as never, { count: openCommentsCount })}\n onClick={handleOpenDrawer}>\n <MessageSquareIcon size={14} />\n\n {openCommentsCount}\n </IconButton>\n : <AddCommentPopup fieldPath={stablePath} showTrigger={isHovered || isPopupOpen} onToggle={handleToggle} />}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";AAuDM,SAGe,KAHf;AArDN,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,iBAAiB;AAC1C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAG5B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AASzB,SAAS,kBAAkB,EAAE,OAAO,SAAS,MAAM,UAAU,GAAU;AAC5E,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,MAAM,OAAO,IAAI,UAAU;AACnC,QAAM,EAAE,MAAM,YAAY,oBAAoB,IAAI,kBAAkB;AACpE,QAAM,EAAE,iBAAiB,WAAW,KAAK,IAAI,YAAY;AAEzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,gBAAgB,aAAa,OAAO,MAAM;AAChD,QAAM,aAAa,cAAc,aAAa,EAAE;AAChD,QAAM,gBAAgB,gBAAgB,iBAAiB,cAAc,QAAW,MAAM;AACtF,QAAM,oBAAoB,cAAc;AAExC,QAAM,mBAAmB,MAAM;AAC7B,cAAU,MAAM;AAChB,wBAAoB,cAAc,IAAI;AACtC,eAAW;AAAA,EACb;AAEA,QAAM,eAAe,CAAC,WAAoB;AACxC,mBAAe,MAAM;AAAA,EACvB;AAEA,MAAI,CAAC,cAAe,QAAO;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC;AAAA,6BAAC,WAAM,WAAU,mBAAkB,SAChC;AAAA;AAAA,UAEA,YAAY,oBAAC,UAAK,WAAU,YAAW,eAAC;AAAA,WAC3C;AAAA,QAEC,cAAc,SAAS,cAAc,SAAS,sBAC7C,oBAAC,SAAI,WAAU,8BACZ,8BAAoB,IACnB;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,EAAE,yBAAkC,EAAE,OAAO,kBAAkB,CAAC;AAAA,YACvE,SAAS;AAAA,YACT;AAAA,kCAAC,qBAAkB,MAAM,IAAI;AAAA,cAE5B;AAAA;AAAA;AAAA,QACH,IACA,oBAAC,mBAAgB,WAAW,YAAY,aAAa,aAAa,aAAa,UAAU,cAAc,GAC3G;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/types.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/types.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC"}
|