From 06685683ae9dffc62ef82f804deb978c01c18dad Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Wed, 28 Aug 2024 14:38:45 +0800
Subject: [PATCH] fix(core): add mobile edit button (#7996)

---
 .../affine/page-properties/table.tsx          |  2 +-
 .../block-suite-editor/lit-adaper.tsx         |  2 +-
 .../block-suite-header/menu/index.tsx         | 21 +++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/page-properties/table.tsx b/packages/frontend/core/src/components/affine/page-properties/table.tsx
index c094266ba2a7f..aca0bcd3ac4e7 100644
--- a/packages/frontend/core/src/components/affine/page-properties/table.tsx
+++ b/packages/frontend/core/src/components/affine/page-properties/table.tsx
@@ -1099,7 +1099,7 @@ export const PagePropertiesTable = ({ docId }: { docId: string }) => {
   // if the given page is not in the current workspace, then we don't render anything
   // eg. when it is in history modal
 
-  if (!manager.page || manager.readonly) {
+  if (!manager.page) {
     return null;
   }
 
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index aa55a0a54527a..428fdcdbcc378 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
@@ -207,7 +207,7 @@ export const BlocksuiteDocEditor = forwardRef<
             }}
           ></div>
         ) : null}
-        {!page.readonly && settings.displayBiDirectionalLink ? (
+        {!shared && settings.displayBiDirectionalLink ? (
           <BiDirectionalLinkPanel />
         ) : null}
       </div>
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
index 559f44942877c..e8435a224881c 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
@@ -18,6 +18,7 @@ import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
 import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { track } from '@affine/core/mixpanel';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -35,6 +36,7 @@ import {
   InformationIcon,
   OpenInNewIcon,
   PageIcon,
+  SaveIcon,
   ShareIcon,
   SplitViewIcon,
   TocIcon,
@@ -83,6 +85,9 @@ export const PageHeaderMenuButton = ({
   const { importFile } = usePageHelper(docCollection);
   const { setTrashModal } = useTrashModalHelper(docCollection);
 
+  const [isEditing, setEditing] = useState(!page.readonly);
+  const { setDocReadonly } = useDocMetaHelper(docCollection);
+
   const view = useService(ViewService).view;
 
   const openSidePanel = useCallback(
@@ -196,6 +201,21 @@ export const PageHeaderMenuButton = ({
     toggleFavorite();
   }, [toggleFavorite]);
 
+  const handleToggleEdit = useCallback(() => {
+    setDocReadonly(page.id, !page.readonly);
+    setEditing(!isEditing);
+  }, [isEditing, page.id, page.readonly, setDocReadonly]);
+
+  const isMobile = environment.isBrowser && environment.isMobile;
+  const mobileEditMenuItem = (
+    <MenuItem
+      prefixIcon={isEditing ? <SaveIcon /> : <EditIcon />}
+      onSelect={handleToggleEdit}
+    >
+      {t[isEditing ? 'Save' : 'Edit']()}
+    </MenuItem>
+  );
+
   const showResponsiveMenu = hideShare;
   const ResponsiveMenuItems = (
     <>
@@ -235,6 +255,7 @@ export const PageHeaderMenuButton = ({
   const EditMenu = (
     <>
       {showResponsiveMenu ? ResponsiveMenuItems : null}
+      {isMobile && mobileEditMenuItem}
       {!isJournal && (
         <MenuItem
           prefixIcon={<EditIcon />}