[SuperReader] - Add support for rendering tasks (Resolves #2354) (#2538)

Author: angelosilvestre

super_editor/example/lib/demos/demo_animated_task_height.dart

@@ -130,7 +130,7 @@ class _AnimatedTaskComponentState extends State<_AnimatedTaskComponent>
               child: Checkbox(
                 value: widget.viewModel.isComplete,
                 onChanged: (newValue) {
-                  widget.viewModel.setComplete(newValue!);
+                  widget.viewModel.setComplete?.call(newValue!);
                 },
               ),
             ),

super_editor/example/lib/demos/super_reader/demo_super_reader.dart

@@ -134,6 +134,11 @@ class _SuperReaderDemoState extends State<SuperReaderDemo> {
         selection: _selection,
         overlayController: _overlayController,
         selectionLayerLinks: _selectionLayerLinks,
+        stylesheet: defaultStylesheet.copyWith(
+          addRulesAfter: [
+            taskStyles,
+          ],
+        ),
         androidToolbarBuilder: (_) => AndroidTextEditingFloatingToolbar(
           onCopyPressed: _copy,
           onSelectAllPressed: _selectAll,

super_editor/example/lib/demos/super_reader/example_document.dart

@@ -86,6 +86,38 @@ Document createInitialDocument() {
         id: Editor.createNodeId(),
         text: AttributedText('Use AttributedText to quickly and easily apply metadata spans to a string.'),
       ),
+      ParagraphNode(
+        id: Editor.createNodeId(),
+        text: AttributedText('Quickstart 🚀'),
+        metadata: {
+          'blockType': header2Attribution,
+        },
+      ),
+      ParagraphNode(
+        id: Editor.createNodeId(),
+        text: AttributedText('To get started with your own editing experience, take the following steps:'),
+      ),
+      TaskNode(
+        id: Editor.createNodeId(),
+        isComplete: true,
+        text: AttributedText(
+          'Create and configure your document, for example, by creating a new MutableDocument.',
+        ),
+      ),
+      TaskNode(
+        id: Editor.createNodeId(),
+        isComplete: false,
+        text: AttributedText(
+          "If you want programmatic control over the user's selection and styles, create a DocumentComposer.",
+        ),
+      ),
+      TaskNode(
+        id: Editor.createNodeId(),
+        isComplete: false,
+        text: AttributedText(
+          "Build a SuperEditor widget in your widget tree, configured with your Document and (optionally) your DocumentComposer.",
+        ),
+      ),
       ParagraphNode(
         id: Editor.createNodeId(),
         text: AttributedText(

super_editor/example_perf/lib/demos/rebuild_demo.dart

@@ -136,7 +136,7 @@ class _AnimatedTaskComponentState extends State<_AnimatedTaskComponent>
               child: Checkbox(
                 value: widget.viewModel.isComplete,
                 onChanged: (newValue) {
-                  widget.viewModel.setComplete(newValue!);
+                  widget.viewModel.setComplete?.call(newValue!);
                 },
               ),
             ),

super_editor/lib/src/default_editor/tasks.dart

@@ -245,7 +245,7 @@ class TaskComponentViewModel extends SingleColumnLayoutComponentViewModel with T
   TextBlockIndentCalculator indentCalculator;
 
   bool isComplete;
-  void Function(bool) setComplete;
+  void Function(bool)? setComplete;
 
   @override
   AttributedText text;
@@ -398,9 +398,11 @@ class _TaskComponentState extends State<TaskComponent> with ProxyDocumentCompone
             child: Checkbox(
               visualDensity: Theme.of(context).visualDensity,
               value: widget.viewModel.isComplete,
-              onChanged: (newValue) {
-                widget.viewModel.setComplete(newValue!);
-              },
+              onChanged: widget.viewModel.setComplete != null
+                  ? (newValue) {
+                      widget.viewModel.setComplete!(newValue!);
+                    }
+                  : null,
             ),
           ),
           Expanded(

super_editor/lib/src/super_reader/super_reader.dart

@@ -20,6 +20,7 @@ import 'package:super_editor/src/default_editor/layout_single_column/_styler_shy
 import 'package:super_editor/src/default_editor/layout_single_column/_styler_user_selection.dart';
 import 'package:super_editor/src/default_editor/list_items.dart';
 import 'package:super_editor/src/default_editor/paragraph.dart';
+import 'package:super_editor/src/default_editor/tasks.dart';
 import 'package:super_editor/src/default_editor/text.dart';
 import 'package:super_editor/src/default_editor/unknown_component.dart';
 import 'package:super_editor/src/infrastructure/_logging.dart';
@@ -34,6 +35,7 @@ import 'package:super_editor/src/infrastructure/links.dart';
 import 'package:super_editor/src/infrastructure/platforms/ios/ios_document_controls.dart';
 import 'package:super_editor/src/infrastructure/platforms/ios/toolbar.dart';
 import 'package:super_editor/src/infrastructure/platforms/platform.dart';
+import 'package:super_editor/src/super_reader/tasks.dart';
 
 import '../infrastructure/platforms/mobile_documents.dart';
 import '../infrastructure/text_input.dart';
@@ -742,6 +744,7 @@ final readOnlyDefaultComponentBuilders = <ComponentBuilder>[
   const ListItemComponentBuilder(),
   const ImageComponentBuilder(),
   const HorizontalRuleComponentBuilder(),
+  const ReadOnlyTaskComponentBuilder(),
 ];
 
 /// Stylesheet applied to all [SuperReader]s by default.

super_editor/lib/src/super_reader/tasks.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:super_editor/src/core/document.dart';
+import 'package:super_editor/src/default_editor/layout_single_column/layout_single_column.dart';
+import 'package:super_editor/src/default_editor/tasks.dart';
+import 'package:super_editor/src/default_editor/text_tools.dart';
+
+/// Builds [TaskComponentViewModel]s and [TaskComponent]s for every
+/// [TaskNode] in a document.
+///
+/// A [TaskComponent] built by this builder is read-only, meaning that
+/// the user cannot toggle it.
+class ReadOnlyTaskComponentBuilder implements ComponentBuilder {
+  const ReadOnlyTaskComponentBuilder();
+
+  @override
+  TaskComponentViewModel? createViewModel(Document document, DocumentNode node) {
+    if (node is! TaskNode) {
+      return null;
+    }
+
+    final textDirection = getParagraphDirection(node.text.toPlainText());
+
+    return TaskComponentViewModel(
+      nodeId: node.id,
+      padding: EdgeInsets.zero,
+      indent: node.indent,
+      isComplete: node.isComplete,
+      setComplete: null,
+      text: node.text,
+      textDirection: textDirection,
+      textAlignment: textDirection == TextDirection.ltr ? TextAlign.left : TextAlign.right,
+      textStyleBuilder: noStyleBuilder,
+      selectionColor: const Color(0x00000000),
+    );
+  }
+
+  @override
+  Widget? createComponent(
+      SingleColumnDocumentComponentContext componentContext, SingleColumnLayoutComponentViewModel componentViewModel) {
+    if (componentViewModel is! TaskComponentViewModel) {
+      return null;
+    }
+
+    return TaskComponent(
+      key: componentContext.componentKey,
+      viewModel: componentViewModel,
+    );
+  }
+}

super_editor/test/super_reader/components/task_test.dart

@@ -0,0 +1,53 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter_test_runners/flutter_test_runners.dart';
+import 'package:super_editor/src/test/super_editor_test/tasks_test_tools.dart';
+import 'package:super_editor/super_editor.dart';
+
+import '../reader_test_tools.dart';
+
+void main() {
+  group('SuperReader tasks >', () {
+    testWidgetsOnAllPlatforms("are displayed in a read-only document", (tester) async {
+      await tester //
+          .createDocument()
+          .withCustomContent(
+            MutableDocument(
+              nodes: [
+                TaskNode(id: "1", text: AttributedText(), isComplete: false),
+                TaskNode(id: "2", text: AttributedText(), isComplete: true),
+              ],
+            ),
+          )
+          .pump();
+
+      // Ensure the default task component is rendered.
+      expect(find.byType(TaskComponent), findsNWidgets(2));
+    });
+
+    testWidgetsOnAllPlatforms("cannot be toggled by the user", (tester) async {
+      await tester //
+          .createDocument()
+          .withCustomContent(
+            MutableDocument(
+              nodes: [
+                TaskNode(id: '1', text: AttributedText(), isComplete: false),
+                TaskNode(id: '2', text: AttributedText(), isComplete: true),
+              ],
+            ),
+          )
+          .pump();
+
+      // Tap on the first task's checkbox.
+      await tester.tapOnCheckbox('1');
+
+      // Ensure that the task's checkbox didn't change from unchecked to checked.
+      expect(TaskInspector.isChecked('1'), isFalse);
+
+      // Tap on the second task's checkbox.
+      await tester.tapOnCheckbox('2');
+
+      // Ensure that the task's checkbox didn't change from checked to unchecked.
+      expect(TaskInspector.isChecked('1'), isFalse);
+    });
+  });
+}

super_editor/test/super_reader/reader_test_tools.dart

@@ -287,7 +287,7 @@ class TestDocumentConfigurator {
             stylesheet: _stylesheet,
             componentBuilders: [
               ..._addedComponents,
-              ...(_componentBuilders ?? defaultComponentBuilders),
+              ...(_componentBuilders ?? readOnlyDefaultComponentBuilders),
             ],
             scrollController: _scrollController,
             androidToolbarBuilder: _androidToolbarBuilder,