From 06d442a8c18a773920ef10f4dfb8aa487d45f2a0 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Thu, 18 Aug 2022 17:09:28 +0800
Subject: [PATCH] refactor: clean anti pattern editor element

---
 .../src/blocks/embed-link/EmbedLinkView.tsx     |  7 +++----
 .../src/components/source-view/BlockView.tsx    |  8 ++++----
 .../src/components/source-view/SourceView.tsx   | 17 ++++-------------
 .../editor-core/src/editor/views/base-view.ts   |  1 -
 .../src/render-block/RenderBlock.tsx            |  3 +--
 5 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
index 86881478ff..86b43908d1 100644
--- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
+++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx
@@ -1,12 +1,12 @@
-import { useState } from 'react';
-import { CreateView } from '@toeverything/framework/virgo';
 import {
     BlockPendantProvider,
     useOnSelect,
 } from '@toeverything/components/editor-core';
-import { Upload } from '../../components/upload/upload';
+import { CreateView } from '@toeverything/framework/virgo';
+import { useState } from 'react';
 import { SourceView } from '../../components/source-view';
 import { LinkContainer } from '../../components/style-container';
+import { Upload } from '../../components/upload/upload';
 
 const MESSAGES = {
     ADD_EMBED_LINK: 'Add embed link',
@@ -38,7 +38,6 @@ export const EmbedLinkView = (props: EmbedLinkView) => {
                 {embedLinkUrl ? (
                     <SourceView
                         block={block}
-                        editorElement={props.editorElement}
                         isSelected={isSelect}
                         viewType="embedLink"
                         link={embedLinkUrl}
diff --git a/libs/components/editor-blocks/src/components/source-view/BlockView.tsx b/libs/components/editor-blocks/src/components/source-view/BlockView.tsx
index 33c0f5d66c..0b2c953312 100644
--- a/libs/components/editor-blocks/src/components/source-view/BlockView.tsx
+++ b/libs/components/editor-blocks/src/components/source-view/BlockView.tsx
@@ -1,9 +1,9 @@
-import { memo, useEffect, useRef, useState } from 'react';
 import { nanoid } from 'nanoid';
+import { memo, useEffect, useRef, useState } from 'react';
 
 import { StyledBlockPreview } from '@toeverything/components/common';
+import { AsyncBlock, useEditor } from '@toeverything/components/editor-core';
 import { services } from '@toeverything/datasource/db-service';
-import { AsyncBlock } from '@toeverything/framework/virgo';
 import { debounce, sleep } from '@toeverything/utils';
 
 const updateTitle = async (
@@ -73,15 +73,15 @@ const useBlockTitle = (block: AsyncBlock, blockId: string) => {
 type BlockPreviewProps = {
     block: AsyncBlock;
     blockId: string;
-    editorElement?: () => JSX.Element;
 };
 
 const InternalBlockPreview = (props: BlockPreviewProps) => {
     const container = useRef<HTMLDivElement>();
     const [preview, setPreview] = useState(true);
     const title = useBlockTitle(props.block, props.blockId);
+    const { editorElement } = useEditor();
 
-    const AffineEditor = props.editorElement as any;
+    const AffineEditor = editorElement as any;
 
     useEffect(() => {
         if (container?.current) {
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 b03189d7d4..27d19433bf 100644
--- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
+++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx
@@ -1,17 +1,15 @@
 import {
     AsyncBlock,
     useCurrentView,
-    useLazyIframe,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
-import { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { SCENE_CONFIG } from '../../blocks/group/config';
 import { BlockPreview } from './BlockView';
 import { formatUrl } from './format-url';
 
 export interface Props {
     block: AsyncBlock;
-    editorElement?: () => JSX.Element;
     viewType?: string;
     link: string;
     // onResizeEnd: (data: any) => void;
@@ -150,7 +148,7 @@ const LoadingContiner = () => {
 };
 
 export const SourceView = (props: Props) => {
-    const { link, isSelected, block, editorElement } = props;
+    const { link, isSelected, block } = props;
     const src = formatUrl(link);
     // let iframeShow = useLazyIframe(src, 3000, iframeContainer);
     const [currentView] = useCurrentView();
@@ -161,10 +159,7 @@ export const SourceView = (props: Props) => {
                 <SourceViewContainer isSelected={isSelected} scene={type}>
                     <MouseMaskContainer />
 
-                    <LazyIframe
-                        src={src}
-                        fallback={LoadingContiner()}
-                    ></LazyIframe>
+                    <LazyIframe src={src} fallback={LoadingContiner()} />
                 </SourceViewContainer>
             </div>
         );
@@ -175,11 +170,7 @@ export const SourceView = (props: Props) => {
                 style={{ padding: '0' }}
                 scene={type}
             >
-                <BlockPreview
-                    block={block}
-                    editorElement={editorElement}
-                    blockId={src}
-                />
+                <BlockPreview block={block} blockId={src} />
             </SourceViewContainer>
         );
     }
diff --git a/libs/components/editor-core/src/editor/views/base-view.ts b/libs/components/editor-core/src/editor/views/base-view.ts
index b69cdd848a..eb5c293243 100644
--- a/libs/components/editor-core/src/editor/views/base-view.ts
+++ b/libs/components/editor-core/src/editor/views/base-view.ts
@@ -18,7 +18,6 @@ import { SelectBlock } from '../selection';
 export interface CreateView {
     block: AsyncBlock;
     editor: Editor;
-    editorElement: () => JSX.Element;
     /**
      * @deprecated Use recast table instead
      */
diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx
index 0627aba95b..0a1531a709 100644
--- a/libs/components/editor-core/src/render-block/RenderBlock.tsx
+++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx
@@ -13,7 +13,7 @@ export function RenderBlock({
     blockId,
     hasContainer = true,
 }: RenderBlockProps) {
-    const { editor, editorElement } = useEditor();
+    const { editor } = useEditor();
     const { block } = useBlock(blockId);
 
     const setRef = useCallback(
@@ -50,7 +50,6 @@ export function RenderBlock({
             block={block}
             columns={columns.columns}
             columnsFromId={columns.fromId}
-            editorElement={editorElement}
         />
     );