From acd6b0434ea613113922929c5fffa9cf641c4dd2 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Mon, 25 Jul 2022 00:06:13 +0800
Subject: [PATCH] fix(style) iframe

---
 .../src/blocks/group/GroupView.tsx            | 17 +++---
 .../src/components/source-view/SourceView.tsx | 57 ++++++++++++-------
 .../src/components/style-container/index.tsx  |  1 -
 .../src/components/upload/upload.tsx          |  7 +--
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
index 60996223fe..3385dd0fe3 100644
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -61,15 +61,18 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
         border: '2px solid #ECF1FB',
-        boxShadow: isSelect
-            ? '0px 0px 5px 5px rgba(98, 137, 255, 0.25), 0px 0px 5px 5px #E3EAFF !important'
-            : '#none',
         padding: '15px 12px',
         borderRadius: '10px',
-        '&:hover': {
-            // borderColor: 'none',
-            boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        },
+        ...(isSelect
+            ? {
+                  boxShadow:
+                      '0px 0px 5px 5px rgba(98, 137, 255, 0.25), 0px 0px 5px 5px #E3EAFF',
+              }
+            : {
+                  '&:hover': {
+                      boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+                  },
+              }),
     })
 );
 
diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
index bd06a0dd9c..da0b602586 100644
--- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
+++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
@@ -6,18 +6,7 @@ import { AsyncBlock, useRecastBlockScene } from '@toeverything/framework/virgo';
 import { formatUrl } from './format-url';
 import { SCENE_CONFIG } from '../../blocks/group/config';
 import { BlockPreview } from './BlockView';
-const MouseMaskContainer = styled('div')({
-    position: 'absolute',
-    zIndex: 1,
-    top: '0px',
-    left: '0px',
-    right: '0px',
-    bottom: '0px',
-    backgroundColor: 'transparent',
-    '&:hover': {
-        pointerEvents: 'none',
-    },
-});
+
 export interface Props {
     block: AsyncBlock;
     editorElement?: () => JSX.Element;
@@ -44,7 +33,29 @@ const _getLinkStyle = (scene: string) => {
             };
     }
 };
-
+const getHost = (url: string) => new URL(url).host;
+const LinkContainer = styled('div')<{
+    isSelected: boolean;
+}>(({ theme, isSelected }) => {
+    return {
+        // overflow: 'hidden',
+        borderRadius: theme.affine.shape.borderRadius,
+        fontSize: '0',
+        background: isSelected ? 'rgba(152, 172, 189, 0.2)' : '#fafafa',
+        padding: '0 8px',
+        width: '100%',
+        height: '72px',
+        lineHeight: '32px',
+        border: '1px solid #ccc',
+        cursor: 'pointer',
+        p: {
+            overflow: 'hidden',
+            fontSize: theme.affine.typography.body1.fontSize,
+            height: '36px',
+            textOverflow: 'ellipsis',
+        },
+    };
+});
 const SourceViewContainer = styled('div')<{
     isSelected: boolean;
     scene: string;
@@ -68,24 +79,28 @@ export const SourceView: FC<Props> = props => {
     const { link, isSelected, block, editorElement } = props;
     const { scene } = useRecastBlockScene();
     const src = formatUrl(link);
-
+    const openTabOnBrowser = () => {
+        window.open(link, '_blank');
+    };
     if (src?.startsWith('http')) {
         return (
-            <div
+            <LinkContainer
+                isSelected={isSelected}
                 onMouseDown={e => e.preventDefault()}
-                style={{ display: 'flex' }}
+                onClick={openTabOnBrowser}
             >
-                <SourceViewContainer isSelected={isSelected} scene={scene}>
+                <p>{getHost(src)}</p>
+                <p>{src}</p>
+                {/* <SourceViewContainer isSelected={isSelected} scene={scene}>
                     <iframe
                         title={link}
                         src={src}
                         frameBorder="0"
                         allowFullScreen
-                        sandbox="allow-scripts  allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin"
+                        sandbox=""
                     />
-                    <MouseMaskContainer />
-                </SourceViewContainer>
-            </div>
+                </SourceViewContainer> */}
+            </LinkContainer>
         );
     } else if (src?.startsWith('affine')) {
         return (
diff --git a/libs/components/editor-blocks/src/components/style-container/index.tsx b/libs/components/editor-blocks/src/components/style-container/index.tsx
index 6d8c266a6a..28ca5d6aea 100644
--- a/libs/components/editor-blocks/src/components/style-container/index.tsx
+++ b/libs/components/editor-blocks/src/components/style-container/index.tsx
@@ -15,5 +15,4 @@ export const List = styled('div')(({ theme }) => ({
 }));
 export const LinkContainer = styled('div')(() => ({
     position: 'relative',
-    overflowBlock: 'hidden',
 }));
diff --git a/libs/components/editor-blocks/src/components/upload/upload.tsx b/libs/components/editor-blocks/src/components/upload/upload.tsx
index 1158d97ff6..02066bd2b8 100644
--- a/libs/components/editor-blocks/src/components/upload/upload.tsx
+++ b/libs/components/editor-blocks/src/components/upload/upload.tsx
@@ -51,20 +51,17 @@ const UploadBox = styled('div')<{ isSelected: boolean }>(
     ({ theme, isSelected }) => {
         return {
             width: '100%',
-            background: '#f7f7f7',
             padding: '15px 10px',
             fontSize: theme.affine.typography.body1.fontSize,
             borderRadius: '4px',
             cursor: 'pointer',
-            border: isSelected
-                ? `1px solid ${theme.affine.palette.primary}`
-                : '1px solid #e0e0e0',
+            background: isSelected ? 'rgba(152, 172, 189, 0.2)' : '#fafafa',
+            border: '1px solid #e0e0e0',
             '.delete': {
                 display: 'none',
                 float: 'right',
             },
             '&:hover': {
-                background: '#eee',
                 '.delete': {
                     display: 'inline-block',
                 },