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

package/lib/cjs/components/CommentObject/CommentObject.d.ts

@@ -1,5 +1,6 @@
 import { CardProps } from '@mui/material';
 import { SCCommentsOrderBy } from '../../types/comments';
+import { CommentsObjectProps } from '../CommentsObject';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
 import { CacheStrategies } from '@selfcommunity/utils';
 export interface CommentObjectProps {
@@ -79,6 +80,11 @@ export interface CommentObjectProps {
      * @default {elevation: 0}
      */
     CommentObjectReplyProps?: CardProps;
+    /**
+     * Props to spread to sub comments object
+     * @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
+     */
+    CommentsObjectProps?: CommentsObjectProps;
     /**
      * If datetime is linkable or not
      * @default true

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

@@ -11,13 +11,13 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Errors_1 = require("../../constants/Errors");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const comments_1 = require("../../types/comments");
+const CommentsObject_1 = tslib_1.__importDefault(require("../CommentsObject"));
 const CommentObjectReply_1 = tslib_1.__importDefault(require("../CommentObjectReply"));
 const ContributionActionsMenu_1 = tslib_1.__importDefault(require("../../shared/ContributionActionsMenu"));
 const DateTimeAgo_1 = tslib_1.__importDefault(require("../../shared/DateTimeAgo"));
 const contribution_1 = require("../../utils/contribution");
 const notistack_1 = require("notistack");
 const system_1 = require("@mui/system");
-const CommentsObject_1 = tslib_1.__importDefault(require("../CommentsObject"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -95,7 +95,7 @@ function CommentObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectProps"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -365,8 +365,8 @@ function CommentObject(inProps) {
      * @param comment
      */
     function renderLatestComment(comment) {
-        return (react_1.default.createElement(CommentsObject_1.default, { feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
-                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, cacheStrategy: cacheStrategy, inPlaceLoadMoreContents: true }));
+        return (react_1.default.createElement(CommentsObject_1.default, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments

package/lib/cjs/components/Editor/nodes/ImageNode.d.ts

@@ -14,22 +14,18 @@ declare function convertImageElement(domNode: any): {
 };
 export declare type SerializedImageNode = Spread<{
     altText: string;
-    height?: number;
     maxWidth: number | string;
     src: string;
-    width?: number;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
     __maxWidth: number | string;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
-    constructor(src: string, altText: string, maxWidth: number | string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, maxWidth: number | string, key?: NodeKey);
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
@@ -44,6 +40,6 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportJSON(): SerializedImageNode;
 }
-export declare function $createImageNode({ src, altText, maxWidth, width, height }: ImagePayload): ImageNode;
+export declare function $createImageNode({ src, altText, maxWidth }: ImagePayload): ImageNode;
 export declare function $isImageNode(node?: LexicalNode): boolean;
 export {};

package/lib/cjs/components/Editor/nodes/ImageNode.js

@@ -28,7 +28,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
             width: `${width}${width === 'inherit' ? '' : 'px'}`
         } }));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
+function ImageComponent({ src, altText, nodeKey, maxWidth }) {
     const imageRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
@@ -96,30 +96,28 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
     }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
     const isFocused = isSelected;
     return (react_1.default.createElement(react_1.Suspense, { fallback: null },
-        react_1.default.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth })));
+        react_1.default.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
-        const { alt: altText, src, dataset: { width, height } } = domNode;
-        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width), maxWidth: '100%' });
+        const { alt: altText, src } = domNode;
+        const node = $createImageNode({ altText, src, maxWidth: '100%' });
         return { node };
     }
     return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, maxWidth, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__width = width || 'inherit';
         this.__maxWidth = maxWidth;
-        this.__height = height || 'inherit';
     }
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -156,21 +154,17 @@ class ImageNode extends lexical_1.DecoratorNode {
         const element = document.createElement('img');
         element.setAttribute('src', this.__src);
         element.setAttribute('alt', this.__altText);
-        element.setAttribute('width', `${this.__width}`);
-        element.setAttribute('height', `${this.__height}`);
         element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
         return { element };
     }
     decorate() {
-        return (react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }));
+        return react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, maxWidth, src } = serializedNode;
         const node = $createImageNode({
             altText,
-            height,
             src,
-            width,
             maxWidth
         });
         return node;
@@ -178,18 +172,16 @@ class ImageNode extends lexical_1.DecoratorNode {
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
             maxWidth: this.__maxWidth,
             src: this.getSrc(),
             type: 'image',
-            version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            version: 1
         };
     }
 }
 exports.ImageNode = ImageNode;
-function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+function $createImageNode({ src, altText, maxWidth }) {
+    return new ImageNode(src, altText, maxWidth);
 }
 exports.$createImageNode = $createImageNode;
 function $isImageNode(node) {

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

@@ -90,7 +90,7 @@ function Activities(inProps) {
      * Render comments of feedObject
      */
     function renderComments() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (react_1.default.createElement(CommentsObject_1.default, 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_1.default.createElement(react_1.default.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (react_1.default.createElement(CommentsObject_1.default, 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: Object.assign({ inPlaceLoadMoreContents: false }, CommentsObjectProps) }), inPlaceLoadMoreContents: false })))));
     }
     /**
      * Renders root object

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

@@ -11,6 +11,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const BaseItem_1 = tslib_1.__importDefault(require("../../../../../shared/BaseItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../../../shared/UserDeletedSnackBar"));
+const contribution_1 = require("../../../../../utils/contribution");
+const Feed_1 = require("../../../../../constants/Feed");
 const messages = (0, react_intl_1.defineMessages)({
     comment: {
         id: 'ui.feedObject.relevantActivities.comment',
@@ -21,7 +23,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 = (0, styles_1.styled)(BaseItem_1.default, {
     name: PREFIX,
@@ -55,11 +58,19 @@ function CommentRelevantActivity(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // RENDER
+    const summaryHtmlTruncated = 'summary_truncated' in activityObject.comment
+        ? activityObject.comment.summary_truncated
+        : activityObject.comment.html.length >= Feed_1.MAX_SUMMARY_LENGTH;
+    const commentHtml = 'summary_html' in activityObject.comment ? activityObject.comment.summary_html : activityObject.comment.summary;
+    const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className), image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(material_1.Avatar, { alt: activityObject.author.username, variant: "circular", src: activityObject.author.avatar, className: classes.avatar })), primary: react_1.default.createElement(react_1.default.Fragment, null, intl.formatMessage(messages.comment, {
                 username: (react_1.default.createElement(react_core_1.Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(react_core_1.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_1.default.createElement(react_1.default.Fragment, null,
+                    summaryHtml,
+                    react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(activityObject.comment)), className: classes.showMoreContent },
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }))))
             })), secondary: react_1.default.createElement(DateTimeAgo_1.default, { date: activityObject.active_at }) })),
         openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }

package/lib/cjs/components/FeedObject/FeedObject.js

@@ -461,7 +461,7 @@ function FeedObject(inProps) {
             template === feedObject_1.SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (react_1.default.createElement(material_1.Collapse, { in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } },
                 react_1.default.createElement(CardContent_1.default, { className: classes.activitiesContent },
                     react_1.default.createElement(Activities_1.default, 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, CommentsObjectProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                             CommentObjectSkeletonProps: CommentObjectSkeletonProps
                         }, cacheStrategy: cacheStrategy }, ActivitiesProps))))),
             composerOpen && (react_1.default.createElement(Composer_1.default, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true, scroll: "body" })))) : (react_1.default.createElement(Skeleton_1.default, Object.assign({ template: template }, FeedObjectSkeletonProps)))));

package/lib/esm/components/CommentObject/CommentObject.d.ts

@@ -1,5 +1,6 @@
 import { CardProps } from '@mui/material';
 import { SCCommentsOrderBy } from '../../types/comments';
+import { CommentsObjectProps } from '../CommentsObject';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
 import { CacheStrategies } from '@selfcommunity/utils';
 export interface CommentObjectProps {
@@ -79,6 +80,11 @@ export interface CommentObjectProps {
      * @default {elevation: 0}
      */
     CommentObjectReplyProps?: CardProps;
+    /**
+     * Props to spread to sub comments object
+     * @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
+     */
+    CommentsObjectProps?: CommentsObjectProps;
     /**
      * If datetime is linkable or not
      * @default true

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

@@ -9,13 +9,13 @@ import classNames from 'classnames';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import CommentObjectSkeleton from './Skeleton';
 import { SCCommentsOrderBy } from '../../types/comments';
+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 { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
-import CommentsObject from '../CommentsObject';
 import BaseItem from '../../shared/BaseItem';
 import { SCContributionType } from '@selfcommunity/types';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -93,7 +93,7 @@ export default function CommentObject(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy"]);
+    const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = CacheStrategies.NETWORK_ONLY, CommentsObjectProps = {} } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectProps"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
@@ -363,8 +363,8 @@ export default function CommentObject(inProps) {
      * @param comment
      */
     function renderLatestComment(comment) {
-        return (React.createElement(CommentsObject, { feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
-                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, cacheStrategy: cacheStrategy, inPlaceLoadMoreContents: true }));
+        return (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments

package/lib/esm/components/Editor/nodes/ImageNode.d.ts

@@ -14,22 +14,18 @@ declare function convertImageElement(domNode: any): {
 };
 export declare type SerializedImageNode = Spread<{
     altText: string;
-    height?: number;
     maxWidth: number | string;
     src: string;
-    width?: number;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
     __maxWidth: number | string;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
-    constructor(src: string, altText: string, maxWidth: number | string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, maxWidth: number | string, key?: NodeKey);
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
@@ -44,6 +40,6 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportJSON(): SerializedImageNode;
 }
-export declare function $createImageNode({ src, altText, maxWidth, width, height }: ImagePayload): ImageNode;
+export declare function $createImageNode({ src, altText, maxWidth }: ImagePayload): ImageNode;
 export declare function $isImageNode(node?: LexicalNode): boolean;
 export {};

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -24,7 +24,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
             width: `${width}${width === 'inherit' ? '' : 'px'}`
         } }));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
+function ImageComponent({ src, altText, nodeKey, maxWidth }) {
     const imageRef = useRef(null);
     const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -92,30 +92,28 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
     }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
     const isFocused = isSelected;
     return (React.createElement(Suspense, { fallback: null },
-        React.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth })));
+        React.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
-        const { alt: altText, src, dataset: { width, height } } = domNode;
-        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width), maxWidth: '100%' });
+        const { alt: altText, src } = domNode;
+        const node = $createImageNode({ altText, src, maxWidth: '100%' });
         return { node };
     }
     return null;
 }
 export class ImageNode extends DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, maxWidth, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__width = width || 'inherit';
         this.__maxWidth = maxWidth;
-        this.__height = height || 'inherit';
     }
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -152,21 +150,17 @@ export class ImageNode extends DecoratorNode {
         const element = document.createElement('img');
         element.setAttribute('src', this.__src);
         element.setAttribute('alt', this.__altText);
-        element.setAttribute('width', `${this.__width}`);
-        element.setAttribute('height', `${this.__height}`);
         element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
         return { element };
     }
     decorate() {
-        return (React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }));
+        return React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, maxWidth, src } = serializedNode;
         const node = $createImageNode({
             altText,
-            height,
             src,
-            width,
             maxWidth
         });
         return node;
@@ -174,17 +168,15 @@ export class ImageNode extends DecoratorNode {
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
             maxWidth: this.__maxWidth,
             src: this.getSrc(),
             type: 'image',
-            version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            version: 1
         };
     }
 }
-export function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+export function $createImageNode({ src, altText, maxWidth }) {
+    return new ImageNode(src, altText, maxWidth);
 }
 export function $isImageNode(node) {
     return node.getType() === 'image';

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({ truncateContent: true }, CommentComponentProps), { cacheStrategy }), { CommentsObjectProps: Object.assign({ inPlaceLoadMoreContents: false }, CommentsObjectProps) }), 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, CommentsObjectProps: { 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)))));