@selfcommunity/react-ui 0.7.0-alpha.314 → 0.7.0-alpha.316

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

@@ -19,7 +19,6 @@ const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
 const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
 const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
 const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
 const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
 const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
@@ -110,7 +109,6 @@ const Editor = (inProps, ref) => {
     const apiRef = (0, react_1.useRef)();
     // MEMO
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
     // HANDLERS
     const handleChange = (value) => {
         onChange && onChange(value);

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

@@ -3,33 +3,30 @@ import { DecoratorNode, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, Ser
 export interface ImagePayload {
     altText: string;
     className?: string;
-    height?: 'inherit' | number;
+    height: number;
     imageRef?: LegacyRef<HTMLImageElement>;
-    maxWidth: number | string;
     src: string;
-    width?: 'inherit' | number;
+    width: number;
 }
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
 export declare type SerializedImageNode = Spread<{
     altText: string;
-    height?: number;
-    maxWidth: number | string;
+    height: number;
     src: string;
-    width?: number;
+    width: number;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
-    __maxWidth: number | string;
+    __width: number;
+    __height: number;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
-    constructor(src: string, altText: string, maxWidth: number | string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, width: number, height: number, key?: NodeKey);
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
@@ -44,6 +41,6 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportJSON(): SerializedImageNode;
 }
-export declare function $createImageNode({ src, altText, maxWidth, width, height }: ImagePayload): ImageNode;
+export declare function $createImageNode({ src, altText, width, height }: ImagePayload): ImageNode;
 export declare function $isImageNode(node?: LexicalNode): boolean;
 export {};

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

@@ -7,248 +7,18 @@ 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 styles_1 = require("@mui/material/styles");
-const react_intl_1 = require("react-intl");
-const material_1 = require("@mui/material");
-const PREFIX = 'SCEditorImagePluginImageEdit';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 2000,
-    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 [openResizePanel, setOpenResizePanel] = (0, react_1.useState)(false);
-    // HANDLERS
-    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);
-    };
-    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, 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("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
-                handlePointerDown(event, Direction.north | Direction.east);
-            } }),
-        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);
-            } })));
+/**
+ * Limit the width of an image
+ * Used to compute the padding-bottom of the div that wrap the img
+ */
+const IMAGE_WIDTH_THRESHOLD = 500;
+/**
+ * Calc aspect-ratio of image
+ * @param width
+ * @param height
+ */
+function getAspectRatio(width, height) {
+    return width / height;
 }
 const imageCache = new Set();
 function useSuspenseImage(src) {
@@ -263,21 +33,21 @@ function useSuspenseImage(src) {
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth }) {
+function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    return (react_1.default.createElement("img", { className: className, src: src, alt: altText, ref: imageRef, style: {
-            height: `${height}${height === 'inherit' ? '' : 'px'}`,
-            maxWidth,
-            width: `${width}${width === 'inherit' ? '' : 'px'}`
-        } }));
+    const aspectRatio = getAspectRatio(IMAGE_WIDTH_THRESHOLD, height);
+    return (react_1.default.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
+        react_1.default.createElement("img", { src: src, alt: altText, ref: imageRef, style: {
+                position: 'absolute',
+                height: `100%`,
+                width: `100%`
+            } })));
 }
-function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable }) {
+function ImageComponent({ src, altText, nodeKey, width, height }) {
     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 activeEditorRef = (0, react_1.useRef)(null);
     const onDelete = (0, react_1.useCallback)((payload) => {
         if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
@@ -318,19 +88,11 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
         return false;
     }, [editor, setSelected]);
     (0, react_1.useEffect)(() => {
-        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) => {
+        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 (isResizing) {
-                return true;
-            }
             if (event.target === imageRef.current) {
                 if (event.shiftKey) {
                     setSelected(!isSelected);
@@ -342,65 +104,36 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
                 return true;
             }
             return false;
-        }, 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)) {
-                node.setWidthAndHeight(nextWidth, nextHeight);
-            }
-        });
-    };
-    const onResizeStart = () => {
-        setIsResizing(true);
-    };
-    const draggable = isSelected && (0, lexical_1.$isNodeSelection)(selection) && !isResizing;
-    const isFocused = isSelected || isResizing;
+    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    const isFocused = isSelected;
     return (react_1.default.createElement(react_1.Suspense, { fallback: null },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            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 })))));
+        react_1.default.createElement(LazyImage, { className: isFocused ? `focused` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height })));
 }
 function convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
-        const { alt: altText, src, width, height } = domNode;
-        const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
+        const { alt: altText, src, dataset: { width, height } } = domNode;
+        const node = $createImageNode({ altText, height: Number(height), src, width: Number(width) });
         return { node };
     }
     return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, width, height, key) {
+    constructor(src, altText, width, height, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
-        this.__maxWidth = maxWidth;
-        this.__width = width || 'inherit';
-        this.__height = height || 'inherit';
+        this.__width = width;
+        this.__height = height;
     }
     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.__width, node.__height, node.__key);
     }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
@@ -434,24 +167,26 @@ class ImageNode extends lexical_1.DecoratorNode {
             }) }, 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;`);
+        const aspectRatio = getAspectRatio(this.__width, this.__height);
+        const element = document.createElement('div');
+        element.setAttribute('style', `position: relative;padding-bottom:${100 / aspectRatio}%`);
+        const image = document.createElement('img');
+        image.setAttribute('src', this.__src);
+        image.setAttribute('alt', this.__altText);
+        image.setAttribute('style', `position: absolute;width:100%;height:100%;`);
+        image.setAttribute('data-width', `${this.__width}`);
+        image.setAttribute('data-height', `${this.__height}`);
+        element.appendChild(image);
         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 }));
+        return react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
-        const { altText, height, width, maxWidth, src } = serializedNode;
+        const { altText, height, width, src } = serializedNode;
         const node = $createImageNode({
             altText,
             height,
-            maxWidth,
             src,
             width
         });
@@ -460,18 +195,17 @@ class ImageNode extends lexical_1.DecoratorNode {
     exportJSON() {
         return {
             altText: this.getAltText(),
-            height: this.__height === 'inherit' ? 0 : this.__height,
-            maxWidth: this.__maxWidth,
+            height: this.__height,
             src: this.getSrc(),
             type: 'image',
             version: 1,
-            width: this.__width === 'inherit' ? 0 : this.__width
+            width: this.__width
         };
     }
 }
 exports.ImageNode = ImageNode;
-function $createImageNode({ src, altText, maxWidth, width = null, height = null }) {
-    return new ImageNode(src, altText, maxWidth, width, height);
+function $createImageNode({ src, altText, width, height }) {
+    return new ImageNode(src, altText, width, height);
 }
 exports.$createImageNode = $createImageNode;
 function $isImageNode(node) {

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

@@ -94,7 +94,7 @@ function ImagePlugin() {
                 if ((0, lexical_1.$isRootNode)(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
+                const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, width: payload.width, height: payload.height });
                 selection.insertNodes([imageNode]);
             }
             return true;

package/lib/cjs/components/Feed/Feed.js

@@ -28,6 +28,7 @@ const PREFIX = 'SCFeed';
 const classes = {
     root: `${PREFIX}-root`,
     left: `${PREFIX}-left`,
+    leftItems: `${PREFIX}-left-items`,
     start: `${PREFIX}-start`,
     end: `${PREFIX}-end`,
     endMessage: `${PREFIX}-end-message`,
@@ -414,14 +415,14 @@ const Feed = (inProps, ref) => {
             react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)))) : null,
         react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 7 },
             react_1.default.createElement("div", { style: { overflow: 'visible' } },
-                react_1.default.createElement(InfiniteScroll_1.default, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: 1, endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
+                react_1.default.createElement(InfiniteScroll_1.default, { className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: react_1.default.createElement(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '80%', endMessage: react_1.default.createElement(material_1.Box, { className: classes.end },
                         react_1.default.createElement(Widget_1.default, { className: classes.endMessage },
                             react_1.default.createElement(material_1.CardContent, null, endMessage)),
                         advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR) ? (react_1.default.createElement(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FOOTER_BAR }, CustomAdvProps))) : null,
                         FooterComponent ? react_1.default.createElement(FooterComponent, Object.assign({}, FooterComponentProps)) : null), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: react_1.default.createElement(Widget_1.default, { variant: "outlined", className: classes.refresh },
                         react_1.default.createElement(material_1.CardContent, null, refreshMessage)), style: { overflow: 'visible' } },
                     renderHeaderComponent(),
-                    react_1.default.createElement(VirtualizedScroller_1.default, Object.assign({ items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, VirtualizedScrollerProps))))),
+                    react_1.default.createElement(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, VirtualizedScrollerProps))))),
         feedDataRight.length > 0 && !hideAdvs && (react_1.default.createElement(material_1.Hidden, { smDown: true },
             react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 5 },
                 react_1.default.createElement(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps),

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

@@ -16,7 +16,6 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import ApiPlugin from './plugins/ApiPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
 import OnBlurPlugin from './plugins/OnBlurPlugin';
 import OnFocusPlugin from './plugins/OnFocusPlugin';
@@ -107,7 +106,6 @@ const Editor = (inProps, ref) => {
     const apiRef = useRef();
     // MEMO
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // HANDLERS
     const handleChange = (value) => {
         onChange && onChange(value);

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

@@ -3,33 +3,30 @@ import { DecoratorNode, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, Ser
 export interface ImagePayload {
     altText: string;
     className?: string;
-    height?: 'inherit' | number;
+    height: number;
     imageRef?: LegacyRef<HTMLImageElement>;
-    maxWidth: number | string;
     src: string;
-    width?: 'inherit' | number;
+    width: number;
 }
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
 export declare type SerializedImageNode = Spread<{
     altText: string;
-    height?: number;
-    maxWidth: number | string;
+    height: number;
     src: string;
-    width?: number;
+    width: number;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
-    __maxWidth: number | string;
+    __width: number;
+    __height: number;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
-    constructor(src: string, altText: string, maxWidth: number | string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, width: number, height: number, key?: NodeKey);
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
@@ -44,6 +41,6 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportJSON(): SerializedImageNode;
 }
-export declare function $createImageNode({ src, altText, maxWidth, width, height }: ImagePayload): ImageNode;
+export declare function $createImageNode({ src, altText, width, height }: ImagePayload): ImageNode;
 export declare function $isImageNode(node?: LexicalNode): boolean;
 export {};