feat: add support for context menu items to the editor

AppFlowy-IO · Aug 24, 2023 · fd7fecd · fd7fecd
1 parent f4db21c
commit fd7fecd
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/lib/appflowy_editor.dart b/lib/appflowy_editor.dart
@@ -23,6 +23,7 @@ export 'src/l10n/l10n.dart';
 export 'src/plugins/plugins.dart';
 export 'src/render/selection/selectable.dart';
 export 'src/render/toolbar/toolbar_item.dart';
+export 'src/service/context_menu/context_menu.dart';
 export 'src/service/internal_key_event_handlers/copy_paste_handler.dart';
 export 'src/service/shortcut_event/key_mapping.dart';
 export 'src/service/shortcut_event/keybinding.dart';
diff --git a/lib/src/editor/editor_component/service/editor.dart b/lib/src/editor/editor_component/service/editor.dart
@@ -1,5 +1,7 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/flutter/overlay.dart';
+import 'package:appflowy_editor/src/service/context_menu/built_in_context_menu_item.dart';
+import 'package:appflowy_editor/src/service/context_menu/context_menu.dart';
 import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
 import 'package:provider/provider.dart';
 
@@ -19,6 +21,7 @@ class AppFlowyEditor extends StatefulWidget {
     Map<String, BlockComponentBuilder>? blockComponentBuilders,
     List<CharacterShortcutEvent>? characterShortcutEvents,
     List<CommandShortcutEvent>? commandShortcutEvents,
+    List<List<ContextMenuItem>>? contextMenuItems,
     this.editable = true,
     this.autoFocus = false,
     this.focusedSelection,
@@ -33,7 +36,8 @@ class AppFlowyEditor extends StatefulWidget {
         characterShortcutEvents =
             characterShortcutEvents ?? standardCharacterShortcutEvents,
         commandShortcutEvents =
-            commandShortcutEvents ?? standardCommandShortcutEvents;
+            commandShortcutEvents ?? standardCommandShortcutEvents,
+        contextMenuItems = contextMenuItems ?? standardContextMenuItems;
 
   final EditorState editorState;
 
@@ -101,6 +105,13 @@ class AppFlowyEditor extends StatefulWidget {
   /// ```
   final List<CommandShortcutEvent> commandShortcutEvents;
 
+  /// The context menu items.
+  ///
+  /// They will be shown when the user right click on the editor.
+  ///
+  /// A divider will be added between each list.
+  final List<List<ContextMenuItem>> contextMenuItems;
+
   /// Provide a scrollController to control the scroll behavior
   ///   if you need to custom the scroll behavior.
   ///
@@ -225,6 +236,7 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
         key: editorState.service.selectionServiceKey,
         cursorColor: widget.editorStyle.cursorColor,
         selectionColor: widget.editorStyle.selectionColor,
+        contextMenuItems: widget.contextMenuItems,
         child: KeyboardServiceWidget(
           key: editorState.service.keyboardServiceKey,
           characterShortcutEvents: widget.characterShortcutEvents,

diff --git a/lib/src/editor/editor_component/service/selection/desktop_selection_service.dart b/lib/src/editor/editor_component/service/selection/desktop_selection_service.dart
@@ -1,25 +1,25 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/flutter/overlay.dart';
-import 'package:appflowy_editor/src/service/context_menu/built_in_context_menu_item.dart';
-import 'package:appflowy_editor/src/service/context_menu/context_menu.dart';
-import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
-
 import 'package:appflowy_editor/src/render/selection/cursor_widget.dart';
 import 'package:appflowy_editor/src/render/selection/selection_widget.dart';
+import 'package:appflowy_editor/src/service/context_menu/context_menu.dart';
 import 'package:appflowy_editor/src/service/selection/selection_gesture.dart';
+import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
 import 'package:provider/provider.dart';
 
 class DesktopSelectionServiceWidget extends StatefulWidget {
   const DesktopSelectionServiceWidget({
     super.key,
     this.cursorColor = const Color(0xFF00BCF0),
     this.selectionColor = const Color.fromARGB(53, 111, 201, 231),
+    required this.contextMenuItems,
     required this.child,
   });
 
   final Widget child;
   final Color cursorColor;
   final Color selectionColor;
+  final List<List<ContextMenuItem>> contextMenuItems;
 
   @override
   State<DesktopSelectionServiceWidget> createState() =>
@@ -542,7 +542,7 @@ class _DesktopSelectionServiceWidgetState
       builder: (context) => ContextMenu(
         position: offset,
         editorState: editorState,
-        items: builtInContextMenuItems,
+        items: widget.contextMenuItems,
         onPressed: () => _clearContextMenu(),
       ),
     );

diff --git a/lib/src/editor/editor_component/service/selection_service_widget.dart b/lib/src/editor/editor_component/service/selection_service_widget.dart
@@ -1,19 +1,22 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/selection/desktop_selection_service.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/selection/mobile_selection_service.dart';
+import 'package:appflowy_editor/src/service/context_menu/context_menu.dart';
 import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
 
 class SelectionServiceWidget extends StatefulWidget {
   const SelectionServiceWidget({
-    Key? key,
+    super.key,
     this.cursorColor = const Color(0xFF00BCF0),
     this.selectionColor = const Color.fromARGB(53, 111, 201, 231),
+    required this.contextMenuItems,
     required this.child,
-  }) : super(key: key);
+  });
 
   final Widget child;
   final Color cursorColor;
   final Color selectionColor;
+  final List<List<ContextMenuItem>> contextMenuItems;
 
   @override
   State<SelectionServiceWidget> createState() => _SelectionServiceWidgetState();
@@ -35,6 +38,7 @@ class _SelectionServiceWidgetState extends State<SelectionServiceWidget>
         key: forwardKey,
         cursorColor: widget.cursorColor,
         selectionColor: widget.selectionColor,
+        contextMenuItems: widget.contextMenuItems,
         child: widget.child,
       );
     }

diff --git a/lib/src/service/context_menu/built_in_context_menu_item.dart b/lib/src/service/context_menu/built_in_context_menu_item.dart
@@ -2,7 +2,7 @@ import 'package:appflowy_editor/src/service/context_menu/context_menu.dart';
 
 import '../internal_key_event_handlers/copy_paste_handler.dart';
 
-final builtInContextMenuItems = [
+final standardContextMenuItems = [
   [
     // cut
     ContextMenuItem(