@selfcommunity/react-ui 0.11.0-alpha.60 → 0.11.0-alpha.62

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

@@ -1,4 +1,7 @@
 import React from 'react';
+import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
+import { MediaPluginProps } from './plugins';
+import { SCMediaType } from '@selfcommunity/types';
 export type EditorRef = {
     focus: () => void;
 };
@@ -33,11 +36,31 @@ export interface EditorProps {
      * @default false
      */
     uploadImage?: boolean;
+    /**
+     * This editor can upload files
+     * @default false
+     */
+    uploadFile?: boolean;
     /**
      * Handler for change event of the editor
      * @default null
      * */
     onChange?: (value: string) => void;
+    /**
+     * Handler for change media in the editor
+     * @default null
+     * */
+    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
@@ -48,6 +71,20 @@ export interface EditorProps {
      * @default null
      * */
     onFocus?: (event: FocusEvent) => void;
+    /**
+     * Action to add to actions
+     */
+    action?: React.ReactNode | null;
+    /**
+     * The text displayed when the editor is empty
+     * @default   <FormattedMessage id="ui.editor.placeholder" defaultMessage="ui.editor.placeholder" />
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Prop to customize emoji plugin position
+     * @default false
+     */
+    isLessonCommentEditor?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<EditorRef>>;
 export default _default;

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

@@ -15,10 +15,10 @@ const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin
 const constants_1 = require("./constants");
 const HorizontalRulePlugin_1 = require("./plugins/HorizontalRulePlugin");
 const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
-const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const plugins_1 = require("./plugins");
 const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
 const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
 const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
 const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
@@ -107,7 +107,7 @@ const Editor = (inProps, ref) => {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = 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" }), isLessonCommentEditor = false } = props;
     const apiRef = (0, react_1.useRef)();
     // STATE
     const [focused, setFocused] = (0, react_1.useState)(false);
@@ -115,6 +115,9 @@ const Editor = (inProps, ref) => {
     const handleChange = (value) => {
         onChange && onChange(value);
     };
+    const handleMediaChange = (media) => {
+        onMediaChange && onMediaChange(media);
+    };
     const handleError = (error, editor) => {
         console.log(error);
     };
@@ -145,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 }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(HorizontalRulePlugin_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, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (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)(HorizontalRulePlugin_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, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, { isLessonCommentEditor: isLessonCommentEditor }), uploadFile && (0, jsx_runtime_1.jsx)(plugins_1.MediaPlugin, Object.assign({}, MediaPluginProps)), 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.LexicalErrorBoundary }), (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/plugins/EmojiPlugin.d.ts

@@ -1 +1,3 @@
-export default function EmojiPlugin(): JSX.Element;
+export default function EmojiPlugin({ isLessonCommentEditor }: {
+    isLessonCommentEditor?: boolean;
+}): JSX.Element;

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

@@ -9,7 +9,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const EmojiPicker_1 = tslib_1.__importDefault(require("../../../shared/EmojiPicker"));
 const constants_1 = require("../constants");
-function Emoji({ editor, className = '' }) {
+function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
     // STATE
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -25,13 +25,7 @@ function Emoji({ editor, className = '' }) {
     if (isMobile) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                }, transformOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left'
-                }, sx: (theme) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
                 } }, { children: (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }) }))] }));
 }
@@ -42,8 +36,8 @@ const Root = (0, styles_1.styled)(Emoji, {
     name: constants_1.PREFIX,
     slot: 'EmojiPluginRoot'
 })(() => ({}));
-function EmojiPlugin() {
+function EmojiPlugin({ isLessonCommentEditor = false }) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
-    return (0, jsx_runtime_1.jsx)(Root, { editor: editor, className: classes.root });
+    return (0, jsx_runtime_1.jsx)(Root, { editor: editor, className: classes.root, isLessonCommentEditor: isLessonCommentEditor });
 }
 exports.default = EmojiPlugin;

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

@@ -0,0 +1,14 @@
+import { LexicalCommand } from 'lexical';
+import { SCMediaType } from '@selfcommunity/types';
+export interface InsertDocPayload {
+    src: string;
+    name: string;
+    type: string;
+}
+export declare const INSERT_DOC_COMMAND: LexicalCommand<InsertDocPayload>;
+export interface MediaPluginProps {
+    className?: string;
+    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

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSERT_DOC_COMMAND = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lexical_1 = require("lexical");
+const utils_1 = require("@lexical/utils");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const MediaChunkUploader_1 = tslib_1.__importDefault(require("../../../shared/MediaChunkUploader"));
+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 ImagePlugin_1 = require("./ImagePlugin");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+exports.INSERT_DOC_COMMAND = (0, lexical_1.createCommand)();
+const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((_a, ref) => {
+    var { progress = null } = _a, rest = tslib_1.__rest(_a, ["progress"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, rest, { "aria-label": "upload image", ref: ref }, { children: progress ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", value: progress, size: "1rem" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "inherit" }, { children: "attach_file" })) })));
+}));
+const classes = {
+    root: `${constants_1.PREFIX}-media-plugin-root`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'MediaPluginRoot'
+})(() => ({}));
+function MediaPlugin(props) {
+    var _a;
+    const { className = '', onMediaAdd = null, isUploading } = props;
+    // STATE
+    const [uploading, setUploading] = (0, react_1.useState)({});
+    const [mediaType, setMediaType] = (0, react_1.useState)('');
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        if (!editor.hasNodes([ImageNode_1.ImageNode])) {
+            return;
+        }
+        return editor.registerCommand(ImagePlugin_1.INSERT_IMAGE_COMMAND, (payload) => {
+            const imageNode = (0, ImageNode_1.$createImageNode)({
+                src: payload.src,
+                altText: payload.altText,
+                maxWidth: '100%',
+                width: payload.width,
+                height: payload.height
+            });
+            // The image is not editable so it is better to position it near the root element
+            (0, utils_1.$insertNodeToNearestRoot)(imageNode);
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    // HANDLERS
+    const handleFileUploadFilter = (file) => {
+        if (file.type.startsWith('image/')) {
+            setMediaType('image');
+        }
+        else {
+            setMediaType('file');
+        }
+        return file.type.startsWith('image/') || file.type.startsWith('application/');
+    };
+    const handleUploadSuccess = (media) => {
+        if (media.type === 'image') {
+            const data = {
+                altText: media.title,
+                src: media.image,
+                width: media.image_width,
+                height: media.image_height
+            };
+            editor.focus();
+            editor.dispatchCommand(ImagePlugin_1.INSERT_IMAGE_COMMAND, data);
+        }
+        else {
+            const data = {
+                src: media.url || media.image,
+                name: media.title,
+                type: media.type
+            };
+            editor.focus();
+            editor.dispatchCommand(exports.INSERT_DOC_COMMAND, data);
+            onMediaAdd && onMediaAdd(media);
+        }
+    };
+    const handleUploadProgress = (chunks) => {
+        setUploading(Object.assign({}, chunks));
+        isUploading && isUploading(Object.keys(chunks).length !== 0);
+    };
+    const handleUploadError = (chunk, error) => {
+        enqueueSnackbar(error, {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    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, 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
+                    } })] })) })));
+}
+exports.default = MediaPlugin;

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

@@ -5,7 +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

@@ -22,6 +22,7 @@ const ImagePlugin_1 = tslib_1.__importDefault(require("./ImagePlugin"));
 const EmojiPlugin_1 = tslib_1.__importDefault(require("./EmojiPlugin"));
 const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
 const constants_1 = require("../constants");
+const MediaPlugin_1 = tslib_1.__importDefault(require("./MediaPlugin"));
 const blockTypeToBlockIcon = {
     h1: 'format_heading_1',
     h2: 'format_heading_2',
@@ -128,7 +129,7 @@ function ToolbarPlugin(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { uploadImage = false } = 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);
@@ -271,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, {}), (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/Editor/plugins/index.d.ts

@@ -5,4 +5,5 @@ import ImagePlugin from './ImagePlugin';
 import MentionsPlugin from './MentionsPlugin';
 import OnChangePlugin from './OnChangePlugin';
 import HashtagPlugin from './HashtagPlugin';
-export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin, HashtagPlugin };
+import MediaPlugin, { MediaPluginProps } from './MediaPlugin';
+export { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin, HashtagPlugin, MediaPlugin, MediaPluginProps };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HashtagPlugin = exports.OnChangePlugin = exports.MentionsPlugin = exports.ImagePlugin = exports.EmojiPlugin = exports.DefaultHtmlValuePlugin = exports.AutoLinkPlugin = void 0;
+exports.MediaPlugin = exports.HashtagPlugin = exports.OnChangePlugin = exports.MentionsPlugin = exports.ImagePlugin = exports.EmojiPlugin = exports.DefaultHtmlValuePlugin = exports.AutoLinkPlugin = void 0;
 const tslib_1 = require("tslib");
 const AutoLinkPlugin_1 = tslib_1.__importDefault(require("./AutoLinkPlugin"));
 exports.AutoLinkPlugin = AutoLinkPlugin_1.default;
@@ -16,3 +16,5 @@ const OnChangePlugin_1 = tslib_1.__importDefault(require("./OnChangePlugin"));
 exports.OnChangePlugin = OnChangePlugin_1.default;
 const HashtagPlugin_1 = tslib_1.__importDefault(require("./HashtagPlugin"));
 exports.HashtagPlugin = HashtagPlugin_1.default;
+const MediaPlugin_1 = tslib_1.__importDefault(require("./MediaPlugin"));
+exports.MediaPlugin = MediaPlugin_1.default;

package/lib/cjs/components/EventForm/EventForm.js

@@ -288,7 +288,7 @@ function EventForm(inProps) {
             }
             let __errors = {};
             if ('coverError' in _error) {
-                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
+                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.cover.error", defaultMessage: "ui.eventForm.cover.error" }) });
             }
             if ('nameError' in _error || ('nonFieldErrorsError' in _error && _error['nonFieldErrorsError'].error === 'unique')) {
                 __errors = Object.assign(Object.assign({}, __errors), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });

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

@@ -0,0 +1,42 @@
+import { SCLessonActionsType } from '../../types';
+export interface LessonAppbarProps {
+    /**
+     * The appbar title
+     */
+    title: string;
+    /**
+     *  If comments are enabled for the lesson showed
+     */
+    showComments: boolean;
+    /**
+     * The edit mode
+     * @default false
+     */
+    editMode: boolean;
+    /**
+     * onArrowBack Callback
+     */
+    onArrowBackClick?: () => void;
+    /**
+     * onSaveCallback
+     */
+    onSave: () => void;
+    /**
+     * The active panel
+     */
+    activePanel: SCLessonActionsType | null;
+    /**
+     * Handles panel opening
+     * @param panel
+     */
+    handleOpen: (panel: SCLessonActionsType) => void;
+    /**
+     * Indicates whether an update is currently in progress.
+     */
+    updating: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonAppbar(inProps: LessonAppbarProps): JSX.Element;

package/lib/cjs/components/LessonAppbar/LessonAppbar.js

@@ -0,0 +1,34 @@
+"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 system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const types_1 = require("../../types");
+const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    startItems: `${constants_1.PREFIX}-start-items`,
+    endItems: `${constants_1.PREFIX}-end-items`,
+    title: `${constants_1.PREFIX}-title`
+};
+const Root = (0, styles_1.styled)(material_1.AppBar, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root],
+    shouldForwardProp: (prop) => prop !== 'open'
+})(({ theme }) => ({}));
+function LessonAppbar(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = tslib_1.__rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.startItems }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endItems }, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] })))] }) })));
+}
+exports.default = LessonAppbar;

package/lib/cjs/components/LessonAppbar/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLessonAppbar";

package/lib/cjs/components/LessonAppbar/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCLessonAppbar';

package/lib/cjs/components/LessonAppbar/index.d.ts

@@ -0,0 +1,3 @@
+import LessonAppbar, { LessonAppbarProps } from './LessonAppbar';
+export default LessonAppbar;
+export { LessonAppbarProps };

package/lib/cjs/components/LessonAppbar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const LessonAppbar_1 = tslib_1.__importDefault(require("./LessonAppbar"));
+exports.default = LessonAppbar_1.default;

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

@@ -0,0 +1,94 @@
+import { CardProps } from '@mui/material';
+import { SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+export interface LessonCommentObjectProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Id of the comment object
+     * @default null
+     */
+    commentObjectId?: number;
+    /**
+     * Comment object
+     * @default null
+     */
+    commentObject?: SCCourseCommentType;
+    /**
+     * Id of lesson object
+     * @default null
+     */
+    lessonObjectId?: number;
+    /**
+     * Feed object
+     * @default null
+     */
+    lessonObject?: SCCourseLessonType;
+    /**
+     * Callback on delete the comment
+     * @default null
+     */
+    onDelete?: (comment: SCCourseCommentType) => void;
+    /**
+     * Callback on comment edit
+     * @default false
+     */
+    isEditing?: (editing: boolean) => void;
+    /**
+     * Props to spread to single comment object skeleton
+     * @default {elevation: 0}
+     */
+    CommentObjectSkeletonProps?: CardProps;
+    /**
+     * Props to spread to single comment object CommentObjectReply
+     * @default {elevation: 0}
+     */
+    CommentObjectReplyProps?: CardProps;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a comment item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
+
+ #### Import
+
+ ```jsx
+ import {CommentObject} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCommentObject` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCommentObject-root|Styles applied to the root element.|
+ |comment|.SCCommentObject-comment|Styles applied to comment element.|
+ |avatar|.SCCommentObject-avatar|Styles applied to the avatar element.|
+ |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.|
+ 
+
+ * @param inProps
+ */
+export default function LessonCommentObject(inProps: LessonCommentObjectProps): JSX.Element;