@selfcommunity/react-ui 0.7.0-alpha.31 → 0.7.0-alpha.311

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

@@ -1,48 +1,58 @@
 import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, TextNode } from 'lexical';
+import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, TextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { mergeRegister } from '@lexical/utils';
-import { createPortal } from 'react-dom';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
-import { Icon, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
-const PREFIX = 'SCEditorImagePluginResizer';
+import { Box, Button, InputAdornment, Paper, TextField } from '@mui/material';
+const PREFIX = 'SCEditorImagePluginImageEdit';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(Stack, {
+const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({
-    position: 'fixed',
+    position: 'absolute',
+    top: 0,
+    left: 0,
     zIndex: 2000,
-    paddingTop: theme.spacing(),
-    backgroundColor: theme.palette.background.paper,
-    minWidth: 200,
-    paddingBottom: theme.spacing()
+    outline: `2px solid ${theme.palette.primary.main}`,
+    userSelect: 'none',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& .MuiPaper-root': {
+        padding: theme.spacing(1),
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '50%',
+        backgroundColor: theme.palette.background.paper,
+        '& > *': {
+            margin: theme.spacing(1)
+        }
+    }
 }));
 const ImageEdit = ({ onResize, onDelete, imageRef }) => {
     // STATE
     const [width, setWidth] = useState(imageRef.current.width);
     const [height, setHeight] = useState(imageRef.current.height);
-    const [positioning, setPositioning] = useState(imageRef.current.getBoundingClientRect());
-    // EFFECT
-    useEffect(() => {
-        if (width !== imageRef.current.width || height !== imageRef.current.height) {
-            onResize(width, height);
-        }
-    }, [width, height]);
-    useEffect(() => {
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
+    const [openResizePanel, setOpenResizePanel] = useState(false);
     // HANDLERS
-    const handleScroll = () => {
-        setPositioning(imageRef.current.getBoundingClientRect());
+    const handleStopPropagation = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+    };
+    const handleOpenResizePanel = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpenResizePanel(true);
+        return false;
     };
     const handleChangeWidth = (event) => {
         setWidth(event.target.value);
@@ -50,17 +60,193 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
     const handleChangeHeight = (event) => {
         setHeight(event.target.value);
     };
+    const handleResize = (event) => {
+        onResize(width, height);
+        setOpenResizePanel(false);
+    };
     // RENDER
-    return (React.createElement(Root, { className: classes.root, direction: "row", sx: { top: positioning.top, left: positioning.left, width: positioning.width }, spacing: 1 },
-        React.createElement(TextField, { value: width, size: "small", type: "number", onChange: handleChangeWidth, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginResizer.width", defaultMessage: "ui.editor.imagePluginResizer.width" }), InputProps: {
-                endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
+    console.log(width);
+    return (React.createElement(Root, { className: classes.root, style: { width: imageRef.current.width, height: imageRef.current.height }, contentEditable: false, onClick: handleStopPropagation },
+        React.createElement(Paper, null, openResizePanel ? (React.createElement(React.Fragment, null,
+            React.createElement(TextField, { value: width, type: "number", onChange: handleChangeWidth, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.width", defaultMessage: "ui.editor.imagePluginEdit.width" }), InputProps: {
+                    endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
+                } }),
+            React.createElement(TextField, { value: height, type: "number", onChange: handleChangeHeight, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.height", defaultMessage: "ui.editor.imagePluginEdit.height" }), InputProps: {
+                    endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
+                } }),
+            React.createElement(Button, { variant: "contained", color: "primary", disabled: width === imageRef.current.width && height === imageRef.current.height, onClick: handleResize },
+                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })))) : (React.createElement(React.Fragment, null,
+            React.createElement(Button, { variant: "contained", color: "primary", onClick: handleOpenResizePanel },
+                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: onDelete },
+                React.createElement(FormattedMessage, { id: "ui.editor.imagePluginEdit.delete", defaultMessage: "ui.editor.imagePluginEdit.delete" })))))));
+};
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), Number(max));
+}
+const Direction = {
+    east: 1 << 0,
+    north: 1 << 3,
+    south: 1 << 1,
+    west: 1 << 2
+};
+function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }) {
+    const controlWrapperRef = useRef(null);
+    const userSelect = useRef({
+        priority: '',
+        value: 'default'
+    });
+    const positioningRef = useRef({
+        currentHeight: 0,
+        currentWidth: 0,
+        direction: 0,
+        isResizing: false,
+        ratio: 0,
+        startHeight: 0,
+        startWidth: 0,
+        startX: 0,
+        startY: 0
+    });
+    const editorRootElement = editor.getRootElement();
+    // Find max width, accounting for editor padding.
+    const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+    const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+    const minWidth = 100;
+    const minHeight = 100;
+    const setStartCursor = (direction) => {
+        const ew = direction === Direction.east || direction === Direction.west;
+        const ns = direction === Direction.north || direction === Direction.south;
+        const nwse = (direction & Direction.north && direction & Direction.west) || (direction & Direction.south && direction & Direction.east);
+        const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', `${cursorDir}-resize`, 'important');
+            userSelect.current.value = document.body.style.getPropertyValue('-webkit-user-select');
+            userSelect.current.priority = document.body.style.getPropertyPriority('-webkit-user-select');
+            document.body.style.setProperty('-webkit-user-select', `none`, 'important');
+        }
+    };
+    const setEndCursor = () => {
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty('cursor', 'text');
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty('cursor', 'default');
+            document.body.style.setProperty('-webkit-user-select', userSelect.current.value, userSelect.current.priority);
+        }
+    };
+    const handlePointerDown = (event, direction) => {
+        if (!editor.isEditable()) {
+            return;
+        }
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null) {
+            const { width, height } = image.getBoundingClientRect();
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX;
+            positioning.startY = event.clientY;
+            positioning.isResizing = true;
+            positioning.direction = direction;
+            setStartCursor(direction);
+            onResizeStart();
+            controlWrapper.classList.add('image-control-wrapper--resizing');
+            image.style.height = `${height}px`;
+            image.style.width = `${width}px`;
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+        }
+    };
+    const handlePointerMove = (event) => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+        const isVertical = positioning.direction & (Direction.south | Direction.north);
+        if (image !== null && positioning.isResizing) {
+            // Corner cursor
+            if (isHorizontal && isVertical) {
+                let diff = Math.floor(positioning.startX - event.clientX);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                const height = width / positioning.ratio;
+                image.style.width = `${width}px`;
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+                positioning.currentWidth = width;
+            }
+            else if (isVertical) {
+                let diff = Math.floor(positioning.startY - event.clientY);
+                diff = positioning.direction & Direction.south ? -diff : diff;
+                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+            }
+            else {
+                let diff = Math.floor(positioning.startX - event.clientX);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                image.style.width = `${width}px`;
+                positioning.currentWidth = width;
+            }
+        }
+    };
+    const handlePointerUp = () => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null && positioning.isResizing) {
+            const width = positioning.currentWidth;
+            const height = positioning.currentHeight;
+            positioning.startWidth = 0;
+            positioning.startHeight = 0;
+            positioning.ratio = 0;
+            positioning.startX = 0;
+            positioning.startY = 0;
+            positioning.currentWidth = 0;
+            positioning.currentHeight = 0;
+            positioning.isResizing = false;
+            controlWrapper.classList.remove('image-control-wrapper--resizing');
+            setEndCursor();
+            console.log(width);
+            console.log(height);
+            onResizeEnd(width, height);
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+        }
+    };
+    return (React.createElement("div", { ref: controlWrapperRef },
+        React.createElement("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.north);
             } }),
-        React.createElement(TextField, { value: height, size: "small", type: "number", onChange: handleChangeHeight, label: React.createElement(FormattedMessage, { id: "ui.editor.imagePluginResizer.height", defaultMessage: "ui.editor.imagePluginResizer.height" }), InputProps: {
-                endAdornment: React.createElement(InputAdornment, { position: "start" }, "px")
+        React.createElement("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.north | Direction.east);
             } }),
-        React.createElement(IconButton, { onClick: onDelete, size: "small" },
-            React.createElement(Icon, null, "close"))));
-};
+        React.createElement("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.east);
+            } }),
+        React.createElement("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south | Direction.east);
+            } }),
+        React.createElement("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south);
+            } }),
+        React.createElement("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south | Direction.west);
+            } }),
+        React.createElement("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.west);
+            } }),
+        React.createElement("div", { className: "image-resizer image-resizer-nw", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.north | Direction.west);
+            } })));
+}
 const imageCache = new Set();
 function useSuspenseImage(src) {
     if (!imageCache.has(src)) {
@@ -83,54 +269,112 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
         } }));
 }
 function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable }) {
-    const ref = useRef(null);
+    const imageRef = useRef(null);
+    const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = useState(false);
     const [editor] = useLexicalComposerContext();
     const [selection, setSelection] = useState(null);
-    const onDelete = useCallback(() => {
-        if (isSelected) {
+    const activeEditorRef = useRef(null);
+    const onDelete = useCallback((payload) => {
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.remove();
+            }
+            setSelected(false);
+        }
+        return false;
+    }, [isSelected, nodeKey, setSelected]);
+    const onEnter = useCallback((event) => {
+        const latestSelection = $getSelection();
+        const buttonElem = buttonRef.current;
+        if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+            if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [isSelected]);
+    const onEscape = useCallback((event) => {
+        if (buttonRef.current === event.target) {
+            $setSelection(null);
             editor.update(() => {
-                const node = $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]);
     useEffect(() => {
-        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-            setSelection(editorState.read(() => $getSelection()));
-        }), editor.registerCommand(CLICK_COMMAND, (payload) => {
+        let isMounted = true;
+        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            if (isMounted) {
+                setSelection(editorState.read(() => $getSelection()));
+            }
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
             const event = payload;
-            if (event.target === ref.current) {
-                if (!event.shiftKey) {
+            if (isResizing) {
+                return true;
+            }
+            if (event.target === imageRef.current) {
+                if (event.shiftKey) {
+                    setSelected(!isSelected);
+                }
+                else {
                     clearSelection();
+                    setSelected(true);
                 }
-                setSelected(!isSelected);
                 return true;
             }
             return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
-    const onResize = (nextWidth, nextHeight) => {
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+            if (event.target === imageRef.current) {
+                // TODO This is just a temporary workaround for FF to behave like other browsers.
+                // Ideally, this handles drag & drop too (and all browsers).
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
+        return () => {
+            isMounted = false;
+            unregister();
+        };
+    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    const onResizeEnd = (nextWidth, nextHeight) => {
+        // Delay hiding the resize bars for click case
+        setTimeout(() => {
+            setIsResizing(false);
+        }, 200);
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
             if ($isImageNode(node)) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
                 node.setWidthAndHeight(nextWidth, nextHeight);
             }
         });
     };
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+    const isFocused = isSelected || isResizing;
     return (React.createElement(Suspense, { fallback: null },
         React.createElement(React.Fragment, null,
-            React.createElement(LazyImage, { className: isSelected ? 'focused' : null, src: src, altText: altText, imageRef: ref, width: width, height: height, maxWidth: maxWidth }),
-            resizable &&
-                $isNodeSelection(selection) &&
-                isSelected &&
-                createPortal(React.createElement(ImageEdit, { imageRef: ref, onResize: onResize, onDelete: onDelete }), document.body))));
+            React.createElement("div", { draggable: draggable },
+                React.createElement(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth })),
+            resizable && $isNodeSelection(selection) && isFocused && (React.createElement(ImageResizer, { editor: editor, imageRef: imageRef, maxWidth: typeof maxWidth === 'number' ? maxWidth : null, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd })))));
 }
 function convertImageElement(domNode) {
     const image = domNode;
@@ -184,7 +428,17 @@ export class ImageNode extends DecoratorNode {
                 priority: 0
             }) }, dom);
     }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src);
+        element.setAttribute('alt', this.__altText);
+        element.setAttribute('width', `${this.__width}`);
+        element.setAttribute('height', `${this.__height}`);
+        element.setAttribute('style', `max-width: ${this.__maxWidth}px;`);
+        return { element };
+    }
     decorate() {
+        console.log(this.__maxWidth);
         return (React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), resizable: true }));
     }
     static importJSON(serializedNode) {
@@ -216,4 +470,3 @@ export function $createImageNode({ src, altText, maxWidth, width = null, height
 export function $isImageNode(node) {
     return node.getType() === 'image';
 }
-//# sourceMappingURL=ImageNode.js.map

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

@@ -59,6 +59,13 @@ export class MentionNode extends 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;
     }
@@ -79,4 +86,3 @@ export function createMentionNode(user) {
 export function isMentionNode(node) {
     return node.getType() === 'mention';
 }
-//# sourceMappingURL=MentionNode.js.map

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

@@ -1,10 +1,21 @@
-import { CodeNode } from '@lexical/code';
-import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode, 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';
-const nodes = [HeadingNode, ListNode, ListItemNode, QuoteNode, CodeNode, HashtagNode, AutoLinkNode, LinkNode, ImageNode, MentionNode];
+import { TextNode } from 'lexical';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+const nodes = [
+    HorizontalRuleNode,
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    TextNode,
+    // HashtagNode,
+    AutoLinkNode,
+    LinkNode,
+    ImageNode,
+    MentionNode
+];
 export default nodes;
-//# sourceMappingURL=index.js.map

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

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

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

@@ -33,4 +33,3 @@ const MATCHERS = [
 export default function AutoLinkPlugin() {
     return React.createElement(LexicalAutoLinkPlugin, { matchers: MATCHERS });
 }
-//# sourceMappingURL=AutoLinkPlugin.js.map

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

@@ -5,6 +5,9 @@ import { $generateNodesFromDOM } from '@lexical/html';
 function DefaultHtmlValuePlugin({ defaultValue }) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
+        if (!defaultValue) {
+            return;
+        }
         editor.update(() => {
             // See:
             // https://github.com/facebook/lexical/issues/1834
@@ -20,15 +23,15 @@ function DefaultHtmlValuePlugin({ defaultValue }) {
             if (nodes.length <= 1) {
                 const paragraphNode = $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;
 }
 export default DefaultHtmlValuePlugin;
-//# sourceMappingURL=DefaultHtmlValuePlugin.js.map

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

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

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

@@ -1,32 +1,29 @@
 import React, { useState } from 'react';
 import { CONTROLLED_TEXT_INSERTION_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Fade, Icon, IconButton, Popover, useTheme, useMediaQuery } from '@mui/material';
+import { Fade, Icon, IconButton, Popover, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import BaseDrawer from '../../../shared/BaseDrawer';
-// import deps only if csr
-let Picker;
-typeof window !== 'undefined' &&
-    import('emoji-picker-react').then((_module) => {
-        Picker = _module.default;
-    });
+import EmojiPicker from '../../../shared/EmojiPicker';
 function Emoji({ editor, className = '' }) {
     // STATE
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const [emojiAnchorEl, setEmojiAnchorEl] = useState(false);
     // HANDLERS
-    const handleClick = (event) => {
-        setEmojiAnchorEl(emojiAnchorEl ? null : event.currentTarget);
+    const handleOpen = (event) => {
+        setEmojiAnchorEl(event.currentTarget);
     };
-    const handleEmojiClick = (event, emoji) => {
+    const handleEmojiClick = (emojiData, event) => {
         editor.focus();
-        editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, emoji.emoji);
+        editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
     };
+    if (isMobile) {
+        return null;
+    }
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { className: className, onClick: handleClick, color: "inherit" },
+        React.createElement(IconButton, { className: className, onClick: handleOpen },
             React.createElement(Icon, null, "sentiment_satisfied_alt")),
-        isMobile ? (React.createElement(BaseDrawer, { open: Boolean(emojiAnchorEl), onClose: () => setEmojiAnchorEl(null), width: '100%' }, Picker && React.createElement(Picker, { onEmojiClick: handleEmojiClick }))) : (React.createElement(Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
+        React.createElement(Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
             }, transformOrigin: {
@@ -34,7 +31,8 @@ function Emoji({ editor, className = '' }) {
                 horizontal: 'left'
             }, sx: (theme) => {
                 return { zIndex: theme.zIndex.tooltip };
-            } }, Picker && React.createElement(Picker, { onEmojiClick: handleEmojiClick })))));
+            } },
+            React.createElement(EmojiPicker, { onEmojiClick: handleEmojiClick }))));
 }
 const PREFIX = 'SCEditorEmojiPlugin';
 const classes = {
@@ -49,4 +47,3 @@ export default function EmojiPlugin() {
     const [editor] = useLexicalComposerContext();
     return React.createElement(Root, { editor: editor, className: classes.root });
 }
-//# sourceMappingURL=EmojiPlugin.js.map

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

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