From f303674737eb803e10247eccdf3b06eebf1f10c8 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Mon, 16 Sep 2024 23:24:09 +0800
Subject: [PATCH] fix: fixed image size for media cell (#6325)

---
 .../cell/file-media/PreviewImage.tsx          | 11 ++++----
 .../editor/components/blocks/table/Table.tsx  | 25 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/file-media/PreviewImage.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/file-media/PreviewImage.tsx
index 1196f2541d..6c7060eb9f 100644
--- a/frontend/appflowy_web_app/src/components/database/components/cell/file-media/PreviewImage.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/cell/file-media/PreviewImage.tsx
@@ -1,7 +1,7 @@
 import { FileMediaCellDataItem } from '@/application/database-yjs/cell.type';
 import React, { useMemo } from 'react';
 
-function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick: () => void }) {
+function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: () => void }) {
   const thumb = useMemo(() => {
     const url = new URL(file.url);
 
@@ -12,13 +12,14 @@ function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick
   }, [file.url]);
 
   return (
-    <div onClick={onClick} className={'p-1 cursor-pointer hover:scale-110 transform transition-all duration-200'}>
+    <div onClick={onClick} className={'transform cursor-pointer transition-all duration-200 hover:scale-110'}>
       <img
-        src={thumb} alt={file.name}
-        className={'w-fit h-full object-cover border border-line-divider rounded-[8px] overflow-hidden'}
+        src={thumb}
+        alt={file.name}
+        className={'aspect-square w-[60px] overflow-hidden rounded-[8px] border border-line-divider object-cover'}
       />
     </div>
   );
 }
 
-export default PreviewImage;
\ No newline at end of file
+export default PreviewImage;
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/table/Table.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/table/Table.tsx
index c87b2c14dc..fa551e7c52 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/table/Table.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/table/Table.tsx
@@ -5,12 +5,15 @@ import { Grid } from '@atlaskit/primitives';
 import './table.scss';
 import isEqual from 'lodash-es/isEqual';
 import { ReactEditor, useSlateStatic } from 'slate-react';
+import { useEditorContext } from '@/components/editor/EditorContext';
 
 const Table = memo(
   forwardRef<HTMLDivElement, EditorElementProps<TableNode>>(({ node, children, className, ...attributes }, ref) => {
+    const context = useEditorContext();
+    const readSummary = context.readSummary;
     const { rowsLen, colsLen, rowDefaultHeight, colsHeight } = node.data;
     const cells = node.children as TableCellNode[];
-    const [width, setWidth] = React.useState(0);
+    const [width, setWidth] = React.useState<number | undefined>(undefined);
     const offsetLeftRef = useRef(0);
 
     const columnGroup = useMemo(() => {
@@ -44,7 +47,6 @@ const Table = memo(
     const editor = useSlateStatic();
 
     const calcTableWidth = useCallback((editorDom: HTMLElement, scrollContainer: HTMLElement) => {
-
       const scrollRect = scrollContainer.getBoundingClientRect();
 
       setWidth(scrollRect.width);
@@ -52,6 +54,7 @@ const Table = memo(
     }, []);
 
     useEffect(() => {
+      if (readSummary) return;
       const editorDom = ReactEditor.toDOMNode(editor, editor);
       const scrollContainer = getScrollParent(editorDom) as HTMLElement;
 
@@ -67,7 +70,7 @@ const Table = memo(
       return () => {
         resizeObserver.disconnect();
       };
-    }, [calcTableWidth, editor]);
+    }, [calcTableWidth, editor, readSummary]);
 
     return (
       <div
@@ -82,15 +85,17 @@ const Table = memo(
           left: -offsetLeftRef.current,
         }}
       >
-        <div className={'h-full w-full overflow-x-auto overflow-y-hidden'} style={{
-          paddingLeft: offsetLeftRef.current + 'px',
-        }}
+        <div
+          className={'h-full w-full overflow-x-auto overflow-y-hidden'}
+          style={{
+            paddingLeft: offsetLeftRef.current + 'px',
+          }}
         >
           <Grid
             id={`table-${node.blockId}`}
-            rowGap="space.0"
-            autoFlow="column"
-            columnGap="space.0"
+            rowGap='space.0'
+            autoFlow='column'
+            columnGap='space.0'
             templateRows={templateRows}
             templateColumns={templateColumns}
           >
@@ -100,7 +105,7 @@ const Table = memo(
       </div>
     );
   }),
-  (prevProps, nextProps) => isEqual(prevProps.node, nextProps.node),
+  (prevProps, nextProps) => isEqual(prevProps.node, nextProps.node)
 );
 
 export default Table;