@selfcommunity/react-ui 0.7.0-alpha.315 → 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.js

@@ -7,6 +7,16 @@ 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");
+/**
+ * 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;
 }
@@ -25,7 +35,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    const aspectRatio = getAspectRatio(width, height);
+    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',
@@ -170,7 +180,7 @@ class ImageNode extends lexical_1.DecoratorNode {
         return { element };
     }
     decorate() {
-        return (react_1.default.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() }));
+        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, src } = serializedNode;

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.js

@@ -1,8 +1,18 @@
 import React, { Suspense, useCallback, useEffect, useRef } from 'react';
-import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, TextNode, } from 'lexical';
+import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, 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';
+/**
+ * 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;
 }
@@ -21,7 +31,7 @@ function useSuspenseImage(src) {
 }
 function LazyImage({ altText, className, imageRef, src, width, height }) {
     useSuspenseImage(src);
-    const aspectRatio = getAspectRatio(width, height);
+    const aspectRatio = getAspectRatio(IMAGE_WIDTH_THRESHOLD, height);
     return (React.createElement("div", { draggable: false, className: className, style: { position: 'relative', paddingBottom: `${100 / aspectRatio}%` } },
         React.createElement("img", { src: src, alt: altText, ref: imageRef, style: {
                 position: 'absolute',
@@ -166,7 +176,7 @@ export class ImageNode extends DecoratorNode {
         return { element };
     }
     decorate() {
-        return (React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() }));
+        return React.createElement(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, nodeKey: this.getKey() });
     }
     static importJSON(serializedNode) {
         const { altText, height, width, src } = serializedNode;