Merge pull request #40 from memspace/toolbar-refactor

Toolbar refactor to decouple from editor context

.travis.yml

@@ -1,6 +1,7 @@
 language: dart
 
 dart:
+  - stable
   - dev
 
 os:
@@ -21,7 +22,7 @@ cache:
     - $HOME/.pub-cache
 
 env:
-#  - FLUTTER_VERSION=beta
+  - FLUTTER_VERSION=beta
   - FLUTTER_VERSION=dev
 
 matrix:
@@ -37,4 +38,4 @@ script:
 - pwd
 - ./tool/travis.sh notus
 - ./tool/travis.sh zefyr
-- bash <(curl -s https://codecov.io/bash)
+#- bash <(curl -s https://codecov.io/bash)

packages/zefyr/.gitignore

@@ -13,3 +13,4 @@ ios/Flutter/Generated.xcconfig
 example/ios/.symlinks
 example/ios/Flutter/Generated.xcconfig
 doc/api/
+build/

packages/zefyr/lib/src/widgets/buttons.dart

@@ -65,8 +65,8 @@ class ZefyrButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final editor = ZefyrEditor.of(context);
     final toolbar = ZefyrToolbar.of(context);
+    final editor = toolbar.editor;
     final toolbarTheme = ZefyrTheme.of(context).toolbarTheme;
     final pressedHandler = _getPressedHandler(editor, toolbar);
     final iconColor = (pressedHandler == null)
@@ -236,7 +236,7 @@ class _HeadingButtonState extends State<HeadingButton> {
   }
 }
 
-/// Controls heading styles.
+/// Controls image attribute.
 ///
 /// When pressed, this button displays overlay toolbar with three
 /// buttons for each heading level.
@@ -278,14 +278,14 @@ class _ImageButtonState extends State<ImageButton> {
   }
 
   void _pickFromCamera() async {
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrToolbar.of(context).editor;
     final image = await editor.imageDelegate.pickImage(ImageSource.camera);
     if (image != null)
       editor.formatSelection(NotusAttribute.embed.image(image));
   }
 
   void _pickFromGallery() async {
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrToolbar.of(context).editor;
     final image = await editor.imageDelegate.pickImage(ImageSource.gallery);
     if (image != null)
       editor.formatSelection(NotusAttribute.embed.image(image));
@@ -307,8 +307,8 @@ class _LinkButtonState extends State<LinkButton> {
 
   @override
   Widget build(BuildContext context) {
-    final editor = ZefyrEditor.of(context);
     final toolbar = ZefyrToolbar.of(context);
+    final editor = toolbar.editor;
     final enabled =
         hasLink(editor.selectionStyle) || !editor.selection.isCollapsed;
 
@@ -322,7 +322,7 @@ class _LinkButtonState extends State<LinkButton> {
   bool hasLink(NotusStyle style) => style.contains(NotusAttribute.link);
 
   String getLink([String defaultValue]) {
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrToolbar.of(context).editor;
     final attrs = editor.selectionStyle;
     if (hasLink(attrs)) {
       return attrs.value(NotusAttribute.link);
@@ -351,7 +351,6 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   void doneEdit() {
-    final editor = ZefyrEditor.of(context);
     final toolbar = ZefyrToolbar.of(context);
     setState(() {
       var error = false;
@@ -360,7 +359,7 @@ class _LinkButtonState extends State<LinkButton> {
           var uri = Uri.parse(_inputController.text);
           if ((uri.isScheme('https') || uri.isScheme('http')) &&
               uri.host.isNotEmpty) {
-            editor.formatSelection(
+            toolbar.editor.formatSelection(
                 NotusAttribute.link.fromString(_inputController.text));
           } else {
             error = true;
@@ -377,14 +376,14 @@ class _LinkButtonState extends State<LinkButton> {
         _inputController.text = '';
         _inputController.removeListener(_handleInputChange);
         toolbar.markNeedsRebuild();
-        editor.focus(context);
+        toolbar.editor.focus(context);
       }
     });
   }
 
   void cancelEdit() {
     if (mounted) {
-      final editor = ZefyrEditor.of(context);
+      final editor = ZefyrToolbar.of(context).editor;
       setState(() {
         _inputKey = null;
         _inputController.text = '';
@@ -395,7 +394,7 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   void unlink() {
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrToolbar.of(context).editor;
     editor.formatSelection(NotusAttribute.link.unset);
     closeOverlay();
   }
@@ -407,7 +406,7 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   void openInBrowser() async {
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrToolbar.of(context).editor;
     var link = getLink();
     assert(link != null);
     if (await canLaunch(link)) {
@@ -425,9 +424,8 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   Widget buildOverlay(BuildContext context) {
-    final editor = ZefyrEditor.of(context);
     final toolbar = ZefyrToolbar.of(context);
-    final style = editor.selectionStyle;
+    final style = toolbar.editor.selectionStyle;
 
     String value = 'Tap to edit link';
     if (style.contains(NotusAttribute.link)) {
@@ -439,7 +437,7 @@ class _LinkButtonState extends State<LinkButton> {
         : _LinkInput(
             key: _inputKey,
             controller: _inputController,
-            focusNode: editor.toolbarFocusNode,
+            focusNode: toolbar.editor.toolbarFocusNode,
             formatError: _formatError,
           );
     final items = <Widget>[Expanded(child: body)];

packages/zefyr/lib/src/widgets/editor.dart

@@ -10,6 +10,143 @@ import 'image.dart';
 import 'theme.dart';
 import 'toolbar.dart';
 
+class ZefyrEditorScope extends ChangeNotifier {
+  ZefyrEditorScope({
+    @required ZefyrImageDelegate imageDelegate,
+    @required ZefyrController controller,
+    @required FocusNode focusNode,
+    @required FocusNode toolbarFocusNode,
+  })  : _controller = controller,
+        _imageDelegate = imageDelegate,
+        _focusNode = focusNode,
+        _toolbarFocusNode = toolbarFocusNode {
+    _selectionStyle = _controller.getSelectionStyle();
+    _selection = _controller.selection;
+    _controller.addListener(_handleControllerChange);
+    toolbarFocusNode.addListener(_handleFocusChange);
+    _focusNode.addListener(_handleFocusChange);
+  }
+
+  bool _disposed = false;
+
+  ZefyrImageDelegate _imageDelegate;
+  ZefyrImageDelegate get imageDelegate => _imageDelegate;
+
+  FocusNode _focusNode;
+  FocusNode _toolbarFocusNode;
+  FocusNode get toolbarFocusNode => _toolbarFocusNode;
+
+  ZefyrController _controller;
+  NotusStyle get selectionStyle => _selectionStyle;
+  NotusStyle _selectionStyle;
+  TextSelection get selection => _selection;
+  TextSelection _selection;
+
+  @override
+  void dispose() {
+    assert(!_disposed);
+    _controller.removeListener(_handleControllerChange);
+    _toolbarFocusNode.removeListener(_handleFocusChange);
+    _focusNode.removeListener(_handleFocusChange);
+    _disposed = true;
+    super.dispose();
+  }
+
+  void _updateControllerIfNeeded(ZefyrController value) {
+    if (_controller != value) {
+      _controller.removeListener(_handleControllerChange);
+      _controller = value;
+      _selectionStyle = _controller.getSelectionStyle();
+      _selection = _controller.selection;
+      _controller.addListener(_handleControllerChange);
+      notifyListeners();
+    }
+  }
+
+  void _updateFocusNodeIfNeeded(FocusNode value) {
+    if (_focusNode != value) {
+      _focusNode.removeListener(_handleFocusChange);
+      _focusNode = value;
+      _focusNode.addListener(_handleFocusChange);
+      notifyListeners();
+    }
+  }
+
+  void _updateImageDelegateIfNeeded(ZefyrImageDelegate value) {
+    if (_imageDelegate != value) {
+      _imageDelegate = value;
+      notifyListeners();
+    }
+  }
+
+  void _handleControllerChange() {
+    assert(!_disposed);
+    final attrs = _controller.getSelectionStyle();
+    final selection = _controller.selection;
+    if (_selectionStyle != attrs || _selection != selection) {
+      _selectionStyle = attrs;
+      _selection = _controller.selection;
+      notifyListeners();
+    }
+  }
+
+  void _handleFocusChange() {
+    assert(!_disposed);
+    if (focusOwner == FocusOwner.none && !_selection.isCollapsed) {
+      // Collapse selection if there is nothing focused.
+      _controller.updateSelection(_selection.copyWith(
+        baseOffset: _selection.extentOffset,
+        extentOffset: _selection.extentOffset,
+      ));
+    }
+    notifyListeners();
+  }
+
+  FocusOwner get focusOwner {
+    assert(!_disposed);
+    if (_focusNode.hasFocus) {
+      return FocusOwner.editor;
+    } else if (toolbarFocusNode.hasFocus) {
+      return FocusOwner.toolbar;
+    } else {
+      return FocusOwner.none;
+    }
+  }
+
+  void updateSelection(TextSelection value,
+      {ChangeSource source: ChangeSource.remote}) {
+    assert(!_disposed);
+    _controller.updateSelection(value, source: source);
+  }
+
+  void formatSelection(NotusAttribute value) {
+    assert(!_disposed);
+    _controller.formatSelection(value);
+  }
+
+  void focus(BuildContext context) {
+    assert(!_disposed);
+    FocusScope.of(context).requestFocus(_focusNode);
+  }
+
+  void hideKeyboard() {
+    assert(!_disposed);
+    _focusNode.unfocus();
+  }
+}
+
+class _ZefyrEditorScope extends InheritedWidget {
+  final ZefyrEditorScope scope;
+
+  _ZefyrEditorScope({Key key, Widget child, @required this.scope})
+      : super(key: key, child: child);
+
+  @override
+  bool updateShouldNotify(_ZefyrEditorScope oldWidget) {
+    return oldWidget.scope != scope;
+  }
+}
+
 /// Widget for editing Zefyr documents.
 class ZefyrEditor extends StatefulWidget {
   const ZefyrEditor({
@@ -34,119 +171,46 @@ class ZefyrEditor extends StatefulWidget {
   final EdgeInsets padding;
 
   static ZefyrEditorScope of(BuildContext context) {
-    ZefyrEditorScope scope =
-        context.inheritFromWidgetOfExactType(ZefyrEditorScope);
-    return scope;
+    _ZefyrEditorScope widget =
+        context.inheritFromWidgetOfExactType(_ZefyrEditorScope);
+    return widget.scope;
   }
 
   @override
   _ZefyrEditorState createState() => new _ZefyrEditorState();
 }
 
-/// Inherited widget which provides access to shared state of a Zefyr editor.
-class ZefyrEditorScope extends InheritedWidget {
-  /// Current selection style
-  final NotusStyle selectionStyle;
-  final TextSelection selection;
-  final FocusOwner focusOwner;
-  final FocusNode toolbarFocusNode;
-  final ZefyrImageDelegate imageDelegate;
-  final ZefyrController _controller;
-  final FocusNode _focusNode;
-
-  ZefyrEditorScope({
-    Key key,
-    @required Widget child,
-    @required this.selectionStyle,
-    @required this.selection,
-    @required this.focusOwner,
-    @required this.toolbarFocusNode,
-    @required this.imageDelegate,
-    @required ZefyrController controller,
-    @required FocusNode focusNode,
-  })  : _controller = controller,
-        _focusNode = focusNode,
-        super(key: key, child: child);
-
-  void updateSelection(TextSelection value,
-      {ChangeSource source: ChangeSource.remote}) {
-    _controller.updateSelection(value, source: source);
-  }
-
-  void formatSelection(NotusAttribute value) {
-    _controller.formatSelection(value);
-  }
-
-  void focus(BuildContext context) {
-    FocusScope.of(context).requestFocus(_focusNode);
-  }
-
-  void hideKeyboard() {
-    _focusNode.unfocus();
-  }
-
-  @override
-  bool updateShouldNotify(ZefyrEditorScope oldWidget) {
-    return (selectionStyle != oldWidget.selectionStyle ||
-        selection != oldWidget.selection ||
-        focusOwner != oldWidget.focusOwner ||
-        imageDelegate != oldWidget.imageDelegate);
-  }
-}
-
 class _ZefyrEditorState extends State<ZefyrEditor> {
   final FocusNode _toolbarFocusNode = new FocusNode();
-
-  NotusStyle _selectionStyle;
-  TextSelection _selection;
-  FocusOwner _focusOwner;
   ZefyrImageDelegate _imageDelegate;
-
-  FocusOwner getFocusOwner() {
-    if (widget.focusNode.hasFocus) {
-      return FocusOwner.editor;
-    } else if (_toolbarFocusNode.hasFocus) {
-      return FocusOwner.toolbar;
-    } else {
-      return FocusOwner.none;
-    }
-  }
+  ZefyrEditorScope _scope;
 
   @override
   void initState() {
     super.initState();
-    _selectionStyle = widget.controller.getSelectionStyle();
-    _selection = widget.controller.selection;
-    _focusOwner = getFocusOwner();
     _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
-    widget.controller.addListener(_handleControllerChange);
-    _toolbarFocusNode.addListener(_handleFocusChange);
-    widget.focusNode.addListener(_handleFocusChange);
+    _scope = ZefyrEditorScope(
+      toolbarFocusNode: _toolbarFocusNode,
+      imageDelegate: _imageDelegate,
+      controller: widget.controller,
+      focusNode: widget.focusNode,
+    );
   }
 
   @override
   void didUpdateWidget(ZefyrEditor oldWidget) {
     super.didUpdateWidget(oldWidget);
-    if (widget.focusNode != oldWidget.focusNode) {
-      oldWidget.focusNode.removeListener(_handleFocusChange);
-      widget.focusNode.addListener(_handleFocusChange);
-    }
-    if (widget.controller != oldWidget.controller) {
-      oldWidget.controller.removeListener(_handleControllerChange);
-      widget.controller.addListener(_handleControllerChange);
-      _selectionStyle = widget.controller.getSelectionStyle();
-      _selection = widget.controller.selection;
-    }
+    _scope._updateControllerIfNeeded(widget.controller);
+    _scope._updateFocusNodeIfNeeded(widget.focusNode);
     if (widget.imageDelegate != oldWidget.imageDelegate) {
       _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
+      _scope._updateImageDelegateIfNeeded(_imageDelegate);
     }
   }
 
   @override
   void dispose() {
-    widget.controller.removeListener(_handleControllerChange);
-    widget.focusNode.removeListener(_handleFocusChange);
-    _toolbarFocusNode.removeListener(_handleFocusChange);
+    _scope.dispose();
     _toolbarFocusNode.dispose();
     super.dispose();
   }
@@ -165,8 +229,8 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     final children = <Widget>[];
     children.add(Expanded(child: editable));
     final toolbar = ZefyrToolbar(
+      editor: _scope,
       focusNode: _toolbarFocusNode,
-      controller: widget.controller,
       delegate: widget.toolbarDelegate,
     );
     children.add(toolbar);
@@ -179,40 +243,10 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
 
     return ZefyrTheme(
       data: actualTheme,
-      child: ZefyrEditorScope(
-        selection: _selection,
-        selectionStyle: _selectionStyle,
-        focusOwner: _focusOwner,
-        toolbarFocusNode: _toolbarFocusNode,
-        imageDelegate: _imageDelegate,
-        controller: widget.controller,
-        focusNode: widget.focusNode,
+      child: _ZefyrEditorScope(
+        scope: _scope,
         child: Column(children: children),
       ),
     );
   }
-
-  void _handleControllerChange() {
-    final attrs = widget.controller.getSelectionStyle();
-    final selection = widget.controller.selection;
-    if (_selectionStyle != attrs || _selection != selection) {
-      setState(() {
-        _selectionStyle = attrs;
-        _selection = widget.controller.selection;
-      });
-    }
-  }
-
-  void _handleFocusChange() {
-    setState(() {
-      _focusOwner = getFocusOwner();
-      if (_focusOwner == FocusOwner.none && !_selection.isCollapsed) {
-        // Collapse selection if there is nothing focused.
-        widget.controller.updateSelection(_selection.copyWith(
-          baseOffset: _selection.extentOffset,
-          extentOffset: _selection.extentOffset,
-        ));
-      }
-    });
-  }
 }

packages/zefyr/lib/src/widgets/selection.dart

@@ -99,6 +99,8 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
     super.initState();
     _toolbarController = new AnimationController(
         duration: _kFadeDuration, vsync: widget.overlay);
+    _selection = widget.controller.selection;
+    widget.controller.addListener(_handleChange);
   }
 
   static const Duration _kFadeDuration = const Duration(milliseconds: 150);
@@ -112,6 +114,10 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
       _toolbarController = new AnimationController(
           duration: _kFadeDuration, vsync: widget.overlay);
     }
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_handleChange);
+      widget.controller.addListener(_handleChange);
+    }
   }
 
   @override
@@ -124,6 +130,7 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
 
   @override
   void dispose() {
+    widget.controller.removeListener(_handleChange);
     hideToolbar();
     _toolbarController.dispose();
     _toolbarController = null;
@@ -172,6 +179,12 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
 
   bool _didCaretTap = false;
 
+  void _handleChange() {
+    if (_selection != widget.controller.selection) {
+      _updateToolbar();
+    }
+  }
+
   void _updateToolbar() {
     if (!mounted) {
       return;

packages/zefyr/lib/src/widgets/toolbar.dart

@@ -103,14 +103,14 @@ class ZefyrToolbar extends StatefulWidget implements PreferredSizeWidget {
   const ZefyrToolbar({
     Key key,
     @required this.focusNode,
-    @required this.controller,
+    @required this.editor,
     this.autoHide: true,
     this.delegate,
   }) : super(key: key);
 
   final FocusNode focusNode;
-  final ZefyrController controller;
   final ZefyrToolbarDelegate delegate;
+  final ZefyrEditorScope editor;
 
   /// Whether to automatically hide this toolbar when editor loses focus.
   final bool autoHide;
@@ -185,12 +185,23 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
   bool get hasOverlay => _overlayBuilder != null;
 
+  ZefyrEditorScope get editor => widget.editor;
+
+  void _handleChange() {
+    if (_selection != editor.selection) {
+      _selection = editor.selection;
+      closeOverlay();
+    }
+    setState(() {});
+  }
+
   @override
   void initState() {
     super.initState();
     _delegate = widget.delegate ?? new _DefaultZefyrToolbarDelegate();
     _overlayAnimation = new AnimationController(
         vsync: this, duration: Duration(milliseconds: 100));
+    widget.editor.addListener(_handleChange);
   }
 
   @override
@@ -199,22 +210,20 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
     if (widget.delegate != oldWidget.delegate) {
       _delegate = widget.delegate ?? new _DefaultZefyrToolbarDelegate();
     }
+    if (widget.editor != oldWidget.editor) {
+      oldWidget.editor.removeListener(_handleChange);
+      widget.editor.addListener(_handleChange);
+    }
   }
 
   @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    final editor = ZefyrEditor.of(context);
-    if (_selection != editor.selection) {
-      _selection = editor.selection;
-      closeOverlay();
-    }
+  void dispose() {
+    widget.editor.removeListener(_handleChange);
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    final editor = ZefyrEditor.of(context);
-
     if (editor.focusOwner == FocusOwner.none) {
       return new Container();
     }

packages/zefyr/test/widgets/editor_test.dart

@@ -23,6 +23,8 @@ void main() {
       var editor =
           new EditorSandBox(tester: tester, document: doc, theme: theme);
       await editor.tapEditor();
+      // TODO: figure out why this extra pump is needed here
+      await tester.pumpAndSettle();
       EditableRichText p = tester.widget(find.byType(EditableRichText).first);
       expect(p.text.children.first.style.color, Colors.red);
     });

packages/zefyr/tool/travis.sh

@@ -2,4 +2,4 @@
 
 set -e
 
-$TRAVIS_BUILD_DIR/flutter/bin/flutter test --coverage
+$TRAVIS_BUILD_DIR/flutter/bin/flutter test