From 28f7c21b540e17296dd1f4c56db7044cdb07c0f2 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 2 Apr 2022 17:57:10 +0800
Subject: [PATCH] feat: resolve image size

---
 packages/client/src/tiptap/services/file.ts         | 13 +++++++++++++
 .../src/tiptap/wrappers/image/index.module.scss     |  4 ----
 packages/client/src/tiptap/wrappers/image/index.tsx |  5 +++--
 3 files changed, 16 insertions(+), 6 deletions(-)

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