@selfcommunity/react-ui 0.10.2-alpha.10 → 0.10.2-alpha.11

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -303,7 +303,7 @@ function CommentObject(inProps) {
         }
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
-        const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
+        const summaryHtml = (0, contribution_1.getCommentContributionHtml)(commentHtml, scRoutingContext.url);
         return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [collapsed ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.flagChip, color: "error", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**

package/lib/cjs/utils/contribution.d.ts

@@ -21,6 +21,13 @@ export declare function getContributionSnippet(obj: any): any;
  * @param handleUrl Func that handle urls
  */
 export declare function getContributionHtml(html: any, handleUrl: any): any;
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+export declare function getCommentContributionHtml(html: any, handleUrl: any): any;
 /**
  * Get route name for a contribution
  * @param obj

package/lib/cjs/utils/contribution.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRouteData = exports.getContributionRouteName = exports.getContributionHtml = exports.getContributionSnippet = exports.getContribution = exports.getContributionType = void 0;
+exports.getRouteData = exports.getContributionRouteName = exports.getCommentContributionHtml = exports.getContributionHtml = exports.getContributionSnippet = exports.getContribution = exports.getContributionType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -63,6 +63,18 @@ function getContributionHtml(html, handleUrl) {
     });
 }
 exports.getContributionHtml = getContributionHtml;
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+function getCommentContributionHtml(html, handleUrl) {
+    return html.replace(/<mention.*? id="([0-9]+)"{1}.*?>@([a-z\d_-]+)<\/mention>/gi, (match, id, username) => {
+        return `<a href='${handleUrl(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
+    });
+}
+exports.getCommentContributionHtml = getCommentContributionHtml;
 /**
  * Get route name for a contribution
  * @param obj

package/lib/esm/components/CommentObject/CommentObject.js

@@ -14,7 +14,7 @@ import CommentsObject from '../CommentsObject';
 import CommentObjectReply from '../CommentObjectReply';
 import ContributionActionsMenu from '../../shared/ContributionActionsMenu';
 import DateTimeAgo from '../../shared/DateTimeAgo';
-import { getContributionHtml, getContributionType, getRouteData } from '../../utils/contribution';
+import { getCommentContributionHtml, getContributionType, getRouteData } from '../../utils/contribution';
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
 import BaseItem from '../../shared/BaseItem';
@@ -301,7 +301,7 @@ export default function CommentObject(inProps) {
         }
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
-        const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
+        const summaryHtml = getCommentContributionHtml(commentHtml, scRoutingContext.url);
         return (_jsxs(React.Fragment, { children: [collapsed ? (_jsx(BaseItem, { elevation: 0, className: classes.comment, disableTypography: true, primary: _jsxs(Widget, Object.assign({ className: classNames(classes.content, classes.collapsed), elevation: elevation }, rest, { children: [_jsx(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.collapsed", defaultMessage: "ui.commentObject.collapsed" }) })), _jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(IconButton, Object.assign({ onClick: () => setCollapsed(!collapsed) }, { children: _jsx(Icon, { children: "visibility" }) })) }))] })) })) : editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsxs(_Fragment, { children: [_jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), comment.collapsed && (_jsx(Chip, { className: classes.flagChip, color: "error", size: "small", label: _jsx(FormattedMessage, { id: "ui.commentObject.flag", defaultMessage: "ui.commentObject.flag" }) })), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), _jsxs(Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), _jsx(Bullet, {}), _jsx(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), _jsx(Bullet, {}), renderActionReply(comment), _jsx(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && _jsx(Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (_jsx(Box, Object.assign({ className: classes.nestedComments }, { children: _jsx(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**

package/lib/esm/utils/contribution.d.ts

@@ -21,6 +21,13 @@ export declare function getContributionSnippet(obj: any): any;
  * @param handleUrl Func that handle urls
  */
 export declare function getContributionHtml(html: any, handleUrl: any): any;
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+export declare function getCommentContributionHtml(html: any, handleUrl: any): any;
 /**
  * Get route name for a contribution
  * @param obj

package/lib/esm/utils/contribution.js

@@ -56,6 +56,17 @@ export function getContributionHtml(html, handleUrl) {
         return `<a href='${handleUrl(SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
     });
 }
+/**
+ * Get the contribution text for comment object
+ * Hydrate text with mention, etc.
+ * @param html Html of the contribution
+ * @param handleUrl Func that handle urls
+ */
+export function getCommentContributionHtml(html, handleUrl) {
+    return html.replace(/<mention.*? id="([0-9]+)"{1}.*?>@([a-z\d_-]+)<\/mention>/gi, (match, id, username) => {
+        return `<a href='${handleUrl(SCRoutes.USER_PROFILE_ROUTE_NAME, { id, username })}'>@${username}</a>`;
+    });
+}
 /**
  * Get route name for a contribution
  * @param obj