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

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

@@ -84,7 +84,7 @@ export interface CommentObjectProps {
      * Props to spread to sub comments object
      * @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
      */
-    CommentsObjectProps?: CommentsObjectProps;
+    CommentsObjectComponentProps?: CommentsObjectProps;
     /**
      * If datetime is linkable or not
      * @default true

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

@@ -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, 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"]);
+    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, CommentsObjectComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -366,7 +366,7 @@ function CommentObject(inProps) {
      */
     function renderLatestComment(comment) {
         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 })));
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectComponentProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments

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

@@ -94,9 +94,8 @@ function ImageComponent({ src, altText, nodeKey, maxWidth }) {
             unregister();
         };
     }, [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, maxWidth: maxWidth })));
+        react_1.default.createElement(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
@@ -130,13 +129,13 @@ class ImageNode extends lexical_1.DecoratorNode {
     }
     // View
     createDOM(config) {
-        const span = document.createElement('span');
+        const div = document.createElement('div');
         const theme = config.theme;
         const className = theme.image;
         if (className !== undefined) {
-            span.className = className;
+            div.className = className;
         }
-        return span;
+        return div;
     }
     updateDOM() {
         return false;

package/lib/cjs/components/Editor/plugins/ImagePlugin.js

@@ -4,6 +4,7 @@ exports.INSERT_IMAGE_COMMAND = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lexical_1 = require("lexical");
+const utils_1 = require("@lexical/utils");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
@@ -40,7 +41,6 @@ function Image({ editor, className = '' }) {
         };
         editor.focus();
         editor.dispatchCommand(exports.INSERT_IMAGE_COMMAND, data);
-        editor.dispatchCommand(lexical_1.INSERT_PARAGRAPH_COMMAND, undefined);
     };
     const handleUploadProgress = (chunks) => {
         setUploading(Object.assign({}, chunks));
@@ -84,20 +84,15 @@ function ImagePlugin() {
             return;
         }
         return editor.registerCommand(exports.INSERT_IMAGE_COMMAND, (payload) => {
-            const selection = (0, lexical_1.$getSelection)();
-            if ((0, lexical_1.$isRangeSelection)(selection)) {
-                if ((0, lexical_1.$isRootNode)(selection.anchor.getNode())) {
-                    selection.insertParagraph();
-                }
-                const imageNode = (0, ImageNode_1.$createImageNode)({
-                    src: payload.src,
-                    altText: payload.altText,
-                    maxWidth: '100%',
-                    width: payload.width,
-                    height: payload.height
-                });
-                selection.insertNodes([imageNode]);
-            }
+            const imageNode = (0, ImageNode_1.$createImageNode)({
+                src: payload.src,
+                altText: payload.altText,
+                maxWidth: '100%',
+                width: payload.width,
+                height: payload.height
+            });
+            // The image is not editable so it is better to position it near the root element
+            (0, utils_1.$insertNodeToNearestRoot)(imageNode);
             return true;
         }, lexical_1.COMMAND_PRIORITY_EDITOR);
     }, [editor]);

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

@@ -3,61 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const LexicalOnChangePlugin_1 = require("@lexical/react/LexicalOnChangePlugin");
-const ImageNode_1 = require("../nodes/ImageNode");
-const MentionNode_1 = require("../nodes/MentionNode");
-const rich_text_1 = require("@lexical/rich-text");
-const link_1 = require("@lexical/link");
-const code_1 = require("@lexical/code");
 const html_1 = require("@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_1.ImageNode.getType():
-            return `<img src="${node.__src}" alt="${node.__altText}" width="${node.__width}" height="${node.__height}" style="max-width: ${node.__maxWidth}px;" />`;
-        case MentionNode_1.MentionNode.getType():
-            return `<mention id="${node.__user.id}" ext-id="${node.__user.ext_id}">@${node.__user.username}</mention>`;
-        case link_1.AutoLinkNode.getType():
-        case link_1.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 rich_text_1.QuoteNode.getType():
-            return `<blockquote>${children}</blockquote>`;
-        case code_1.CodeNode.getType():
-            return `<pre>${children}</pre>`;
-        case 'linebreak':
-            return `<br/>`;
-        case 'text':
-            return convertText(node);
-        case rich_text_1.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/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: Object.assign({ inPlaceLoadMoreContents: false }, CommentsObjectProps) }), 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(Object.assign({}, (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), { truncateContent: true }), CommentComponentProps), { cacheStrategy }), inPlaceLoadMoreContents: false })))));
     }
     /**
      * Renders root object

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, CommentsObjectProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { 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

@@ -84,7 +84,7 @@ export interface CommentObjectProps {
      * Props to spread to sub comments object
      * @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
      */
-    CommentsObjectProps?: CommentsObjectProps;
+    CommentsObjectComponentProps?: CommentsObjectProps;
     /**
      * If datetime is linkable or not
      * @default true

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

@@ -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, CommentsObjectProps = {} } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectProps"]);
+    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, CommentsObjectComponentProps = {} } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
@@ -364,7 +364,7 @@ export default function CommentObject(inProps) {
      */
     function renderLatestComment(comment) {
         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 })));
+                truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectComponentProps, { cacheStrategy: cacheStrategy })));
     }
     /**
      * Render comments

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

@@ -90,9 +90,8 @@ function ImageComponent({ src, altText, nodeKey, maxWidth }) {
             unregister();
         };
     }, [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, maxWidth: maxWidth })));
+        React.createElement(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
@@ -126,13 +125,13 @@ export class ImageNode extends DecoratorNode {
     }
     // View
     createDOM(config) {
-        const span = document.createElement('span');
+        const div = document.createElement('div');
         const theme = config.theme;
         const className = theme.image;
         if (className !== undefined) {
-            span.className = className;
+            div.className = className;
         }
-        return span;
+        return div;
     }
     updateDOM() {
         return false;

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

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
-import { $getSelection, $isRangeSelection, $isRootNode, COMMAND_PRIORITY_EDITOR, createCommand, INSERT_PARAGRAPH_COMMAND } from 'lexical';
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { CircularProgress, Icon, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -37,7 +38,6 @@ function Image({ editor, className = '' }) {
         };
         editor.focus();
         editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
-        editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
     };
     const handleUploadProgress = (chunks) => {
         setUploading(Object.assign({}, chunks));
@@ -81,20 +81,15 @@ export default function ImagePlugin() {
             return;
         }
         return editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-                if ($isRootNode(selection.anchor.getNode())) {
-                    selection.insertParagraph();
-                }
-                const imageNode = $createImageNode({
-                    src: payload.src,
-                    altText: payload.altText,
-                    maxWidth: '100%',
-                    width: payload.width,
-                    height: payload.height
-                });
-                selection.insertNodes([imageNode]);
-            }
+            const imageNode = $createImageNode({
+                src: payload.src,
+                altText: payload.altText,
+                maxWidth: '100%',
+                width: payload.width,
+                height: payload.height
+            });
+            // The image is not editable so it is better to position it near the root element
+            $insertNodeToNearestRoot(imageNode);
             return true;
         }, COMMAND_PRIORITY_EDITOR);
     }, [editor]);

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