@selfcommunity/react-ui 0.7.0-alpha.323 → 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);
@@ -192,7 +192,10 @@ function CommentObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
-                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, data] }));
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
+                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, _data] }));
                 setReplyComment(null);
                 setIsReplying(false);
             })
@@ -329,8 +332,8 @@ function CommentObject(inProps) {
             // or the comment author is the logged user
             return null;
         }
-        const commentHtml = comment.summary_html && truncateContent ? comment.summary_html : comment.html;
-        const summaryHtmlTruncated = comment.summary_truncated ? comment.summary_truncated : false;
+        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);
         return (react_1.default.createElement(react_1.default.Fragment, { key: comment.id },
             editComment && editComment.id === comment.id ? (react_1.default.createElement(material_1.Box, { className: classes.comment },
@@ -362,7 +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 }), 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/CommentsObject/CommentsObject.d.ts

@@ -112,7 +112,7 @@ export interface CommentsObjectProps {
     hidePaginationLinks?: boolean;
     /**
      * Load more contents in place
-       * rather than opening a new page
+     * rather than opening a new page
      */
     inPlaceLoadMoreContents?: boolean;
     /**

package/lib/cjs/components/CommentsObject/CommentsObject.js

@@ -199,9 +199,9 @@ function CommentsObject(inProps) {
     /**
      * Render comments and load others with load more button
      */
-    function renderComments(comments, truncateContent = null) {
+    function renderComments(comments) {
         return (react_1.default.createElement(react_1.default.Fragment, null, comments.map((comment, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-            react_1.default.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }, (truncateContent !== null ? { truncateContent } : {}))),
+            react_1.default.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps })),
             advPosition === index && renderAdvertising())))));
     }
     /**
@@ -233,8 +233,8 @@ function CommentsObject(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
-        renderComments(getFilteredComments(startComments), false),
+        renderComments(getFilteredComments(startComments)),
         commentsRendered,
-        renderComments(getFilteredComments(endComments), false)));
+        renderComments(getFilteredComments(endComments))));
 }
 exports.default = CommentsObject;

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/Feed/Feed.js

@@ -415,7 +415,7 @@ const Feed = (inProps, ref) => {
             react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)))) : null,
         react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 7 },
             react_1.default.createElement("div", { style: { overflow: 'visible' } },
-                react_1.default.createElement(InfiniteScroll_1.default, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: 1, endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
+                react_1.default.createElement(InfiniteScroll_1.default, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
                         react_1.default.createElement(Widget_1.default, { className: classes.endMessage },
                             react_1.default.createElement(material_1.CardContent, null, endMessage)),
                         advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,

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({}, 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

@@ -348,12 +348,15 @@ function FeedObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
                 if (selectedActivities !== feedObject_1.SCFeedObjectActivitiesType.RECENT_COMMENTS) {
                     setComments([]);
                     setSelectedActivities(feedObject_1.SCFeedObjectActivitiesType.RECENT_COMMENTS);
                 }
                 else {
-                    setComments([...[data], ...comments]);
+                    setComments([...[_data], ...comments]);
                 }
                 setIsReplying(false);
                 const newObj = Object.assign({}, obj, { comment_count: obj.comment_count + 1 });
@@ -380,8 +383,8 @@ function FeedObject(inProps) {
      * Get contribution summary
      */
     const getContributionSummary = (0, react_1.useCallback)((obj, template) => {
-        const contributionHtml = obj.summary_html ? obj.summary_html : obj.summary;
-        const summaryHtmlTruncated = obj.summary_truncated ? obj.summary_truncated : obj.html.length >= Feed_1.MAX_SUMMARY_LENGTH;
+        const contributionHtml = 'summary_html' in obj ? obj.summary_html : obj.summary;
+        const summaryHtmlTruncated = 'summary_truncated' in obj ? obj.summary_truncated : obj.html.length >= Feed_1.MAX_SUMMARY_LENGTH;
         const summaryHtml = expanded || template === feedObject_1.SCFeedObjectTemplateType.DETAIL
             ? (0, contribution_1.getContributionHtml)(obj.html, scRoutingContext.url)
             : (0, contribution_1.getContributionHtml)(contributionHtml, scRoutingContext.url);
@@ -458,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);
@@ -190,7 +190,10 @@ export default function CommentObject(inProps) {
             setIsReplying(true);
             performReply(comment)
                 .then((data) => {
-                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, data] }));
+                // if add a comment -> the comment must be untruncated
+                const _data = data;
+                _data.summary_truncated = false;
+                updateObject(Object.assign(Object.assign({}, obj), { comment_count: obj.comment_count + 1, latest_comments: [...obj.latest_comments, _data] }));
                 setReplyComment(null);
                 setIsReplying(false);
             })
@@ -327,8 +330,8 @@ export default function CommentObject(inProps) {
             // or the comment author is the logged user
             return null;
         }
-        const commentHtml = comment.summary_html && truncateContent ? comment.summary_html : comment.html;
-        const summaryHtmlTruncated = comment.summary_truncated ? comment.summary_truncated : false;
+        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);
         return (React.createElement(React.Fragment, { key: comment.id },
             editComment && editComment.id === comment.id ? (React.createElement(Box, { className: classes.comment },
@@ -360,7 +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 }), 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/CommentsObject/CommentsObject.d.ts

@@ -112,7 +112,7 @@ export interface CommentsObjectProps {
     hidePaginationLinks?: boolean;
     /**
      * Load more contents in place
-       * rather than opening a new page
+     * rather than opening a new page
      */
     inPlaceLoadMoreContents?: boolean;
     /**

package/lib/esm/components/CommentsObject/CommentsObject.js

@@ -197,9 +197,9 @@ export default function CommentsObject(inProps) {
     /**
      * Render comments and load others with load more button
      */
-    function renderComments(comments, truncateContent = null) {
+    function renderComments(comments) {
         return (React.createElement(React.Fragment, null, comments.map((comment, index) => (React.createElement(React.Fragment, { key: index },
-            React.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }, (truncateContent !== null ? { truncateContent } : {}))),
+            React.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps })),
             advPosition === index && renderAdvertising())))));
     }
     /**
@@ -231,7 +231,7 @@ export default function CommentsObject(inProps) {
      * Renders root object
      */
     return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        renderComments(getFilteredComments(startComments), false),
+        renderComments(getFilteredComments(startComments)),
         commentsRendered,
-        renderComments(getFilteredComments(endComments), false)));
+        renderComments(getFilteredComments(endComments))));
 }

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/Feed/Feed.js

@@ -412,7 +412,7 @@ const Feed = (inProps, ref) => {
             React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)))) : null,
         React.createElement(Grid, { item: true, xs: 12, md: 7 },
             React.createElement("div", { style: { overflow: 'visible' } },
-                React.createElement(InfiniteScroll, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: 1, endMessage: React.createElement(Box, { className: classes.end },
+                React.createElement(InfiniteScroll, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: React.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: React.createElement(Box, { className: classes.end },
                         React.createElement(Widget, { className: classes.endMessage },
                             React.createElement(CardContent, null, endMessage)),
                         advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,

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({}, 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