@selfcommunity/react-ui 0.7.0-alpha.320 → 0.7.0-alpha.322

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

@@ -362,7 +362,7 @@ 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 }));
+        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 }));
     }
     /**
      * Render comments

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

@@ -110,6 +110,11 @@ export interface CommentsObjectProps {
      * @default true
      */
     hidePaginationLinks?: boolean;
+    /**
+     * Load more contents in place
+       * rather than opening a new page
+     */
+    inPlaceLoadMoreContents?: boolean;
     /**
      * Page query parameter name
      * @default 'page'

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

@@ -88,7 +88,7 @@ function CommentsObject(inProps) {
         name: PREFIX
     });
     // PROPS
-    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
+    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, inPlaceLoadMoreContents = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "inPlaceLoadMoreContents", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scPreferences = (0, react_core_1.useSCPreferences)();
@@ -152,7 +152,12 @@ function CommentsObject(inProps) {
         return (react_1.default.createElement(material_1.Box, { className: classes.pagination },
             isLoadingPrevious && react_1.default.createElement(CommentObject_1.CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })),
             !isLoadingPrevious && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Button, { variant: "text", onClick: handlePrevious, disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } },
+                react_1.default.createElement(material_1.Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                    ? { onClick: handlePrevious }
+                    : {
+                        component: react_core_1.Link,
+                        to: `${scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject))}`
+                    }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }),
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" })),
                 !disablePaginationLinks && previousPage && previous && (react_1.default.createElement(react_core_1.Link, Object.assign({ to: `${(0, utils_1.appendURLSearchParams)(scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject)), [
                         { [paginationLinksPageQueryParam]: previousPage }
@@ -166,7 +171,16 @@ function CommentsObject(inProps) {
         return (react_1.default.createElement(material_1.Box, { className: classes.pagination }, isLoadingNext ? (react_1.default.createElement(CommentObject_1.CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_intersection_observer_1.InView, { as: "div", onChange: handleScrollEnd, threshold: 0.5 },
                 react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    react_1.default.createElement(material_1.Button, { variant: "text", onClick: handleNext, disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } },
+                    react_1.default.createElement(material_1.Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                        ? { onClick: handleNext }
+                        : {
+                            component: react_core_1.Link,
+                            to: nextPage && next
+                                ? `${(0, utils_1.appendURLSearchParams)(scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject)), [
+                                    { [paginationLinksPageQueryParam]: nextPage }
+                                ])}`
+                                : `${scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObject), (0, contribution_1.getRouteData)(feedObject))}`
+                        }), { onClick: handleNext, disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }),
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" })),
                     showCommentsCounter() && (react_1.default.createElement(Typography_1.default, { variant: "body1", classes: { root: classes.commentsCounter } },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }))))),
@@ -185,9 +199,9 @@ function CommentsObject(inProps) {
     /**
      * Render comments and load others with load more button
      */
-    function renderComments(comments) {
+    function renderComments(comments, truncateContent = null) {
         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 })),
+            react_1.default.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }, (truncateContent !== null ? { truncateContent } : {}))),
             advPosition === index && renderAdvertising())))));
     }
     /**
@@ -219,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)),
+        renderComments(getFilteredComments(startComments), false),
         commentsRendered,
-        renderComments(getFilteredComments(endComments))));
+        renderComments(getFilteredComments(endComments), false)));
 }
 exports.default = CommentsObject;

package/lib/cjs/components/Composer/Composer.js

@@ -480,7 +480,7 @@ function Composer(inProps) {
             .then(() => setIsSubmitting(false));
     };
     // MEMO
-    const _EditorProps = (0, react_1.useMemo)(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: type === Composer_1.COMPOSER_TYPE_DISCUSSION }), [EditorProps, type]);
+    const _EditorProps = (0, react_1.useMemo)(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: true }), [EditorProps, type]);
     const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
     const hasMediaShare = (0, react_1.useMemo)(() => medias.findIndex((m) => m.type === Media_1.MEDIA_TYPE_SHARE) !== -1, [medias]);

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

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

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

@@ -7,14 +7,6 @@ const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
 const utils_1 = require("@lexical/utils");
-/**
- * Calc aspect-ratio of image
- * @param width
- * @param height
- */
-function getAspectRatio(width, height) {
-    return width / height;
-}
 const imageCache = new Set();
 function useSuspenseImage(src) {
     if (!imageCache.has(src)) {
@@ -28,13 +20,15 @@ function useSuspenseImage(src) {
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height }) {
+function LazyImage({ altText, className, imageRef, src, width, height, maxWidth }) {
     useSuspenseImage(src);
-    const aspectRatio = getAspectRatio(width, 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', width: '100%' } })));
+    return (react_1.default.createElement("img", { className: className, src: src, alt: altText, ref: imageRef, style: {
+            height: `${height}${height === 'inherit' ? '' : 'px'}`,
+            maxWidth,
+            width: `${width}${width === 'inherit' ? '' : 'px'}`
+        } }));
 }
-function ImageComponent({ src, altText, nodeKey, width, height }) {
+function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
     const imageRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
@@ -102,29 +96,30 @@ function ImageComponent({ src, altText, nodeKey, width, height }) {
     }, [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 })));
+        react_1.default.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, 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) });
+        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width), maxWidth: '100%' });
         return { node };
     }
     return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, width, height, key) {
+    constructor(src, altText, maxWidth, width, height, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__width = width;
-        this.__height = height;
+        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.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -158,45 +153,43 @@ class ImageNode extends lexical_1.DecoratorNode {
             }) }, dom);
     }
     exportDOM() {
-        const aspectRatio = getAspectRatio(this.__width, this.__height);
-        const element = document.createElement('div');
-        element.setAttribute('style', `position: relative;padding-bottom:${100 / aspectRatio}%`);
-        const image = document.createElement('img');
-        image.setAttribute('src', this.__src);
-        image.setAttribute('alt', this.__altText);
-        image.setAttribute('style', `position: absolute;width:100%;height:100%;`);
-        image.setAttribute('data-width', `${this.__width}`);
-        image.setAttribute('data-height', `${this.__height}`);
-        element.appendChild(image);
+        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, nodeKey: this.getKey() });
+        return (react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }));
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, src } = serializedNode;
+        const { altText, height, width, maxWidth, src } = serializedNode;
         const node = $createImageNode({
             altText,
             height,
             src,
-            width
+            width,
+            maxWidth
         });
         return node;
     }
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height,
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
             src: this.getSrc(),
             type: 'image',
             version: 1,
-            width: this.__width
+            width: this.__width === 'inherit' ? 0 : this.__width
         };
     }
 }
 exports.ImageNode = ImageNode;
-function $createImageNode({ src, altText, width, height }) {
-    return new ImageNode(src, altText, width, height);
+function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
+    return new ImageNode(src, altText, maxWidth, width, height);
 }
 exports.$createImageNode = $createImageNode;
 function $isImageNode(node) {

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

@@ -32,18 +32,11 @@ 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 data = {
             altText: media.title,
-            src: image.url,
-            width: image.width,
-            height: image.height
+            src: media.image,
+            width: media.image_width,
+            height: media.image_height
         };
         editor.focus();
         editor.dispatchCommand(exports.INSERT_IMAGE_COMMAND, data);
@@ -96,7 +89,13 @@ function ImagePlugin() {
                 if ((0, lexical_1.$isRootNode)(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, width: payload.width, height: payload.height });
+                const imageNode = (0, ImageNode_1.$createImageNode)({
+                    src: payload.src,
+                    altText: payload.altText,
+                    maxWidth: '100%',
+                    width: payload.width,
+                    height: payload.height
+                });
                 selection.insertNodes([imageNode]);
             }
             return true;

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 : {})) })))));
+        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 })))));
     }
     /**
      * 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, truncateContent: false }, 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/esm/components/CommentObject/CommentObject.js

@@ -360,7 +360,7 @@ 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 }));
+        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 }));
     }
     /**
      * Render comments

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

@@ -110,6 +110,11 @@ export interface CommentsObjectProps {
      * @default true
      */
     hidePaginationLinks?: boolean;
+    /**
+     * Load more contents in place
+       * rather than opening a new page
+     */
+    inPlaceLoadMoreContents?: boolean;
     /**
      * Page query parameter name
      * @default 'page'

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

@@ -86,7 +86,7 @@ export default function CommentsObject(inProps) {
         name: PREFIX
     });
     // PROPS
-    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, CommentComponent = CommentObject, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
+    const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, CommentComponent = CommentObject, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, inPlaceLoadMoreContents = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "inPlaceLoadMoreContents", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const scPreferences = useSCPreferences();
@@ -150,7 +150,12 @@ export default function CommentsObject(inProps) {
         return (React.createElement(Box, { className: classes.pagination },
             isLoadingPrevious && React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 })),
             !isLoadingPrevious && (React.createElement(React.Fragment, null,
-                React.createElement(Button, { variant: "text", onClick: handlePrevious, disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } },
+                React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                    ? { onClick: handlePrevious }
+                    : {
+                        component: Link,
+                        to: `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                    }), { disabled: isLoadingPrevious, color: "inherit", classes: { root: classes.loadPreviousCommentsButton } }),
                     React.createElement(FormattedMessage, { id: "ui.commentsObject.loadPreviousComments", defaultMessage: "ui.commentsObject.loadPreviousComments" })),
                 !disablePaginationLinks && previousPage && previous && (React.createElement(Link, Object.assign({ to: `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
                         { [paginationLinksPageQueryParam]: previousPage }
@@ -164,7 +169,16 @@ export default function CommentsObject(inProps) {
         return (React.createElement(Box, { className: classes.pagination }, isLoadingNext ? (React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps, { count: 1 }))) : (React.createElement(React.Fragment, null,
             React.createElement(InView, { as: "div", onChange: handleScrollEnd, threshold: 0.5 },
                 React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-                    React.createElement(Button, { variant: "text", onClick: handleNext, disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } },
+                    React.createElement(Button, Object.assign({ variant: "text" }, (inPlaceLoadMoreContents
+                        ? { onClick: handleNext }
+                        : {
+                            component: Link,
+                            to: nextPage && next
+                                ? `${appendURLSearchParams(scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject)), [
+                                    { [paginationLinksPageQueryParam]: nextPage }
+                                ])}`
+                                : `${scRoutingContext.url(getContributionRouteName(feedObject), getRouteData(feedObject))}`
+                        }), { onClick: handleNext, disabled: isLoadingNext, color: "inherit", classes: { root: classes.loadNextCommentsButton } }),
                         React.createElement(FormattedMessage, { id: "ui.commentsObject.loadMoreComments", defaultMessage: "ui.commentsObject.loadMoreComments" })),
                     showCommentsCounter() && (React.createElement(Typography, { variant: "body1", classes: { root: classes.commentsCounter } },
                         React.createElement(FormattedMessage, { id: "ui.commentsObject.numberOfComments", defaultMessage: "ui.commentsObject.numberOfComments", values: { loaded: totalLoadedComments, total: totalComments } }))))),
@@ -183,9 +197,9 @@ export default function CommentsObject(inProps) {
     /**
      * Render comments and load others with load more button
      */
-    function renderComments(comments) {
+    function renderComments(comments, truncateContent = null) {
         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 })),
+            React.createElement(CommentComponent, Object.assign({ key: comment.id, commentObject: comment, onOpenReply: openReplyBox, feedObject: obj }, CommentComponentProps, { CommentObjectSkeletonProps: CommentObjectSkeletonProps }, (truncateContent !== null ? { truncateContent } : {}))),
             advPosition === index && renderAdvertising())))));
     }
     /**
@@ -217,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)),
+        renderComments(getFilteredComments(startComments), false),
         commentsRendered,
-        renderComments(getFilteredComments(endComments))));
+        renderComments(getFilteredComments(endComments), false)));
 }

package/lib/esm/components/Composer/Composer.js

@@ -477,7 +477,7 @@ export default function Composer(inProps) {
             .then(() => setIsSubmitting(false));
     };
     // MEMO
-    const _EditorProps = useMemo(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: type === COMPOSER_TYPE_DISCUSSION }), [EditorProps, type]);
+    const _EditorProps = useMemo(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: true }), [EditorProps, type]);
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);

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

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