@selfcommunity/react-ui 0.10.2-courses.159 → 0.10.2-courses.160

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -14,10 +14,12 @@ const lab_1 = require("@mui/lab");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const system_1 = require("@mui/system");
+const PreviewComponent_1 = tslib_1.__importDefault(require("../../shared/Media/File/PreviewComponent"));
 const PREFIX = 'SCCommentObjectReply';
 const classes = {
     root: `${PREFIX}-root`,
     comment: `${PREFIX}-comment`,
+    media: `${PREFIX}-media`,
     hasValue: `${PREFIX}-has-value`,
     avatar: `${PREFIX}-avatar`,
     actions: `${PREFIX}-actions`,
@@ -70,7 +72,8 @@ function CommentObjectReply(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // RETRIEVE OBJECTS
     const [html, setHtml] = (0, react_1.useState)(text);
-    const [media, setMedia] = (0, react_1.useState)(medias);
+    const [media, setMedia] = (0, react_1.useState)(medias !== null && medias !== void 0 ? medias : []);
+    const [uploadingMedia, setUploadingMedia] = (0, react_1.useState)(false);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -115,8 +118,11 @@ function CommentObjectReply(inProps) {
     const handleChangeText = (value) => {
         setHtml(value);
     };
-    const handleChangeMedia = (medias) => {
-        setMedia(medias);
+    const handleChangeMedia = (value) => {
+        setMedia((prev) => [...prev, value]);
+    };
+    const handleChangeMedias = (value) => {
+        setMedia([...value]);
     };
     /**
      * Check if editor is empty
@@ -127,7 +133,7 @@ function CommentObjectReply(inProps) {
     }, [html]);
     // RENDER
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: showAvatar &&
-            (!scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editor, onChange: handleChangeText, onMediaChange: handleChangeMedia, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
-                        onReply && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) }))) }, EditorProps)), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+            (!scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && (0, jsx_runtime_1.jsx)(PreviewComponent_1.default, { value: media, onChange: handleChangeMedias, className: classes.media }), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
+                        onReply && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }
 exports.default = CommentObjectReply;

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

@@ -9,12 +9,15 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const react_intl_1 = require("react-intl");
 const constants_1 = require("../../constants");
+const Media_1 = require("../../../../shared/Media");
+const UrlTextField_1 = tslib_1.__importDefault(require("../../../../shared/Media/Link/UrlTextField"));
 const classes = {
     root: `${constants_1.PREFIX}-content-lesson-root`,
     generalError: `${constants_1.PREFIX}-general-error`,
     title: `${constants_1.PREFIX}-content-lesson-title`,
     medias: `${constants_1.PREFIX}-content-lesson-medias`,
-    editor: `${constants_1.PREFIX}-content-lesson-editor`
+    editor: `${constants_1.PREFIX}-content-lesson-editor`,
+    link: `${constants_1.PREFIX}-content-lesson-link`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -24,13 +27,41 @@ exports.default = (props) => {
     // PROPS
     const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
     const { error: generalError = null } = Object.assign({}, error);
+    const mediaObjectTypes = [Media_1.File, Media_1.Link];
+    const [medias, setMedias] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.medias) || []);
+    const [openLink, setOpenLink] = (0, react_1.useState)();
+    const linkInputRef = (0, react_1.useRef)(null);
     // HANDLERS
     const handleChangeHtml = (0, react_1.useCallback)((html) => {
         onChange(html);
     }, [value]);
-    const handleChangeMedia = (0, react_1.useCallback)((medias) => {
-        onMediaChange(medias);
+    const handleChangeMedias = (0, react_1.useCallback)((value) => {
+        setMedias([...value]);
+        onMediaChange([...value]);
     }, []);
+    const handleChangeMedia = (value) => {
+        setMedias((prev) => [...prev, value]);
+        onMediaChange([...medias, value]);
+    };
+    const handleLinkAdd = (0, react_1.useCallback)((media) => {
+        setMedias([...medias, media]);
+        setOpenLink(false);
+    }, [medias]);
+    (0, react_1.useEffect)(() => {
+        if (openLink && linkInputRef.current) {
+            linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [openLink]);
     // RENDER
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
+                    customLink: (0, jsx_runtime_1.jsx)(Media_1.Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Media_1.Link.name),
+                    uploadImage: false,
+                    uploadFile: true
+                } })), openLink && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleLinkAdd, InputProps: {
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })))
+                } })), medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return (0, jsx_runtime_1.jsx)(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                    }
+                }) })))] })));
 };

package/lib/cjs/components/CourseDashboard/Teacher/Comments.js

@@ -96,11 +96,11 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.html }))] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(CommentsSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.container }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), state.results.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) })))] })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 exports.default = (0, react_1.memo)(Comments);

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -138,7 +138,7 @@ function CourseParticipantsButton(inProps) {
     /**
      * Rendering
      */
-    if (!participantsAvailable || !scCourse.privacy) {
+    if (!participantsAvailable) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0, 

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { MediaPluginProps } from './plugins';
+import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
 import { SCMediaType } from '@selfcommunity/types';
 export declare type EditorRef = {
     focus: () => void;
@@ -48,7 +50,17 @@ export interface EditorProps {
      * Handler for change media in the editor
      * @default null
      * */
-    onMediaChange?: (medias: SCMediaType[]) => void;
+    onMediaChange?: (media: SCMediaType) => void;
+    /**
+     * Props to spread to ToolBar.
+     * @default {}
+     */
+    ToolBarProps?: ToolbarPluginProps;
+    /**
+     * Props to spread to MediaPlugin.
+     * @default {}
+     */
+    MediaPluginProps?: MediaPluginProps;
     /**
      * Handler for blur event of the editor
      * @default null

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

@@ -70,8 +70,7 @@ const editorTheme = {
         superscript: `${constants_1.PREFIX}-textSuperscript`,
         underline: `${constants_1.PREFIX}-textUnderline`,
         underlineStrikethrough: `${constants_1.PREFIX}-textUnderlineStrikethrough`
-    },
-    document: `${constants_1.PREFIX}-document`
+    }
 };
 /**
  * > API documentation for the Community-JS Editor component. Learn about the available props and the CSS API.
@@ -108,7 +107,7 @@ const Editor = (inProps, ref) => {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, uploadFile = false, editable = true, onChange = null, onMediaChange = null, onFocus = null, onBlur = null, action = null, placeholder = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) } = props;
+    const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, uploadFile = false, editable = true, onChange = null, onMediaChange = null, onFocus = null, onBlur = null, action = null, ToolBarProps = {}, MediaPluginProps = {}, placeholder = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) } = props;
     const apiRef = (0, react_1.useRef)();
     // STATE
     const [focused, setFocused] = (0, react_1.useState)(false);
@@ -149,6 +148,6 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes_1.default],
         theme: editorTheme
     }), [editable]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage, uploadFile: uploadFile, MediaPluginProps: { onMediaAdd: handleMediaChange } }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), uploadFile && (0, jsx_runtime_1.jsx)(plugins_1.MediaPlugin, { onMediaAdd: handleMediaChange }), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {}), action && action] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: placeholder })), ErrorBoundary: LexicalErrorBoundary_1.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, Object.assign({ uploadImage: uploadImage, uploadFile: uploadFile, MediaPluginProps: { onMediaAdd: handleMediaChange } }, ToolBarProps)), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), uploadFile && (0, jsx_runtime_1.jsx)(plugins_1.MediaPlugin, Object.assign({}, MediaPluginProps)), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {}), action && action] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: placeholder })), ErrorBoundary: LexicalErrorBoundary_1.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
 };
 exports.default = (0, react_1.forwardRef)(Editor);

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

@@ -5,6 +5,5 @@ import { ImageNode } from './ImageNode';
 import { MentionNode } from './MentionNode';
 import { TextNode } from 'lexical';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { DocNode } from './DocNode';
-declare const nodes: (typeof ImageNode | typeof TextNode | typeof MentionNode | typeof DocNode | typeof HorizontalRuleNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
+declare const nodes: (typeof ImageNode | typeof TextNode | typeof MentionNode | typeof HorizontalRuleNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
 export default nodes;

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

@@ -7,7 +7,6 @@ const ImageNode_1 = require("./ImageNode");
 const MentionNode_1 = require("./MentionNode");
 const lexical_1 = require("lexical");
 const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
-const DocNode_1 = require("./DocNode");
 const nodes = [
     LexicalHorizontalRuleNode_1.HorizontalRuleNode,
     rich_text_1.HeadingNode,
@@ -19,7 +18,6 @@ const nodes = [
     link_1.AutoLinkNode,
     link_1.LinkNode,
     ImageNode_1.ImageNode,
-    MentionNode_1.MentionNode,
-    DocNode_1.DocNode
+    MentionNode_1.MentionNode
 ];
 exports.default = nodes;

package/lib/cjs/components/Editor/plugins/MediaPlugin.d.ts

@@ -8,6 +8,7 @@ export interface InsertDocPayload {
 export declare const INSERT_DOC_COMMAND: LexicalCommand<InsertDocPayload>;
 export interface MediaPluginProps {
     className?: string;
-    onMediaAdd?: (medias: SCMediaType[]) => void | null;
+    onMediaAdd?: (media: SCMediaType) => void | null;
+    isUploading?: (boolean: any) => void;
 }
 export default function MediaPlugin(props: MediaPluginProps): JSX.Element;

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

@@ -17,7 +17,6 @@ const upload_button_1 = require("@rpldy/upload-button");
 const notistack_1 = require("notistack");
 const ImageNode_1 = require("../nodes/ImageNode");
 const constants_1 = require("../constants");
-const DocNode_1 = require("../nodes/DocNode");
 const ImagePlugin_1 = require("./ImagePlugin");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 exports.INSERT_DOC_COMMAND = (0, lexical_1.createCommand)();
@@ -34,11 +33,10 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 })(() => ({}));
 function MediaPlugin(props) {
     var _a;
-    const { className = '', onMediaAdd = null } = props;
+    const { className = '', onMediaAdd = null, isUploading } = props;
     // STATE
     const [uploading, setUploading] = (0, react_1.useState)({});
     const [mediaType, setMediaType] = (0, react_1.useState)('');
-    const [uploadedMedia, setUploadedMedia] = (0, react_1.useState)([]);
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
@@ -64,27 +62,6 @@ function MediaPlugin(props) {
             return true;
         }, lexical_1.COMMAND_PRIORITY_EDITOR);
     }, [editor]);
-    (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        if (!editor.hasNodes([DocNode_1.DocNode])) {
-            return;
-        }
-        editor.registerCommand(exports.INSERT_DOC_COMMAND, (payload) => {
-            const docNode = (0, DocNode_1.$createDocNode)({
-                src: payload.src,
-                name: payload.name,
-                type: payload.type
-            });
-            (0, utils_1.$insertNodeToNearestRoot)(docNode);
-            return true;
-        }, lexical_1.COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    (0, react_1.useEffect)(() => {
-        if (uploadedMedia.length > 0) {
-            onMediaAdd && onMediaAdd(uploadedMedia);
-        }
-    }, [uploadedMedia, onMediaAdd]);
     // HANDLERS
     const handleFileUploadFilter = (file) => {
         if (file.type.startsWith('image/')) {
@@ -114,11 +91,12 @@ function MediaPlugin(props) {
             };
             editor.focus();
             editor.dispatchCommand(exports.INSERT_DOC_COMMAND, data);
-            setUploadedMedia((prev) => [...prev, media]);
+            onMediaAdd && onMediaAdd(media);
         }
     };
     const handleUploadProgress = (chunks) => {
         setUploading(Object.assign({}, chunks));
+        isUploading && isUploading(Object.keys(chunks).length !== 0);
     };
     const handleUploadError = (chunk, error) => {
         enqueueSnackbar(error, {
@@ -128,14 +106,14 @@ function MediaPlugin(props) {
     };
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    if (!scUserContext.user || !editor.hasNodes([ImageNode_1.ImageNode, DocNode_1.DocNode])) {
+    if (!scUserContext.user || !editor.hasNodes([ImageNode_1.ImageNode])) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
                 url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
                 headers: ((_a = scContext.settings.session) === null || _a === void 0 ? void 0 : _a.authToken) ? { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } : {},
                 method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
+            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
                         disabled: Object.keys(uploading).length !== 0,
                         progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
                     } })] })) })));

package/lib/cjs/components/Editor/plugins/ToolbarPlugin.d.ts

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import * as React from 'react';
 import { MediaPluginProps } from './MediaPlugin';
 export interface ToolbarPluginProps {
     uploadImage: boolean;
     uploadFile?: boolean;
     MediaPluginProps?: MediaPluginProps;
+    customLink?: React.ReactNode;
 }
 export default function ToolbarPlugin(inProps: ToolbarPluginProps): JSX.Element;

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

@@ -129,7 +129,7 @@ function ToolbarPlugin(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { uploadImage = false, uploadFile = false, MediaPluginProps = {} } = props;
+    const { uploadImage = false, uploadFile = false, MediaPluginProps = {}, customLink = null } = props;
     // STATE
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     const [activeEditor, setActiveEditor] = (0, react_1.useState)(editor);
@@ -272,6 +272,6 @@ function ToolbarPlugin(inProps) {
                         activeEditor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, format);
                     } }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: `format_${format}` }) })) }), format))) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditable, onClick: clearFormatting }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "format_clear" }) })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditable, onClick: () => {
                     activeEditor.dispatchCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, undefined);
-                } }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "format_horizontal_rule" }) })) })), uploadImage && (0, jsx_runtime_1.jsx)(ImagePlugin_1.default, {}), uploadFile && (0, jsx_runtime_1.jsx)(MediaPlugin_1.default, Object.assign({}, MediaPluginProps)), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditable, onClick: insertLink }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "format_link" }) })) })), (0, jsx_runtime_1.jsx)(EmojiPlugin_1.default, {})] })));
+                } }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "format_horizontal_rule" }) })) })), uploadImage && (0, jsx_runtime_1.jsx)(ImagePlugin_1.default, {}), uploadFile && (0, jsx_runtime_1.jsx)(MediaPlugin_1.default, Object.assign({}, MediaPluginProps)), customLink !== null && customLink !== void 0 ? customLink : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditable, onClick: insertLink }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "format_link" }) })) }))), (0, jsx_runtime_1.jsx)(EmojiPlugin_1.default, {})] })));
 }
 exports.default = ToolbarPlugin;

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

@@ -85,6 +85,7 @@ export interface LessonCommentObjectProps {
  |author|.SCCommentObject-author|Styles applied to the author section.|
  |content|.SCCommentObject-content|Styles applied to content section.|
  |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
+ |mediaContent|.SCCommentObject-media-content|Styles applied to media content section.|
  |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
  
 

package/lib/cjs/components/LessonCommentObject/LessonCommentObject.js

@@ -24,6 +24,7 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/User
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const constants_1 = require("./constants");
 const LessonCommentActionsMenu_1 = tslib_1.__importDefault(require("../../shared/LessonCommentActionsMenu"));
+const LessonFilePreview_1 = tslib_1.__importDefault(require("../../shared/LessonFilePreview"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     comment: `${constants_1.PREFIX}-comment`,
@@ -31,6 +32,7 @@ const classes = {
     content: `${constants_1.PREFIX}-content`,
     author: `${constants_1.PREFIX}-author`,
     textContent: `${constants_1.PREFIX}-text-content`,
+    mediaContent: `${constants_1.PREFIX}-media-content`,
     commentActionsMenu: `${constants_1.PREFIX}-comment-actions-menu`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
@@ -65,6 +67,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |author|.SCCommentObject-author|Styles applied to the author section.|
  |content|.SCCommentObject-content|Styles applied to content section.|
  |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
+ |mediaContent|.SCCommentObject-media-content|Styles applied to media content section.|
  |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
  
 
@@ -154,7 +157,8 @@ function LessonCommentObject(inProps) {
                 const newObj = Object.assign({}, obj, {
                     text: data.text,
                     html: data.html,
-                    created_at: data.created_at
+                    created_at: data.created_at,
+                    medias: medias
                 });
                 updateObject(newObj);
                 setEditComment(null);
@@ -181,7 +185,9 @@ function LessonCommentObject(inProps) {
             return null;
         }
         const summaryHtml = (0, contribution_1.getCommentContributionHtml)(comment.html, scRoutingContext.url);
-        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, medias: comment.medias, autoFocus: true, id: `edit-${comment.id}`, onSave: handleUpdate, onCancel: handleCancel, editable: !isSavingComment, EditorProps: { uploadFile: true, uploadImage: false } }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.created_by.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: comment.created_at, showStartIcon: false })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } })] }), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(LessonCommentActionsMenu_1.default, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
+        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, medias: comment.medias, autoFocus: true, id: `edit-${comment.id}`, onSave: handleUpdate, onCancel: handleCancel, editable: !isSavingComment, EditorProps: { uploadFile: true, uploadImage: false } }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.created_by.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: comment.created_at, showStartIcon: false })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), obj.medias && obj.medias.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: obj.medias.map((media) => {
+                                            return (0, jsx_runtime_1.jsx)(LessonFilePreview_1.default, { className: classes.mediaContent, media: media }, media.id);
+                                        }) }))] }), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(LessonCommentActionsMenu_1.default, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
     }
     /**
      * Render comments

package/lib/cjs/components/LessonCommentObjects/LessonCommentObjects.js

@@ -105,6 +105,11 @@ function LessonCommentObjects(inProps) {
         var _a;
         (_a = commentsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'instant' });
     };
+    (0, react_1.useEffect)(() => {
+        if (commentsObject.comments.length > 0) {
+            scrollToBottom();
+        }
+    }, [commentsObject.comments]);
     /**
      * Perform save/update comment
      */
@@ -140,7 +145,6 @@ function LessonCommentObjects(inProps) {
                 handleCommentsUpdate(data);
                 setReplyKey(comment.id);
                 setIsCommenting(false);
-                scrollToBottom();
             })
                 .catch((error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);

package/lib/cjs/components/LessonObject/LessonObject.js

@@ -14,12 +14,16 @@ const contribution_1 = require("../../utils/contribution");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const ContentLesson_1 = tslib_1.__importDefault(require("../Composer/Content/ContentLesson"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const DisplayComponent_1 = tslib_1.__importDefault(require("../../shared/Media/Link/DisplayComponent"));
+const LessonFilePreview_1 = tslib_1.__importDefault(require("../../shared/LessonFilePreview"));
+const api_services_1 = require("@selfcommunity/api-services");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
     contentEdit: `${constants_1.PREFIX}-content-edit`,
     title: `${constants_1.PREFIX}-title`,
     text: `${constants_1.PREFIX}-text`,
+    mediasSection: `${constants_1.PREFIX}-medias-section`,
     navigation: `${constants_1.PREFIX}-navigation`,
     editor: `${constants_1.PREFIX}-editor`
 };
@@ -54,8 +58,8 @@ function LessonObject(inProps) {
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson, 
                     //error={{error}}
-                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
-                        __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
-                    } })) })) }) })));
+                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true }, EditorProps) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
+                                __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
+                            } }), lesson.medias && lesson.medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: lesson.medias.map((media) => media.type === api_services_1.MediaTypes.URL ? ((0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }, media.id)) : ((0, jsx_runtime_1.jsx)(LessonFilePreview_1.default, { media: media }, media.id))) })))] })) })) }) })));
 }
 exports.default = LessonObject;

package/lib/cjs/shared/AccordionLessons/AccordionLessons.js

@@ -10,7 +10,8 @@ const types_1 = require("@selfcommunity/types");
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
-    root: `${constants_1.PREFIX}-skeleton-root`,
+    root: `${constants_1.PREFIX}-root`,
+    empty: `${constants_1.PREFIX}-empty`,
     accordion: `${constants_1.PREFIX}-accordion`,
     summary: `${constants_1.PREFIX}-summary`,
     details: `${constants_1.PREFIX}-details`,
@@ -41,8 +42,8 @@ function AccordionLessons(inProps) {
     if (!course) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
-                                        lessonsNumber: section.lessons.length
-                                    } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                    lessonsNumber: section.lessons.length
+                                } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }
 exports.default = AccordionLessons;

package/lib/cjs/shared/LessonFilePreview/index.d.ts

@@ -0,0 +1,12 @@
+export interface LessonFilePreviewProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The media object to show
+     */
+    media: any;
+}
+export default function LessonFilePreview(props: LessonFilePreviewProps): JSX.Element;

package/lib/cjs/shared/LessonFilePreview/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const Media_1 = require("../../constants/Media");
+const PREFIX = 'SCLessonFilePreview';
+const classes = {
+    root: `${PREFIX}-root`,
+    item: `${PREFIX}-item`,
+    title: `${PREFIX}-title`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+function LessonFilePreview(props) {
+    // PROPS
+    const { className, media } = props;
+    /**
+     * Renders component
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: media.title && ((0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: media.url, target: "_blank", rel: "noopener noreferrer" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "picture_as_pdf" }), media.title] })) }))) }), media.id));
+}
+exports.default = LessonFilePreview;

package/lib/cjs/shared/Media/Link/UrlTextField/index.js

@@ -16,6 +16,7 @@ const INITIAL_STATE = {
     urlError: null
 };
 exports.default = (props) => {
+    var _a, _b;
     // STATE
     const [isCreating, setIsCreating] = (0, react_1.useState)(false);
     const [state, setState] = (0, react_1.useState)(Object.assign({}, INITIAL_STATE));
@@ -75,7 +76,5 @@ exports.default = (props) => {
      * Renders url text field
      */
     return ((0, jsx_runtime_1.jsx)("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: urlError === null && url !== '' }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", size: 20 }) : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
-            } })) })));
+                (urlError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.endAdornment) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: urlError === null && url !== '' }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", size: 20 })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })) })) })) }))) })) }) })) })));
 };