From 50bae9c3e6a8d0c13f1a246cb958e173c13a3501 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Wed, 30 Oct 2024 08:07:58 +0000
Subject: [PATCH] feat(mobile): enable mobile keyboard toolbar (#8633)

---
 .../src/modules/feature-flag/constant.ts      |  9 ++++++
 .../workspace/detail/mobile-detail-page.tsx   | 31 ++++++++++++-------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/common/infra/src/modules/feature-flag/constant.ts b/packages/common/infra/src/modules/feature-flag/constant.ts
index c051efb95..be3e9e811 100644
--- a/packages/common/infra/src/modules/feature-flag/constant.ts
+++ b/packages/common/infra/src/modules/feature-flag/constant.ts
@@ -3,6 +3,7 @@ import type { FlagInfo } from './types';
 const isNotStableBuild = BUILD_CONFIG.appBuildType !== 'stable';
 const isDesktopEnvironment = BUILD_CONFIG.isElectron;
 const isCanaryBuild = BUILD_CONFIG.appBuildType === 'canary';
+const isMobile = BUILD_CONFIG.isMobileEdition;
 
 export const AFFINE_FLAGS = {
   enable_ai: {
@@ -153,6 +154,14 @@ export const AFFINE_FLAGS = {
     configurable: true,
     defaultState: false,
   },
+  enable_mobile_keyboard_toolbar: {
+    category: 'blocksuite',
+    bsFlag: 'enable_mobile_keyboard_toolbar',
+    displayName: 'Mobile Keyboard Toolbar',
+    description: 'Enables the mobile keyboard toolbar.',
+    configurable: false,
+    defaultState: isMobile,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 export type AFFINE_FLAGS = typeof AFFINE_FLAGS;
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
index 45a4f859d..fd5ff82a7 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
@@ -24,6 +24,7 @@ import { DisposableGroup } from '@blocksuite/affine/global/utils';
 import { type AffineEditorContainer } from '@blocksuite/affine/presets';
 import {
   DocService,
+  FeatureFlagService,
   FrameworkScope,
   GlobalContextService,
   useLiveData,
@@ -41,15 +42,21 @@ import { PageHeaderMenuButton } from './page-header-more-button';
 import { PageHeaderShareButton } from './page-header-share-button';
 
 const DetailPageImpl = () => {
-  const { editorService, docService, workspaceService, globalContextService } =
-    useServices({
-      WorkbenchService,
-      ViewService,
-      EditorService,
-      DocService,
-      WorkspaceService,
-      GlobalContextService,
-    });
+  const {
+    editorService,
+    docService,
+    workspaceService,
+    globalContextService,
+    featureFlagService,
+  } = useServices({
+    WorkbenchService,
+    ViewService,
+    EditorService,
+    DocService,
+    WorkspaceService,
+    GlobalContextService,
+    FeatureFlagService,
+  });
   const editor = editorService.editor;
   const workspace = workspaceService.workspace;
   const docCollection = workspace.docCollection;
@@ -62,6 +69,8 @@ const DetailPageImpl = () => {
   const { openPage, jumpToPageBlock } = useNavigateHelper();
   const editorContainer = useLiveData(editor.editorContainer$);
 
+  const enableKeyboardToolbar =
+    featureFlagService.flags.enable_mobile_keyboard_toolbar.value;
   const { setDocReadonly } = useDocMetaHelper();
 
   // TODO(@eyhn): remove jotai here
@@ -90,8 +99,8 @@ const DetailPageImpl = () => {
   }, [doc, globalContext, mode]);
 
   useEffect(() => {
-    setDocReadonly(doc.id, true);
-  }, [doc.id, setDocReadonly]);
+    if (!enableKeyboardToolbar) setDocReadonly(doc.id, true);
+  }, [enableKeyboardToolbar, doc.id, setDocReadonly]);
 
   useEffect(() => {
     globalContext.isTrashDoc.set(!!isInTrash);