From 52cfe4521ab5a83abed285c551d468bdaa16a8b8 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Fri, 8 Dec 2023 04:44:08 +0000
Subject: [PATCH] feat(core): add present to edgeless sharing (#5140)

---
 .../cloud/share-header-right-item/index.tsx   | 18 ++++--
 .../cloud/share-header-right-item/present.tsx | 59 +++++++++++++++++++
 .../share-header-right-item/styles.css.ts     | 10 ++++
 .../core/src/pages/share/share-header.tsx     |  6 +-
 packages/frontend/i18n/src/resources/en.json  |  3 +-
 5 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx

diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx
index 564b657917..35aa14edaa 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx
+++ b/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;
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx b/packages/frontend/core/src/components/cloud/share-header-right-item/present.tsx
new file mode 100644
index 0000000000..563d6a346c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
index 3000c5d257..389f92c4f7 100644
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
+++ b/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',
+});
diff --git a/packages/frontend/core/src/pages/share/share-header.tsx b/packages/frontend/core/src/pages/share/share-header.tsx
index 675902637a..bbcf38f4be 100644
--- a/packages/frontend/core/src/pages/share/share-header.tsx
+++ b/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
     />
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 3492354538..8d2e58c3fc 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/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"
 }