diff --git a/frontend/appflowy_flutter/integration_test/shared/database_test_op.dart b/frontend/appflowy_flutter/integration_test/shared/database_test_op.dart
index b25fb056a5..876de18eb7 100644
--- a/frontend/appflowy_flutter/integration_test/shared/database_test_op.dart
+++ b/frontend/appflowy_flutter/integration_test/shared/database_test_op.dart
@@ -1252,7 +1252,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
       matching: find.byType(EventCard),
     );
 
-    await tapButton(cards.at(index));
+    await tapButton(cards.at(index), milliseconds: 1000);
   }
 
   void assertEventEditorOpen() =>
diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_document.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_document.dart
index 415e741ad1..edd2cc7b31 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_document.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_document.dart
@@ -1,6 +1,9 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/grid/application/row/row_document_bloc.dart';
 import 'package:appflowy/plugins/document/application/document_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_drop_manager.dart';
 import 'package:appflowy/plugins/document/presentation/editor_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/shared/flowy_error_page.dart';
@@ -8,8 +11,8 @@ import 'package:appflowy/workspace/application/view_info/view_info_bloc.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';
 
 class RowDocument extends StatelessWidget {
   const RowDocument({
@@ -65,56 +68,69 @@ class _RowEditor extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider(
-      create: (context) => DocumentBloc(documentId: viewPB.id)
-        ..add(const DocumentEvent.initial()),
-      child: BlocListener<DocumentBloc, DocumentState>(
-        listenWhen: (previous, current) =>
-            previous.isDocumentEmpty != current.isDocumentEmpty,
-        listener: (_, state) {
-          if (state.isDocumentEmpty != null) {
-            onIsEmptyChanged?.call(state.isDocumentEmpty!);
-          }
-          if (state.error != null) {
-            Log.error('RowEditor error: ${state.error}');
-          }
-          if (state.editorState == null) {
-            Log.error('RowEditor unable to get editorState');
-          }
-        },
-        child: BlocBuilder<DocumentBloc, DocumentState>(
+    return ChangeNotifierProvider(
+      // Due to how DropTarget works, there is no way to differentiate if an overlay is
+      // blocking the target visibly, so when we have an overlay with a drop target,
+      // we should disable the drop target for the Editor, until it is closed.
+      //
+      // See FileBlockComponent for sample use.
+      //
+      // Relates to:
+      // - https://github.com/MixinNetwork/flutter-plugins/issues/2
+      // - https://github.com/MixinNetwork/flutter-plugins/issues/331
+      //
+      create: (_) => EditorDropManagerState(),
+      child: BlocProvider(
+        create: (context) => DocumentBloc(documentId: viewPB.id)
+          ..add(const DocumentEvent.initial()),
+        child: BlocConsumer<DocumentBloc, DocumentState>(
+          listenWhen: (previous, current) =>
+              previous.isDocumentEmpty != current.isDocumentEmpty,
+          listener: (_, state) {
+            if (state.isDocumentEmpty != null) {
+              onIsEmptyChanged?.call(state.isDocumentEmpty!);
+            }
+            if (state.error != null) {
+              Log.error('RowEditor error: ${state.error}');
+            }
+            if (state.editorState == null) {
+              Log.error('RowEditor unable to get editorState');
+            }
+          },
           builder: (context, state) {
             if (state.isLoading) {
-              return const Center(child: CircularProgressIndicator.adaptive());
+              return const Center(
+                child: CircularProgressIndicator.adaptive(),
+              );
             }
 
             final editorState = state.editorState;
             final error = state.error;
             if (error != null || editorState == null) {
               return Center(
-                child: AppFlowyErrorPage(
-                  error: error,
-                ),
+                child: AppFlowyErrorPage(error: error),
               );
             }
 
-            return BlocProvider<ViewInfoBloc>(
-              create: (context) => ViewInfoBloc(view: viewPB),
-              child: IntrinsicHeight(
-                child: Container(
-                  constraints: const BoxConstraints(minHeight: 300),
-                  child: AppFlowyEditorPage(
-                    shrinkWrap: true,
-                    autoFocus: false,
-                    editorState: editorState,
-                    styleCustomizer: EditorStyleCustomizer(
-                      context: context,
-                      padding: const EdgeInsets.only(left: 16, right: 54),
+            return Consumer<EditorDropManagerState>(
+              builder: (_, dropState, __) => BlocProvider<ViewInfoBloc>(
+                create: (context) => ViewInfoBloc(view: viewPB),
+                child: IntrinsicHeight(
+                  child: Container(
+                    constraints: const BoxConstraints(minHeight: 300),
+                    child: AppFlowyEditorPage(
+                      shrinkWrap: true,
+                      autoFocus: false,
+                      editorState: editorState,
+                      styleCustomizer: EditorStyleCustomizer(
+                        context: context,
+                        padding: const EdgeInsets.only(left: 16, right: 54),
+                      ),
+                      showParagraphPlaceholder: (editorState, node) =>
+                          editorState.document.isEmpty,
+                      placeholderText: (node) =>
+                          LocaleKeys.cardDetails_notesPlaceholder.tr(),
                     ),
-                    showParagraphPlaceholder: (editorState, node) =>
-                        editorState.document.isEmpty,
-                    placeholderText: (node) =>
-                        LocaleKeys.cardDetails_notesPlaceholder.tr(),
                   ),
                 ),
               ),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
index 128f253db0..3c07d6d1f2 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@@ -1,5 +1,8 @@
 import 'dart:ui' as ui;
 
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_configuration.dart';
@@ -27,8 +30,6 @@ import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:universal_platform/universal_platform.dart';