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

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

@@ -69,7 +69,6 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
         setOpenResizePanel(false);
     };
     // RENDER
-    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: {
@@ -381,10 +380,12 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
             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;
-    return {
-        node: $createImageNode({ src: image.getAttribute('src'), altText: image.getAttribute('alt'), maxWidth: '100%' })
-    };
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src, width, height } = domNode;
+        const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
+        return { node };
+    }
+    return null;
 }
 class ImageNode extends lexical_1.DecoratorNode {
     constructor(src, altText, maxWidth, width, height, key) {

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

@@ -32,12 +32,17 @@ function Image({ editor, className = '' }) {
         return file.type.startsWith('image/');
     };
     const handleUploadSuccess = (media) => {
-        const data = {
-            altText: media.title,
-            src: media.image,
+        const image = media.image_thumbnail ? media.image_thumbnail : {
+            url: media.image,
             width: media.image_width,
             height: media.image_height
         };
+        const data = {
+            altText: media.title,
+            src: image.url,
+            width: image.width,
+            height: image.height
+        };
         editor.focus();
         editor.dispatchCommand(exports.INSERT_IMAGE_COMMAND, data);
         editor.dispatchCommand(lexical_1.INSERT_PARAGRAPH_COMMAND, undefined);
@@ -89,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%' });
+                const imageNode = (0, ImageNode_1.$createImageNode)({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
                 selection.insertNodes([imageNode]);
             }
             return true;

package/lib/cjs/shared/ScrollContainer/index.js

@@ -4,13 +4,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const react_custom_scrollbars_1 = require("react-custom-scrollbars");
+const react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2");
 const ScrollContainer_1 = require("../../constants/ScrollContainer");
 const PREFIX = 'SCScrollContainer';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(react_custom_scrollbars_1.Scrollbars, {
+const Root = (0, styles_1.styled)(react_custom_scrollbars_2_1.Scrollbars, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root]

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

@@ -65,7 +65,6 @@ const ImageEdit = ({ onResize, onDelete, imageRef }) => {
         setOpenResizePanel(false);
     };
     // RENDER
-    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: {
@@ -377,10 +376,12 @@ function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resiza
             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;
-    return {
-        node: $createImageNode({ src: image.getAttribute('src'), altText: image.getAttribute('alt'), maxWidth: '100%' })
-    };
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src, width, height } = domNode;
+        const node = $createImageNode({ altText, height, src, width, maxWidth: '100%' });
+        return { node };
+    }
+    return null;
 }
 export class ImageNode extends DecoratorNode {
     constructor(src, altText, maxWidth, width, height, key) {

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

@@ -29,12 +29,17 @@ function Image({ editor, className = '' }) {
         return file.type.startsWith('image/');
     };
     const handleUploadSuccess = (media) => {
-        const data = {
-            altText: media.title,
-            src: media.image,
+        const image = media.image_thumbnail ? media.image_thumbnail : {
+            url: media.image,
             width: media.image_width,
             height: media.image_height
         };
+        const data = {
+            altText: media.title,
+            src: image.url,
+            width: image.width,
+            height: image.height
+        };
         editor.focus();
         editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
         editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
@@ -86,7 +91,7 @@ export default function ImagePlugin() {
                 if ($isRootNode(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%' });
+                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%', width: payload.width, height: payload.height });
                 selection.insertNodes([imageNode]);
             }
             return true;

package/lib/esm/shared/ScrollContainer/index.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
-import { Scrollbars } from 'react-custom-scrollbars';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 import { AUTO_HIDE, AUTO_HIDE_TIMEOUT } from '../../constants/ScrollContainer';
 const PREFIX = 'SCScrollContainer';
 const classes = {