Add QuillFocusNode with support for keyboard enable/disable while preserving focus

Author: ppamorim

example/lib/main.dart

@@ -66,14 +66,21 @@ class _HomePageState extends State<HomePage> {
       ),
     ));
   }();
-  final FocusNode _editorFocusNode = FocusNode();
+  final QuillFocusNode _editorFocusNode = QuillFocusNode();
   final ScrollController _editorScrollController = ScrollController();
 
+  late final ValueNotifier<bool> _editorFocusNodeEnabled =
+      ValueNotifier(_editorFocusNode.keyboardEnabled);
+
   @override
   void initState() {
     super.initState();
     // Load document
     _controller.document = Document.fromJson(kQuillDefaultSample);
+    // Add listener to update the editor focus node enabled state.
+    _editorFocusNodeEnabled.addListener(() {
+      _editorFocusNode.keyboardEnabled = _editorFocusNodeEnabled.value;
+    });
   }
 
   @override
@@ -92,6 +99,38 @@ class _HomePageState extends State<HomePage> {
               debugPrint(jsonEncode(_controller.document.toDelta().toJson()));
             },
           ),
+          ValueListenableBuilder<bool>(
+            valueListenable: _editorFocusNodeEnabled,
+            builder: (context, hasFocus, child) {
+              final isDark = Theme.of(context).brightness == Brightness.dark;
+              final bool enabled = _editorFocusNodeEnabled.value;
+              final Color backgroundColor = enabled
+                  ? (isDark ? Colors.white : Colors.black)
+                  : Colors.transparent;
+              final Color iconColor = enabled
+                  ? (isDark ? Colors.black : Colors.white)
+                  : (isDark ? Colors.white : Colors.black);
+
+              return IconButton(
+                icon: Container(
+                  decoration: BoxDecoration(
+                    color: backgroundColor,
+                    shape: BoxShape.circle,
+                  ),
+                  padding: const EdgeInsets.all(6),
+                  child: Icon(
+                    Icons.edit,
+                    color: iconColor,
+                  ),
+                ),
+                tooltip: 'Toggle edit mode',
+                onPressed: () {
+                  _editorFocusNodeEnabled.value =
+                      !_editorFocusNodeEnabled.value;
+                },
+              );
+            },
+          ),
         ],
       ),
       body: SafeArea(

lib/flutter_quill.dart

@@ -5,6 +5,7 @@ export 'src/common/structs/image_url.dart';
 export 'src/common/structs/offset_value.dart';
 export 'src/common/structs/vertical_spacing.dart';
 export 'src/common/utils/embeds.dart';
+export 'src/common/utils/quill_node_focus.dart';
 export 'src/controller/quill_controller.dart';
 export 'src/document/attribute.dart';
 export 'src/document/document.dart';

lib/src/common/utils/quill_node_focus.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/widgets.dart';
+
+class QuillFocusNode extends FocusNode {
+
+  QuillFocusNode({
+    super.debugLabel,
+    @Deprecated(
+      'Use onKeyEvent instead. '
+      'This feature was deprecated after v3.18.0-2.0.pre.',
+    )
+    super.onKey,
+    super.onKeyEvent,
+    super.skipTraversal,
+    super.canRequestFocus,
+    super.descendantsAreFocusable,
+    super.descendantsAreTraversable,
+    bool keyboardEnabled = true,
+  }) : _keyboardEnabled = keyboardEnabled;
+
+  bool _keyboardEnabled = true;
+
+  bool get keyboardEnabled => _keyboardEnabled;
+
+  set keyboardEnabled(bool value) {
+    if (_keyboardEnabled != value) {
+      _keyboardEnabled = value;
+      // Required otherwise the keyboard doesn't close/open automatically.
+      unfocus();
+      // Required otherwise requestFocus() does nothing and the previously caret
+      // position is not shown.
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        requestFocus();
+      });
+    }
+  }
+}

lib/src/editor/raw_editor/raw_editor_state_text_input_client_mixin.dart

@@ -7,6 +7,7 @@ import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:meta/meta.dart';
 
+import '../../../flutter_quill.dart';
 import '../../delta/delta_diff.dart';
 import '../../document/document.dart';
 import '../editor.dart';
@@ -112,7 +113,19 @@ mixin RawEditorStateTextInputClientMixin on EditorState
       }
       _textInputConnection!.setEditingState(_lastKnownRemoteTextEditingValue!);
     }
-    _textInputConnection!.show();
+    // If the keyboard is disabled, only request focus for the editor's focus 
+    // node and do not open or show the software keyboard.
+    if (_keyboardEnabled) {
+      _textInputConnection!.show();
+    }
+  }
+
+  bool get _keyboardEnabled {
+    if (widget.config.focusNode is QuillFocusNode) {
+      final focusNode = widget.config.focusNode as QuillFocusNode;
+      return focusNode.keyboardEnabled;
+    }
+    return true;
   }
 
   void _updateComposingRectIfNeeded() {