strapi-plugin-comments 2.2.4 → 2.2.5

package/README.md

@@ -134,7 +134,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.5.5 (recently tested)
+- Strapi v4.6.0 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/tree/strapi-v3).
@@ -176,6 +176,7 @@ module.exports = ({ env }) => ({
         "*": ["Title", "title", "Name", "name", "Subject", "subject"],
         "api::page.page": ["MyField"],
       },
+      blockedAuthorProps: ["name", "email"],
       reportReasons: {
         MY_CUSTOM_REASON: "MY_CUSTOM_REASON",
       },
@@ -197,6 +198,7 @@ module.exports = ({ env }) => ({
 - `entryLabel` - ordered list of property names per Content Type to generate related entity label. Keys must be in format like `'api::<collection name>.<content type name>'`. Default formatting set as `*`.
 - `reportReasons` - set of enums you would like to use for issuing abuse reports. Provided by default `'BAD_LANGUAGE'`, `'DISCRIMINATION'` and `'OTHER'`.
 - `gql` - specific configuration for GraphQL. See [Additional GQL Configuration](#additional-gql-configuration)
+- `blockedAuthorProps` - list of author's entity properties removed from a response for client side
 
 ## Additional GQL Configuration
 

package/admin/src/components/AdminAvatar/index.js

@@ -9,9 +9,9 @@ const icons_1 = require("@strapi/icons");
 const Icon_1 = require("@strapi/design-system/Icon");
 const AdminAvatar = ({ children }) => {
     return (react_1.default.createElement(styles_1.AdminAvatarWrapper, null,
+        children,
         react_1.default.createElement(styles_1.AdminShield, null,
-            react_1.default.createElement(Icon_1.Icon, { as: icons_1.Shield, color: "neutral800" })),
-        children));
+            react_1.default.createElement(Icon_1.Icon, { as: icons_1.Shield, color: "neutral800" }))));
 };
 exports.default = AdminAvatar;
 //# sourceMappingURL=index.js.map

package/admin/src/components/AdminAvatar/styles.js

@@ -10,8 +10,16 @@ exports.AdminAvatarWrapper = (0, styled_components_1.default)(Box_1.Box) `
     position: relative;
 `;
 exports.AdminShield = (0, styled_components_1.default)(Box_1.Box) `
+    display: flex;
+    align-items: middle;
+
     position: absolute;
-    right: -30%;
-    top: -30%;
+    right: -35%;
+    top: -35%;
+
+    border-radius: 50%;
+    border: 2px #ffffff solid;
+
+    background: #ffffff;
 `;
 //# sourceMappingURL=styles.js.map

package/admin/src/components/Avatar/index.js

@@ -8,18 +8,15 @@ const lodash_1 = require("lodash");
 const Avatar_1 = require("@strapi/design-system/Avatar");
 const utils_1 = require("../../utils");
 const AdminAvatar_1 = __importDefault(require("../AdminAvatar"));
-;
-const UserAvatar = ({ avatar, name, isAdminComment = false }) => {
+const UserAvatar = ({ avatar, name, isAdminComment = false, }) => {
     if (avatar) {
         let image = avatar;
         if ((0, lodash_1.isObject)(avatar)) {
             image = avatar?.formats?.thumbnail.url || avatar.url;
         }
-        return (isAdminComment ? react_1.default.createElement(AdminAvatar_1.default, null, image && (react_1.default.createElement(Avatar_1.Avatar, { src: image, alt: name })))
-            : image && (react_1.default.createElement(Avatar_1.Avatar, { src: image, alt: name })));
+        return isAdminComment ? (react_1.default.createElement(AdminAvatar_1.default, null, image ? react_1.default.createElement(Avatar_1.Avatar, { src: image, alt: name }) : null)) : image ? (react_1.default.createElement(Avatar_1.Avatar, { src: image, alt: name })) : null;
     }
-    return (isAdminComment ? react_1.default.createElement(AdminAvatar_1.default, null, name && (react_1.default.createElement(Avatar_1.Initials, null, (0, utils_1.renderInitials)(name))))
-        : name && (react_1.default.createElement(Avatar_1.Initials, null, (0, utils_1.renderInitials)(name))));
+    return isAdminComment ? (react_1.default.createElement(AdminAvatar_1.default, null, name ? react_1.default.createElement(Avatar_1.Initials, null, (0, utils_1.renderInitials)(name)) : null)) : name ? (react_1.default.createElement(Avatar_1.Initials, null, (0, utils_1.renderInitials)(name))) : null;
 };
 exports.default = UserAvatar;
 //# sourceMappingURL=index.js.map

package/admin/src/components/DiscussionThreadItem/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,17 +29,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Box_1 = require("@strapi/design-system/Box");
 const Flex_1 = require("@strapi/design-system/Flex");
 const Typography_1 = require("@strapi/design-system/Typography");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const DiscussionThreadItemActions_1 = __importDefault(require("../DiscussionThreadItemActions"));
 const DiscussionThreadItemFooter_1 = __importDefault(require("../DiscussionThreadItemFooter"));
 const styles_1 = require("./styles");
+const satinizeHtml_1 = __importDefault(require("./../PreviewWysiwyg/utils/satinizeHtml"));
+const mdRenderer_1 = __importDefault(require("./../PreviewWysiwyg/utils/mdRenderer"));
 const DiscussionThreadItem = (props) => {
     const { as = "li", authorAvatar, authorName, content, isSelected, pinned, preview, root, } = props;
+    const sanitizedContent = (0, react_1.useMemo)(() => (0, satinizeHtml_1.default)(mdRenderer_1.default.render(content || '')), [content]);
     return (react_1.default.createElement(styles_1.DiscussionThreadFullsize, { as: as, marginBottom: preview ? 4 : 0 },
         react_1.default.createElement(styles_1.DiscussionThreadItemContainer, { as: Flex_1.Flex, direction: "column", alignItems: "flex-start", hasRadius: true, background: isSelected ? "neutral100" : null, paddingLeft: 2, paddingRight: 2, paddingTop: 4, paddingBottom: 4 },
             react_1.default.createElement(styles_1.DiscussionThreadItemContent, { as: Flex_1.Flex, paddingBottom: 2, direction: "row" },
                 react_1.default.createElement(Box_1.Box, { as: Flex_1.Flex, grow: 1, alignItems: "center", marginTop: "6px" },
-                    react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: "neutral800" }, content)),
+                    react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: "neutral800" },
+                        react_1.default.createElement(styles_1.DiscussionThreadItemContentTypographyRenderer, { dangerouslySetInnerHTML: { __html: sanitizedContent } }))),
                 !preview && (react_1.default.createElement(DiscussionThreadItemActions_1.default, { ...props, root: root || pinned, preview: preview }))),
             react_1.default.createElement(DiscussionThreadItemFooter_1.default, { ...props }))));
 };

package/admin/src/components/DiscussionThreadItem/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const DiscussionThreadFullsize: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export declare const DiscussionThreadItemContent: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
 export declare const DiscussionThreadItemContainer: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const DiscussionThreadItemContentTypographyRenderer: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=styles.d.ts.map

package/admin/src/components/DiscussionThreadItem/styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiscussionThreadItemContainer = exports.DiscussionThreadItemContent = exports.DiscussionThreadFullsize = void 0;
+exports.DiscussionThreadItemContentTypographyRenderer = exports.DiscussionThreadItemContainer = exports.DiscussionThreadItemContent = exports.DiscussionThreadFullsize = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Box_1 = require("@strapi/design-system/Box");
 exports.DiscussionThreadFullsize = (0, styled_components_1.default)(Box_1.Box) `
@@ -15,4 +15,17 @@ exports.DiscussionThreadItemContent = (0, styled_components_1.default)(exports.D
 exports.DiscussionThreadItemContainer = (0, styled_components_1.default)(exports.DiscussionThreadFullsize) `
   align-items: flex-start;
 `;
+exports.DiscussionThreadItemContentTypographyRenderer = styled_components_1.default.div `
+  strong {
+    font-weight: bold;
+  }
+
+  i, em {
+    font-style: italic;
+  }
+
+  u {
+    font-style: underline;
+  }
+`;
 //# sourceMappingURL=styles.js.map

package/admin/src/components/DiscussionThreadItemActions/index.js

@@ -48,7 +48,7 @@ const styles_3 = require("../ActionButton/styles");
 const DiscussionThreadItemReviewAction_1 = __importDefault(require("../DiscussionThreadItemReviewAction"));
 const ModeratorResponseModal_1 = __importDefault(require("../ModeratorResponseModal/ModeratorResponseModal"));
 const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessReports, canReviewReports }, ...item }) => {
-    const { id, blocked, removed, content, blockedThread, gotThread, threadFirstItemId, pinned, preview, reports = [], approvalStatus, author } = item;
+    const { id, blocked, removed, content, blockedThread, gotThread, threadFirstItemId, pinned, preview, reports = [], approvalStatus, author, isAdminComment, } = item;
     const user = helper_plugin_1.auth.get('userInfo');
     const [blockConfirmationVisible, setBlockConfirmationVisible] = (0, react_1.useState)(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = (0, react_1.useState)(false);
@@ -85,8 +85,9 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     const blockItemThreadMutation = (0, react_query_1.useMutation)(api_1.blockItemThread, mutationConfig("page.details.actions.thread.block.confirmation.success", setBlockThreadConfirmationVisible));
     const unblockItemThreadMutation = (0, react_query_1.useMutation)(api_1.unblockItemThread, mutationConfig("page.details.actions.thread.unblock.confirmation.success"));
     const deleteItemMutation = (0, react_query_1.useMutation)(api_1.deleteItem, mutationConfig("page.details.actions.comment.delete.confirmation.success"));
+    const isAdminAuthor = String(user?.id) === author?.id;
     const gotApprovalFlow = !(0, lodash_1.isNil)(approvalStatus);
-    const needsApproval = gotApprovalFlow && approvalStatus === "PENDING";
+    const needsApproval = !isAdminComment && gotApprovalFlow && approvalStatus === "PENDING";
     const isBlocked = blocked || blockedThread;
     const isRejected = gotApprovalFlow && approvalStatus === "REJECTED";
     const openReports = reports?.filter((_) => !_.resolved);
@@ -94,7 +95,6 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     const reviewFlowEnabled = (canAccessReports || canReviewReports) && hasReports;
     const hasActiveThread = gotThread && !(removed || preview || pinned || blockedThread);
     const isStatusBadgeVisible = isBlocked || reviewFlowEnabled;
-    const isAdminAuthor = String(user.id) === author.id;
     const renderStatus = (props) => {
         const status = (0, utils_1.resolveCommentStatus)({ ...props, reviewFlowEnabled });
         const color = (0, utils_1.resolveCommentStatusColor)(status);
@@ -172,17 +172,22 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     if (removed || isRejected || !canModerate) {
         return (react_1.default.createElement(styles_1.DiscussionThreadItemActionsWrapper, { as: Flex_1.Flex, direction: "row" }, renderStatus(item)));
     }
+    const isBlockEnabled = !blockedThread && !(blocked || needsApproval);
+    const isUnblockEnabled = !blockedThread && blocked;
+    const isRemovable = !blockedThread && !blocked && isAdminAuthor;
+    const isThreadStartEnabled = !hasActiveThread && !pinned && (!blockedThread && !blocked);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(styles_1.DiscussionThreadItemActionsWrapper, { as: Flex_1.Flex, direction: "row" },
             isStatusBadgeVisible && renderStatus(item),
             !blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleBlockThreadClick, startIcon: icons_2.lock, loading: blockItemThreadMutation.isLoading, variant: "danger" }, (0, utils_1.getMessage)("page.details.actions.thread.block", "Block thread"))),
             blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleUnblockThreadClick, startIcon: icons_2.unlock, loading: unblockItemThreadMutation.isLoading, variant: "success" }, (0, utils_1.getMessage)("page.details.actions.thread.unblock", "Unblock thread"))),
             anyGroupButtonsVisible && (react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: true, withMargin: true },
-                !blockedThread && !(blocked || needsApproval) && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleBlockClick, loading: blockItemMutation.isLoading, icon: icons_2.lock, label: (0, utils_1.getMessage)("page.details.actions.comment.block", "Block") })),
-                !blockedThread && blocked && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleUnblockClick, loading: unblockItemMutation.isLoading, icon: icons_2.unlock, label: (0, utils_1.getMessage)("page.details.actions.comment.unblock", "Unblock") })),
+                !isAdminComment && (react_1.default.createElement(react_1.default.Fragment, null,
+                    isBlockEnabled && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleBlockClick, loading: blockItemMutation.isLoading, icon: icons_2.lock, label: (0, utils_1.getMessage)("page.details.actions.comment.block", "Block") })),
+                    isUnblockEnabled && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleUnblockClick, loading: unblockItemMutation.isLoading, icon: icons_2.unlock, label: (0, utils_1.getMessage)("page.details.actions.comment.unblock", "Unblock") })))),
                 needsApproval && (react_1.default.createElement(DiscussionThreadItemApprovalFlowActions_1.default, { id: id, allowedActions: { canModerate }, queryToInvalidate: "get-details-data" })),
-                !blockedThread && !blocked && isAdminAuthor && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDeleteClick, loading: deleteItemMutation.isLoading, icon: icons_1.trash, label: (0, utils_1.getMessage)("page.details.actions.comment.delete", "Delete comment") })),
                 isAdminAuthor && !isBlocked && (react_1.default.createElement(IconButton_1.IconButton, { onClick: toggleUpdateCommentVisibility, icon: icons_1.pencil, label: (0, utils_1.getMessage)("page.details.actions.thread.modal.update.comment") })),
+                isRemovable && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDeleteClick, loading: deleteItemMutation.isLoading, icon: icons_1.trash, label: (0, utils_1.getMessage)("page.details.actions.comment.delete", "Delete comment") })),
                 react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-details-data", allowedActions: {
                         canModerate,
                         canAccessReports,
@@ -192,7 +197,8 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
                 react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDrilldownClick, icon: icons_2.eye, label: (0, utils_1.getMessage)("page.details.panel.discussion.nav.drilldown", "Drilldown thread"), style: blocked && !blockedThread
                         ? { marginTop: "1px", marginRight: ".5rem" }
                         : {} }))),
-            react_1.default.createElement(styles_2.IconButtonGroupStyled, null, !hasActiveThread && !pinned && (!blockedThread && !blocked) && (react_1.default.createElement(IconButton_1.IconButton, { onClick: toggleStartThreadVisibility, icon: icons_1.plus, label: (0, utils_1.getMessage)("page.details.actions.thread.modal.start.thread") })))),
+            isThreadStartEnabled && (react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: true, withMargin: true },
+                react_1.default.createElement(IconButton_1.IconButton, { onClick: toggleStartThreadVisibility, icon: icons_1.plus, label: (0, utils_1.getMessage)("page.details.actions.thread.modal.start.thread") })))),
         startThreadVisible &&
             react_1.default.createElement(ModeratorResponseModal_1.default, { content: "", id: id, title: (0, utils_1.getMessage)("page.details.actions.thread.modal.start.thread"), onClose: toggleStartThreadVisibility }),
         updateCommentVisible &&

package/admin/src/components/DiscussionThreadItemFooter/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import PropTypes from "prop-types";
 declare const DiscussionThreadItemFooter: {
-    ({ author, children, createdAt, updatedAt, }: {
+    ({ author, isAdminComment, children, createdAt, updatedAt, }: {
         author: any;
+        isAdminComment: any;
         children: any;
         createdAt: any;
         updatedAt: any;

package/admin/src/components/DiscussionThreadItemFooter/index.js

@@ -11,7 +11,7 @@ const Typography_1 = require("@strapi/design-system/Typography");
 const styles_1 = require("./styles");
 const Avatar_1 = __importDefault(require("../Avatar"));
 const utils_1 = require("../../utils");
-const DiscussionThreadItemFooter = ({ author, children, createdAt, updatedAt, }) => {
+const DiscussionThreadItemFooter = ({ author, isAdminComment, children, createdAt, updatedAt, }) => {
     const { formatDate } = (0, react_intl_1.useIntl)();
     const dateTime = formatDate(updatedAt || createdAt, {
         dateStyle: "medium",
@@ -20,7 +20,7 @@ const DiscussionThreadItemFooter = ({ author, children, createdAt, updatedAt, })
     const { name, avatar } = author || {};
     return (react_1.default.createElement(styles_1.DiscussionThreadItemFooterStyled, { as: Box_1.Box, paddingTop: 2, direction: "row" },
         react_1.default.createElement(styles_1.DiscussionThreadItemFooterMeta, { size: 3, horizontal: true },
-            avatar && react_1.default.createElement(Avatar_1.default, { avatar: avatar, name: name }),
+            author && react_1.default.createElement(Avatar_1.default, { avatar: avatar, name: name, isAdminComment: isAdminComment }),
             react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800" }, name || (0, utils_1.getMessage)("compontents.author.unknown")),
             react_1.default.createElement(Typography_1.Typography, { variant: "pi", textColor: "neutral600" }, dateTime)),
         children));

package/admin/src/components/ModeratorResponse/index.js

@@ -61,6 +61,7 @@ const ModeratorResponse = ({ rootThread, }) => {
             message: `${pluginId_1.pluginId}.${message}`,
         });
         stateAction(false);
+        setCommentField('');
         unlockApp();
     };
     const onError = (err) => {
@@ -102,7 +103,7 @@ const ModeratorResponse = ({ rootThread, }) => {
                 react_1.default.createElement(Wysiwyg_1.default, { name: "", value: commentField, onChange: handleCommentChange, intlLabel: intlLabel })),
             react_1.default.createElement(Flex_1.Flex, { direction: "row", justifyContent: "flex-end", gap: 2 },
                 blockedThread && (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: handleReopen, disabled: isFieldEmpty }, (0, utils_1.getMessage)("page.details.panel.discussion.reopen", "Re-open"))),
-                react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: handleSave, disabled: isFieldEmpty }, (0, utils_1.getMessage)("page.details.panel.discussion.send", "Send"))))));
+                react_1.default.createElement(Button_1.Button, { variant: "primary", onClick: handleSave, disabled: isFieldEmpty }, (0, utils_1.getMessage)("page.details.panel.discussion.send", "Send"))))));
 };
 exports.default = ModeratorResponse;
 //# sourceMappingURL=index.js.map

package/admin/src/components/PreviewWysiwyg/utils/satinizeHtml.d.ts

@@ -1,3 +1,3 @@
-declare const clean: (dirty: any) => any;
+declare const clean: (dirty: any, options?: any) => any;
 export default clean;
 //# sourceMappingURL=satinizeHtml.d.ts.map

package/admin/src/components/PreviewWysiwyg/utils/satinizeHtml.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const sanitize_html_1 = __importDefault(require("sanitize-html"));
-const options = {
+const defaultOptions = {
     ...sanitize_html_1.default.defaults,
     allowedTags: false,
     allowedAttributes: {
@@ -13,6 +13,6 @@ const options = {
         source: ['src', 'type'],
     },
 };
-const clean = dirty => (0, sanitize_html_1.default)(dirty, options);
+const clean = (dirty, options = defaultOptions) => (0, sanitize_html_1.default)(dirty, options);
 exports.default = clean;
 //# sourceMappingURL=satinizeHtml.js.map

package/admin/src/components/Wysiwyg/Editor.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const lodash_1 = require("lodash");
 const codemirror_1 = __importDefault(require("codemirror"));
 require("codemirror/addon/display/placeholder");
 const PreviewWysiwyg_1 = __importDefault(require("../PreviewWysiwyg"));
@@ -55,7 +56,7 @@ const Editor = ({ disabled, editorRef, error, isPreviewMode, isExpandMode, name,
         });
     }, [editorRef, textareaRef, name, placeholder]);
     (0, react_1.useEffect)(() => {
-        if (value && !editorRef.current.state.focused) {
+        if ((0, lodash_1.isString)(value) && !editorRef.current.state.focused) {
             editorRef.current.setValue(value);
         }
     }, [editorRef, value]);

package/admin/src/components/Wysiwyg/WysiwygNav.js

@@ -32,7 +32,6 @@ const FocusTrap_1 = require("@strapi/design-system/FocusTrap");
 const Box_1 = require("@strapi/design-system/Box");
 const Button_1 = require("@strapi/design-system/Button");
 const IconButton_1 = require("@strapi/design-system/IconButton");
-const Select_1 = require("@strapi/design-system/Select");
 const Popover_1 = require("@strapi/design-system/Popover");
 const Flex_1 = require("@strapi/design-system/Flex");
 const Bold_1 = __importDefault(require("@strapi/icons/Bold"));
@@ -45,15 +44,10 @@ const Code_1 = __importDefault(require("@strapi/icons/Code"));
 const Picture_1 = __importDefault(require("@strapi/icons/Picture"));
 const Link_1 = __importDefault(require("@strapi/icons/Link"));
 const Quote_1 = __importDefault(require("@strapi/icons/Quote"));
-const More_1 = __importDefault(require("@strapi/icons/More"));
 const WysiwygStyles_1 = require("./WysiwygStyles");
 const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode, }) => {
     const [visiblePopover, setVisiblePopover] = (0, react_1.useState)(false);
     const { formatMessage } = (0, react_intl_1.useIntl)();
-    const selectPlaceholder = formatMessage({
-        id: 'components.Wysiwyg.selectOptions.title',
-        defaultMessage: 'Add a title',
-    });
     const buttonMoreRef = (0, react_1.useRef)();
     const handleTogglePopover = () => {
         setVisiblePopover(prev => !prev);
@@ -62,18 +56,10 @@ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onAction
         return (react_1.default.createElement(Box_1.Box, { padding: 2, background: "neutral100" },
             react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between" },
                 react_1.default.createElement(Flex_1.Flex, null,
-                    react_1.default.createElement(Select_1.Select, { disabled: true, id: "selectTitle", placeholder: selectPlaceholder, size: "S", "aria-label": selectPlaceholder },
-                        react_1.default.createElement(Select_1.Option, { value: "h1" }, "h1"),
-                        react_1.default.createElement(Select_1.Option, { value: "h2" }, "h2"),
-                        react_1.default.createElement(Select_1.Option, { value: "h3" }, "h3"),
-                        react_1.default.createElement(Select_1.Option, { value: "h4" }, "h4"),
-                        react_1.default.createElement(Select_1.Option, { value: "h5" }, "h5"),
-                        react_1.default.createElement(Select_1.Option, { value: "h6" }, "h6")),
                     react_1.default.createElement(WysiwygStyles_1.MainButtons, null,
                         react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Bold", label: "Bold", name: "Bold", icon: react_1.default.createElement(Bold_1.default, null) }),
                         react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Italic", label: "Italic", name: "Italic", icon: react_1.default.createElement(Italic_1.default, null) }),
-                        react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Underline", label: "Underline", name: "Underline", icon: react_1.default.createElement(Underline_1.default, null) })),
-                    react_1.default.createElement(WysiwygStyles_1.MoreButton, { disabled: true, id: "more", label: "More", icon: react_1.default.createElement(More_1.default, null) })),
+                        react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Underline", label: "Underline", name: "Underline", icon: react_1.default.createElement(Underline_1.default, null) }))),
                 !isExpandMode && (react_1.default.createElement(Button_1.Button, { onClick: onTogglePreviewMode, variant: "tertiary", id: "preview" }, formatMessage({
                     id: 'components.Wysiwyg.ToggleMode.markdown-mode',
                     defaultMessage: 'Markdown mode',
@@ -82,18 +68,10 @@ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onAction
     return (react_1.default.createElement(Box_1.Box, { padding: 2, background: "neutral100" },
         react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between" },
             react_1.default.createElement(Flex_1.Flex, null,
-                react_1.default.createElement(Select_1.Select, { id: "selectTitle", placeholder: selectPlaceholder, size: "S", onChange: (value) => onActionClick(value, editorRef) },
-                    react_1.default.createElement(Select_1.Option, { value: "h1" }, "h1"),
-                    react_1.default.createElement(Select_1.Option, { value: "h2" }, "h2"),
-                    react_1.default.createElement(Select_1.Option, { value: "h3" }, "h3"),
-                    react_1.default.createElement(Select_1.Option, { value: "h4" }, "h4"),
-                    react_1.default.createElement(Select_1.Option, { value: "h5" }, "h5"),
-                    react_1.default.createElement(Select_1.Option, { value: "h6" }, "h6")),
                 react_1.default.createElement(WysiwygStyles_1.MainButtons, null,
                     react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Bold', editorRef), id: "Bold", label: "Bold", name: "Bold", icon: react_1.default.createElement(Bold_1.default, null) }),
                     react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Italic', editorRef), id: "Italic", label: "Italic", name: "Italic", icon: react_1.default.createElement(Italic_1.default, null) }),
                     react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Underline', editorRef), id: "Underline", label: "Underline", name: "Underline", icon: react_1.default.createElement(Underline_1.default, null) })),
-                react_1.default.createElement(WysiwygStyles_1.MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, id: "more", label: "More", icon: react_1.default.createElement(More_1.default, null) }),
                 visiblePopover && (react_1.default.createElement(Popover_1.Popover, { centered: true, source: buttonMoreRef, spacing: 4, id: "popover" },
                     react_1.default.createElement(FocusTrap_1.FocusTrap, { onEscape: handleTogglePopover, restoreFocus: false },
                         react_1.default.createElement(Flex_1.Flex, null,

package/admin/src/components/Wysiwyg/WysiwygStyles.js

@@ -24,7 +24,7 @@ exports.CustomLinkIconButton = (0, styled_components_1.default)(exports.CustomIc
   }
 `;
 exports.MainButtons = (0, styled_components_1.default)(IconButton_1.IconButtonGroup) `
-  margin-left: ${({ theme }) => theme.spaces[4]};
+  
 `;
 exports.MoreButton = (0, styled_components_1.default)(IconButton_1.IconButton) `
   margin: ${({ theme }) => `0 ${theme.spaces[2]}`};

package/admin/src/pages/Details/index.js

@@ -44,10 +44,11 @@ const getMessage_1 = __importDefault(require("../../utils/getMessage"));
 const api_1 = require("../utils/api");
 const permissions_1 = __importDefault(require("../../permissions"));
 const utils_1 = require("../../utils");
+const Nav_1 = __importDefault(require("../../components/Nav"));
 const DetailsEntity_1 = __importDefault(require("./components/DetailsEntity"));
 const DiscussionThread_1 = __importDefault(require("../../components/DiscussionThread"));
 const selectors_1 = __importDefault(require("../App/reducer/selectors"));
-const index_1 = __importDefault(require("../../components/ModeratorResponse/index"));
+const ModeratorResponse_1 = __importDefault(require("../../components/ModeratorResponse"));
 const Details = ({ config }) => {
     (0, helper_plugin_1.useFocusWhenNavigate)();
     const { params: { id }, } = (0, react_router_dom_1.useRouteMatch)((0, utils_1.getUrl)(`discover/:id`));
@@ -77,7 +78,7 @@ const Details = ({ config }) => {
     const isLoading = isLoadingForData || isFetching;
     if (canAccess) {
         return (react_1.default.createElement(Box_1.Box, { background: "neutral100" },
-            react_1.default.createElement(Layout_1.Layout, null, (isLoading || isLoadingForPermissions) && (0, lodash_1.isEmpty)(data) ? (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Layout_1.Layout, { sideNav: react_1.default.createElement(Nav_1.default, { visible: true }) }, (isLoading || isLoadingForPermissions) && (0, lodash_1.isEmpty)(data) ? (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Layout_1.HeaderLayout, { navigationAction: react_1.default.createElement(Link_1.Link, { startIcon: icons_1.arrowLeft, to: (0, utils_1.getUrl)(`discover`) }, (0, getMessage_1.default)("HeaderLayout.link.go-back", "Back", false)), title: (0, getMessage_1.default)("page.details.header"), subtitle: (0, getMessage_1.default)("page.details.header.description"), as: "h2" }),
                 react_1.default.createElement(Layout_1.ContentLayout, null,
                     react_1.default.createElement(Layout_1.TwoColsLayout, { startCol: react_1.default.createElement(react_1.default.Fragment, null,
@@ -86,7 +87,7 @@ const Details = ({ config }) => {
                                     canAccessReports,
                                     canReviewReports,
                                 } }),
-                            selected?.threadOf && (react_1.default.createElement(index_1.default, { rootThread: { ...selected.threadOf } }))), endCol: react_1.default.createElement(DetailsEntity_1.default, { data: entity, schema: contentTypeData?.schema, config: config, filters: filters, onFiltersChange: handleChangeFilters }) })))))));
+                            selected?.threadOf && (react_1.default.createElement(ModeratorResponse_1.default, { rootThread: { ...selected.threadOf } }))), endCol: react_1.default.createElement(DetailsEntity_1.default, { data: entity, schema: contentTypeData?.schema, config: config, filters: filters, onFiltersChange: handleChangeFilters }) })))))));
     }
     return null;
 };

package/admin/src/pages/Discover/components/DiscoverTableRow/index.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_intl_1 = require("react-intl");
 const lodash_1 = require("lodash");
@@ -22,6 +45,8 @@ const StatusBadge_1 = __importDefault(require("../../../../components/StatusBadg
 const styles_2 = require("../../../../components/IconButton/styles");
 const DiscussionThreadItemReviewAction_1 = __importDefault(require("../../../../components/DiscussionThreadItemReviewAction"));
 const Avatar_1 = __importDefault(require("../../../../components/Avatar"));
+const satinizeHtml_1 = __importDefault(require("../../../../components/PreviewWysiwyg/utils/satinizeHtml"));
+const mdRenderer_1 = __importDefault(require("../../../../components/PreviewWysiwyg/utils/mdRenderer"));
 const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick, }) => {
     const { reports } = item;
     const { formatDate } = (0, react_intl_1.useIntl)();
@@ -48,6 +73,10 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
         actionItemsCount = 2;
     }
     const { author, isAdminComment, id, content, threadOf, related, createdAt, updatedAt } = item;
+    const sanitizedContent = (0, react_1.useMemo)(() => (0, satinizeHtml_1.default)(mdRenderer_1.default.render(content || ''), {
+        allowedTags: [],
+        allowedAttributes: {}
+    }), [content]);
     return (react_1.default.createElement(Table_1.Tr, { key: id },
         react_1.default.createElement(Table_1.Td, null,
             react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", fontWeight: "bold" },
@@ -58,7 +87,7 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
                 author && (react_1.default.createElement(Avatar_1.default, { avatar: author.avatar, name: author.name, isAdminComment: isAdminComment })),
                 react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", variant: "pi" }, author?.name || (0, utils_1.getMessage)('compontents.author.unknown')))),
         react_1.default.createElement(Table_1.Td, { style: { maxWidth: "30vw" } },
-            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", ellipsis: true }, content)),
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", ellipsis: true }, sanitizedContent)),
         react_1.default.createElement(Table_1.Td, null, threadOf?.id ? (react_1.default.createElement(Link_1.Link, { to: renderDetailsUrl(threadOf) }, (0, utils_1.getMessage)({
             id: "page.discover.table.cell.thread",
             props: { id: threadOf.id },

package/admin/src/pages/Settings/index.js

@@ -116,6 +116,7 @@ const Settings = () => {
     const moderatorRoles = configData?.moderatorRoles?.filter((code) => allRoles.find((_) => _.code === code)) || [];
     const clientUrl = configData?.client?.url;
     const clientEmail = configData?.client?.contactEmail;
+    const blockedAuthorProps = configData?.blockedAuthorProps ?? [];
     const changeApprovalFlowFor = (uid, current, value) => {
         const currentSet = new Set(current);
         if (value) {
@@ -180,6 +181,7 @@ const Settings = () => {
                 clientEmail,
                 clientUrl,
                 gqlAuthEnabled,
+                blockedAuthorProps,
             }, enableReinitialize: true, onSubmit: handleUpdateConfiguration }, ({ handleSubmit, setFieldValue, values }) => (react_1.default.createElement(helper_plugin_1.Form, { noValidate: true, onSubmit: handleSubmit },
             react_1.default.createElement(Layout_1.HeaderLayout, { title: (0, utils_1.getMessage)("page.settings.header.title"), subtitle: (0, utils_1.getMessage)("page.settings.header.description"), primaryAction: react_1.default.createElement(helper_plugin_1.CheckPermissions, { permissions: permissions_1.default.settingsChange },
                     react_1.default.createElement(Button_1.Button, { type: "submit", startIcon: icons_1.check, disabled: restartRequired }, (0, utils_1.getMessage)("page.settings.actions.submit"))) }),
@@ -213,9 +215,11 @@ const Settings = () => {
                         react_1.default.createElement(Stack_1.Stack, { size: 4 },
                             react_1.default.createElement(Typography_1.Typography, { variant: "delta", as: "h2" }, (0, utils_1.getMessage)("page.settings.section.additional")),
                             react_1.default.createElement(Grid_1.Grid, { gap: 4 },
-                                react_1.default.createElement(Grid_1.GridItem, { col: 6, xs: 12 },
+                                react_1.default.createElement(Grid_1.GridItem, { col: 4, xs: 12 },
                                     react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "badWords", label: (0, utils_1.getMessage)("page.settings.form.badWords.label"), hint: (0, utils_1.getMessage)("page.settings.form.badWords.hint"), checked: values.badWords, onChange: ({ target: { checked } }) => setFieldValue("badWords", checked, false), onLabel: (0, utils_1.getMessage)("compontents.toogle.enabled"), offLabel: (0, utils_1.getMessage)("compontents.toogle.disabled"), disabled: restartRequired })),
-                                isGQLPluginEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 6, xs: 12 },
+                                react_1.default.createElement(Grid_1.GridItem, { col: 4, xs: 12 },
+                                    react_1.default.createElement(TextInput_1.TextInput, { type: "text", name: "blockedAuthorProps", label: (0, utils_1.getMessage)("page.settings.form.author.blockedProps.label"), hint: (0, utils_1.getMessage)("page.settings.form.author.blockedProps.hint"), value: values.blockedAuthorProps.join(", "), onChange: ({ target: { value } }) => setFieldValue("blockedAuthorProps", value.split(', ').map(_ => _.trim()), false), disabled: restartRequired })),
+                                isGQLPluginEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 4, xs: 12 },
                                     react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "gqlAuthEnabled", label: (0, utils_1.getMessage)("page.settings.form.gqlAuth.label"), hint: (0, utils_1.getMessage)("page.settings.form.gqlAuth.hint"), checked: values.gqlAuthEnabled, onChange: ({ target: { checked } }) => setFieldValue("gqlAuthEnabled", checked, false), onLabel: (0, utils_1.getMessage)("compontents.toogle.enabled"), offLabel: (0, utils_1.getMessage)("compontents.toogle.disabled"), disabled: restartRequired })))))),
                     react_1.default.createElement(Box_1.Box, { ...boxDefaultProps },
                         react_1.default.createElement(Stack_1.Stack, { size: 4 },

package/admin/src/translations/en.json

@@ -78,7 +78,7 @@
   "page.details.panel.discussion.status.blocked": "Blocked",
   "page.details.panel.discussion.reply":"Reply",
   "page.details.panel.discussion.reopen":"Re-open",
-  "page.details.panel.discussion.send":"Send",
+  "page.details.panel.discussion.send":"Send Moderator response",
   "page.details.actions.comment.post.confirmation": "Comment has been posted",
   "page.details.actions.comment.update.confirmation": "Comment has been updated",
   "page.details.panel.entity": "Entity details",
@@ -157,6 +157,8 @@
   "page.settings.notification.restart.success": "Application has been restarted successfully",
   "page.settings.notification.restart.error": "Failed to restart your application. Try to do it manually.",
   "page.settings.loading": "Fetching configuration...",
+  "page.settings.form.author.blockedProps.label": "Blocked author details",
+  "page.settings.form.author.blockedProps.hint": "Specified properties will be filtered out from author's details (comma-separated)",
   "compontents.confirmation.dialog.header": "Confirmation",
   "compontents.confirmation.dialog.description": "Do you really want to perform this action?",
   "compontents.confirmation.dialog.button.confirm": "Yes, I do",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",
@@ -14,8 +14,8 @@
     "url": "https://github.com/VirtusLab-Open-Source/strapi-plugin-comments"
   },
   "dependencies": {
-    "@strapi/plugin-graphql": "^4.5.5",
-    "@strapi/utils": "^4.5.5",
+    "@strapi/plugin-graphql": "^4.6.0",
+    "@strapi/utils": "^4.6.0",
     "@types/axios": "^0.14.0",
     "@types/react-intl": "^3.0.0",
     "@types/react-query": "^1.2.9",

package/server/config/index.js

@@ -13,6 +13,7 @@ const config = {
             DISCRIMINATION: "DISCRIMINATION",
             OTHER: "OTHER",
         },
+        blockedAuthorProps: [],
     },
 };
 exports.default = config;