feat: resolve image size

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;
+  });
+};

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);
-  }
 }

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) || '未知错误' });