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

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

@@ -3,14 +3,6 @@ import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_CO
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@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)) {
@@ -24,13 +16,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.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
-        React.createElement("img", { src: src, alt: altText, ref: imageRef, style: { position: 'absolute', width: '100%' } })));
+    return (React.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 = useRef(null);
     const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -98,29 +92,30 @@ function ImageComponent({ src, altText, nodeKey, width, height }) {
     }, [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 })));
+        React.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;
 }
 export class ImageNode extends 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();
@@ -154,44 +149,42 @@ export class ImageNode extends 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.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() });
+        return (React.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
         };
     }
 }
-export function $createImageNode({ src, altText, width, height }) {
-    return new ImageNode(src, altText, width, height);
+export function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
+    return new ImageNode(src, altText, maxWidth, width, height);
 }
 export function $isImageNode(node) {
     return node.getType() === 'image';

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

@@ -29,18 +29,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(INSERT_IMAGE_COMMAND, data);
@@ -93,7 +86,13 @@ export default function ImagePlugin() {
                 if ($isRootNode(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, width: payload.width, height: payload.height });
+                const imageNode = $createImageNode({
+                    src: payload.src,
+                    altText: payload.altText,
+                    maxWidth: '100%',
+                    width: payload.width,
+                    height: payload.height
+                });
                 selection.insertNodes([imageNode]);
             }
             return true;

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

@@ -88,7 +88,7 @@ export default function Activities(inProps) {
      * Render comments of feedObject
      */
     function renderComments() {
-        return (React.createElement(React.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign({}, CommentComponentProps), { cacheStrategy }), (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})) })))));
+        return (React.createElement(React.Fragment, null, (commentsObject.feedObject.comment_count > 0 || comments.length > 0) && (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, comments: commentsObject.comments, startComments: comments, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: handleNext, totalLoadedComments: commentsObject.comments.length + comments.length, totalComments: commentsObject.feedObject.comment_count, hideAdvertising: true }, CommentsObjectProps, { cacheStrategy: cacheStrategy, CommentsObjectSkeletonProps: { count: skeletonsCount }, CommentComponentProps: Object.assign(Object.assign(Object.assign({}, CommentComponentProps), { cacheStrategy }), (CommentsObjectProps.CommentComponentProps ? CommentsObjectProps.CommentComponentProps : {})), inPlaceLoadMoreContents: false })))));
     }
     /**
      * 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, truncateContent: false }, 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)))));