@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const link_1 = require("@lexical/link");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
@@ -9,14 +8,12 @@ const lexical_1 = require("lexical");
 const react_1 = require("react");
 const editor_1 = require("../../../utils/editor");
 const utils_2 = require("@selfcommunity/utils");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("../constants");
 const classes = {
     root: `${constants_1.PREFIX}-floating-link-plugin-root`
 };
-const Root = (0, styles_1.styled)(material_1.Popper, {
+const Root = (0, material_1.styled)(material_1.Popper, {
     name: constants_1.PREFIX,
     slot: 'FloatingLinkPluginRoot'
 })(() => ({}));
@@ -101,7 +98,7 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
                 }, InputProps: {
                     endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
                                     setIsLink(false);
-                                } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" }) }))] })))
+                                } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))] })))
                 } }) }) })));
 }
 function useFloatingLinkEditorToolbar(editor) {

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

@@ -11,7 +11,7 @@ const react_dom_1 = require("react-dom");
 const HashtagNode_1 = require("../nodes/HashtagNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("../constants");
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
@@ -351,7 +351,7 @@ function isSelectionOnEntityBoundary(editor, offset) {
 const classes = {
     root: `${constants_1.PREFIX}-hashtag-plugin-root`
 };
-const Root = (0, styles_1.styled)(HashtagsTypeahead, {
+const Root = (0, material_1.styled)(HashtagsTypeahead, {
     name: constants_1.PREFIX,
     slot: 'HashtagPluginRoot'
 })(() => ({}));

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function HorizontalRulePlugin(): null;

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

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalRulePlugin = void 0;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const utils_1 = require("@lexical/utils");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+function HorizontalRulePlugin() {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        return editor.registerCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection)) {
+                return false;
+            }
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+                const horizontalRuleNode = (0, LexicalHorizontalRuleNode_1.$createHorizontalRuleNode)();
+                (0, utils_1.$insertNodeToNearestRoot)(horizontalRuleNode);
+            }
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}
+exports.HorizontalRulePlugin = HorizontalRulePlugin;

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

@@ -8,7 +8,6 @@ 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");
@@ -71,7 +70,7 @@ function Image({ editor, className = '' }) {
 const classes = {
     root: `${constants_1.PREFIX}-image-plugin-root`
 };
-const Root = (0, styles_1.styled)(Image, {
+const Root = (0, material_1.styled)(Image, {
     name: constants_1.PREFIX,
     slot: 'ImagePluginRoot'
 })(() => ({}));

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

@@ -1,6 +1,6 @@
 import { ErrorBoundaryType } from '../shared/useDecorators';
 export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
     contentEditable: JSX.Element;
-    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
-    ErrorBoundary: ErrorBoundaryType;
+    placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextPlugin = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
+const useLexicalEditable_1 = require("@lexical/react/useLexicalEditable");
 const useDecorators_1 = require("../shared/useDecorators");
 const useEditorFocus_1 = require("../shared/useEditorFocus");
 const useCanShowPlaceholder_1 = require("../shared/useCanShowPlaceholder");
@@ -19,7 +18,7 @@ exports.RichTextPlugin = RichTextPlugin;
 function Placeholder({ content }) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     const showPlaceholder = (0, useCanShowPlaceholder_1.useCanShowPlaceholder)(editor);
-    const editable = (0, useLexicalEditable_1.default)();
+    const editable = (0, useLexicalEditable_1.useLexicalEditable)();
     const hasFocus = (0, useEditorFocus_1.useEditorFocus)();
     if (!showPlaceholder || hasFocus) {
         return null;

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,120 @@
+"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 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, material_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/MentionsPlugin.d.ts

@@ -1,9 +1,9 @@
-type MentionMatch = {
+declare type MentionMatch = {
     leadOffset: number;
     matchingString: string;
     replaceableString: string;
 };
-type Resolution = {
+declare type Resolution = {
     match: MentionMatch;
     range: Range;
 };

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

@@ -12,8 +12,6 @@ const MentionNode_1 = require("../nodes/MentionNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
 const constants_1 = require("../constants");
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
@@ -477,7 +475,7 @@ function isSelectionOnEntityBoundary(editor, offset) {
 const classes = {
     root: `${constants_1.PREFIX}-mention-plugin-root`
 };
-const Root = (0, styles_1.styled)(MentionsTypeahead, {
+const Root = (0, material_1.styled)(MentionsTypeahead, {
     name: constants_1.PREFIX,
     slot: 'MentionPluginRoot'
 })(() => ({}));
@@ -533,7 +531,7 @@ function useMentions(editor, anchorClassName = null) {
     if (!anchorElementRef) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, Object.assign({ onClickAway: closeTypeahead }, { children: (0, jsx_runtime_1.jsx)(material_1.Portal, Object.assign({ container: anchorElementRef }, { children: (0, jsx_runtime_1.jsx)(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }) })) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: closeTypeahead }, { children: (0, jsx_runtime_1.jsx)(material_1.Portal, Object.assign({ container: anchorElementRef }, { children: (0, jsx_runtime_1.jsx)(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }) })) })));
 }
 function MentionsPlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();

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

@@ -16,12 +16,12 @@ const react_1 = require("react");
 const editor_1 = require("../../../utils/editor");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 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',
@@ -118,7 +118,7 @@ const classes = {
     root: `${constants_1.PREFIX}-toolbar-plugin-root`,
     blockFormat: `${constants_1.PREFIX}-block-format`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ToolbarPluginRoot'
 })(() => ({}));
@@ -128,7 +128,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 +271,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/Editor/shared/useDecorators.d.ts

@@ -7,10 +7,10 @@
  */
 import type { LexicalEditor } from 'lexical';
 import * as React from 'react';
-type ErrorBoundaryProps = {
+declare type ErrorBoundaryProps = {
     children: JSX.Element;
     onError: (error: Error) => void;
 };
-export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
 export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
 export {};

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

@@ -1,4 +1,5 @@
 import { SCEventType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
 import React from 'react';
 import { SCEventTemplateType } from '../../types/event';
 import { EventParticipantsButtonProps } from '../EventParticipantsButton';
@@ -50,6 +51,10 @@ export interface EventProps extends WidgetProps {
      * @default {}
      */
     EventSkeletonComponentProps?: EventSkeletonProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Event/Event.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -19,6 +18,7 @@ const User_1 = tslib_1.__importDefault(require("../User"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const events_1 = require("../../utils/events");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     detailRoot: `${constants_1.PREFIX}-detail-root`,
@@ -46,24 +46,25 @@ const classes = {
     snippetInProgress: `${constants_1.PREFIX}-snippet-in-progress`,
     snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
     snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
-    snippetActions: `${constants_1.PREFIX}-snippet-actions`
+    snippetActions: `${constants_1.PREFIX}-snippet-actions`,
+    finishedChip: `${constants_1.PREFIX}-finished-chip`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
-const DetailRoot = (0, styles_1.styled)(material_1.Box, {
+const DetailRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DetailRoot',
     overridesResolver: (_props, styles) => styles.detailRoot
 })(() => ({}));
-const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
+const PreviewRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot',
     overridesResolver: (_props, styles) => styles.previewRoot
 })(() => ({}));
-const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
+const SnippetRoot = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SnippetRoot',
     overridesResolver: (_props, styles) => styles.snippetRoot
@@ -101,17 +102,21 @@ const SnippetRoot = (0, styles_1.styled)(BaseItem_1.default, {
  * @param inProps
  */
 function Event(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
+    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = event_1.SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps", "cacheStrategy"]);
     // STATE
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)(Object.assign({ id: eventId, event, autoSubscribe: false }, (cacheStrategy && { cacheStrategy })));
     const inProgress = (0, react_1.useMemo)(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
+    const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
     /**
@@ -128,14 +133,14 @@ function Event(inProps) {
         contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === event_1.SCEventTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'
-                        })}` })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` }))] })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
+                        })}` })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scEvent.name }))] })), secondary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2", className: classes.snippetSecondary }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.privacy.${scEvent.privacy}`, defaultMessage: `ui.eventForm.privacy.${scEvent.privacy}` }), " -", ' ', (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.live.label`, defaultMessage: `ui.eventForm.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.address.online.label`, defaultMessage: `ui.eventForm.address.online.label` })), isPaymentsEnabled && ((_a = scEvent.paywalls) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "pagamenti" })] }))] })), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.snippetActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) }))) }));
     }
     /**
      * Renders root object