@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

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

@@ -1,92 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$isImageNode = exports.$createImageNode = exports.ImageNode = void 0;
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
 const utils_1 = require("@lexical/utils");
-const react_dom_1 = require("react-dom");
-const styles_1 = require("@mui/material/styles");
-const react_intl_1 = require("react-intl");
-const material_1 = require("@mui/material");
-const PREFIX = 'SCEditorImagePluginResizer';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = (0, styles_1.styled)(material_1.Stack, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'fixed',
-    zIndex: 2000,
-    paddingTop: theme.spacing(),
-    backgroundColor: theme.palette.background.paper,
-    minWidth: 200,
-    paddingBottom: theme.spacing()
-}));
-const ImageEdit = ({ onResize, onDelete, imageRef }) => {
-    // STATE
-    const [width, setWidth] = (0, react_1.useState)(imageRef.current.width);
-    const [height, setHeight] = (0, react_1.useState)(imageRef.current.height);
-    const [positioning, setPositioning] = (0, react_1.useState)(imageRef.current.getBoundingClientRect());
-    // EFFECT
-    (0, react_1.useEffect)(() => {
-        if (width !== imageRef.current.width || height !== imageRef.current.height) {
-            onResize(width, height);
-        }
-    }, [width, height]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-    // HANDLERS
-    const handleScroll = () => {
-        setPositioning(imageRef.current.getBoundingClientRect());
-    };
-    const handleChangeWidth = (event) => {
-        setWidth(event.target.value);
-    };
-    const handleChangeHeight = (event) => {
-        setHeight(event.target.value);
-    };
-    // RENDER
-    return (react_1.default.createElement(Root, { className: classes.root, direction: "row", sx: { top: positioning.top, left: positioning.left, width: positioning.width }, spacing: 1 },
-        react_1.default.createElement(material_1.TextField, { value: width, size: "small", type: "number", onChange: handleChangeWidth, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginResizer.width", defaultMessage: "ui.editor.imagePluginResizer.width" }), InputProps: {
-                endAdornment: react_1.default.createElement(material_1.InputAdornment, { position: "start" }, "px")
-            } }),
-        react_1.default.createElement(material_1.TextField, { value: height, size: "small", type: "number", onChange: handleChangeHeight, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginResizer.height", defaultMessage: "ui.editor.imagePluginResizer.height" }), InputProps: {
-                endAdornment: react_1.default.createElement(material_1.InputAdornment, { position: "start" }, "px")
-            } }),
-        react_1.default.createElement(material_1.IconButton, { onClick: onDelete, size: "small" },
-            react_1.default.createElement(material_1.Icon, null, "close"))));
-};
 const imageCache = new Set();
 function useSuspenseImage(src) {
     if (!imageCache.has(src)) {
@@ -108,76 +28,95 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
             width: `${width}${width === 'inherit' ? '' : 'px'}`
         } }));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable }) {
-    const ref = (0, react_1.useRef)(null);
+function ImageComponent({ src, altText, nodeKey, maxWidth }) {
+    const imageRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
-    const [selection, setSelection] = (0, react_1.useState)(null);
-    const onDelete = (0, react_1.useCallback)(() => {
-        if (isSelected) {
+    const activeEditorRef = (0, react_1.useRef)(null);
+    const onDelete = (0, react_1.useCallback)((payload) => {
+        if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
+            const event = payload;
+            event.preventDefault();
+            const node = (0, lexical_1.$getNodeByKey)(nodeKey);
+            if ($isImageNode(node)) {
+                node.remove();
+            }
+            setSelected(false);
+        }
+        return false;
+    }, [isSelected, nodeKey, setSelected]);
+    const onEnter = (0, react_1.useCallback)((event) => {
+        const latestSelection = (0, lexical_1.$getSelection)();
+        const buttonElem = buttonRef.current;
+        if (isSelected && (0, lexical_1.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
+            if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [isSelected]);
+    const onEscape = (0, react_1.useCallback)((event) => {
+        if (buttonRef.current === event.target) {
+            (0, lexical_1.$setSelection)(null);
             editor.update(() => {
-                const node = (0, lexical_1.$getNodeByKey)(nodeKey);
-                if ($isImageNode(node)) {
-                    node.remove();
+                setSelected(true);
+                const parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
                 }
-                setSelected(false);
             });
+            return true;
         }
         return false;
-    }, [editor, isSelected, nodeKey, setSelected]);
+    }, [editor, setSelected]);
     (0, react_1.useEffect)(() => {
-        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
-            setSelection(editorState.read(() => (0, lexical_1.$getSelection)()));
-        }), editor.registerCommand(lexical_1.CLICK_COMMAND, (payload) => {
+        const unregister = (0, utils_1.mergeRegister)(editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CLICK_COMMAND, (payload) => {
             const event = payload;
-            if (event.target === ref.current) {
-                if (!event.shiftKey) {
+            if (event.target === imageRef.current) {
+                if (event.shiftKey) {
+                    setSelected(!isSelected);
+                }
+                else {
                     clearSelection();
+                    setSelected(true);
                 }
-                setSelected(!isSelected);
                 return true;
             }
             return false;
-        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
-    const onResize = (nextWidth, nextHeight) => {
-        editor.update(() => {
-            const node = (0, lexical_1.$getNodeByKey)(nodeKey);
-            if ($isImageNode(node)) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
-                node.setWidthAndHeight(nextWidth, nextHeight);
-            }
-        });
-    };
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, onEnter, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, onEscape, lexical_1.COMMAND_PRIORITY_LOW));
+        return () => {
+            unregister();
+        };
+    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
     return (react_1.default.createElement(react_1.Suspense, { fallback: null },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(LazyImage, { className: isSelected ? 'focused' : null, src: src, altText: altText, imageRef: ref, width: width, height: height, maxWidth: maxWidth }),
-            resizable &&
-                (0, lexical_1.$isNodeSelection)(selection) &&
-                isSelected &&
-                (0, react_dom_1.createPortal)(react_1.default.createElement(ImageEdit, { imageRef: ref, onResize: onResize, onDelete: onDelete }), document.body))));
+        react_1.default.createElement(LazyImage, { className: isSelected ? `selected` : null, src: src, altText: altText, imageRef: imageRef, maxWidth: maxWidth })));
 }
 function convertImageElement(domNode) {
-    const image = domNode;
-    return {
-        node: $createImageNode({ src: image.getAttribute('src'), altText: image.getAttribute('alt'), maxWidth: '100%' })
-    };
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src } = domNode;
+        const node = $createImageNode({ altText, src, maxWidth: '100%' });
+        return { node };
+    }
+    return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, maxWidth, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
         this.__maxWidth = maxWidth;
-        this.__width = width || 'inherit';
-        this.__height = height || 'inherit';
     }
     static getType() {
         return 'image';
     }
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -190,13 +129,13 @@ class ImageNode extends lexical_1.DecoratorNode {
     }
     // View
     createDOM(config) {
-        const span = document.createElement('span');
+        const div = document.createElement('div');
         const theme = config.theme;
         const className = theme.image;
         if (className !== undefined) {
-            span.className = className;
+            div.className = className;
         }
-        return span;
+        return div;
     }
     updateDOM() {
         return false;
@@ -210,39 +149,41 @@ class ImageNode extends lexical_1.DecoratorNode {
                 priority: 0
             }) }, dom);
     }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src);
+        element.setAttribute('alt', this.__altText);
+        element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
+        return { element };
+    }
     decorate() {
-        return (react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), resizable: true }));
+        return react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, maxWidth: this.__maxWidth, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, maxWidth, src } = serializedNode;
         const node = $createImageNode({
             altText,
-            height,
-            maxWidth,
             src,
-            width
+            maxWidth
         });
         return node;
     }
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
             maxWidth: this.__maxWidth,
             src: this.getSrc(),
             type: 'image',
-            version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            version: 1
         };
     }
 }
 exports.ImageNode = ImageNode;
-function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+function $createImageNode({ src, altText, maxWidth }) {
+    return new ImageNode(src, altText, maxWidth);
 }
 exports.$createImageNode = $createImageNode;
 function $isImageNode(node) {
     return node.getType() === 'image';
 }
 exports.$isImageNode = $isImageNode;
-//# sourceMappingURL=ImageNode.js.map

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

@@ -1,4 +1,4 @@
-import { EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
+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<{
@@ -14,10 +14,10 @@ export declare class MentionNode extends TextNode {
     createDOM(config: any): HTMLElement;
     updateDOM(prevNode: TextNode, dom: HTMLElement, config: EditorConfig): boolean;
     static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
     isTextEntity(): true;
     static importJSON(serializedNode: SerializedMentionNode): MentionNode;
     exportJSON(): SerializedMentionNode;
 }
 export declare function createMentionNode(user: SCUserType): MentionNode;
 export declare function isMentionNode(node?: LexicalNode): boolean;
-//# sourceMappingURL=MentionNode.d.ts.map

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

@@ -62,6 +62,13 @@ class MentionNode extends lexical_1.TextNode {
                 priority: 0
             }) }, dom);
     }
+    exportDOM() {
+        const element = document.createElement('mention');
+        element.setAttribute('id', `${this.__user.id}`);
+        element.setAttribute('ext-id', `${this.__user.ext_id}`);
+        element.textContent = `@${this.__user.username}`;
+        return { element };
+    }
     isTextEntity() {
         return true;
     }
@@ -85,4 +92,3 @@ function isMentionNode(node) {
     return node.getType() === 'mention';
 }
 exports.isMentionNode = isMentionNode;
-//# sourceMappingURL=MentionNode.js.map

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

@@ -1,10 +1,9 @@
-import { CodeNode } from '@lexical/code';
-import { HashtagNode } from '@lexical/hashtag';
 import { LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { ImageNode } from './ImageNode';
 import { MentionNode } from './MentionNode';
-declare const nodes: (typeof ImageNode | typeof MentionNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof CodeNode | typeof HashtagNode | typeof LinkNode)[];
+import { TextNode } from 'lexical';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+declare const nodes: (typeof ImageNode | typeof TextNode | typeof MentionNode | typeof HorizontalRuleNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
 export default nodes;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,12 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const code_1 = require("@lexical/code");
-const hashtag_1 = require("@lexical/hashtag");
 const link_1 = require("@lexical/link");
 const list_1 = require("@lexical/list");
 const rich_text_1 = require("@lexical/rich-text");
 const ImageNode_1 = require("./ImageNode");
 const MentionNode_1 = require("./MentionNode");
-const nodes = [rich_text_1.HeadingNode, list_1.ListNode, list_1.ListItemNode, rich_text_1.QuoteNode, code_1.CodeNode, hashtag_1.HashtagNode, link_1.AutoLinkNode, link_1.LinkNode, ImageNode_1.ImageNode, MentionNode_1.MentionNode];
+const lexical_1 = require("lexical");
+const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const nodes = [
+    LexicalHorizontalRuleNode_1.HorizontalRuleNode,
+    rich_text_1.HeadingNode,
+    list_1.ListNode,
+    list_1.ListItemNode,
+    rich_text_1.QuoteNode,
+    lexical_1.TextNode,
+    // HashtagNode,
+    link_1.AutoLinkNode,
+    link_1.LinkNode,
+    ImageNode_1.ImageNode,
+    MentionNode_1.MentionNode
+];
 exports.default = nodes;
-//# sourceMappingURL=index.js.map

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

@@ -4,4 +4,3 @@ export declare type ApiRef = {
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;
 export default _default;
-//# sourceMappingURL=ApiPlugin.d.ts.map

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

@@ -14,4 +14,3 @@ const ApiPlugin = (props, ref) => {
     return null;
 };
 exports.default = (0, react_1.forwardRef)(ApiPlugin);
-//# sourceMappingURL=ApiPlugin.js.map

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

@@ -7,4 +7,3 @@
  * @flow strict
  */
 export default function AutoLinkPlugin(): JSX.Element;
-//# sourceMappingURL=AutoLinkPlugin.d.ts.map

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

@@ -7,31 +7,9 @@
  *
  * @flow strict
  */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
 const LexicalAutoLinkPlugin_1 = require("@lexical/react/LexicalAutoLinkPlugin");
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
@@ -59,4 +37,3 @@ function AutoLinkPlugin() {
     return React.createElement(LexicalAutoLinkPlugin_1.AutoLinkPlugin, { matchers: MATCHERS });
 }
 exports.default = AutoLinkPlugin;
-//# sourceMappingURL=AutoLinkPlugin.js.map

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

@@ -2,4 +2,3 @@ declare function DefaultHtmlValuePlugin({ defaultValue }: {
     defaultValue: any;
 }): any;
 export default DefaultHtmlValuePlugin;
-//# sourceMappingURL=DefaultHtmlValuePlugin.d.ts.map

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

@@ -7,6 +7,9 @@ const html_1 = require("@lexical/html");
 function DefaultHtmlValuePlugin({ defaultValue }) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     (0, react_1.useEffect)(() => {
+        if (!defaultValue) {
+            return;
+        }
         editor.update(() => {
             // See:
             // https://github.com/facebook/lexical/issues/1834
@@ -22,15 +25,15 @@ function DefaultHtmlValuePlugin({ defaultValue }) {
             if (nodes.length <= 1) {
                 const paragraphNode = (0, lexical_1.$createParagraphNode)();
                 nodes.forEach((node) => paragraphNode.append(node));
-                root.getFirstChild().replace(paragraphNode);
+                root.getFirstChild().replace(paragraphNode).selectEnd();
             }
             else {
                 root.getFirstChild().remove();
                 nodes.forEach((node) => root.append(node));
+                root.selectEnd();
             }
         });
     }, []);
     return null;
 }
 exports.default = DefaultHtmlValuePlugin;
-//# sourceMappingURL=DefaultHtmlValuePlugin.js.map

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

@@ -1,2 +1 @@
 export default function EmojiPlugin(): JSX.Element;
-//# sourceMappingURL=EmojiPlugin.d.ts.map

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

@@ -1,60 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const BaseDrawer_1 = __importDefault(require("../../../shared/BaseDrawer"));
-// import deps only if csr
-let Picker;
-typeof window !== 'undefined' &&
-    Promise.resolve().then(() => __importStar(require('emoji-picker-react'))).then((_module) => {
-        Picker = _module.default;
-    });
+const EmojiPicker_1 = tslib_1.__importDefault(require("../../../shared/EmojiPicker"));
+const constants_1 = require("../constants");
 function Emoji({ editor, className = '' }) {
     // STATE
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const [emojiAnchorEl, setEmojiAnchorEl] = (0, react_1.useState)(false);
     // HANDLERS
-    const handleClick = (event) => {
-        setEmojiAnchorEl(emojiAnchorEl ? null : event.currentTarget);
+    const handleOpen = (event) => {
+        setEmojiAnchorEl(event.currentTarget);
     };
     const handleEmojiClick = (emojiData, event) => {
         editor.focus();
         editor.dispatchCommand(lexical_1.CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
     };
+    if (isMobile) {
+        return null;
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { className: className, onClick: handleClick, color: "inherit" },
+        react_1.default.createElement(material_1.IconButton, { className: className, onClick: handleOpen },
             react_1.default.createElement(material_1.Icon, null, "sentiment_satisfied_alt")),
-        isMobile ? (react_1.default.createElement(BaseDrawer_1.default, { open: Boolean(emojiAnchorEl), onClose: () => setEmojiAnchorEl(null), width: '100%' }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick }))) : (react_1.default.createElement(material_1.Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: {
+        react_1.default.createElement(material_1.Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -62,20 +35,18 @@ function Emoji({ editor, className = '' }) {
                 horizontal: 'left'
             }, sx: (theme) => {
                 return { zIndex: theme.zIndex.tooltip };
-            } }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick })))));
+            } },
+            react_1.default.createElement(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }))));
 }
-const PREFIX = 'SCEditorEmojiPlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-emoji-plugin-root`
 };
 const Root = (0, styles_1.styled)(Emoji, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'EmojiPluginRoot'
+})(() => ({}));
 function EmojiPlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     return react_1.default.createElement(Root, { editor: editor, className: classes.root });
 }
 exports.default = EmojiPlugin;
-//# sourceMappingURL=EmojiPlugin.js.map

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

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element | null;
+export default _default;