refactor: clean anti pattern editor element

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}

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) {

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
+                    <LazyIframe src={src} fallback={LoadingContiner()} />
-                        src={src}
-                        fallback={LoadingContiner()}
-                    ></LazyIframe>
                 </SourceViewContainer>
             </div>
         );
@@ -175,11 +170,7 @@ export const SourceView = (props: Props) => {
                 style={{ padding: '0' }}
                 scene={type}
             >
-                <BlockPreview
+                <BlockPreview block={block} blockId={src} />
-                    block={block}
-                    editorElement={editorElement}
-                    blockId={src}
-                />
             </SourceViewContainer>
         );
     }

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
      */

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}
         />
     );