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

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -12,10 +12,12 @@ import { LoadingButton } from '@mui/lab';
 import BaseItem from '../../shared/BaseItem';
 import UserAvatar from '../../shared/UserAvatar';
 import { useThemeProps } from '@mui/system';
+import PreviewComponent from '../../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`,
@@ -68,7 +70,8 @@ export default function CommentObjectReply(inProps) {
     const scUserContext = useSCUser();
     // RETRIEVE OBJECTS
     const [html, setHtml] = useState(text);
-    const [media, setMedia] = useState(medias);
+    const [media, setMedia] = useState(medias !== null && medias !== void 0 ? medias : []);
+    const [uploadingMedia, setUploadingMedia] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -113,8 +116,11 @@ export default 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
@@ -125,6 +131,6 @@ export default function CommentObjectReply(inProps) {
     }, [html]);
     // RENDER
     return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: showAvatar &&
-            (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [_jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, onMediaChange: handleChangeMedia, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
-                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps)), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+            (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && _jsx(PreviewComponent, { value: media, onChange: handleChangeMedias, className: classes.media }), _jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
+                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

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

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { Box, Typography } from '@mui/material';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Icon, IconButton, InputAdornment, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import Editor from '../../../Editor';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../../constants';
+import { File, Link } from '../../../../shared/Media';
+import UrlTextField from '../../../../shared/Media/Link/UrlTextField';
 const classes = {
     root: `${PREFIX}-content-lesson-root`,
     generalError: `${PREFIX}-general-error`,
     title: `${PREFIX}-content-lesson-title`,
     medias: `${PREFIX}-content-lesson-medias`,
-    editor: `${PREFIX}-content-lesson-editor`
+    editor: `${PREFIX}-content-lesson-editor`,
+    link: `${PREFIX}-content-lesson-link`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -21,13 +24,41 @@ export default (props) => {
     // PROPS
     const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
     const { error: generalError = null } = Object.assign({}, error);
+    const mediaObjectTypes = [File, Link];
+    const [medias, setMedias] = useState((value === null || value === void 0 ? void 0 : value.medias) || []);
+    const [openLink, setOpenLink] = useState();
+    const linkInputRef = useRef(null);
     // HANDLERS
     const handleChangeHtml = useCallback((html) => {
         onChange(html);
     }, [value]);
-    const handleChangeMedia = useCallback((medias) => {
-        onMediaChange(medias);
+    const handleChangeMedias = useCallback((value) => {
+        setMedias([...value]);
+        onMediaChange([...value]);
     }, []);
+    const handleChangeMedia = (value) => {
+        setMedias((prev) => [...prev, value]);
+        onMediaChange([...medias, value]);
+    };
+    const handleLinkAdd = useCallback((media) => {
+        setMedias([...medias, media]);
+        setOpenLink(false);
+    }, [medias]);
+    useEffect(() => {
+        if (openLink && linkInputRef.current) {
+            linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [openLink]);
     // RENDER
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
+                    customLink: _jsx(Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Link.name),
+                    uploadImage: false,
+                    uploadFile: true
+                } })), openLink && (_jsx(UrlTextField, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: _jsx(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: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: _jsx(Icon, { children: "close" }) })) })))
+                } })), medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                    }
+                }) })))] })));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Button, Divider, Skeleton, Stack, Typography } from '@mui/material';
-import { memo, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { FormattedMessage } from 'react-intl';
@@ -94,11 +94,11 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.html }))] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(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]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(comment.created_at).toLocaleDateString() }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, course), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(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 _jsx(CommentsSkeleton, {});
     }
-    return (_jsxs(Box, Object.assign({ className: classes.container }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && _jsx(CommentSkeleton, { id: 1 }), state.results.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) })))] })));
+    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoadingComments && _jsx(CommentSkeleton, { id: 1 }), _jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoadingComments, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 export default memo(Comments);

package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -136,7 +136,7 @@ export default function CourseParticipantsButton(inProps) {
     /**
      * Rendering
      */
-    if (!participantsAvailable || !scCourse.privacy) {
+    if (!participantsAvailable) {
         return _jsx(HiddenPlaceholder, {});
     }
     return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0, 

package/lib/esm/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/esm/components/Editor/Editor.js

@@ -67,8 +67,7 @@ const editorTheme = {
         superscript: `${PREFIX}-textSuperscript`,
         underline: `${PREFIX}-textUnderline`,
         underlineStrikethrough: `${PREFIX}-textUnderlineStrikethrough`
-    },
-    document: `${PREFIX}-document`
+    }
 };
 /**
  * > API documentation for the Community-JS Editor component. Learn about the available props and the CSS API.
@@ -105,7 +104,7 @@ const Editor = (inProps, ref) => {
         props: inProps,
         name: 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 = _jsx(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 = _jsx(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) } = props;
     const apiRef = useRef();
     // STATE
     const [focused, setFocused] = useState(false);
@@ -146,6 +145,6 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes],
         theme: editorTheme
     }), [editable]);
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, { uploadImage: uploadImage, uploadFile: uploadFile, MediaPluginProps: { onMediaAdd: handleMediaChange } }), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {})] })) : (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && _jsx(ImagePlugin, {}), uploadFile && _jsx(MediaPlugin, { onMediaAdd: handleMediaChange }), _jsx(EmojiPlugin, {}), action && action] }))), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: classes.content }), placeholder: _jsx(Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: placeholder })), ErrorBoundary: LexicalErrorBoundary }), _jsx(DefaultHtmlValuePlugin, { defaultValue: defaultValue }), _jsx(HistoryPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(OnBlurPlugin, { onBlur: handleHasBlur }), _jsx(OnFocusPlugin, { onFocus: handleHasFocus }), _jsx(AutoLinkPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(FloatingLinkPlugin, {}), _jsx(ApiPlugin, { ref: apiRef })] })) })));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, Object.assign({ uploadImage: uploadImage, uploadFile: uploadFile, MediaPluginProps: { onMediaAdd: handleMediaChange } }, ToolBarProps)), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {})] })) : (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && _jsx(ImagePlugin, {}), uploadFile && _jsx(MediaPlugin, Object.assign({}, MediaPluginProps)), _jsx(EmojiPlugin, {}), action && action] }))), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: classes.content }), placeholder: _jsx(Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: placeholder })), ErrorBoundary: LexicalErrorBoundary }), _jsx(DefaultHtmlValuePlugin, { defaultValue: defaultValue }), _jsx(HistoryPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(OnBlurPlugin, { onBlur: handleHasBlur }), _jsx(OnFocusPlugin, { onFocus: handleHasFocus }), _jsx(AutoLinkPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(FloatingLinkPlugin, {}), _jsx(ApiPlugin, { ref: apiRef })] })) })));
 };
 export default forwardRef(Editor);

package/lib/esm/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/esm/components/Editor/nodes/index.js

@@ -5,7 +5,6 @@ import { ImageNode } from './ImageNode';
 import { MentionNode } from './MentionNode';
 import { TextNode } from 'lexical';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { DocNode } from './DocNode';
 const nodes = [
     HorizontalRuleNode,
     HeadingNode,
@@ -17,7 +16,6 @@ const nodes = [
     AutoLinkNode,
     LinkNode,
     ImageNode,
-    MentionNode,
-    DocNode
+    MentionNode
 ];
 export default nodes;

package/lib/esm/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/esm/components/Editor/plugins/MediaPlugin.js

@@ -14,7 +14,6 @@ import { asUploadButton } from '@rpldy/upload-button';
 import { useSnackbar } from 'notistack';
 import { $createImageNode, ImageNode } from '../nodes/ImageNode';
 import { PREFIX } from '../constants';
-import { $createDocNode, DocNode } from '../nodes/DocNode';
 import { INSERT_IMAGE_COMMAND } from './ImagePlugin';
 import classNames from 'classnames';
 export const INSERT_DOC_COMMAND = createCommand();
@@ -31,11 +30,10 @@ const Root = styled(Box, {
 })(() => ({}));
 export default function MediaPlugin(props) {
     var _a;
-    const { className = '', onMediaAdd = null } = props;
+    const { className = '', onMediaAdd = null, isUploading } = props;
     // STATE
     const [uploading, setUploading] = useState({});
     const [mediaType, setMediaType] = useState('');
-    const [uploadedMedia, setUploadedMedia] = useState([]);
     const [editor] = useLexicalComposerContext();
     // CONTEXT
     const scContext = useSCContext();
@@ -61,27 +59,6 @@ export default function MediaPlugin(props) {
             return true;
         }, COMMAND_PRIORITY_EDITOR);
     }, [editor]);
-    useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        if (!editor.hasNodes([DocNode])) {
-            return;
-        }
-        editor.registerCommand(INSERT_DOC_COMMAND, (payload) => {
-            const docNode = $createDocNode({
-                src: payload.src,
-                name: payload.name,
-                type: payload.type
-            });
-            $insertNodeToNearestRoot(docNode);
-            return true;
-        }, COMMAND_PRIORITY_EDITOR);
-    }, [editor]);
-    useEffect(() => {
-        if (uploadedMedia.length > 0) {
-            onMediaAdd && onMediaAdd(uploadedMedia);
-        }
-    }, [uploadedMedia, onMediaAdd]);
     // HANDLERS
     const handleFileUploadFilter = (file) => {
         if (file.type.startsWith('image/')) {
@@ -111,11 +88,12 @@ export default function MediaPlugin(props) {
             };
             editor.focus();
             editor.dispatchCommand(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, {
@@ -125,14 +103,14 @@ export default function MediaPlugin(props) {
     };
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    if (!scUserContext.user || !editor.hasNodes([ImageNode, DocNode])) {
+    if (!scUserContext.user || !editor.hasNodes([ImageNode])) {
         return null;
     }
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: _jsxs(ChunkedUploady, Object.assign({ destination: {
                 url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
                 headers: ((_a = scContext.settings.session) === null || _a === void 0 ? void 0 : _a.authToken) ? { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } : {},
                 method: Endpoints.ComposerChunkUploadMedia.method
-            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter }, { children: [_jsx(MediaChunkUploader, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _jsx(UploadButton, { className: className, extraProps: {
+            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter, multiple: true }, { children: [_jsx(MediaChunkUploader, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _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/esm/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/esm/components/Editor/plugins/ToolbarPlugin.js

@@ -126,7 +126,7 @@ export default function ToolbarPlugin(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { uploadImage = false, uploadFile = false, MediaPluginProps = {} } = props;
+    const { uploadImage = false, uploadFile = false, MediaPluginProps = {}, customLink = null } = props;
     // STATE
     const [editor] = useLexicalComposerContext();
     const [activeEditor, setActiveEditor] = useState(editor);
@@ -269,5 +269,5 @@ export default function ToolbarPlugin(inProps) {
                         activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
                     } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: `ui.editor.toolbarPlugin.${format}`, defaultMessage: `ui.editor.toolbarPlugin.${format}` }) }, { children: _jsx(Icon, { children: `format_${format}` }) })) }), format))) })), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: clearFormatting }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.clear", defaultMessage: "ui.editor.toolbarPlugin.clear" }) }, { children: _jsx(Icon, { children: "format_clear" }) })) })), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: () => {
                     activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
-                } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) }, { children: _jsx(Icon, { children: "format_horizontal_rule" }) })) })), uploadImage && _jsx(ImagePlugin, {}), uploadFile && _jsx(MediaPlugin, Object.assign({}, MediaPluginProps)), _jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: insertLink }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) }, { children: _jsx(Icon, { children: "format_link" }) })) })), _jsx(EmojiPlugin, {})] })));
+                } }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.horizontalRule", defaultMessage: "ui.editor.toolbarPlugin.horizontalRule" }) }, { children: _jsx(Icon, { children: "format_horizontal_rule" }) })) })), uploadImage && _jsx(ImagePlugin, {}), uploadFile && _jsx(MediaPlugin, Object.assign({}, MediaPluginProps)), customLink !== null && customLink !== void 0 ? customLink : (_jsx(IconButton, Object.assign({ disabled: !isEditable, onClick: insertLink }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.editor.toolbarPlugin.link", defaultMessage: "ui.editor.toolbarPlugin.link" }) }, { children: _jsx(Icon, { children: "format_link" }) })) }))), _jsx(EmojiPlugin, {})] })));
 }

package/lib/esm/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/esm/components/LessonCommentObject/LessonCommentObject.js

@@ -22,6 +22,7 @@ import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
 import { PREFIX } from './constants';
 import LessonCommentActionsMenu from '../../shared/LessonCommentActionsMenu';
+import LessonFilePreview from '../../shared/LessonFilePreview';
 const classes = {
     root: `${PREFIX}-root`,
     comment: `${PREFIX}-comment`,
@@ -29,6 +30,7 @@ const classes = {
     content: `${PREFIX}-content`,
     author: `${PREFIX}-author`,
     textContent: `${PREFIX}-text-content`,
+    mediaContent: `${PREFIX}-media-content`,
     commentActionsMenu: `${PREFIX}-comment-actions-menu`
 };
 const Root = styled(Box, {
@@ -63,6 +65,7 @@ const Root = styled(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.|
  
 
@@ -152,7 +155,8 @@ export default 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);
@@ -179,7 +183,9 @@ export default function LessonCommentObject(inProps) {
             return null;
         }
         const summaryHtml = getCommentContributionHtml(comment.html, scRoutingContext.url);
-        return (_jsx(React.Fragment, { children: editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, 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)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.created_by.community_badge }, { children: _jsx(Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsx(_Fragment, { children: _jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), _jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(DateTimeAgo, { date: comment.created_at, showStartIcon: false })] }), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } })] }), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(LessonCommentActionsMenu, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
+        return (_jsx(React.Fragment, { children: editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, 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)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.created_by.community_badge }, { children: _jsx(Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsx(_Fragment, { children: _jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), _jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(DateTimeAgo, { date: comment.created_at, showStartIcon: false })] }), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), obj.medias && obj.medias.length > 0 && (_jsx(_Fragment, { children: obj.medias.map((media) => {
+                                            return _jsx(LessonFilePreview, { className: classes.mediaContent, media: media }, media.id);
+                                        }) }))] }), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(LessonCommentActionsMenu, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
     }
     /**
      * Render comments

package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js

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

package/lib/esm/components/LessonObject/LessonObject.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
@@ -12,12 +12,16 @@ import { getContributionHtml } from '../../utils/contribution';
 import Widget from '../Widget';
 import ContentLesson from '../Composer/Content/ContentLesson';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import DisplayComponent from '../../shared/Media/Link/DisplayComponent';
+import LessonFilePreview from '../../shared/LessonFilePreview';
+import { MediaTypes } from '@selfcommunity/api-services';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     contentEdit: `${PREFIX}-content-edit`,
     title: `${PREFIX}-title`,
     text: `${PREFIX}-text`,
+    mediasSection: `${PREFIX}-medias-section`,
     navigation: `${PREFIX}-navigation`,
     editor: `${PREFIX}-editor`
 };
@@ -52,7 +56,7 @@ export default function LessonObject(inProps) {
     }
     return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(Widget, { children: _jsx(CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? (_jsx(ContentLesson, { value: lesson, 
                     //error={{error}}
-                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : (_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
-                        __html: getContributionHtml(lesson.html, scRoutingContext.url)
-                    } })) })) }) })));
+                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true }, EditorProps) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
+                                __html: getContributionHtml(lesson.html, scRoutingContext.url)
+                            } }), lesson.medias && lesson.medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.mediasSection }, { children: lesson.medias.map((media) => media.type === MediaTypes.URL ? (_jsx(DisplayComponent, { medias: [media] }, media.id)) : (_jsx(LessonFilePreview, { media: media }, media.id))) })))] })) })) }) })));
 }

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, AccordionDetails, AccordionSummary, Box, Icon, styled, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Fragment, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
 import { PREFIX } from './constants';
 import AccordionLessonSkeleton from './Skeleton';
 const classes = {
-    root: `${PREFIX}-skeleton-root`,
+    root: `${PREFIX}-root`,
+    empty: `${PREFIX}-empty`,
     accordion: `${PREFIX}-accordion`,
     summary: `${PREFIX}-summary`,
     details: `${PREFIX}-details`,
@@ -38,7 +39,7 @@ export default function AccordionLessons(inProps) {
     if (!course) {
         return _jsx(AccordionLessonSkeleton, {});
     }
-    return (_jsx(Fragment, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_less" }) }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
-                                        lessonsNumber: section.lessons.length
-                                    } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), _jsx(Typography, { children: lesson.name })] }), lesson.id)))] }), section.id))) }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_less" }) }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                    lessonsNumber: section.lessons.length
+                                } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), _jsx(Typography, { children: lesson.name })] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }

package/lib/esm/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/esm/shared/LessonFilePreview/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { Box, Link, Typography } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { MEDIA_TYPE_DOCUMENT } from '../../constants/Media';
+const PREFIX = 'SCLessonFilePreview';
+const classes = {
+    root: `${PREFIX}-root`,
+    item: `${PREFIX}-item`,
+    title: `${PREFIX}-title`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+export default function LessonFilePreview(props) {
+    // PROPS
+    const { className, media } = props;
+    /**
+     * Renders component
+     */
+    return (_jsx(Root, Object.assign({ className: classNames(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 && (_jsx(Link, Object.assign({ href: media.url, target: "_blank", rel: "noopener noreferrer" }, { children: _jsxs(Typography, Object.assign({ className: classes.title }, { children: [media.type === MEDIA_TYPE_DOCUMENT && _jsx(Icon, { children: "picture_as_pdf" }), media.title] })) }))) }), media.id));
+}

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
@@ -14,6 +14,7 @@ const INITIAL_STATE = {
     urlError: null
 };
 export default (props) => {
+    var _a, _b;
     // STATE
     const [isCreating, setIsCreating] = useState(false);
     const [state, setState] = useState(Object.assign({}, INITIAL_STATE));
@@ -73,7 +74,5 @@ export default (props) => {
      * Renders url text field
      */
     return (_jsx("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: _jsx(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? _jsx(CircularProgress, { color: "primary", size: 20 }) : _jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
-            } })) })));
+                (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(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: (_jsx(_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) : (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? (_jsx(CircularProgress, { color: "primary", size: 20 })) : (_jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })) })) })) }))) })) }) })) })));
 };