diff --git a/packages/client/src/tiptap/services/file.ts b/packages/client/src/tiptap/services/file.ts index fab8f684..f904b3d1 100644 --- a/packages/client/src/tiptap/services/file.ts +++ b/packages/client/src/tiptap/services/file.ts @@ -52,3 +52,16 @@ export const normalizeFileType = (fileType): FileType => { return 'file'; }; + +export const getImageWidthHeight = (url: string): Promise<{ width: number | string; height: number | string }> => { + return new Promise((resolve) => { + const img = document.createElement('img'); + img.onload = () => { + resolve({ width: img.width, height: img.height }); + }; + img.onerror = () => { + resolve({ width: 'auto', height: 'auto' }); + }; + img.src = url; + }); +}; diff --git a/packages/client/src/tiptap/wrappers/image/index.module.scss b/packages/client/src/tiptap/wrappers/image/index.module.scss index a58ec862..326b5aba 100644 --- a/packages/client/src/tiptap/wrappers/image/index.module.scss +++ b/packages/client/src/tiptap/wrappers/image/index.module.scss @@ -6,8 +6,4 @@ border-radius: var(--border-radius); justify-content: space-between; align-items: center; - - &:hover { - border: 1px solid var(--semi-color-link); - } } diff --git a/packages/client/src/tiptap/wrappers/image/index.tsx b/packages/client/src/tiptap/wrappers/image/index.tsx index cfc23912..2e3592e7 100644 --- a/packages/client/src/tiptap/wrappers/image/index.tsx +++ b/packages/client/src/tiptap/wrappers/image/index.tsx @@ -5,7 +5,7 @@ import cls from 'classnames'; import { Typography, Spin } from '@douyinfe/semi-ui'; import { useToggle } from 'hooks/use-toggle'; import { uploadFile } from 'services/file'; -import { extractFileExtension, extractFilename } from '../../services/file'; +import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../services/file'; import styles from './index.module.scss'; const { Text } = Typography; @@ -36,7 +36,8 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => { toggleLoading(true); try { const src = await uploadFile(file); - updateAttributes({ ...fileInfo, src }); + const size = await getImageWidthHeight(file); + updateAttributes({ ...fileInfo, ...size, src }); toggleLoading(false); } catch (error) { updateAttributes({ error: '图片上传失败:' + (error && error.message) || '未知错误' });