Add support for textEditingController and improve insertion and delet…

…ion of emoji in TextField (#88)

README.md

@@ -28,12 +28,12 @@ Yet another Emoji Picker for Flutter 🤩
 ```dart
 EmojiPicker(
     onEmojiSelected: (category, emoji) {
-        // Do something when emoji is tapped
+        // Do something when emoji is tapped (optional)
     },
     onBackspacePressed: () {
-        // Backspace-Button tapped logic
-        // Remove this line to also remove the button in the UI
+        // Do something when the user taps the backspace button (optional)
     },
+    textEditingController: textEditionController, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
     config: Config(
         columns: 7,
         emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
@@ -138,7 +138,7 @@ final newRecentEmojis = await EmojiPickerUtils().addEmojiToRecentlyUsed(key: key
 ```
 
 ## Feel free to contribute to this package!! 🙇‍♂️
-Always happy if anyone wants to help to improve this package !
+Always happy if anyone wants to help to improve this package!
 
 ## If you need any features 
 Please open an issue so that we can discuss your feature request 🙏

example/lib/main.dart

@@ -18,17 +18,17 @@ class _MyAppState extends State<MyApp> {
   bool emojiShowing = false;
 
   _onEmojiSelected(Emoji emoji) {
-    _controller
-      ..text += emoji.emoji
-      ..selection = TextSelection.fromPosition(
-          TextPosition(offset: _controller.text.length));
+    print('_onEmojiSelected: ${emoji.emoji}');
   }
 
   _onBackspacePressed() {
-    _controller
-      ..text = _controller.text.characters.skipLast(1).toString()
-      ..selection = TextSelection.fromPosition(
-          TextPosition(offset: _controller.text.length));
+    print('_onBackspacePressed');
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
   }
 
   @override
@@ -101,6 +101,7 @@ class _MyAppState extends State<MyApp> {
               child: SizedBox(
                 height: 250,
                 child: EmojiPicker(
+                    textEditingController: _controller,
                     onEmojiSelected: (Category category, Emoji emoji) {
                       _onEmojiSelected(emoji);
                     },

example/pubspec.lock

@@ -2,7 +2,7 @@
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
   characters:
-    dependency: "direct main"
+    dependency: transitive
     description:
       name: characters
       url: "https://pub.dartlang.org"
@@ -122,14 +122,28 @@ packages:
       name: shared_preferences
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.6"
+    version: "2.0.15"
+  shared_preferences_android:
+    dependency: transitive
+    description:
+      name: shared_preferences_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.12"
+  shared_preferences_ios:
+    dependency: transitive
+    description:
+      name: shared_preferences_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
   shared_preferences_linux:
     dependency: transitive
     description:
       name: shared_preferences_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.1"
   shared_preferences_macos:
     dependency: transitive
     description:
@@ -157,7 +171,7 @@ packages:
       name: shared_preferences_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -185,5 +199,5 @@ packages:
     source: hosted
     version: "0.2.0"
 sdks:
-  dart: ">=2.17.0-0 <3.0.0"
-  flutter: ">=1.20.0"
+  dart: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"

example/pubspec.yaml

@@ -3,12 +3,12 @@ description: Demonstrates how to use the emoji_picker_flutter plugin.
 publish_to: "none"
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  characters: ^1.1.0
 
   emoji_picker_flutter:
     path: ../

lib/src/emoji_picker.dart

@@ -98,7 +98,8 @@ class EmojiPicker extends StatefulWidget {
   /// EmojiPicker for flutter
   const EmojiPicker({
     Key? key,
-    required this.onEmojiSelected,
+    this.textEditingController,
+    this.onEmojiSelected,
     this.onBackspacePressed,
     this.config = const Config(),
     this.customWidget,
@@ -107,8 +108,13 @@ class EmojiPicker extends StatefulWidget {
   /// Custom widget
   final EmojiViewBuilder? customWidget;
 
+  /// If you provide the [TextEditingController] that is linked to a
+  /// [TextField] this widget handles inserting and deleting for you
+  /// automatically.
+  final TextEditingController? textEditingController;
+
   /// The function called when the emoji is selected
-  final OnEmojiSelected onEmojiSelected;
+  final OnEmojiSelected? onEmojiSelected;
 
   /// The function called when backspace button is pressed
   final OnBackspacePressed? onBackspacePressed;
@@ -183,7 +189,9 @@ class EmojiPickerState extends State<EmojiPicker> {
     var state = EmojiViewState(
       _categoryEmoji,
       _getOnEmojiListener(),
-      widget.onBackspacePressed,
+      widget.onBackspacePressed == null && widget.textEditingController == null
+          ? null
+          : _onBackspacePressed,
     );
 
     // Build
@@ -192,6 +200,30 @@ class EmojiPickerState extends State<EmojiPicker> {
         : widget.customWidget!(widget.config, state);
   }
 
+  void _onBackspacePressed() {
+    if (widget.textEditingController != null) {
+      final controller = widget.textEditingController!;
+
+      final selection = controller.value.selection;
+      final text = controller.value.text;
+      final cursorPosition = controller.selection.base.offset;
+
+      if (cursorPosition < 0) {
+        widget.onBackspacePressed?.call();
+        return;
+      }
+
+      final newTextBeforeCursor =
+          selection.textBefore(text).characters.skipLast(1).toString();
+      controller
+        ..text = newTextBeforeCursor + selection.textAfter(text)
+        ..selection = TextSelection.fromPosition(
+            TextPosition(offset: newTextBeforeCursor.length));
+    }
+
+    widget.onBackspacePressed?.call();
+  }
+
   // Add recent emoji handling to tap listener
   OnEmojiSelected _getOnEmojiListener() {
     return (category, emoji) {
@@ -207,7 +239,32 @@ class EmojiPickerState extends State<EmojiPicker> {
                     })
                 });
       }
-      widget.onEmojiSelected(category, emoji);
+
+      if (widget.textEditingController != null) {
+        // based on https://stackoverflow.com/a/60058972/10975692
+        final controller = widget.textEditingController!;
+        final text = controller.text;
+        final selection = controller.selection;
+        final cursorPosition = controller.selection.base.offset;
+
+        if (cursorPosition < 0) {
+          controller.text += emoji.emoji;
+          widget.onEmojiSelected?.call(category, emoji);
+          return;
+        }
+
+        final newText =
+            text.replaceRange(selection.start, selection.end, emoji.emoji);
+        final emojiLength = emoji.emoji.length;
+        controller
+          ..text = newText
+          ..selection = selection.copyWith(
+            baseOffset: selection.start + emojiLength,
+            extentOffset: selection.start + emojiLength,
+          );
+      }
+
+      widget.onEmojiSelected?.call(category, emoji);
     };
   }
 

pubspec.lock

@@ -393,21 +393,21 @@ packages:
       name: test
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.21.1"
+    version: "1.21.4"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.12"
   test_core:
     dependency: transitive
     description:
       name: test_core
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.13"
+    version: "0.4.16"
   typed_data:
     dependency: transitive
     description:
@@ -472,5 +472,5 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=2.17.0-0 <3.0.0"
-  flutter: ">=2.8.0"
+  dart: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"

pubspec.yaml

@@ -4,16 +4,16 @@ version: 1.3.0
 homepage: https://github.com/Fintasys/emoji_picker_flutter
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
-  flutter: ">=2.0.1"
+  sdk: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  shared_preferences: ^2.0.6
+  shared_preferences: ^2.0.15
 
 dev_dependencies:
-  test: ^1.17.12
+  test: ^1.21.4
 
 flutter:
   plugin: