fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use react-lazy-load-image-component

pull/26/head
fantasticit 2022-04-13 20:57:13 +08:00
parent ba50a54e9b
commit 9726cddfd4
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -78,6 +78,7 @@
"react-countdown": "^2.3.2",
"react-dom": "17.0.2",
"react-helmet": "^6.1.0",
"react-lazy-load-image-component": "^1.5.4",
"react-pdf": "^5.7.2",
"react-split-pane": "^0.1.92",
"scroll-into-view-if-needed": "^2.2.29",

15
packages/client/src/tiptap/wrappers/image/index.tsx
View File

@ -1,9 +1,9 @@
import Image from 'next/image';
import cls from 'classnames';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import { Resizeable } from 'components/resizeable';
import { Typography, Spin } from '@douyinfe/semi-ui';
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle';
import { uploadFile } from 'services/file';
import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../utils/file';
@ -11,8 +11,6 @@ import styles from './index.module.scss';
const { Text } = Typography;
const isNumber = (v) => typeof v === 'number';
export const ImageWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const { hasTrigger, error, src, alt, title, width, height, textAlign } = node.attrs;
@ -78,12 +76,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
);
}
const img =
isNumber(width) && isNumber(height) ? (
<Image src={src} alt={alt} width={width} height={height} layout="responsive" />
) : (
<img src={src} alt={alt} width={width} height={height} />
);
const img = <LazyLoadImage src={src} alt={alt} width={width} height={height} />;
if (isEditable) {
return (

22
pnpm-lock.yaml
View File

@ -106,6 +106,7 @@ importers:
react-countdown: ^2.3.2
react-dom: 17.0.2
react-helmet: ^6.1.0
react-lazy-load-image-component: ^1.5.4
react-pdf: ^5.7.2
react-split-pane: ^0.1.92
scroll-into-view-if-needed: ^2.2.29
@ -187,6 +188,7 @@ importers:
react-countdown: 2.3.2_react-dom@17.0.2+react@17.0.2
react-dom: 17.0.2_react@17.0.2
react-helmet: 6.1.0_react@17.0.2
react-lazy-load-image-component: 1.5.4_react-dom@17.0.2+react@17.0.2
react-pdf: 5.7.2_react-dom@17.0.2+react@17.0.2
react-split-pane: 0.1.92_react-dom@17.0.2+react@17.0.2
scroll-into-view-if-needed: 2.2.29
@ -5507,6 +5509,10 @@ packages:
p-locate: 4.1.0
dev: true
/lodash.debounce/4.0.8:
resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=}
dev: false
/lodash.defaults/4.2.0:
resolution: {integrity: sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=}
dev: false
@ -5547,6 +5553,10 @@ packages:
resolution: {integrity: sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=}
dev: false
/lodash.throttle/4.1.1:
resolution: {integrity: sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=}
dev: false
/lodash.truncate/4.4.2:
resolution: {integrity: sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=}
dev: true
@ -6731,6 +6741,18 @@ packages:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
/react-lazy-load-image-component/1.5.4_react-dom@17.0.2+react@17.0.2:
resolution: {integrity: sha512-PSi9tckzZmiqfYZwS6ke2RoRbICsN5m0qsG6fEjUdQNe5STiJieXLlRuGD3uAASOQPFiKYFSLoueN07nk0uffw==}
peerDependencies:
react: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
react-dom: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
dependencies:
lodash.debounce: 4.0.8
lodash.throttle: 4.1.1
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
dev: false
/react-lifecycles-compat/3.0.4:
resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
dev: false