From 0a5c91258418a3b4aeab25b603240dd5c1eee34d Mon Sep 17 00:00:00 2001 From: Fabian Daugs Date: Sat, 22 Jul 2023 17:05:37 +0200 Subject: [PATCH] Expose ContextMenuBuilder --- README.md | 22 ++++++++++++++++++++++ lib/src/widgets/editor.dart | 10 +++++++--- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 715cf7a4..eb018fda 100644 --- a/README.md +++ b/README.md @@ -338,6 +338,28 @@ And voila, we have a custom widget inside of the rich text editor! > 1. For more info and a video example, see the [PR of this feature](https://github.com/singerdmx/flutter-quill/pull/877) > 2. For more details, check out [this YouTube video](https://youtu.be/pI5p5j7cfHc) +### Custom Context Menu +You can customize the context menu by providing a `contextMenuBuilder` to the `QuillEditor` widget. If you want to keep the default ContextMenueItems, you can use `state.defaultContextMenuItems` and add your own items to it. + +```dart +contextMenuBuilder: (BuildContext context, RawEditorState state) { + return TextFieldTapRegion( + child: AdaptiveTextSelectionToolbar.buttonItems( + buttonItems: [ + ...state.contextMenuButtonItems, + ContextMenuButtonItem( + label: 'Custom Context Menu Action', + onPressed: () { + print(_controller?.getPlainText()); // Print the selected text, by accessing the QuillController + }, + ), + ], + anchors: state.contextMenuAnchors, + ), + ); +} +``` + ### Translation The package offers translations for the quill toolbar and editor, it will follow the system locale unless you set your own locale with: diff --git a/lib/src/widgets/editor.dart b/lib/src/widgets/editor.dart index d757b813..1aa65f9d 100644 --- a/lib/src/widgets/editor.dart +++ b/lib/src/widgets/editor.dart @@ -1,5 +1,4 @@ import 'dart:math' as math; - // ignore: unnecessary_import import 'dart:typed_data'; @@ -191,6 +190,7 @@ class QuillEditor extends StatefulWidget { this.customLinkPrefixes = const [], this.dialogTheme, this.contentInsertionConfiguration, + this.contextMenuBuilder, Key? key, }) : super(key: key); @@ -438,6 +438,9 @@ class QuillEditor extends StatefulWidget { /// See [https://api.flutter.dev/flutter/widgets/EditableText/contentInsertionConfiguration.html] final ContentInsertionConfiguration? contentInsertionConfiguration; + /// Builds the text selection toolbar when requested by the user. + final Widget Function(BuildContext, RawEditorState)? contextMenuBuilder; + @override QuillEditorState createState() => QuillEditorState(); } @@ -503,8 +506,9 @@ class QuillEditorState extends State readOnly: widget.readOnly, placeholder: widget.placeholder, onLaunchUrl: widget.onLaunchUrl, - contextMenuBuilder: - showSelectionToolbar ? RawEditor.defaultContextMenuBuilder : null, + contextMenuBuilder: showSelectionToolbar + ? widget.contextMenuBuilder ?? RawEditor.defaultContextMenuBuilder + : null, showSelectionHandles: isMobile(theme.platform), showCursor: widget.showCursor, cursorStyle: CursorStyle(