feat(core): add present to edgeless sharing (#5140)

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

@@ -1,18 +1,28 @@
+import type { PageMode } from '../../../atoms';
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { AuthenticatedItem } from './authenticated-item';
+import { PresentButton } from './present';
+import * as styles from './styles.css';
 
 export type ShareHeaderRightItemProps = {
   workspaceId: string;
   pageId: string;
+  publishMode: PageMode;
 };
 
 const ShareHeaderRightItem = ({ ...props }: ShareHeaderRightItemProps) => {
   const loginStatus = useCurrentLoginStatus();
-  if (loginStatus === 'authenticated') {
-    return <AuthenticatedItem {...props} />;
-  }
+  const { publishMode } = props;
+
   // TODO: Add TOC
-  return null;
+  return (
+    <div className={styles.rightItemContainer}>
+      {loginStatus === 'authenticated' ? (
+        <AuthenticatedItem {...props} />
+      ) : null}
+      {publishMode === 'edgeless' ? <PresentButton /> : null}
+    </div>
+  );
 };
 
 export default ShareHeaderRightItem;

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

@@ -0,0 +1,59 @@
+import { Button } from '@affine/component/ui/button';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { SurfaceService } from '@blocksuite/blocks';
+import { PresentationIcon } from '@blocksuite/icons';
+import { useCallback, useEffect, useState } from 'react';
+
+import * as styles from './styles.css';
+
+export const PresentButton = () => {
+  const t = useAFFiNEI18N();
+  const [isPresent, setIsPresent] = useState(false);
+
+  const handlePresent = useCallback(() => {
+    // TODO: use editor Atom
+    const editorRoot = document.querySelector('block-suite-root');
+    if (!editorRoot || isPresent) return;
+
+    // TODO: use surfaceService subAtom
+    const surfaceService = editorRoot?.spec.getService(
+      'affine:surface'
+    ) as SurfaceService;
+
+    surfaceService?.setNavigatorMode(true);
+    setIsPresent(true);
+  }, [isPresent]);
+
+  useEffect(() => {
+    if (!isPresent) return;
+
+    // TODO: use editor Atom
+    const editorRoot = document.querySelector('block-suite-root');
+    if (!editorRoot) return;
+
+    // TODO: use surfaceService subAtom
+    const surfaceService = editorRoot?.spec.getService(
+      'affine:surface'
+    ) as SurfaceService;
+
+    surfaceService.slots.edgelessToolUpdated.on(() => {
+      setIsPresent(surfaceService?.currentTool?.type === 'frameNavigator');
+    });
+
+    return () => {
+      surfaceService.slots.edgelessToolUpdated.dispose();
+    };
+  }, [isPresent]);
+
+  return (
+    <Button
+      type="primary"
+      icon={<PresentationIcon />}
+      className={styles.presentButton}
+      onClick={handlePresent}
+      disabled={isPresent}
+    >
+      {t['com.affine.share-page.header.present']()}
+    </Button>
+  );
+};

packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts

@@ -13,3 +13,13 @@ export const iconWrapper = style({
     },
   },
 });
+export const rightItemContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '0 8px',
+});
+
+export const presentButton = style({
+  gap: '4px',
+});

packages/frontend/core/src/pages/share/share-header.tsx

@@ -30,7 +30,11 @@ export function ShareHeader({
         />
       }
       right={
-        <ShareHeaderRightItem workspaceId={workspace.id} pageId={pageId} />
+        <ShareHeaderRightItem
+          workspaceId={workspace.id}
+          pageId={pageId}
+          publishMode={publishMode}
+        />
       }
       bottomBorder
     />

packages/frontend/i18n/src/resources/en.json

@@ -1004,5 +1004,6 @@
   "com.affine.history.empty-prompt.title": "Empty",
   "com.affine.history.empty-prompt.description": "This document is such a spring chicken, it hasn't sprouted a single historical sprig yet!",
   "com.affine.history.confirm-restore-modal.restore": "Restore",
-  "com.affine.history.confirm-restore-modal.hint": "You are about to restore the current version of the page to the latest version available. This action will overwrite any changes made prior to the latest version."
+  "com.affine.history.confirm-restore-modal.hint": "You are about to restore the current version of the page to the latest version available. This action will overwrite any changes made prior to the latest version.",
+  "com.affine.share-page.header.present": "Present"
 }