add Emoji

example/lib/pages/home_page.dart

@@ -6,7 +6,6 @@ import 'package:file_picker/file_picker.dart';
 import 'package:filesystem_picker/filesystem_picker.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_quill/flutter_quill.dart' hide Text;
 import 'package:path/path.dart';
 import 'package:path_provider/path_provider.dart';
@@ -32,8 +31,8 @@ class _HomePageState extends State<HomePage> {
 
   Future<void> _loadFromAssets() async {
     try {
-      final result = await rootBundle.loadString('assets/sample_data.json');
+      // final result = await rootBundle.loadString('assets/sample_data.json');
-      final doc = Document.fromJson(jsonDecode(result));
+      final doc = Document.fromJson(jsonDecode('[{}]'));
       setState(() {
         _controller = QuillController(
             document: doc, selection: const TextSelection.collapsed(offset: 0));

example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -6,11 +6,15 @@ import FlutterMacOS
 import Foundation
 
 import device_info_plus_macos
+import emoji_picker_flutter
 import path_provider_macos
+import shared_preferences_macos
 import url_launcher_macos
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
+  EmojiPickerFlutterPlugin.register(with: registry.registrar(forPlugin: "EmojiPickerFlutterPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
   UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
 }

lib/src/widgets/toolbar.dart

@@ -13,6 +13,7 @@ import 'toolbar/arrow_indicated_button_list.dart';
 import 'toolbar/camera_button.dart';
 import 'toolbar/clear_format_button.dart';
 import 'toolbar/color_button.dart';
+import 'toolbar/emoji_button.dart';
 import 'toolbar/history_button.dart';
 import 'toolbar/image_button.dart';
 import 'toolbar/image_video_utils.dart';
@@ -107,6 +108,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
     bool showVideoButton = true,
     bool showCameraButton = true,
     bool showDirection = false,
+    // Emoji
+    bool showEmoji = true,
     OnImagePickCallback? onImagePickCallback,
     OnVideoPickCallback? onVideoPickCallback,
     MediaPickSettingSelector? mediaPickSettingSelector,
@@ -175,6 +178,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             undo: true,
             iconTheme: iconTheme,
           ),
+
         if (showRedo)
           HistoryButton(
             icon: Icons.redo_outlined,
@@ -183,6 +187,16 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             undo: false,
             iconTheme: iconTheme,
           ),
+        // Emoji
+        if (showEmoji)
+          EmojiButton(
+            icon: Icons.emoji_emotions,
+            iconSize: toolbarIconSize,
+            controller: controller,
+            iconTheme: iconTheme,
+            selectEmoji: (emoji, category) {
+            },
+          ),
         if (showFontSize)
           QuillFontSizeButton(
             iconTheme: iconTheme,

lib/src/widgets/toolbar/emoji_button.dart

@@ -0,0 +1,111 @@
+/*
+ * @Author: joahyan joahyan@163.com
+ * @Date: 2022-07-18 12:34:30
+ * @LastEditors: joahyan joahyan@163.com
+ * @LastEditTime: 2022-07-18 16:39:08
+ * @FilePath: \flutter-quill\lib\src\widgets\toolbar\emoji_button.dart
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
+
+import '../../../flutter_quill.dart' hide Text;
+
+class EmojiButton extends StatefulWidget {
+  const EmojiButton({
+    required this.icon,
+    required this.controller,
+    required this.selectEmoji,
+    this.iconSize = kDefaultIconSize,
+    this.iconTheme,
+    Key? key,
+    this.imageConfig,
+  }) : super(key: key);
+  final IconData icon;
+  final double iconSize;
+  final Function selectEmoji;
+  final QuillController controller;
+  final QuillIconTheme? iconTheme;
+  final Config? imageConfig;
+
+  @override
+  _EmojiButtonState createState() => _EmojiButtonState();
+}
+
+class _EmojiButtonState extends State<EmojiButton> {
+  Color? _iconColor;
+  late ThemeData theme;
+
+  // 默认配置
+  final _config = const Config(
+    columns: 10,
+    emojiSizeMax: 28,
+    bgColor: Color(0xffF2F2F2),
+    iconColor: Colors.grey,
+    iconColorSelected: Color(0xff333333),
+    indicatorColor: Color(0xff333333),
+    progressIndicatorColor: Color(0xff333333),
+    buttonMode: ButtonMode.CUPERTINO,
+    initCategory: Category.RECENT,
+  );
+
+  // emoji弹窗
+  void _showEmojiDialog() {
+    showDialog(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        contentPadding: EdgeInsets.zero,
+        content: SingleChildScrollView(
+          child: Container(
+            height: 400,
+            width: 500,
+            decoration: const BoxDecoration(
+              color: Colors.blue,
+              borderRadius: BorderRadius.all(Radius.circular(8)),
+            ),
+            child: Column(
+              children: [
+                Expanded(
+                  child: EmojiPicker(
+                    config: widget.imageConfig ?? _config,
+                    onEmojiSelected: (category, emoji) {
+                      _insertEmoji(emoji);
+                      Navigator.pop(context);
+                    },
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  // 选择emoji插入至markdown
+  void _insertEmoji(Emoji emoji) {
+    final baseOffset = widget.controller.selection.baseOffset;
+    final extentOffset = widget.controller.selection.extentOffset;
+    final replaceLen = extentOffset - baseOffset;
+    final selection = widget.controller.selection.copyWith(
+      baseOffset: baseOffset + emoji.emoji.length,
+      extentOffset: baseOffset + emoji.emoji.length,
+    );
+
+    widget.controller
+        .replaceText(baseOffset, replaceLen, emoji.emoji, selection);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return QuillIconButton(
+      icon: Icon(widget.icon, size: widget.iconSize),
+      onPressed: () {
+        _showEmojiDialog();
+        print('aa');
+      },
+    );
+  }
+}

pubspec.yaml

@@ -20,7 +20,7 @@ dependencies:
   quiver: ^3.1.0
   string_validator: ^0.3.0
   tuple: ^2.0.0
-  url_launcher: ^6.1.2
+  url_launcher: ^6.1.2 
   pedantic: ^1.11.1
   video_player: ^2.4.2
   characters: ^1.2.0
@@ -30,6 +30,7 @@ dependencies:
   gallery_saver: ^2.3.2
   device_info_plus: ^3.2.3
   platform: ^3.1.0
+  emoji_picker_flutter: ^1.3.0
 
 dev_dependencies:
   flutter_test: