Checkbox state rendering is handled by checkbox widget

fleather-editor · Dec 29, 2024 · b41905f · b41905f
1 parent ce001ea
commit b41905f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/packages/fleather/lib/src/widgets/controller.dart b/packages/fleather/lib/src/widgets/controller.dart
@@ -9,7 +9,9 @@ import '../../util.dart';
 import 'autoformats.dart';
 import 'history.dart';
 
-/// List of style keys which can be toggled for insertion
+/// @docImport 'checkbox.dart';
+
+// List of style keys which can be toggled for insertion
 List<String> _toggleableStyleKeys = [
   ParchmentAttribute.bold.key,
   ParchmentAttribute.italic.key,
@@ -34,7 +36,7 @@ class FleatherController extends ChangeNotifier {
 
   ParchmentDocument _document;
 
-  /// Doument managed by this controller.
+  /// Document managed by this controller.
   ParchmentDocument get document => _document;
 
   // A list of changes applied to this doc. The changes could be undone or redone.
@@ -206,7 +208,16 @@ class FleatherController extends ChangeNotifier {
     return true;
   }
 
-  void formatText(int index, int length, ParchmentAttribute attribute) {
+  /// Update format of [length] characters in the document starting at [index]
+  /// with the provided [attribute].
+  ///
+  /// if [notify] is `true`, the controller will notify widgets to update
+  /// accordingly; otherwise widgets will not update, this is useful when
+  /// we do not want a widget to trigger controller
+  /// notification (e.g.: [FleatherCheckbox] toggle should not cause scrolling
+  /// to cursor)
+  void formatText(int index, int length, ParchmentAttribute attribute,
+      {bool notify = true}) {
     final change = document.format(index, length, attribute);
     // _lastChangeSource = ChangeSource.local;
     const source = ChangeSource.local;
@@ -227,7 +238,7 @@ class FleatherController extends ChangeNotifier {
       _updateSelectionSilent(adjustedSelection, source: source);
     }
     _updateHistory();
-    notifyListeners();
+    if (notify) notifyListeners();
   }
 
   /// Formats current selection with [attribute].

diff --git a/packages/fleather/lib/src/widgets/editable_text_block.dart b/packages/fleather/lib/src/widgets/editable_text_block.dart
@@ -256,10 +256,7 @@ class EditableTextBlock extends StatelessWidget {
   void _toggle(LineNode node, bool checked) {
     final attr =
         checked ? ParchmentAttribute.checked : ParchmentAttribute.checked.unset;
-    controller.updateSelection(
-        TextSelection.collapsed(offset: node.documentOffset),
-        source: ChangeSource.local);
-    controller.formatText(node.documentOffset, 0, attr);
+    controller.formatText(node.documentOffset, 0, attr, notify: false);
   }
 }
 
@@ -350,7 +347,7 @@ class _BulletPoint extends StatelessWidget {
   }
 }
 
-class _CheckboxPoint extends StatelessWidget {
+class _CheckboxPoint extends StatefulWidget {
   const _CheckboxPoint({
     required this.value,
     required this.enabled,
@@ -361,14 +358,28 @@ class _CheckboxPoint extends StatelessWidget {
   final bool enabled;
   final ValueChanged<bool> onChanged;
 
+  @override
+  State<_CheckboxPoint> createState() => _CheckboxPointState();
+}
+
+class _CheckboxPointState extends State<_CheckboxPoint> {
+  late bool value = widget.value;
+
   @override
   Widget build(BuildContext context) {
     return Container(
       alignment: AlignmentDirectional.topEnd,
       padding: const EdgeInsetsDirectional.only(top: 2.0, end: 12.0),
       child: FleatherCheckbox(
         value: value,
-        onChanged: enabled ? (_) => onChanged(!value) : null,
+        onChanged: widget.enabled
+            ? (_) {
+                widget.onChanged(!widget.value);
+                setState(() {
+                  value = !value;
+                });
+              }
+            : null,
       ),
     );
   }

diff --git a/packages/fleather/test/widgets/editable_text_test.dart b/packages/fleather/test/widgets/editable_text_test.dart
@@ -95,10 +95,11 @@ void main() {
             Operation.insert('\n', {'block': 'cl', 'checked': true}));
       });
 
-      testWidgets('check list toggle update selection', (tester) async {
-        const textPreceedingCheckBox = 'some text\n';
+      testWidgets('check list toggle',
+          (tester) async {
+        const textPrecedingCheckBox = 'some text\n';
         final delta = Delta()
-          ..insert(textPreceedingCheckBox)
+          ..insert(textPrecedingCheckBox)
           ..insert('an item')
           ..insert('\n', {'block': 'cl'});
         final editor = EditorSandBox(
@@ -107,14 +108,15 @@ void main() {
         expect(find.byType(FleatherCheckbox), findsOneWidget);
         await editor.updateSelection(base: 0, extent: 0);
 
+        editor.controller.addListener(() {
+          fail('Controller should not notify when checkbox is toggled');
+        });
         await tester.tap(find.byType(FleatherCheckbox));
         await tester.pumpAndSettle(throttleDuration);
         expect(editor.document.toDelta().last,
             Operation.insert('\n', {'block': 'cl', 'checked': true}));
-        expect(
-            editor.controller.selection,
-            const TextSelection.collapsed(
-                offset: textPreceedingCheckBox.length));
+        expect(editor.controller.selection,
+            const TextSelection.collapsed(offset: 0));
       });
 
       testWidgets('bullet list', (tester) async {