chore(mobile): set doc readonly in edgeless mode (#9068)

Close [BS-1984](https://linear.app/affine-design/issue/BS-1984/edgeless-禁用编辑后，白板上，image-block-chat-block-可以移动), [BS-1918](https://linear.app/affine-design/issue/BS-1918/edgeless-移动端只读模式下，应当是单指移动，双指缩放), [BS-2035](https://linear.app/affine-design/issue/BS-2035/切换-edgeless-view-变为只读)

packages/common/infra/src/modules/feature-flag/constant.ts

@@ -225,6 +225,15 @@ export const AFFINE_FLAGS = {
     configurable: isDesktopEnvironment,
     defaultState: false,
   },
+  enable_mobile_edgeless_editing: {
+    category: 'affine',
+    displayName:
+      'com.affine.settings.workspace.experimental-features.enable-mobile-edgeless-editing.name',
+    description:
+      'com.affine.settings.workspace.experimental-features.enable-mobile-edgeless-editing.description',
+    configurable: isMobile,
+    defaultState: false,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 export type AFFINE_FLAGS = typeof AFFINE_FLAGS;

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -83,6 +83,8 @@ const DetailPageImpl = () => {
 
   const enableKeyboardToolbar =
     featureFlagService.flags.enable_mobile_keyboard_toolbar.value;
+  const enableEdgelessEditing =
+    featureFlagService.flags.enable_mobile_edgeless_editing.value;
   const { setDocReadonly } = useDocMetaHelper();
 
   // TODO(@eyhn): remove jotai here
@@ -111,8 +113,17 @@ const DetailPageImpl = () => {
   }, [doc, globalContext, mode]);
 
   useEffect(() => {
-    if (!enableKeyboardToolbar) setDocReadonly(doc.id, true);
-  }, [enableKeyboardToolbar, doc.id, setDocReadonly]);
+    setDocReadonly(
+      doc.id,
+      !enableKeyboardToolbar || (mode === 'edgeless' && !enableEdgelessEditing)
+    );
+  }, [
+    enableKeyboardToolbar,
+    doc.id,
+    setDocReadonly,
+    mode,
+    enableEdgelessEditing,
+  ]);
 
   useEffect(() => {
     globalContext.isTrashDoc.set(!!isInTrash);

packages/frontend/core/src/mobile/styles/mobile.css.ts

@@ -27,6 +27,9 @@ globalStyle('body:has(#app-tabs) affine-keyboard-toolbar[data-shrink="true"]', {
 globalStyle('body:has(#app-tabs) affine-keyboard-tool-panel', {
   paddingBottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom) + 8px)`,
 });
+globalStyle('body:has(#app-tabs) edgeless-toolbar-widget', {
+  bottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom))`,
+});
 globalStyle('html', {
   height: '100dvh',
   overflowY: 'auto',

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

@@ -1258,6 +1258,8 @@
   "com.affine.settings.workspace.experimental-features.enable-snapshot-import-export.description": "Once enabled, users can import and export blocksuite snapshots.",
   "com.affine.settings.workspace.experimental-features.enable-multiple-cloud-servers.name": "Multiple Cloud Servers",
   "com.affine.settings.workspace.experimental-features.enable-multiple-cloud-servers.description": "Once enabled, users can connect to selfhosted cloud servers.",
+  "com.affine.settings.workspace.experimental-features.enable-mobile-edgeless-editing.name": "Enable Edgeless Editing",
+  "com.affine.settings.workspace.experimental-features.enable-mobile-edgeless-editing.description": "Once enabled, users can edit edgeless canvas.",
   "com.affine.settings.workspace.not-owner": "Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.",
   "com.affine.settings.workspace.preferences": "Preference",
   "com.affine.settings.workspace.state.local": "Local",