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

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

@@ -1,74 +1,62 @@
 "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 PREFIX = 'SCEditorImagePluginImageEdit';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Stack, {
+const Root = (0, styles_1.styled)(material_1.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] = (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);
-        };
-    }, []);
+    const [openResizePanel, setOpenResizePanel] = (0, react_1.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);
@@ -76,17 +64,193 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
     const handleChangeHeight = (event) => {
         setHeight(event.target.value);
     };
+    const handleResize = (event) => {
+        onResize(width, height);
+        setOpenResizePanel(false);
+    };
     // 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")
+    console.log(width);
+    return (react_1.default.createElement(Root, { className: classes.root, style: { width: imageRef.current.width, height: imageRef.current.height }, contentEditable: false, onClick: handleStopPropagation },
+        react_1.default.createElement(material_1.Paper, null, openResizePanel ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.TextField, { value: width, type: "number", onChange: handleChangeWidth, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginEdit.width", defaultMessage: "ui.editor.imagePluginEdit.width" }), InputProps: {
+                    endAdornment: react_1.default.createElement(material_1.InputAdornment, { position: "start" }, "px")
+                } }),
+            react_1.default.createElement(material_1.TextField, { value: height, type: "number", onChange: handleChangeHeight, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginEdit.height", defaultMessage: "ui.editor.imagePluginEdit.height" }), InputProps: {
+                    endAdornment: react_1.default.createElement(material_1.InputAdornment, { position: "start" }, "px")
+                } }),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", disabled: width === imageRef.current.width && height === imageRef.current.height, onClick: handleResize },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: handleOpenResizePanel },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.imagePluginEdit.resize", defaultMessage: "ui.editor.imagePluginEdit.resize" })),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: onDelete },
+                react_1.default.createElement(react_intl_1.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 = (0, react_1.useRef)(null);
+    const userSelect = (0, react_1.useRef)({
+        priority: '',
+        value: 'default'
+    });
+    const positioningRef = (0, react_1.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_1.default.createElement("div", { ref: controlWrapperRef },
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.north);
             } }),
-        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("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.north | Direction.east);
             } }),
-        react_1.default.createElement(material_1.IconButton, { onClick: onDelete, size: "small" },
-            react_1.default.createElement(material_1.Icon, null, "close"))));
-};
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.east);
+            } }),
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south | Direction.east);
+            } }),
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south);
+            } }),
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.south | Direction.west);
+            } }),
+        react_1.default.createElement("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
+                handlePointerDown(event, Direction.west);
+            } }),
+        react_1.default.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)) {
@@ -109,54 +273,112 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth
         } }));
 }
 function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable }) {
-    const ref = (0, react_1.useRef)(null);
+    const imageRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
     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) => {
+        let isMounted = true;
+        const unregister = (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            if (isMounted) {
+                setSelection(editorState.read(() => (0, lexical_1.$getSelection)()));
+            }
+        }), 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 (isResizing) {
+                return true;
+            }
+            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) => {
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.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;
+        }, 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 () => {
+            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 = (0, lexical_1.$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 && (0, lexical_1.$isNodeSelection)(selection) && !isResizing;
+    const isFocused = isSelected || isResizing;
     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("div", { draggable: draggable },
+                react_1.default.createElement(LazyImage, { className: isFocused ? `focused ${(0, lexical_1.$isNodeSelection)(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth })),
+            resizable && (0, lexical_1.$isNodeSelection)(selection) && isFocused && (react_1.default.createElement(ImageResizer, { editor: editor, imageRef: imageRef, maxWidth: typeof maxWidth === 'number' ? maxWidth : null, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd })))));
 }
 function convertImageElement(domNode) {
     const image = domNode;
@@ -210,7 +432,17 @@ 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('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_1.default.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) {
@@ -245,4 +477,3 @@ 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