@selfcommunity/react-ui 0.7.0-alpha.324 → 0.7.0-alpha.326

package/lib/esm/components/Editor/plugins/OnChangePlugin.js

@@ -1,60 +1,6 @@
 import React from 'react';
 import { OnChangePlugin as LexicalOnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { ImageNode } from '../nodes/ImageNode';
-import { MentionNode } from '../nodes/MentionNode';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { CodeNode } from '@lexical/code';
 import { $generateHtmlFromNodes } from '@lexical/html';
-const IS_BOLD = 1;
-const IS_ITALIC = 2;
-const convertText = (node) => {
-    if (node.getFormat() === IS_BOLD) {
-        return `<strong>${node.__text}</strong>`;
-    }
-    else if (node.getFormat() === IS_ITALIC) {
-        return `<em>${node.__text}</em>`;
-    }
-    return `<span>${node.__text}</span>`;
-};
-const convertNode = (node, children) => {
-    switch (node.getType()) {
-        case ImageNode.getType():
-            return `<img src="${node.__src}" alt="${node.__altText}" width="${node.__width}" height="${node.__height}" style="max-width: ${node.__maxWidth}px;" />`;
-        case MentionNode.getType():
-            return `<mention id="${node.__user.id}" ext-id="${node.__user.ext_id}">@${node.__user.username}</mention>`;
-        case AutoLinkNode.getType():
-        case LinkNode.getType():
-            return `<a href="${node.__url}">${node.__url}</a>`;
-        case 'list':
-            return `<${node.__tag}>${children}</${node.__tag}>`;
-        case 'listitem':
-            return `<li>${node.__value}</li>`;
-        case QuoteNode.getType():
-            return `<blockquote>${children}</blockquote>`;
-        case CodeNode.getType():
-            return `<pre>${children}</pre>`;
-        case 'linebreak':
-            return `<br/>`;
-        case 'text':
-            return convertText(node);
-        case HeadingNode.getType():
-            return `<${node.__tag}>${children}</${node.__tag}>`;
-        case 'paragraph':
-            return `<p>${children ? children : '<br/>'}</p>`;
-        case 'root':
-            return children;
-        default:
-            return '';
-    }
-};
-const $toHtml = (node) => {
-    let html = '';
-    // Create html for child nodes
-    node.getChildren && node.getChildren().map((child) => (html += $toHtml(child)));
-    // Return new html
-    return convertNode(node, html);
-};
 const OnChangePlugin = (props) => {
     // PROPS
     const { onChange } = props;

package/lib/esm/components/FeedObject/Activities/Activities.js

@@ -88,7 +88,7 @@ export default function Activities(inProps) {
      * Render comments of feedObject
      */
     function renderComments() {
-        return (React.createElement(React.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign({ truncateContent: true }, CommentComponentProps), { cacheStrategy }), (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), inPlaceLoadMoreContents: false })))));
+        return (React.createElement(React.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign(Object.assign({}, (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), { truncateContent: true }), CommentComponentProps), { cacheStrategy }), inPlaceLoadMoreContents: false })))));
     }
     /**
      * Renders root object

package/lib/esm/components/FeedObject/Activities/RelevantActivities/CommentActivity/CommentActivity.js

@@ -3,12 +3,14 @@ import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import BaseItem from '../../../../../shared/BaseItem';
 import UserDeletedSnackBar from '../../../../../shared/UserDeletedSnackBar';
+import { getContributionHtml, getRouteData } from '../../../../../utils/contribution';
+import { MAX_SUMMARY_LENGTH } from '../../../../../constants/Feed';
 const messages = defineMessages({
     comment: {
         id: 'ui.feedObject.relevantActivities.comment',
@@ -19,7 +21,8 @@ const PREFIX = 'SCCommentRelevantActivity';
 const classes = {
     root: `${PREFIX}-root`,
     avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    username: `${PREFIX}-username`,
+    showMoreContent: `${PREFIX}-show-more-content`
 };
 const Root = styled(BaseItem, {
     name: PREFIX,
@@ -53,11 +56,19 @@ export default function CommentRelevantActivity(inProps) {
     // INTL
     const intl = useIntl();
     // RENDER
+    const summaryHtmlTruncated = 'summary_truncated' in activityObject.comment
+        ? activityObject.comment.summary_truncated
+        : activityObject.comment.html.length >= MAX_SUMMARY_LENGTH;
+    const commentHtml = 'summary_html' in activityObject.comment ? activityObject.comment.summary_html : activityObject.comment.summary;
+    const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
     return (React.createElement(React.Fragment, null,
         React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className), image: React.createElement(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null }),
                 React.createElement(Avatar, { alt: activityObject.author.username, variant: "circular", src: activityObject.author.avatar, className: classes.avatar })), primary: React.createElement(React.Fragment, null, intl.formatMessage(messages.comment, {
                 username: (React.createElement(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }), activityObject.author.username)),
-                comment: activityObject.comment.summary
+                comment: (React.createElement(React.Fragment, null,
+                    summaryHtml,
+                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(activityObject.comment)), className: classes.showMoreContent },
+                        React.createElement(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }))))
             })), secondary: React.createElement(DateTimeAgo, { date: activityObject.active_at }) })),
         openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }

package/lib/esm/components/FeedObject/FeedObject.js

@@ -459,7 +459,7 @@ export default function FeedObject(inProps) {
             template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (React.createElement(Collapse, { in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } },
                 React.createElement(CardContent, { className: classes.activitiesContent },
                     React.createElement(Activities, Object.assign({ feedObject: obj, key: selectedActivities, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
-                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                             CommentObjectSkeletonProps: CommentObjectSkeletonProps
                         }, cacheStrategy: cacheStrategy }, ActivitiesProps))))),
             composerOpen && (React.createElement(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true, scroll: "body" })))) : (React.createElement(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps)))));