fix(core): hide the footer that blocks the toolbar in shared page (#8091

)

close PD-1405 CLOUD-64

https://github.com/user-attachments/assets/f6ed2dfc-d238-41d8-abaf-684193a080ff

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx

@@ -1,4 +1,3 @@
-import { EditorService } from '@affine/core/modules/editor';
 import type { ReferenceInfo } from '@blocksuite/affine-model';
 import type { DocMode } from '@blocksuite/blocks';
 import type {
@@ -8,13 +7,12 @@ import type {
   PageEditor,
 } from '@blocksuite/presets';
 import { type Doc, Slot } from '@blocksuite/store';
-import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type React from 'react';
 import {
   forwardRef,
   useCallback,
-  useEffect,
+  useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -60,7 +58,6 @@ export const BlocksuiteEditorContainer = forwardRef<
   { page, mode, className, style, shared },
   ref
 ) {
-  const editorService = useService(EditorService);
   const rootRef = useRef<HTMLDivElement>(null);
   const docRef = useRef<PageEditor>(null);
   const docTitleRef = useRef<DocTitle>(null);
@@ -112,6 +109,9 @@ export const BlocksuiteEditorContainer = forwardRef<
       get doc() {
         return page;
       },
+      get docTitle() {
+        return docTitleRef.current;
+      },
       get host() {
         return mode === 'page'
           ? docRef.current?.host
@@ -159,35 +159,9 @@ export const BlocksuiteEditorContainer = forwardRef<
     return proxy;
   }, [mode, page, slots]);
 
-  useEffect(() => {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(affineEditorContainerProxy);
-      } else {
-        ref.current = affineEditorContainerProxy;
-      }
-    }
-  }, [affineEditorContainerProxy, ref]);
-
-  useEffect(() => {
-    let canceled = false;
-    let unsubscribe: () => void = () => {};
-
-    affineEditorContainerProxy.updateComplete
-      .then(() => {
-        if (!canceled) {
-          unsubscribe = editorService.editor.bindEditorContainer(
-            affineEditorContainerProxy,
-            docTitleRef.current as DocTitle
-          );
-        }
-      })
-      .catch(console.error);
-    return () => {
-      canceled = true;
-      unsubscribe();
-    };
-  }, [affineEditorContainerProxy, mode, editorService]);
+  useImperativeHandle(ref, () => affineEditorContainerProxy, [
+    affineEditorContainerProxy,
+  ]);
 
   const handleClickPageModeBlank = useCallback(() => {
     affineEditorContainerProxy.host?.std.command.exec(

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx

@@ -1,32 +1,30 @@
+import { useRefEffect } from '@affine/component';
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
-import type { DocMode } from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
+import {
+  BookmarkBlockService,
+  customImageProxyMiddleware,
+  type DocMode,
+  EmbedGithubBlockService,
+  EmbedLoomBlockService,
+  EmbedYoutubeBlockService,
+  ImageBlockService,
+} from '@blocksuite/blocks';
+import { DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc } from '@blocksuite/store';
 import { use } from 'foxact/use';
-import type { CSSProperties, ReactElement } from 'react';
-import {
-  forwardRef,
-  memo,
-  Suspense,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import type { CSSProperties } from 'react';
+import { Suspense, useEffect } from 'react';
 
 import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
 import { NoPageRootError } from './no-page-error';
 
-export type ErrorBoundaryProps = {
-  onReset?: () => void;
-};
-
 export type EditorProps = {
   page: Doc;
   mode: DocMode;
   shared?: boolean;
-  // on Editor instance instantiated
-  onLoadEditor?: (editor: AffineEditorContainer) => () => void;
+  // on Editor ready
+  onEditorReady?: (editor: AffineEditorContainer) => (() => void) | void;
   style?: CSSProperties;
   className?: string;
 };
@@ -53,73 +51,100 @@ function usePageRoot(page: Doc) {
   return page.root;
 }
 
-const BlockSuiteEditorImpl = forwardRef<AffineEditorContainer, EditorProps>(
-  function BlockSuiteEditorImpl(
-    { mode, page, className, onLoadEditor, shared, style },
-    ref
-  ) {
-    usePageRoot(page);
-    assertExists(page, 'page should not be null');
-    const editorDisposeRef = useRef<() => void>(() => {});
-    const editorRef = useRef<AffineEditorContainer | null>(null);
-
-    const onRefChange = useCallback(
-      (editor: AffineEditorContainer | null) => {
-        editorRef.current = editor;
-        if (ref) {
-          if (typeof ref === 'function') {
-            ref(editor);
-          } else {
-            ref.current = editor;
-          }
-        }
-        if (editor && onLoadEditor) {
-          editorDisposeRef.current = onLoadEditor(editor);
-        }
-      },
-      [onLoadEditor, ref]
-    );
+const BlockSuiteEditorImpl = ({
+  mode,
+  page,
+  className,
+  shared,
+  style,
+  onEditorReady,
+}: EditorProps) => {
+  usePageRoot(page);
 
-    useEffect(() => {
-      const disposable = page.slots.blockUpdated.once(() => {
-        page.collection.setDocMeta(page.id, {
-          updatedDate: Date.now(),
-        });
+  useEffect(() => {
+    const disposable = page.slots.blockUpdated.once(() => {
+      page.collection.setDocMeta(page.id, {
+        updatedDate: Date.now(),
       });
-      return () => {
-        disposable.dispose();
-      };
-    }, [page]);
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, [page]);
+
+  const editorRef = useRefEffect(
+    (editor: AffineEditorContainer) => {
+      globalThis.currentEditor = editor;
+      let canceled = false;
+      const disposableGroup = new DisposableGroup();
+
+      if (onEditorReady) {
+        // Invoke onLoad once the editor has been mounted to the DOM.
+        editor.updateComplete
+          .then(() => {
+            if (canceled) {
+              return;
+            }
+            // host should be ready
+
+            // provide image proxy endpoint to blocksuite
+            editor.host?.std.clipboard.use(
+              customImageProxyMiddleware(runtimeConfig.imageProxyUrl)
+            );
+            ImageBlockService.setImageProxyURL(runtimeConfig.imageProxyUrl);
+
+            // provide link preview endpoint to blocksuite
+            BookmarkBlockService.setLinkPreviewEndpoint(
+              runtimeConfig.linkPreviewUrl
+            );
+            EmbedGithubBlockService.setLinkPreviewEndpoint(
+              runtimeConfig.linkPreviewUrl
+            );
+            EmbedYoutubeBlockService.setLinkPreviewEndpoint(
+              runtimeConfig.linkPreviewUrl
+            );
+            EmbedLoomBlockService.setLinkPreviewEndpoint(
+              runtimeConfig.linkPreviewUrl
+            );
+
+            return editor.host?.updateComplete;
+          })
+          .then(() => {
+            if (canceled) {
+              return;
+            }
+            const dispose = onEditorReady(editor);
+            if (dispose) {
+              disposableGroup.add(dispose);
+            }
+          })
+          .catch(console.error);
+      }
 
-    useEffect(() => {
       return () => {
-        editorDisposeRef.current();
+        canceled = true;
+        disposableGroup.dispose();
       };
-    }, []);
+    },
+    [onEditorReady, page]
+  );
 
-    return (
-      <BlocksuiteEditorContainer
-        mode={mode}
-        page={page}
-        shared={shared}
-        ref={onRefChange}
-        className={className}
-        style={style}
-      />
-    );
-  }
-);
-
-export const BlockSuiteEditor = memo(
-  forwardRef<AffineEditorContainer, EditorProps>(
-    function BlockSuiteEditor(props, ref): ReactElement {
-      return (
-        <Suspense fallback={<EditorLoading />}>
-          <BlockSuiteEditorImpl key={props.page.id} ref={ref} {...props} />
-        </Suspense>
-      );
-    }
-  )
-);
+  return (
+    <BlocksuiteEditorContainer
+      mode={mode}
+      page={page}
+      shared={shared}
+      ref={editorRef}
+      className={className}
+      style={style}
+    />
+  );
+};
 
-BlockSuiteEditor.displayName = 'BlockSuiteEditor';
+export const BlockSuiteEditor = (props: EditorProps) => {
+  return (
+    <Suspense fallback={<EditorLoading />}>
+      <BlockSuiteEditorImpl key={props.page.id} {...props} />
+    </Suspense>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-header/present/detail-header-present-button.tsx

@@ -1,16 +1,16 @@
 import { IconButton } from '@affine/component';
+import { EditorService } from '@affine/core/modules/editor';
 import { PresentationIcon } from '@blocksuite/icons/rc';
-
-import { usePresent } from './use-present';
+import { useService } from '@toeverything/infra';
 
 export const DetailPageHeaderPresentButton = () => {
-  const { isPresent, handlePresent } = usePresent();
+  const editorService = useService(EditorService);
 
   return (
     <IconButton
       style={{ flexShrink: 0 }}
       size="24"
-      onClick={() => handlePresent(!isPresent)}
+      onClick={() => editorService.editor.togglePresentation()}
     >
       <PresentationIcon />
     </IconButton>

packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx

@@ -1,19 +1,21 @@
 import { Button } from '@affine/component/ui/button';
+import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
 import { PresentationIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
 
-import { usePresent } from '../../blocksuite/block-suite-header/present/use-present';
 import * as styles from './styles.css';
 
 export const PresentButton = () => {
   const t = useI18n();
-  const { isPresent, handlePresent } = usePresent();
+  const editorService = useService(EditorService);
+  const isPresent = useLiveData(editorService.editor.isPresenting$);
 
   return (
     <Button
       prefix={<PresentationIcon />}
       className={styles.presentButton}
-      onClick={() => handlePresent()}
+      onClick={() => editorService.editor.togglePresentation()}
       disabled={isPresent}
     >
       {t['com.affine.share-page.header.present']()}