fix: unable to delete image and refactor image actions menu (#4525)

* feat: refacotr image block action

* fix: unable to delete the image placeholder

* fix: unable to delete the image placeholder

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_block_action_widget.dart

@@ -1,8 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_action_widget.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 enum BlockActionBottomSheetType {
@@ -28,50 +27,43 @@ class BlockActionBottomSheet extends StatelessWidget {
     return Column(
       children: [
         // insert above, insert below
-        Row(
-          children: [
-            Expanded(
-              child: BottomSheetActionWidget(
-                svg: FlowySvgs.arrow_up_s,
-                text: LocaleKeys.button_insertAbove.tr(),
-                onTap: () => onAction(BlockActionBottomSheetType.insertAbove),
-              ),
-            ),
-            const HSpace(8),
-            Expanded(
-              child: BottomSheetActionWidget(
-                svg: FlowySvgs.arrow_down_s,
-                text: LocaleKeys.button_insertBelow.tr(),
-                onTap: () => onAction(BlockActionBottomSheetType.insertBelow),
-              ),
-            ),
-          ],
+        FlowyOptionTile.text(
+          text: LocaleKeys.button_insertAbove.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.arrow_up_s,
+            size: Size.square(20),
+          ),
+          onTap: () => onAction(BlockActionBottomSheetType.insertAbove),
+        ),
+        FlowyOptionTile.text(
+          showTopBorder: false,
+          text: LocaleKeys.button_insertBelow.tr(),
+          leftIcon: const FlowySvg(
+            FlowySvgs.arrow_down_s,
+            size: Size.square(20),
+          ),
+          onTap: () => onAction(BlockActionBottomSheetType.insertBelow),
         ),
-        const VSpace(8),
-
         // duplicate, delete
-        Row(
-          children: [
-            Expanded(
-              child: BottomSheetActionWidget(
-                svg: FlowySvgs.m_duplicate_m,
-                text: LocaleKeys.button_duplicate.tr(),
-                onTap: () => onAction(BlockActionBottomSheetType.duplicate),
-              ),
-            ),
-            const HSpace(8),
-            Expanded(
-              child: BottomSheetActionWidget(
-                svg: FlowySvgs.m_delete_m,
-                text: LocaleKeys.button_delete.tr(),
-                onTap: () => onAction(BlockActionBottomSheetType.delete),
-              ),
-            ),
-          ],
+        FlowyOptionTile.text(
+          showTopBorder: false,
+          text: LocaleKeys.button_duplicate.tr(),
+          leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
+          onTap: () => onAction(BlockActionBottomSheetType.duplicate),
         ),
-        const VSpace(8),
 
         ...extendActionWidgets,
+
+        FlowyOptionTile.text(
+          showTopBorder: false,
+          text: LocaleKeys.button_delete.tr(),
+          leftIcon: FlowySvg(
+            FlowySvgs.m_delete_s,
+            color: Theme.of(context).colorScheme.error,
+          ),
+          textColor: Theme.of(context).colorScheme.error,
+          onTap: () => onAction(BlockActionBottomSheetType.delete),
+        ),
       ],
     );
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart

@@ -74,6 +74,8 @@ class MobileBlockActionButtons extends StatelessWidget {
       context,
       showHeader: true,
       showCloseButton: true,
+      showDivider: true,
+      showDragHandle: true,
       title: LocaleKeys.document_plugins_action.tr(),
       builder: (context) {
         return BlockActionBottomSheet(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart

@@ -2,7 +2,7 @@ import 'dart:io';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_placeholder.dart';
@@ -12,12 +12,8 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide ResizableImage;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:http/http.dart';
-import 'package:image_gallery_saver/image_gallery_saver.dart';
 import 'package:provider/provider.dart';
 import 'package:string_validator/string_validator.dart';
 
@@ -365,64 +361,37 @@ class CustomImageBlockComponentState extends State<CustomImageBlockComponent>
     }
 
     return [
-      Row(
-        children: [
-          Expanded(
-            child: BottomSheetActionWidget(
-              svg: FlowySvgs.copy_s,
-              text: LocaleKeys.editor_copyLink.tr(),
-              onTap: () async {
-                context.pop();
-                showSnackBarMessage(
-                  context,
-                  LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
-                );
-                await getIt<ClipboardService>().setPlainText(url);
-              },
-            ),
-          ),
-          const HSpace(8.0),
-          Expanded(
-            child: BottomSheetActionWidget(
-              svg: FlowySvgs.image_placeholder_s,
-              text: LocaleKeys.document_imageBlock_saveImageToGallery.tr(),
-              onTap: () async {
-                context.pop();
-                Uint8List? bytes;
-                if (isURL(url)) {
-                  // network image
-                  final result = await get(Uri.parse(url));
-                  if (result.statusCode == 200) {
-                    bytes = result.bodyBytes;
-                  }
-                } else {
-                  final file = File(url);
-                  bytes = await file.readAsBytes();
-                }
-                if (bytes != null) {
-                  await ImageGallerySaver.saveImage(bytes);
-                  if (context.mounted) {
-                    showSnackBarMessage(
-                      context,
-                      LocaleKeys.document_imageBlock_successToAddImageToGallery
-                          .tr(),
-                    );
-                  }
-                } else {
-                  if (context.mounted) {
-                    showSnackBarMessage(
-                      context,
-                      LocaleKeys.document_imageBlock_failedToAddImageToGallery
-                          .tr(),
-                    );
-                  }
-                }
-              },
-            ),
-          ),
-        ],
+      FlowyOptionTile.text(
+        showTopBorder: false,
+        text: LocaleKeys.editor_copyLink.tr(),
+        leftIcon: const FlowySvg(
+          FlowySvgs.m_field_copy_s,
+        ),
+        onTap: () async {
+          context.pop();
+          showSnackBarMessage(
+            context,
+            LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
+          );
+          await getIt<ClipboardService>().setPlainText(url);
+        },
+      ),
+      FlowyOptionTile.text(
+        showTopBorder: false,
+        text: LocaleKeys.document_imageBlock_saveImageToGallery.tr(),
+        leftIcon: const FlowySvg(
+          FlowySvgs.image_placeholder_s,
+          size: Size.square(20),
+        ),
+        onTap: () async {
+          context.pop();
+          showSnackBarMessage(
+            context,
+            LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
+          );
+          await getIt<ClipboardService>().setPlainText(url);
+        },
       ),
-      const VSpace(8),
     ];
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart

@@ -1,10 +1,10 @@
 import 'dart:io';
 
-import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/plugins/document/application/prelude.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_util.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart';
@@ -12,6 +12,7 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/settings/application_data_storage.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log, UploadImageMenu;
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -107,12 +108,16 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
         child: child,
       );
     } else {
-      return GestureDetector(
-        onTap: () {
-          editorState.updateSelectionWithReason(null, extraInfo: {});
-          showUploadImageMenu();
-        },
-        child: child,
+      return MobileBlockActionButtons(
+        node: widget.node,
+        editorState: editorState,
+        child: GestureDetector(
+          onTap: () {
+            editorState.updateSelectionWithReason(null, extraInfo: {});
+            showUploadImageMenu();
+          },
+          child: child,
+        ),
       );
     }
   }
@@ -128,7 +133,8 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
         showCloseButton: true,
         showDragHandle: true,
         builder: (context) {
-          return ConstrainedBox(
+          return Container(
+            margin: const EdgeInsets.only(top: 12.0),
             constraints: const BoxConstraints(
               maxHeight: 340,
               minHeight: 80,
@@ -164,13 +170,15 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
       return;
     }
 
+    final userProfilePB = context.read<DocumentBloc>().state.userProfilePB;
+
     final transaction = editorState.transaction;
-    final type = await getAuthenticatorType();
+    final type = userProfilePB?.authenticator ?? AuthenticatorPB.Local;
     String? path;
     CustomImageType imageType = CustomImageType.local;
 
     // if the user is using local authenticator, we need to save the image to local storage
-    if (type == AuthenticatorType.local) {
+    if (type == AuthenticatorPB.Local) {
       path = await saveImageToLocalStorage(url);
     } else {
       // else we should save the image to cloud storage