fix: keep keyboard appearance as same brightness as system theme (#264)

example/lib/main.dart

@@ -24,10 +24,7 @@ class MyApp extends StatelessWidget {
       supportedLocales: const [Locale('en', 'US')],
       debugShowCheckedModeBanner: false,
       home: const MyHomePage(title: 'AppFlowyEditor Example'),
-      theme: ThemeData(
+      theme: ThemeData.light(useMaterial3: true),
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
-        useMaterial3: true,
-      ),
     );
   }
 }

lib/src/editor/editor_component/service/ime/delta_input_impl.dart

@@ -3,3 +3,5 @@ export 'delta_input_on_delete_impl.dart';
 export 'delta_input_on_insert_impl.dart';
 export 'delta_input_on_non_text_update_impl.dart';
 export 'delta_input_on_replace_impl.dart';
+export 'non_delta_input_service.dart';
+export 'text_input_service.dart';

lib/src/editor/editor_component/service/ime/delta_input_service.dart

@@ -1,45 +1,9 @@
 import 'dart:math';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/editor/editor_component/service/ime/text_input_service.dart';
 import 'package:flutter/services.dart';
 
-abstract class TextInputService {
-  TextInputService({
-    required this.onInsert,
-    required this.onDelete,
-    required this.onReplace,
-    required this.onNonTextUpdate,
-    required this.onPerformAction,
-  });
-
-  Future<void> Function(TextEditingDeltaInsertion insertion) onInsert;
-  Future<void> Function(TextEditingDeltaDeletion deletion) onDelete;
-  Future<void> Function(TextEditingDeltaReplacement replacement) onReplace;
-  Future<void> Function(TextEditingDeltaNonTextUpdate nonTextUpdate)
-      onNonTextUpdate;
-  Future<void> Function(TextInputAction action) onPerformAction;
-
-  TextRange? get composingTextRange;
-  bool get attached;
-
-  void updateCaretPosition(Size size, Matrix4 transform, Rect rect);
-
-  /// Updates the [TextEditingValue] of the text currently being edited.
-  ///
-  /// Note that if there are IME-related requirements,
-  ///   please config `composing` value within [TextEditingValue]
-  void attach(TextEditingValue textEditingValue);
-
-  /// Applies insertion, deletion and replacement
-  ///   to the text currently being edited.
-  ///
-  /// For more information, please check [TextEditingDelta].
-  Future<void> apply(List<TextEditingDelta> deltas);
-
-  /// Closes the editing state of the text currently being edited.
-  void close();
-}
-
 class DeltaTextInputService extends TextInputService with DeltaTextInputClient {
   DeltaTextInputService({
     required super.onInsert,
@@ -82,17 +46,22 @@ class DeltaTextInputService extends TextInputService with DeltaTextInputClient {
   }
 
   @override
-  void attach(TextEditingValue textEditingValue) {
+  void attach(
+    TextEditingValue textEditingValue,
+    TextInputConfiguration configuration,
+  ) {
     if (_textInputConnection == null ||
         _textInputConnection!.attached == false) {
       _textInputConnection = TextInput.attach(
         this,
-        const TextInputConfiguration(
+        configuration,
-          enableDeltaModel: true,
+        // TextInputConfiguration(
-          inputType: TextInputType.multiline,
+        //   enableDeltaModel: true,
-          textCapitalization: TextCapitalization.sentences,
+        //   inputType: TextInputType.multiline,
-          inputAction: TextInputAction.newline,
+        //   textCapitalization: TextCapitalization.sentences,
-        ),
+        //   inputAction: TextInputAction.newline,
+        //   keyboardAppearance: Theme.of(context).brightness,
+        // ),
       );
     }
 

lib/src/editor/editor_component/service/ime/non_delta_input_service.dart

@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/ime/text_diff.dart';
+import 'package:appflowy_editor/src/editor/editor_component/service/ime/text_input_service.dart';
 import 'package:flutter/services.dart';
 
 class NonDeltaTextInputService extends TextInputService with TextInputClient {
@@ -54,7 +55,10 @@ class NonDeltaTextInputService extends TextInputService with TextInputClient {
   }
 
   @override
-  void attach(TextEditingValue textEditingValue) {
+  void attach(
+    TextEditingValue textEditingValue,
+    TextInputConfiguration configuration,
+  ) {
     final formattedValue = textEditingValue.format();
     if (currentTextEditingValue == formattedValue) {
       return;
@@ -64,12 +68,14 @@ class NonDeltaTextInputService extends TextInputService with TextInputClient {
         _textInputConnection!.attached == false) {
       _textInputConnection = TextInput.attach(
         this,
-        const TextInputConfiguration(
+        configuration,
-          enableDeltaModel: false,
+        // TextInputConfiguration(
-          inputType: TextInputType.multiline,
+        //   enableDeltaModel: false,
-          textCapitalization: TextCapitalization.sentences,
+        //   inputType: TextInputType.multiline,
-          inputAction: TextInputAction.newline,
+        //   textCapitalization: TextCapitalization.sentences,
-        ),
+        //   inputAction: TextInputAction.newline,
+        //   keyboardAppearance: Theme.of(context).brightness,
+        // ),
       );
     }
 

lib/src/editor/editor_component/service/ime/text_input_service.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+abstract class TextInputService {
+  TextInputService({
+    required this.onInsert,
+    required this.onDelete,
+    required this.onReplace,
+    required this.onNonTextUpdate,
+    required this.onPerformAction,
+  });
+
+  Future<void> Function(TextEditingDeltaInsertion insertion) onInsert;
+  Future<void> Function(TextEditingDeltaDeletion deletion) onDelete;
+  Future<void> Function(TextEditingDeltaReplacement replacement) onReplace;
+  Future<void> Function(TextEditingDeltaNonTextUpdate nonTextUpdate)
+      onNonTextUpdate;
+  Future<void> Function(TextInputAction action) onPerformAction;
+
+  TextRange? get composingTextRange;
+  bool get attached;
+
+  void updateCaretPosition(Size size, Matrix4 transform, Rect rect);
+
+  /// Updates the [TextEditingValue] of the text currently being edited.
+  ///
+  /// Note that if there are IME-related requirements,
+  /// please config `composing` value within [TextEditingValue]
+  ///
+  /// [BuildContext] is used to get current keyboard appearance(light or dark)
+  void attach(
+    TextEditingValue textEditingValue,
+    TextInputConfiguration configuration,
+  );
+
+  /// Applies insertion, deletion and replacement
+  ///   to the text currently being edited.
+  ///
+  /// For more information, please check [TextEditingDelta].
+  Future<void> apply(List<TextEditingDelta> deltas);
+
+  /// Closes the editing state of the text currently being edited.
+  void close();
+}

lib/src/editor/editor_component/service/keyboard_service_widget.dart

@@ -1,5 +1,4 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:appflowy_editor/src/editor/editor_component/service/ime/non_delta_input_service.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -198,7 +197,16 @@ class KeyboardServiceWidgetState extends State<KeyboardServiceWidget>
   void _attachTextInputService(Selection selection) {
     final textEditingValue = _getCurrentTextEditingValue(selection);
     if (textEditingValue != null) {
-      textInputService.attach(textEditingValue);
+      textInputService.attach(
+        textEditingValue,
+        TextInputConfiguration(
+          enableDeltaModel: false,
+          inputType: TextInputType.multiline,
+          textCapitalization: TextCapitalization.sentences,
+          inputAction: TextInputAction.newline,
+          keyboardAppearance: Theme.of(context).brightness,
+        ),
+      );
       // disable shortcuts when the IME active
       enableShortcuts = textEditingValue.composing == TextRange.empty;
     } else {

test/new/infra/testable_editor.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/editor/editor_component/service/ime/text_input_service.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -81,7 +82,7 @@ class TestableEditor {
         home: Scaffold(
           body: wrapper == null
               ? editor
-              : wrapper!(
+              : wrapper(
                   editor,
                 ),
         ),