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

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

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

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

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

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

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

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

@@ -28,7 +28,7 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
             width: `${width}${width === 'inherit' ? '' : 'px'}`
         } }));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth }) {
+function ImageComponent({ src, altText, nodeKey, maxWidth }) {
     const imageRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
@@ -94,32 +94,29 @@ function ImageComponent({ src, altText, nodeKey, width, height, 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, width: width, height: height, 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) {
-        const { alt: altText, src, dataset: { width, height } } = domNode;
-        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width), maxWidth: '100%' });
+        const { alt: altText, src } = domNode;
+        const node = $createImageNode({ altText, src, maxWidth: '100%' });
         return { node };
     }
     return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, maxWidth, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__width = width || 'inherit';
         this.__maxWidth = maxWidth;
-        this.__height = height || 'inherit';
     }
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -132,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;
@@ -156,21 +153,17 @@ class ImageNode extends lexical_1.DecoratorNode {
         const element = document.createElement('img');
         element.setAttribute('src', this.__src);
         element.setAttribute('alt', this.__altText);
-        element.setAttribute('width', `${this.__width}`);
-        element.setAttribute('height', `${this.__height}`);
         element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
         return { element };
     }
     decorate() {
-        return (react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }));
+        return react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, maxWidth, src } = serializedNode;
         const node = $createImageNode({
             altText,
-            height,
             src,
-            width,
             maxWidth
         });
         return node;
@@ -178,18 +171,16 @@ class ImageNode extends lexical_1.DecoratorNode {
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
             maxWidth: this.__maxWidth,
             src: this.getSrc(),
             type: 'image',
-            version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            version: 1
         };
     }
 }
 exports.ImageNode = ImageNode;
-function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+function $createImageNode({ src, altText, maxWidth }) {
+    return new ImageNode(src, altText, maxWidth);
 }
 exports.$createImageNode = $createImageNode;
 function $isImageNode(node) {

package/lib/cjs/components/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.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), inPlaceLoadMoreContents: false })))));
+        return (react_1.default.createElement(react_1.default.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (react_1.default.createElement(CommentsObject_1.default, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign(Object.assign({}, (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), { truncateContent: true }), CommentComponentProps), { cacheStrategy }), inPlaceLoadMoreContents: false })))));
     }
     /**
      * Renders root object

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

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

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

@@ -461,7 +461,7 @@ function FeedObject(inProps) {
             template === feedObject_1.SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (react_1.default.createElement(material_1.Collapse, { in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } },
                 react_1.default.createElement(CardContent_1.default, { className: classes.activitiesContent },
                     react_1.default.createElement(Activities_1.default, Object.assign({ feedObject: obj, key: selectedActivities, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
-                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true }, CommentComponentProps),
+                            CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, 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

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

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

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

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

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

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

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

package/lib/esm/components/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]);