From e8f390a0d26e60b5e01177b43f2ed31dbf5cba11 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 2 Aug 2022 16:17:10 +0800 Subject: [PATCH 01/36] fix iframe will take away the focus --- .../src/components/source-view/SourceView.tsx | 80 +++++++++++++++---- .../editor-core/src/recast-block/view.ts | 23 +++++- 2 files changed, 85 insertions(+), 18 deletions(-) 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 3835199d3f..2c117e97fe 100644 --- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx +++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx @@ -1,6 +1,11 @@ -import type { AsyncBlock } from '@toeverything/components/editor-core'; +import { + AsyncBlock, + useCurrentView, + useLazyIframe, +} from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; -import type { FC } from 'react'; +import { FC, useRef } from 'react'; +import { SCENE_CONFIG } from '../../blocks/group/config'; import { BlockPreview } from './BlockView'; import { formatUrl } from './format-url'; @@ -15,7 +20,18 @@ export interface Props { } const getHost = (url: string) => new URL(url).host; - +const MouseMaskContainer = styled('div')({ + position: 'absolute', + zIndex: 1, + top: '0px', + left: '0px', + right: '0px', + bottom: '0px', + backgroundColor: 'transparent', + '&:hover': { + pointerEvents: 'none', + }, +}); const LinkContainer = styled('div')<{ isSelected: boolean; }>(({ theme, isSelected }) => { @@ -38,12 +54,28 @@ const LinkContainer = styled('div')<{ }, }; }); - +const _getLinkStyle = (scene: string) => { + switch (scene) { + case SCENE_CONFIG.PAGE: + return { + width: '420px', + height: '198px', + }; + default: + return { + width: '252px', + height: '126px', + }; + } +}; const SourceViewContainer = styled('div')<{ isSelected: boolean; -}>(({ theme, isSelected }) => { + scene: string; +}>(({ theme, isSelected, scene }) => { return { + ..._getLinkStyle(scene), overflow: 'hidden', + position: 'relative', borderRadius: theme.affine.shape.borderRadius, background: isSelected ? 'rgba(152, 172, 189, 0.1)' : 'transparent', padding: '8px', @@ -52,32 +84,46 @@ const SourceViewContainer = styled('div')<{ height: '100%', border: '1px solid #EAEEF2', borderRadius: theme.affine.shape.borderRadius, + userSelect: 'none', }, }; }); - +const IframeContainer = styled('div')<{ show: boolean }>(({ show }) => { + return { + height: '100%', + display: show ? 'block' : 'none', + }; +}); export const SourceView: FC = props => { const { link, isSelected, block, editorElement } = props; const src = formatUrl(link); - const openTabOnBrowser = () => { - window.open(link, '_blank'); - }; + + const iframeContainer = useRef(null); + let iframeShow = useLazyIframe(src, 3000, iframeContainer); + const [currentView] = useCurrentView(); + const { type } = currentView; if (src?.startsWith('http')) { return ( - e.preventDefault()} - onClick={openTabOnBrowser} - > -

{getHost(src)}

-

{src}

- +
+ + + { + e.preventDefault(); + e.stopPropagation(); + }} + show={iframeShow} + ref={iframeContainer} + > + +
); } else if (src?.startsWith('affine')) { return ( { ); return [currentView, setCurrentView] as const; }; +export const useLazyIframe = ( + link: string, + timers: number, + container: MutableRefObject +) => { + const [iframeShow, setIframeShow] = useState(false); + useEffect(() => { + const iframe = document.createElement('iframe'); + iframe.src = link; + iframe.onload = () => { + setTimeout(() => { + setIframeShow(true); + }, timers); + }; + container.current.appendChild(iframe); + return () => { + iframe.remove(); + }; + }, [link, container]); + return iframeShow; +}; export const useRecastView = () => { const recastBlock = useRecastBlock(); const recastViews = From 6f340adf243e470cfba04916ec1ddc2780fde3d5 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 2 Aug 2022 16:59:59 +0800 Subject: [PATCH 02/36] fix iframe will take away the focus --- libs/components/editor-core/src/recast-block/view.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/recast-block/view.ts b/libs/components/editor-core/src/recast-block/view.ts index 4386c83918..89b32488ea 100644 --- a/libs/components/editor-core/src/recast-block/view.ts +++ b/libs/components/editor-core/src/recast-block/view.ts @@ -61,10 +61,15 @@ export const useLazyIframe = ( iframe.src = link; iframe.onload = () => { setTimeout(() => { + // Prevent iframe from scrolling parent container + // TODO W3C https://github.com/w3c/csswg-drafts/issues/7134 + // https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6 setIframeShow(true); }, timers); }; - container.current.appendChild(iframe); + if (container?.current) { + container.current.appendChild(iframe); + } return () => { iframe.remove(); }; From 96ea531b4ed508ff6cf4a9ab0431b47b0983a2de Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Tue, 2 Aug 2022 17:03:01 +0800 Subject: [PATCH 03/36] fix iframe will take away the focus --- libs/components/editor-core/src/recast-block/view.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/recast-block/view.ts b/libs/components/editor-core/src/recast-block/view.ts index 89b32488ea..09e4644977 100644 --- a/libs/components/editor-core/src/recast-block/view.ts +++ b/libs/components/editor-core/src/recast-block/view.ts @@ -53,7 +53,7 @@ export const useCurrentView = () => { export const useLazyIframe = ( link: string, timers: number, - container: MutableRefObject + container: MutableRefObject ) => { const [iframeShow, setIframeShow] = useState(false); useEffect(() => { From 928a90942a408d42d5d1a16cc774bd7a32420a93 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Wed, 3 Aug 2022 11:04:02 +0800 Subject: [PATCH 04/36] fix clickaway error in page --- .../src/menu/command-menu/Menu.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx index 3ab140f3bc..1cd22e48e2 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx @@ -237,25 +237,29 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => { onKeyUpCapture={handle_keyup} ref={commandMenuContentRef} > - -
- -
- + {show ? ( + +
+ +
+ + ) : ( + <> + )} ); }; From 9708f0dc0db901b1bede4d2a8df04f7c1446a0f7 Mon Sep 17 00:00:00 2001 From: DiamondThree Date: Thu, 4 Aug 2022 15:26:18 +0800 Subject: [PATCH 05/36] fix iframe --- .../src/components/source-view/SourceView.tsx | 71 ++++++++++++++----- 1 file changed, 54 insertions(+), 17 deletions(-) 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 2c117e97fe..9b5c813679 100644 --- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx +++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx @@ -4,7 +4,14 @@ import { useLazyIframe, } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; -import { FC, useRef } from 'react'; +import { + FC, + ReactElement, + ReactNode, + useEffect, + useRef, + useState, +} from 'react'; import { SCENE_CONFIG } from '../../blocks/group/config'; import { BlockPreview } from './BlockView'; import { formatUrl } from './format-url'; @@ -88,18 +95,54 @@ const SourceViewContainer = styled('div')<{ }, }; }); -const IframeContainer = styled('div')<{ show: boolean }>(({ show }) => { - return { - height: '100%', - display: show ? 'block' : 'none', + +const LazyIframe = ({ + src, + delay = 3000, + fallback, +}: { + src: string; + delay?: number; + fallback?: ReactNode; +}) => { + const [show, setShow] = useState(false); + const timer = useRef(); + + useEffect(() => { + // Hide iframe when the src changed + setShow(false); + }, [src]); + + const onLoad = () => { + clearTimeout(timer.current); + timer.current = window.setTimeout(() => { + // Prevent iframe scrolling parent container + // Remove the delay after the issue is resolved + // See W3C https://github.com/w3c/csswg-drafts/issues/7134 + // See https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6 + setShow(true); + }, delay); }; -}); + + return ( + <> +
{ + e.preventDefault(); + e.stopPropagation(); + }} + style={{ display: show ? 'block' : 'none', height: '100%' }} + > +