@selfcommunity/react-ui 0.7.0-alpha.318 → 0.7.0-alpha.319

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

@@ -64,6 +64,11 @@ export interface CommentObjectProps {
      * @default null
      */
     onDelete?: (comment: SCCommentType) => void;
+    /**
+     * Show all summary initially (otherwise it will be truncated)
+     * @default false
+     */
+    truncateContent?: boolean;
     /**
      * Props to spread to single comment object skeleton
      * @default {elevation: 0}

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, 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", "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 } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
@@ -329,7 +329,7 @@ function CommentObject(inProps) {
             // or the comment author is the logged user
             return null;
         }
-        const commentHtml = comment.summary_html ? comment.summary_html : comment.html;
+        const commentHtml = comment.summary_html && truncateContent ? comment.summary_html : comment.html;
         const summaryHtmlTruncated = comment.summary_truncated ? comment.summary_truncated : false;
         const summaryHtml = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
         return (react_1.default.createElement(react_1.default.Fragment, { key: comment.id },
@@ -342,7 +342,7 @@ function CommentObject(inProps) {
                             react_1.default.createElement(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
                                 react_1.default.createElement(material_1.Typography, { component: "span" }, comment.author.username)),
                             react_1.default.createElement(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
-                            summaryHtmlTruncated && (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent },
+                            summaryHtmlTruncated && truncateContent && (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent },
                                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
                         scUserContext.user && (react_1.default.createElement(material_1.Box, { className: classes.commentActionsMenu },
                             react_1.default.createElement(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),

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

@@ -8,10 +8,11 @@ const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext"
 const useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
 const utils_1 = require("@lexical/utils");
 /**
- * Limit the width of an image
+ * Limit the width of an image (min/max)
  * Used to compute the padding-bottom of the div that wrap the img
  */
-const IMAGE_WIDTH_THRESHOLD = 500;
+const IMAGE_MAX_WIDTH_THRESHOLD = 500;
+const IMAGE_MIN_WIDTH_THRESHOLD = 375;
 /**
  * Calc aspect-ratio of image
  * @param width
@@ -35,13 +36,9 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    const aspectRatio = getAspectRatio(IMAGE_WIDTH_THRESHOLD, height);
+    const aspectRatio = getAspectRatio(width >= IMAGE_MAX_WIDTH_THRESHOLD ? width : IMAGE_MAX_WIDTH_THRESHOLD, height);
     return (react_1.default.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
-        react_1.default.createElement("img", { src: src, alt: altText, ref: imageRef, style: {
-                position: 'absolute',
-                height: `100%`,
-                width: `100%`
-            } })));
+        react_1.default.createElement("img", { src: src, alt: altText, ref: imageRef, style: Object.assign({ position: 'absolute' }, (width < IMAGE_MIN_WIDTH_THRESHOLD ? { paddingRight: IMAGE_MIN_WIDTH_THRESHOLD - width } : {})) })));
 }
 function ImageComponent({ src, altText, nodeKey, width, height }) {
     const imageRef = (0, react_1.useRef)(null);

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

@@ -32,11 +32,13 @@ function Image({ editor, className = '' }) {
         return file.type.startsWith('image/');
     };
     const handleUploadSuccess = (media) => {
-        const image = media.image_thumbnail ? media.image_thumbnail : {
-            url: media.image,
-            width: media.image_width,
-            height: media.image_height
-        };
+        const image = media.image_thumbnail
+            ? media.image_thumbnail
+            : {
+                url: media.image,
+                width: media.image_width,
+                height: media.image_height
+            };
         const data = {
             altText: media.title,
             src: image.url,

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

@@ -42,7 +42,7 @@ function Activities(inProps) {
         feedObject,
         feedObjectType,
         cacheStrategy,
-        pageSize: 3,
+        pageSize: 2,
         orderBy: selectedActivities === feedObject_1.SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
             ? comments_1.SCCommentsOrderBy.CONNECTION_DESC
             : selectedActivities === feedObject_1.SCFeedObjectActivitiesType.FIRST_COMMENTS
@@ -50,7 +50,7 @@ function Activities(inProps) {
                 : comments_1.SCCommentsOrderBy.ADDED_AT_DESC
     });
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
-    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 3);
+    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
     const existFeedObjectActivities = feedObjectActivities && feedObjectActivities.length > 0;
     /**
      * Sync activities type if prop change
@@ -80,11 +80,17 @@ function Activities(inProps) {
     function renderRelevantActivities() {
         return react_1.default.createElement(RelevantActivities_1.default, { activities: feedObjectActivities });
     }
+    /**
+     * Load comments
+     */
+    function handleNext() {
+        commentsObject.getNextPage();
+    }
     /**
      * 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: commentsObject.getNextPage, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true, cacheStrategy: cacheStrategy }, CommentsObjectProps, { CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign({}, CommentComponentProps), { cacheStrategy }) })))));
+        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 : {})) })))));
     }
     /**
      * Renders root object

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

@@ -458,7 +458,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 }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true }, 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/cjs/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -99,9 +99,13 @@ function PrivateMessageEditor(inProps) {
         setMessage(event.target.value);
     };
     const handleEmojiClick = (emojiData, event) => {
-        const cursor = ref.current.selectionStart;
-        const text = message.slice(0, cursor) + emojiData.emoji;
-        setMessage(text);
+        const cursorPosition = ref.current.selectionEnd;
+        const start = ref.current.value.substring(0, ref.current.selectionStart);
+        const end = ref.current.value.substring(ref.current.selectionStart);
+        setMessage(start + emojiData.emoji + end);
+        setTimeout(() => {
+            ref.current.selectionStart = ref.current.selectionEnd = cursorPosition + emojiData.emoji.length;
+        }, 50);
     };
     // EFFECTS
     (0, react_1.useEffect)(() => {
@@ -129,8 +133,7 @@ function PrivateMessageEditor(inProps) {
         return (react_1.default.createElement(react_1.default.Fragment, null, openMediaSection ? (react_1.default.createElement(MessageMediaUploader_1.default, { className: classes.uploadMediaSection, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: react_1.default.createElement(material_1.IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
                 react_1.default.createElement(Icon_1.default, null, "send")) })) : (react_1.default.createElement(react_1.default.Fragment, null,
             openEmojiSection && react_1.default.createElement(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }),
-            react_1.default.createElement(material_1.TextField, { size: "small", disabled: Boolean(messageFiles.length) || openMediaSection, ref: ref, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
-                    disableUnderline: true,
+            react_1.default.createElement(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
                     startAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(material_1.IconButton, { disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) },
                             react_1.default.createElement(Icon_1.default, null, "sentiment_satisfied_alt")),

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

@@ -64,6 +64,11 @@ export interface CommentObjectProps {
      * @default null
      */
     onDelete?: (comment: SCCommentType) => void;
+    /**
+     * Show all summary initially (otherwise it will be truncated)
+     * @default false
+     */
+    truncateContent?: boolean;
     /**
      * Props to spread to single comment object skeleton
      * @default {elevation: 0}

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, 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", "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 } = props, rest = __rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
@@ -327,7 +327,7 @@ export default function CommentObject(inProps) {
             // or the comment author is the logged user
             return null;
         }
-        const commentHtml = comment.summary_html ? comment.summary_html : comment.html;
+        const commentHtml = comment.summary_html && truncateContent ? comment.summary_html : comment.html;
         const summaryHtmlTruncated = comment.summary_truncated ? comment.summary_truncated : false;
         const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
         return (React.createElement(React.Fragment, { key: comment.id },
@@ -340,7 +340,7 @@ export default function CommentObject(inProps) {
                             React.createElement(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
                                 React.createElement(Typography, { component: "span" }, comment.author.username)),
                             React.createElement(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
-                            summaryHtmlTruncated && (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent },
+                            summaryHtmlTruncated && truncateContent && (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent },
                                 React.createElement(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
                         scUserContext.user && (React.createElement(Box, { className: classes.commentActionsMenu },
                             React.createElement(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),

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

@@ -4,10 +4,11 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
 /**
- * Limit the width of an image
+ * Limit the width of an image (min/max)
  * Used to compute the padding-bottom of the div that wrap the img
  */
-const IMAGE_WIDTH_THRESHOLD = 500;
+const IMAGE_MAX_WIDTH_THRESHOLD = 500;
+const IMAGE_MIN_WIDTH_THRESHOLD = 375;
 /**
  * Calc aspect-ratio of image
  * @param width
@@ -31,13 +32,9 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    const aspectRatio = getAspectRatio(IMAGE_WIDTH_THRESHOLD, height);
+    const aspectRatio = getAspectRatio(width >= IMAGE_MAX_WIDTH_THRESHOLD ? width : IMAGE_MAX_WIDTH_THRESHOLD, height);
     return (React.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
-        React.createElement("img", { src: src, alt: altText, ref: imageRef, style: {
-                position: 'absolute',
-                height: `100%`,
-                width: `100%`
-            } })));
+        React.createElement("img", { src: src, alt: altText, ref: imageRef, style: Object.assign({ position: 'absolute' }, (width < IMAGE_MIN_WIDTH_THRESHOLD ? { paddingRight: IMAGE_MIN_WIDTH_THRESHOLD - width } : {})) })));
 }
 function ImageComponent({ src, altText, nodeKey, width, height }) {
     const imageRef = useRef(null);

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

@@ -29,11 +29,13 @@ function Image({ editor, className = '' }) {
         return file.type.startsWith('image/');
     };
     const handleUploadSuccess = (media) => {
-        const image = media.image_thumbnail ? media.image_thumbnail : {
-            url: media.image,
-            width: media.image_width,
-            height: media.image_height
-        };
+        const image = media.image_thumbnail
+            ? media.image_thumbnail
+            : {
+                url: media.image,
+                width: media.image_width,
+                height: media.image_height
+            };
         const data = {
             altText: media.title,
             src: image.url,

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

@@ -40,7 +40,7 @@ export default function Activities(inProps) {
         feedObject,
         feedObjectType,
         cacheStrategy,
-        pageSize: 3,
+        pageSize: 2,
         orderBy: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS
             ? SCCommentsOrderBy.CONNECTION_DESC
             : selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS
@@ -48,7 +48,7 @@ export default function Activities(inProps) {
                 : SCCommentsOrderBy.ADDED_AT_DESC
     });
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
-    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 3);
+    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
     const existFeedObjectActivities = feedObjectActivities && feedObjectActivities.length > 0;
     /**
      * Sync activities type if prop change
@@ -78,11 +78,17 @@ export default function Activities(inProps) {
     function renderRelevantActivities() {
         return React.createElement(RelevantActivities, { activities: feedObjectActivities });
     }
+    /**
+     * Load comments
+     */
+    function handleNext() {
+        commentsObject.getNextPage();
+    }
     /**
      * 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: commentsObject.getNextPage, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true, cacheStrategy: cacheStrategy }, CommentsObjectProps, { CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign({}, CommentComponentProps), { cacheStrategy }) })))));
+        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 : {})) })))));
     }
     /**
      * Renders root object

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

@@ -456,7 +456,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 }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true }, 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)))));

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -97,9 +97,13 @@ export default function PrivateMessageEditor(inProps) {
         setMessage(event.target.value);
     };
     const handleEmojiClick = (emojiData, event) => {
-        const cursor = ref.current.selectionStart;
-        const text = message.slice(0, cursor) + emojiData.emoji;
-        setMessage(text);
+        const cursorPosition = ref.current.selectionEnd;
+        const start = ref.current.value.substring(0, ref.current.selectionStart);
+        const end = ref.current.value.substring(ref.current.selectionStart);
+        setMessage(start + emojiData.emoji + end);
+        setTimeout(() => {
+            ref.current.selectionStart = ref.current.selectionEnd = cursorPosition + emojiData.emoji.length;
+        }, 50);
     };
     // EFFECTS
     useEffect(() => {
@@ -127,8 +131,7 @@ export default function PrivateMessageEditor(inProps) {
         return (React.createElement(React.Fragment, null, openMediaSection ? (React.createElement(MessageMediaUploader, { className: classes.uploadMediaSection, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: React.createElement(IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
                 React.createElement(Icon, null, "send")) })) : (React.createElement(React.Fragment, null,
             openEmojiSection && React.createElement(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }),
-            React.createElement(TextField, { size: "small", disabled: Boolean(messageFiles.length) || openMediaSection, ref: ref, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
-                    disableUnderline: true,
+            React.createElement(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
                     startAdornment: (React.createElement(React.Fragment, null,
                         React.createElement(IconButton, { disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) },
                             React.createElement(Icon, null, "sentiment_satisfied_alt")),