Undo/Redo (with snapshots + one-way commands)

super_editor/clones/quill/lib/app.dart

@@ -122,9 +122,9 @@ This is a code block.
 /// current block. This is especially important for a code block, in which pressing
 /// Enter inserts a newline inside the code block - it doesn't insert a new paragraph
 /// below the code block.
-class _AlwaysTrailingParagraphReaction implements EditReaction {
+class _AlwaysTrailingParagraphReaction extends EditReaction {
   @override
-  void react(EditContext editorContext, RequestDispatcher requestDispatcher, List<EditEvent> changeList) {
+  void modifyContent(EditContext editorContext, RequestDispatcher requestDispatcher, List<EditEvent> changeList) {
     final document = editorContext.find<MutableDocument>(Editor.documentKey);
     final lastNode = document.nodes.lastOrNull;
 

super_editor/clones/quill/lib/editor/editor.dart

@@ -126,7 +126,7 @@ class ClearSelectedStylesRequest implements EditRequest {
   const ClearSelectedStylesRequest();
 }
 
-class ClearSelectedStylesCommand implements EditCommand {
+class ClearSelectedStylesCommand extends EditCommand {
   const ClearSelectedStylesCommand();
 
   @override
@@ -181,7 +181,7 @@ class ClearTextAttributionsRequest implements EditRequest {
   int get hashCode => documentRange.hashCode;
 }
 
-class ClearTextAttributionsCommand implements EditCommand {
+class ClearTextAttributionsCommand extends EditCommand {
   const ClearTextAttributionsCommand(this.documentRange);
 
   final DocumentRange documentRange;
@@ -288,7 +288,7 @@ class ToggleInlineFormatRequest implements EditRequest {
   int get hashCode => inlineFormat.hashCode;
 }
 
-class ToggleInlineFormatCommand implements EditCommand {
+class ToggleInlineFormatCommand extends EditCommand {
   const ToggleInlineFormatCommand(this.inlineFormat);
 
   final Attribution inlineFormat;

super_editor/clones/quill/lib/editor/toolbar.dart

@@ -185,7 +185,7 @@ class _FormattingToolbarState extends State<FormattingToolbar> {
     ]);
 
     // Clear the field and hide the URL bar
-    _urlController!.clear();
+    _urlController!.clearTextAndSelection();
     _urlFocusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild);
     _linkPopoverController.close();
     setState(() {});
@@ -220,7 +220,7 @@ class _FormattingToolbarState extends State<FormattingToolbar> {
     }
 
     // Clear the field and hide the URL bar
-    _imageController!.clear();
+    _imageController!.clearTextAndSelection();
     _imageFocusNode.unfocus(disposition: UnfocusDisposition.previouslyFocusedChild);
     _imagePopoverController.close();
     setState(() {});
@@ -535,7 +535,7 @@ class _FormattingToolbarState extends State<FormattingToolbar> {
               onPressed: () {
                 setState(() {
                   _urlFocusNode.unfocus();
-                  _urlController!.clear();
+                  _urlController!.clearTextAndSelection();
                 });
               },
             ),
@@ -605,7 +605,7 @@ class _FormattingToolbarState extends State<FormattingToolbar> {
               onPressed: () {
                 setState(() {
                   _imageFocusNode.unfocus();
-                  _imageController!.clear();
+                  _imageController!.clearTextAndSelection();
                 });
               },
             ),

super_editor/example/lib/demos/in_the_lab/feature_action_tags.dart

@@ -298,7 +298,7 @@ class ConvertSelectedTextNodeRequest implements EditRequest {
   int get hashCode => newType.hashCode;
 }
 
-class ConvertSelectedTextNodeCommand implements EditCommand {
+class ConvertSelectedTextNodeCommand extends EditCommand {
   ConvertSelectedTextNodeCommand(this.newType);
 
   final TextNodeType newType;

super_editor/example/lib/main_super_editor.dart

@@ -1,5 +1,4 @@
 import 'package:example/demos/example_editor/_example_document.dart';
-import 'package:example/demos/example_editor/example_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -31,7 +30,7 @@ void main() {
   runApp(
     MaterialApp(
       home: Scaffold(
-        body: ExampleEditor(),
+        body: _Demo(),
       ),
       supportedLocales: const [
         Locale('en', ''),
@@ -48,8 +47,164 @@ void main() {
   );
 }
 
+class _Demo extends StatefulWidget {
+  const _Demo();
+
+  @override
+  State<_Demo> createState() => _DemoState();
+}
+
+class _DemoState extends State<_Demo> {
+  late MutableDocument _document;
+  late MutableDocumentComposer _composer;
+  late Editor _docEditor;
+
+  @override
+  void initState() {
+    super.initState();
+    _document = createInitialDocument();
+    _composer = MutableDocumentComposer();
+    _docEditor = createDefaultDocumentEditor(document: _document, composer: _composer);
+  }
+
+  @override
+  void dispose() {
+    _composer.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: _StandardEditor(
+            document: _document,
+            composer: _composer,
+            editor: _docEditor,
+          ),
+        ),
+        _buildToolbar(),
+      ],
+    );
+  }
+
+  Widget _buildToolbar() {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _EditorHistoryPanel(editor: _docEditor),
+        Container(
+          width: 24,
+          height: double.infinity,
+          color: const Color(0xFF2F2F2F),
+          child: Column(),
+        ),
+      ],
+    );
+  }
+}
+
+class _EditorHistoryPanel extends StatefulWidget {
+  const _EditorHistoryPanel({
+    required this.editor,
+  });
+
+  final Editor editor;
+
+  @override
+  State<_EditorHistoryPanel> createState() => _EditorHistoryPanelState();
+}
+
+class _EditorHistoryPanelState extends State<_EditorHistoryPanel> {
+  final _scrollController = ScrollController();
+  late EditListener _editListener;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _editListener = FunctionalEditListener(_onEditorChange);
+    widget.editor.addListener(_editListener);
+  }
+
+  @override
+  void didUpdateWidget(_EditorHistoryPanel oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.editor != oldWidget.editor) {
+      oldWidget.editor.removeListener(_editListener);
+      widget.editor.addListener(_editListener);
+    }
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    widget.editor.removeListener(_editListener);
+    super.dispose();
+  }
+
+  void _onEditorChange(changes) {
+    setState(() {
+      // Build the latest list of changes.
+    });
+
+    // Always scroll to bottom of transaction list.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _scrollController.position.jumpTo(_scrollController.position.maxScrollExtent);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      data: ThemeData(
+        brightness: Brightness.dark,
+      ),
+      child: Container(
+        width: 300,
+        height: double.infinity,
+        color: const Color(0xFF333333),
+        child: SingleChildScrollView(
+          controller: _scrollController,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 24.0),
+            child: Column(
+              children: [
+                for (final history in widget.editor.history)
+                  ListTile(
+                    title: Text("${history.changes.length} changes"),
+                    titleTextStyle: TextStyle(
+                      fontSize: 16,
+                    ),
+                    subtitle: Text("${history.changes.map((event) => event.describe()).join("\n")}"),
+                    subtitleTextStyle: TextStyle(
+                      color: Colors.white.withOpacity(0.5),
+                      fontSize: 10,
+                      height: 1.4,
+                    ),
+                    visualDensity: VisualDensity.compact,
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 class _StandardEditor extends StatefulWidget {
-  const _StandardEditor();
+  const _StandardEditor({
+    required this.document,
+    required this.composer,
+    required this.editor,
+  });
+
+  final MutableDocument document;
+  final MutableDocumentComposer composer;
+  final Editor editor;
 
   @override
   State<_StandardEditor> createState() => _StandardEditorState();
@@ -58,20 +213,13 @@ class _StandardEditor extends StatefulWidget {
 class _StandardEditorState extends State<_StandardEditor> {
   final GlobalKey _docLayoutKey = GlobalKey();
 
-  late MutableDocument _doc;
-  late MutableDocumentComposer _composer;
-  late Editor _docEditor;
-
   late FocusNode _editorFocusNode;
 
   late ScrollController _scrollController;
 
   @override
   void initState() {
     super.initState();
-    _doc = createInitialDocument();
-    _composer = MutableDocumentComposer();
-    _docEditor = createDefaultDocumentEditor(document: _doc, composer: _composer);
     _editorFocusNode = FocusNode();
     _scrollController = ScrollController();
   }
@@ -80,19 +228,27 @@ class _StandardEditorState extends State<_StandardEditor> {
   void dispose() {
     _scrollController.dispose();
     _editorFocusNode.dispose();
-    _composer.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     return SuperEditor(
-      editor: _docEditor,
-      document: _doc,
-      composer: _composer,
+      editor: widget.editor,
+      document: widget.document,
+      composer: widget.composer,
       focusNode: _editorFocusNode,
       scrollController: _scrollController,
       documentLayoutKey: _docLayoutKey,
+      stylesheet: defaultStylesheet.copyWith(
+        addRulesAfter: [
+          taskStyles,
+        ],
+      ),
+      componentBuilders: [
+        TaskComponentBuilder(widget.editor),
+        ...defaultComponentBuilders,
+      ],
     );
   }
 }

super_editor/example_docs/lib/toolbar.dart

@@ -1,6 +1,5 @@
 import 'dart:math';
 
-import 'package:example_docs/editor.dart';
 import 'package:example_docs/infrastructure/icon_selector.dart';
 import 'package:example_docs/infrastructure/color_selector.dart';
 import 'package:example_docs/infrastructure/text_item_selector.dart';