@selfcommunity/react-ui 0.8.0-embeds.16 → 0.8.0-live.40

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const types_1 = require("../types");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    options: `${constants_1.PREFIX}-options`,
+    actions: `${constants_1.PREFIX}-actions`
+};
+const Root = (0, styles_1.styled)(material_1.Container, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    [`& .${classes.options}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    [`& .${classes.actions}`]: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+        marginTop: theme.spacing(4)
+    }
+}));
+// Styled components
+const OptionCard = (0, styles_1.styled)(material_1.Paper, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    maxWidth: '300px',
+    padding: theme.spacing(3),
+    margin: theme.spacing(0, 3),
+    cursor: 'pointer',
+    transition: theme.transitions.create(['background-color', 'box-shadow'], {
+        duration: theme.transitions.duration.short
+    }),
+    backgroundColor: selected ? theme.palette.grey[100] : theme.palette.background.paper,
+    '&:hover': {
+        backgroundColor: theme.palette.grey[50],
+        boxShadow: theme.shadows[2]
+    },
+    border: `1px solid ${theme.palette.divider}`,
+    [`& > div`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 2,
+        maxWidth: '300px'
+    },
+    [`& ul`]: {
+        marginTop: theme.spacing(2),
+        padding: 0,
+        listStyle: 'none'
+    }
+}));
+const RadioIndicator = (0, styles_1.styled)(material_1.Radio, {
+    shouldForwardProp: (prop) => prop !== 'selected'
+})(({ theme, selected }) => ({
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
+    backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
+    transition: theme.transitions.create(['border-color', 'background-color'], {
+        duration: theme.transitions.duration.shortest
+    })
+}));
+const FeatureItem = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: theme.spacing(1.5),
+    marginBottom: theme.spacing(2),
+    '&:last-child': {
+        marginBottom: 0
+    }
+}));
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function LiveStreamSelector(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, liveSelected, onLiveSelected, onNext } = props, rest = tslib_1.__rest(props, ["className", "liveSelected", "onLiveSelected", "onNext"]);
+    // CONTEXT
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // STATE
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(liveSelected);
+    const options = [
+        {
+            title: 'Schedule a live event',
+            type: types_1.LiveStreamType.EVENT_LIVE,
+            features: [
+                'Schedule a live room or stream in your event space',
+                'Allow your members to RSVP, add to calendar, and receive event reminders',
+                'Automatically post the event recording to your space',
+                'Allow your members to host the event'
+            ],
+            icons: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" })]
+        },
+        {
+            title: 'Start a live stream',
+            type: types_1.LiveStreamType.DIRECT_LIVE,
+            features: [
+                'Best for webinars, Q&As, AMAs, and for presentations',
+                'Up to 100 people',
+                'Only co-hosts can talk to each other with audio/video',
+                'View-only participants can only chat or be promoted to the stage'
+            ],
+            icons: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" })]
+        }
+    ];
+    const handleOptionSelect = (type) => {
+        setSelectedOption(type);
+        onLiveSelected(type);
+    };
+    const handleNext = () => {
+        if (!selectedOption) {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            onNext && onNext(selectedOption);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, { className: (0, classnames_1.default)(classes.root, className), maxWidth: "lg", sx: { py: 4 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 }, children: "How do you want to go live?" }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.options, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(OptionCard, { selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            handleOptionSelect(index);
+                            e.preventDefault();
+                        }
+                    }, theme: undefined, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "h2", sx: { fontWeight: 500 }, children: option.title }), (0, jsx_runtime_1.jsx)(RadioIndicator, { selected: selectedOption === option.type, theme: undefined })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "ul", children: option.features.map((feature, featureIndex) => {
+                                const _Icon = option.icons[featureIndex];
+                                return ((0, jsx_runtime_1.jsxs)(FeatureItem, { component: "li", children: [_Icon, (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { flex: 1 }, children: feature })] }, featureIndex));
+                            }) })] }, index))) }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.actions, children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary", children: "Next" }) })] }));
+}
+exports.default = LiveStreamSelector;

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

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

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

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

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

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

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

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

package/lib/cjs/components/CreateLiveStreamDialog/types.d.ts

@@ -0,0 +1,8 @@
+export declare enum CreateLiveStreamStep {
+    SELECT_TYPE = "_select_type",
+    CREATE_LIVE = "_create_live"
+}
+export declare enum LiveStreamType {
+    EVENT_LIVE = "_event_live",
+    DIRECT_LIVE = "_direct_live"
+}

package/lib/cjs/components/CreateLiveStreamDialog/types.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveStreamType = exports.CreateLiveStreamStep = void 0;
+var CreateLiveStreamStep;
+(function (CreateLiveStreamStep) {
+    CreateLiveStreamStep["SELECT_TYPE"] = "_select_type";
+    CreateLiveStreamStep["CREATE_LIVE"] = "_create_live";
+})(CreateLiveStreamStep || (exports.CreateLiveStreamStep = CreateLiveStreamStep = {}));
+var LiveStreamType;
+(function (LiveStreamType) {
+    LiveStreamType["EVENT_LIVE"] = "_event_live";
+    LiveStreamType["DIRECT_LIVE"] = "_direct_live";
+})(LiveStreamType || (exports.LiveStreamType = LiveStreamType = {}));

package/lib/cjs/components/CustomAdv/CustomAdv.js

@@ -133,7 +133,7 @@ function CustomAdv(inProps) {
     if (!scCustomAdv) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    const adv = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.wrap }, { children: [scCustomAdv.image && ((0, jsx_runtime_1.jsx)("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: (0, classnames_1.default)(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: embedRef, className: (0, classnames_1.default)(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] })));
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title }, { children: adv }))) : (adv) })));
+    const adv = ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.wrap, children: [scCustomAdv.image && ((0, jsx_runtime_1.jsx)("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: (0, classnames_1.default)(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: embedRef, className: (0, classnames_1.default)(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] }));
+    return ((0, jsx_runtime_1.jsx)(Root, { id: id, className: (0, classnames_1.default)(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })), children: scCustomAdv.link ? ((0, jsx_runtime_1.jsx)("a", { href: scCustomAdv.link, title: scCustomAdv.title, children: adv })) : (adv) }));
 }
 exports.default = CustomAdv;

package/lib/cjs/components/EditEventButton/EditEventButton.js

@@ -55,6 +55,6 @@ function EditEventButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className), EventFormProps: { event: scEvent, onSuccess: handleSuccess } }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className), EventFormDialogComponentProps: { EventFormComponentProps: { event: scEvent, onSuccess: handleSuccess } } }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editEventButton", defaultMessage: "ui.editEventButton" }) })));
 }
 exports.default = EditEventButton;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

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

@@ -145,6 +145,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)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (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.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, { 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, { 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)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, { 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, { 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.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] }) }));
 };
 exports.default = (0, react_1.forwardRef)(Editor);

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

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

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

@@ -12,16 +12,16 @@ function convertHashtagElement(domNode) {
     };
 }
 class HashtagNode extends lexical_1.TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

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

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

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

@@ -94,7 +94,7 @@ function ImageComponent({ src, altText, nodeKey, maxWidth }) {
             unregister();
         };
     }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: null }, { children: (0, jsx_runtime_1.jsx)(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth }) })));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth }) }));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
@@ -107,18 +107,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

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

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;

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

@@ -25,16 +25,16 @@ function convertMentionElement(domNode) {
     };
 }
 class MentionNode extends lexical_1.TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;

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

@@ -25,7 +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: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: {
                     vertical: 'top',
                     horizontal: 'right'
                 }, transformOrigin: {
@@ -33,7 +33,7 @@ function Emoji({ editor, className = '' }) {
                     horizontal: 'left'
                 }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
-                } }, { children: (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }) }))] }));
+                }, children: (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }) })] }));
 }
 const classes = {
     root: `${constants_1.PREFIX}-emoji-plugin-root`

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

@@ -96,13 +96,13 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     if (!isLink || linkUrl === hideForUrl) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Root, { className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right", children: (0, jsx_runtime_1.jsx)(material_1.Paper, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
                 }, 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: () => {
+                    endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { 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)(Icon_1.default, { children: "close" }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", tabIndex: 1, onClick: handleLinkSubmission, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" }) })] }))
+                } }) }) }));
 }
 function useFloatingLinkEditorToolbar(editor) {
     const [activeEditor, setActiveEditor] = (0, react_1.useState)(editor);

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

@@ -63,7 +63,7 @@ function useHashtagLookupService(hashtagString) {
 }
 function HashtagsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ tabIndex: -1, className: (0, classnames_1.default)('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: result.name }), result.id));
+    return ((0, jsx_runtime_1.jsx)("li", { tabIndex: -1, className: (0, classnames_1.default)('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, children: result.name }, result.id));
 }
 function HashtagsTypeahead({ close, editor, resolution, className = '', containerEl = null }) {
     const divRef = (0, react_1.useRef)(null);
@@ -179,13 +179,13 @@ function HashtagsTypeahead({ close, editor, resolution, className = '', containe
     if (results === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox" }, { children: (0, jsx_runtime_1.jsx)("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => ((0, jsx_runtime_1.jsx)(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox", children: (0, jsx_runtime_1.jsx)("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => ((0, jsx_runtime_1.jsx)(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
                     applyCurrentSelected(i);
                 }, onMouseEnter: () => {
                     setHoveredIndex(i);
                 }, onMouseLeave: () => {
                     setHoveredIndex(null);
-                }, result: result }, result.id))) }) })));
+                }, result: result }, result.id))) }) }));
 }
 function checkForCapitalizedNameHashtags(text, minMatchLength) {
     const match = CapitalizedNameHashtagsRegex.exec(text);

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

@@ -20,7 +20,7 @@ const constants_1 = require("../constants");
 exports.INSERT_IMAGE_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: "image" })) })));
+    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, { color: "inherit", children: "image" }) })));
 }));
 function Image({ editor, className = '' }) {
     // CONTEXT
@@ -56,17 +56,17 @@ function Image({ editor, className = '' }) {
     if (!scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
+    return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, { destination: {
             url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
             headers: Object.assign({}, (scContext.settings.session &&
                 scContext.settings.session.authToken && {
                 Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}`
             })),
             method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-        }, chunkSize: 204800, multiple: true, accept: "image/*", fileFilter: handleFileUploadFilter }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: "eimage", onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
+        }, chunkSize: 204800, multiple: true, accept: "image/*", fileFilter: handleFileUploadFilter, children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: "eimage", 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
-                } })] })));
+                } })] }));
 }
 const classes = {
     root: `${constants_1.PREFIX}-image-plugin-root`

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

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

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

@@ -208,7 +208,7 @@ function useMentionLookupService(mentionString) {
 }
 function MentionsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
     const liRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ tabIndex: -1, className: (0, classnames_1.default)('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: result.username, src: result.avatar }), " ", result.username] }), result.id));
+    return ((0, jsx_runtime_1.jsxs)("li", { tabIndex: -1, className: (0, classnames_1.default)('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: result.username, src: result.avatar }), " ", result.username] }, result.id));
 }
 function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     const divRef = (0, react_1.useRef)(null);
@@ -302,13 +302,13 @@ function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     if (results === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className, "aria-label": "Suggested mentions", ref: divRef, role: "listbox" }, { children: (0, jsx_runtime_1.jsx)("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => ((0, jsx_runtime_1.jsx)(MentionsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "aria-label": "Suggested mentions", ref: divRef, role: "listbox", children: (0, jsx_runtime_1.jsx)("ul", { children: results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => ((0, jsx_runtime_1.jsx)(MentionsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
                     applyCurrentSelected(i);
                 }, onMouseEnter: () => {
                     setHoveredIndex(i);
                 }, onMouseLeave: () => {
                     setHoveredIndex(null);
-                }, result: result }, result.id))) }) })));
+                }, result: result }, result.id))) }) }));
 }
 function checkForCapitalizedNameMentions(text, minMatchLength) {
     const match = CapitalizedNameMentionsRegex.exec(text);
@@ -533,7 +533,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)(ClickAwayListener_1.default, { onClickAway: closeTypeahead, children: (0, jsx_runtime_1.jsx)(material_1.Portal, { 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.js

@@ -112,7 +112,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, disabled: disabled, onClick: handleOpen }, { 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.blockType", defaultMessage: "ui.editor.toolbarPlugin.blockType" }) }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: blockTypeToBlockIcon[blockType] }), (0, jsx_runtime_1.jsx)(material_1.Icon, { children: anchorEl ? 'expand_less' : 'expand_more' })] }) })) })), (0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: Object.keys(blockTypeToBlockIcon).map((block) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleSelect(block) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: blockTypeToBlockIcon[block] }) }), block))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { className: className, disabled: disabled, onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.toolbarPlugin.blockType", defaultMessage: "ui.editor.toolbarPlugin.blockType" }), children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: blockTypeToBlockIcon[blockType] }), (0, jsx_runtime_1.jsx)(material_1.Icon, { children: anchorEl ? 'expand_less' : 'expand_more' })] }) }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: Object.keys(blockTypeToBlockIcon).map((block) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: handleSelect(block), children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: blockTypeToBlockIcon[block] }) }, block))) })] }));
 }
 const classes = {
     root: `${constants_1.PREFIX}-toolbar-plugin-root`,
@@ -265,12 +265,12 @@ function ToolbarPlugin(inProps) {
             editor.dispatchCommand(link_1.TOGGLE_LINK_COMMAND, null);
         }
     }, [editor, isLink]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [blockType in blockTypeToBlockIcon && activeEditor === editor && ((0, jsx_runtime_1.jsx)(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditable, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(Root, { className: classes.root, children: [blockType in blockTypeToBlockIcon && activeEditor === editor && ((0, jsx_runtime_1.jsx)(BlockFormatIconButton, { className: classes.blockFormat, disabled: !isEditable, blockType: blockType, editor: editor })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: !isEditable, onClick: () => {
                     activeEditor.dispatchCommand(lexical_1.FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
-                } }, { 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.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: `format_align_${alignment}` }) })) })), (0, jsx_runtime_1.jsx)(material_1.ToggleButtonGroup, Object.assign({ value: formats }, { children: FORMATS.map((format) => ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: format, disabled: !isEditable, onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }), children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: `format_align_${alignment}` }) }) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButtonGroup, { value: formats, children: FORMATS.map((format) => ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, { value: format, disabled: !isEditable, onClick: () => {
                         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: () => {
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { 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, { disabled: !isEditable, onClick: clearFormatting, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { 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, { 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, { 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, { disabled: !isEditable, onClick: insertLink, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { 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/shared/useDecorators.d.ts

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

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

@@ -27,7 +27,7 @@ function useDecorators(editor, ErrorBoundary) {
         const decoratorKeys = Object.keys(decorators);
         for (let i = 0; i < decoratorKeys.length; i++) {
             const nodeKey = decoratorKeys[i];
-            const reactDecorator = ((0, jsx_runtime_1.jsx)(ErrorBoundary, Object.assign({ onError: (e) => editor._onError(e) }, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: null }, { children: decorators[nodeKey] })) })));
+            const reactDecorator = ((0, jsx_runtime_1.jsx)(ErrorBoundary, { onError: (e) => editor._onError(e), children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: decorators[nodeKey] }) }));
             const element = editor.getElementByKey(nodeKey);
             if (element !== null) {
                 decoratedPortals.push((0, react_dom_1.createPortal)(reactDecorator, element, nodeKey));