Added ZefyrMode to replace enabled flag; added selectionControls fields to ZefyrEditor

packages/zefyr/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.7.0
+
+This release contains breaking changes.
+
+* Breaking change: `ZefyrEditor.enabled` field replaced by `ZefyrEditor.mode` which can take
+  one of three default values:
+    - `ZefyrMode.edit`: the same as `enabled: true`, all editing controls are available to the user
+    - `ZefyrMode.select`: user can't modify text itself, but allowed to select it and optionally
+       apply formatting.
+    - `ZefyrMode.view`: the same as `enabled: false`, read-only.
+* Added optional `selectionControls` field to `ZefyrEditor` and `ZefyrEditableText`. If not provided
+  then by default uses platform-specific implementation.
+
 ## 0.6.0
 
 * Updated to support Flutter 1.7.8

packages/zefyr/example/lib/src/full_page.dart

@@ -86,7 +86,7 @@ class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
           child: ZefyrEditor(
             controller: _controller,
             focusNode: _focusNode,
-            enabled: _editing,
+            mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
             imageDelegate: new CustomImageDelegate(),
           ),
         ),

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

@@ -98,6 +98,13 @@ class ZefyrController extends ChangeNotifier {
     notifyListeners();
   }
 
+  /// Replaces [length] characters in the document starting at [index] with
+  /// provided [text].
+  ///
+  /// Resulting change is registered as produced by user action, e.g.
+  /// using [ChangeSource.local].
+  ///
+  /// Optionally updates selection if provided.
   void replaceText(int index, int length, String text,
       {TextSelection selection}) {
     Delta delta;

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

@@ -2,6 +2,7 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
@@ -13,6 +14,7 @@ import 'editor.dart';
 import 'image.dart';
 import 'input.dart';
 import 'list.dart';
+import 'mode.dart';
 import 'paragraph.dart';
 import 'quote.dart';
 import 'render_context.dart';
@@ -33,19 +35,43 @@ class ZefyrEditableText extends StatefulWidget {
     @required this.controller,
     @required this.focusNode,
     @required this.imageDelegate,
+    this.selectionControls,
     this.autofocus: true,
-    this.enabled: true,
+    this.mode: ZefyrMode.edit,
     this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
     this.physics,
-  }) : super(key: key);
+  })  : assert(mode != null),
+        assert(controller != null),
+        assert(focusNode != null),
+        super(key: key);
 
+  /// Controls the document being edited.
   final ZefyrController controller;
+
+  /// Controls whether this editor has keyboard focus.
   final FocusNode focusNode;
   final ZefyrImageDelegate imageDelegate;
+
+  /// Whether this text field should focus itself if nothing else is already
+  /// focused.
+  ///
+  /// If true, the keyboard will open as soon as this text field obtains focus.
+  /// Otherwise, the keyboard is only shown after the user taps the text field.
+  ///
+  /// Defaults to true. Cannot be null.
   final bool autofocus;
-  final bool enabled;
+
+  /// Editing mode of this text field.
+  final ZefyrMode mode;
+
+  /// Controls physics of scrollable text field.
   final ScrollPhysics physics;
 
+  /// Optional delegate for building the text selection handles and toolbar.
+  ///
+  /// If not provided then platform-specific implementation is used by default.
+  final TextSelectionControls selectionControls;
+
   /// Padding around editable area.
   final EdgeInsets padding;
 
@@ -83,16 +109,24 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
   }
 
   void focusOrUnfocusIfNeeded() {
-    if (!_didAutoFocus && widget.autofocus && widget.enabled) {
+    if (!_didAutoFocus && widget.autofocus && widget.mode.canEdit) {
       FocusScope.of(context).autofocus(_focusNode);
       _didAutoFocus = true;
     }
-    if (!widget.enabled && _focusNode.hasFocus) {
+    if (!widget.mode.canEdit && _focusNode.hasFocus) {
       _didAutoFocus = false;
       _focusNode.unfocus();
     }
   }
 
+  TextSelectionControls defaultSelectionControls(BuildContext context) {
+    TargetPlatform platform = Theme.of(context).platform;
+    if (platform == TargetPlatform.iOS) {
+      return cupertinoTextSelectionControls;
+    }
+    return materialTextSelectionControls;
+  }
+
   //
   // Overridden members of State
   //
@@ -104,23 +138,19 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
 
     Widget body = ListBody(children: _buildChildren(context));
     if (widget.padding != null) {
-      body = new Padding(padding: widget.padding, child: body);
+      body = Padding(padding: widget.padding, child: body);
     }
-    final scrollable = SingleChildScrollView(
+
+    body = SingleChildScrollView(
       physics: widget.physics,
       controller: _scrollController,
       child: body,
     );
 
-    final overlay = Overlay.of(context, debugRequiredFor: widget);
-    final layers = <Widget>[scrollable];
-    if (widget.enabled) {
-      layers.add(ZefyrSelectionOverlay(
-        controller: widget.controller,
-        controls: cupertinoTextSelectionControls,
-        overlay: overlay,
-      ));
-    }
+    final layers = <Widget>[body];
+    layers.add(ZefyrSelectionOverlay(
+      controls: widget.selectionControls ?? defaultSelectionControls(context),
+    ));
 
     return Stack(fit: StackFit.expand, children: layers);
   }
@@ -249,7 +279,7 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
 
   // Triggered for both text and selection changes.
   void _handleLocalValueChange() {
-    if (widget.enabled &&
+    if (widget.mode.canEdit &&
         widget.controller.lastChangeSource == ChangeSource.local) {
       // Only request keyboard for user actions.
       requestKeyboard();

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

@@ -1,11 +1,14 @@
 // Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
 import 'controller.dart';
 import 'editable_text.dart';
 import 'image.dart';
+import 'mode.dart';
 import 'scaffold.dart';
 import 'scope.dart';
 import 'theme.dart';
@@ -18,19 +21,49 @@ class ZefyrEditor extends StatefulWidget {
     @required this.controller,
     @required this.focusNode,
     this.autofocus: true,
-    this.enabled: true,
+    this.mode: ZefyrMode.edit,
     this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
     this.toolbarDelegate,
     this.imageDelegate,
+    this.selectionControls,
     this.physics,
-  }) : super(key: key);
+  })  : assert(mode != null),
+        assert(controller != null),
+        assert(focusNode != null),
+        super(key: key);
 
+  /// Controls the document being edited.
   final ZefyrController controller;
+
+  /// Controls whether this editor has keyboard focus.
   final FocusNode focusNode;
+
+  /// Whether this editor should focus itself if nothing else is already
+  /// focused.
+  ///
+  /// If true, the keyboard will open as soon as this text field obtains focus.
+  /// Otherwise, the keyboard is only shown after the user taps the text field.
+  ///
+  /// Defaults to true. Cannot be null.
   final bool autofocus;
-  final bool enabled;
+
+  /// Editing mode of this editor.
+  final ZefyrMode mode;
+
+  /// Optional delegate for customizing this editor's toolbar.
   final ZefyrToolbarDelegate toolbarDelegate;
+
+  /// Delegate for resolving embedded images.
+  ///
+  /// This delegate is required if embedding images is allowed.
   final ZefyrImageDelegate imageDelegate;
+
+  /// Optional delegate for building the text selection handles and toolbar.
+  ///
+  /// If not provided then platform-specific implementation is used by default.
+  final TextSelectionControls selectionControls;
+
+  /// Controls physics of scrollable editor.
   final ScrollPhysics physics;
 
   /// Padding around editable area.
@@ -94,6 +127,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   @override
   void didUpdateWidget(ZefyrEditor oldWidget) {
     super.didUpdateWidget(oldWidget);
+    _scope.mode = widget.mode;
     _scope.controller = widget.controller;
     _scope.focusNode = widget.focusNode;
     if (widget.imageDelegate != oldWidget.imageDelegate) {
@@ -113,6 +147,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
 
     if (_scope == null) {
       _scope = ZefyrScope.editable(
+        mode: widget.mode,
         imageDelegate: _imageDelegate,
         controller: widget.controller,
         focusNode: widget.focusNode,
@@ -147,8 +182,9 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       controller: _scope.controller,
       focusNode: _scope.focusNode,
       imageDelegate: _scope.imageDelegate,
+      selectionControls: widget.selectionControls,
       autofocus: widget.autofocus,
-      enabled: widget.enabled,
+      mode: widget.mode,
       padding: widget.padding,
       physics: widget.physics,
     );

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

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'controller.dart';
 import 'editor.dart';
 import 'image.dart';
+import 'mode.dart';
 import 'toolbar.dart';
 
 /// Zefyr editor with material design decorations.
@@ -15,7 +16,7 @@ class ZefyrField extends StatefulWidget {
   final ZefyrController controller;
   final FocusNode focusNode;
   final bool autofocus;
-  final bool enabled;
+  final ZefyrMode mode;
   final ZefyrToolbarDelegate toolbarDelegate;
   final ZefyrImageDelegate imageDelegate;
   final ScrollPhysics physics;
@@ -27,7 +28,7 @@ class ZefyrField extends StatefulWidget {
     this.controller,
     this.focusNode,
     this.autofocus: false,
-    this.enabled,
+    this.mode,
     this.toolbarDelegate,
     this.imageDelegate,
     this.physics,
@@ -45,7 +46,7 @@ class _ZefyrFieldState extends State<ZefyrField> {
       controller: widget.controller,
       focusNode: widget.focusNode,
       autofocus: widget.autofocus,
-      enabled: widget.enabled ?? true,
+      mode: widget.mode ?? ZefyrMode.edit,
       toolbarDelegate: widget.toolbarDelegate,
       imageDelegate: widget.imageDelegate,
       physics: widget.physics,
@@ -78,7 +79,7 @@ class _ZefyrFieldState extends State<ZefyrField> {
         (widget.decoration ?? const InputDecoration())
             .applyDefaults(Theme.of(context).inputDecorationTheme)
             .copyWith(
-              enabled: widget.enabled ?? true,
+              enabled: widget.mode == ZefyrMode.edit,
             );
 
     return effectiveDecoration;

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

@@ -0,0 +1,61 @@
+import 'package:meta/meta.dart';
+import 'package:quiver_hashcode/hashcode.dart';
+
+/// Controls level of interactions allowed by Zefyr editor.
+///
+// TODO: consider extending with following:
+//       - linkTapBehavior: none|launch
+//       - allowedStyles: ['bold', 'italic', 'image', ... ]
+class ZefyrMode {
+  /// Editing mode provides full access to all editing features: keyboard,
+  /// editor toolbar with formatting tools, selection controls and selection
+  /// toolbar with clipboard tools.
+  ///
+  /// Tapping on links in edit mode shows selection toolbar with contextual
+  /// actions instead of launching the link in a web browser.
+  static const edit =
+      ZefyrMode(canEdit: true, canSelect: true, canFormat: true);
+
+  /// Select-only mode allows users to select a range of text and have access
+  /// to selection toolbar including clipboard tools, any custom actions
+  /// registered by current text selection controls implementation.
+  ///
+  /// Tapping on links in select-only mode launches the link in a web browser.
+  static const select =
+      ZefyrMode(canEdit: false, canSelect: true, canFormat: true);
+
+  /// View-only mode disables almost all user interactions except the ability
+  /// to launch links in a web browser when tapped.
+  static const view =
+      ZefyrMode(canEdit: false, canSelect: false, canFormat: false);
+
+  /// Returns `true` if user is allowed to change text in a document.
+  final bool canEdit;
+
+  /// Returns `true` if user is allowed to select a range of text in a document.
+  final bool canSelect;
+
+  /// Returns `true` if user is allowed to change formatting styles in a
+  /// document.
+  final bool canFormat;
+
+  /// Creates new mode which describes allowed interactions in Zefyr editor.
+  const ZefyrMode({
+    @required this.canEdit,
+    @required this.canSelect,
+    @required this.canFormat,
+  });
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is! ZefyrMode) return false;
+    final ZefyrMode that = other;
+    return canEdit == that.canEdit &&
+        canSelect == that.canSelect &&
+        canFormat == that.canFormat;
+  }
+
+  @override
+  int get hashCode => hash3(canEdit, canSelect, canFormat);
+}

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

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 
+import 'editor.dart';
+
+/// Provides necessary layout for [ZefyrEditor].
 class ZefyrScaffold extends StatefulWidget {
   final Widget child;
 

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

@@ -6,6 +6,7 @@ import 'controller.dart';
 import 'cursor_timer.dart';
 import 'editor.dart';
 import 'image.dart';
+import 'mode.dart';
 import 'render_context.dart';
 import 'view.dart';
 
@@ -24,8 +25,10 @@ class ZefyrScope extends ChangeNotifier {
   /// Creates a view-only scope.
   ///
   /// Normally used in [ZefyrView].
-  ZefyrScope.view({@required ZefyrImageDelegate imageDelegate})
-      : assert(imageDelegate != null),
+  ZefyrScope.view({
+    @required ZefyrMode mode,
+    @required ZefyrImageDelegate imageDelegate,
+  })  : assert(imageDelegate != null),
         isEditable = false,
         _imageDelegate = imageDelegate;
 
@@ -33,15 +36,18 @@ class ZefyrScope extends ChangeNotifier {
   ///
   /// Normally used in [ZefyrEditor].
   ZefyrScope.editable({
+    @required ZefyrMode mode,
     @required ZefyrController controller,
     @required ZefyrImageDelegate imageDelegate,
     @required FocusNode focusNode,
     @required FocusScopeNode focusScope,
-  })  : assert(controller != null),
+  })  : assert(mode != null),
+        assert(controller != null),
         assert(imageDelegate != null),
         assert(focusNode != null),
         assert(focusScope != null),
         isEditable = true,
+        _mode = mode,
         _controller = controller,
         _imageDelegate = imageDelegate,
         _focusNode = focusNode,
@@ -70,6 +76,16 @@ class ZefyrScope extends ChangeNotifier {
     }
   }
 
+  ZefyrMode _mode;
+  ZefyrMode get mode => _mode;
+  set mode(ZefyrMode value) {
+    assert(value != null);
+    if (_mode != value) {
+      _mode = value;
+      notifyListeners();
+    }
+  }
+
   ZefyrController _controller;
   ZefyrController get controller => _controller;
   set controller(ZefyrController value) {

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

@@ -25,16 +25,10 @@ RenderEditableBox _getEditableBox(HitTestResult result) {
 
 /// Selection overlay controls selection handles and other gestures.
 class ZefyrSelectionOverlay extends StatefulWidget {
-  const ZefyrSelectionOverlay({
-    Key key,
-    @required this.controller,
-    @required this.controls,
-    @required this.overlay,
-  }) : super(key: key);
+  const ZefyrSelectionOverlay({Key key, @required this.controls})
+      : super(key: key);
 
-  final ZefyrController controller;
   final TextSelectionControls controls;
-  final OverlayState overlay;
 
   @override
   _ZefyrSelectionOverlayState createState() =>
@@ -43,16 +37,62 @@ class ZefyrSelectionOverlay extends StatefulWidget {
 
 class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
     implements TextSelectionDelegate {
+  TextSelectionControls _controls;
+  TextSelectionControls get controls => _controls;
+
+  /// Global position of last TapDown event.
+  Offset _lastTapDownPosition;
+
+  /// Global position of last TapDown which is potentially a long press.
+  Offset _longPressPosition;
+
+  OverlayState _overlay;
+  OverlayEntry _toolbar;
+  AnimationController _toolbarController;
+
+  ZefyrScope _scope;
+  ZefyrScope get scope => _scope;
+  TextSelection _selection;
+  FocusOwner _focusOwner;
+
+  bool _didCaretTap = false;
+
+  /// Whether selection controls should be hidden.
+  bool get shouldHideControls {
+    if (!_scope.mode.canSelect) return true;
+    final selection = _scope.selection;
+    final isSelectionCollapsed = selection == null || selection.isCollapsed;
+    if (_scope.mode.canEdit) {
+      return isSelectionCollapsed || _scope.focusOwner != FocusOwner.editor;
+    }
+    return isSelectionCollapsed;
+  }
+
+  void showToolbar() {
+    final toolbarOpacity = _toolbarController.view;
+    _toolbar = OverlayEntry(
+      builder: (context) => FadeTransition(
+        opacity: toolbarOpacity,
+        child: _SelectionToolbar(selectionOverlay: this),
+      ),
+    );
+    _overlay.insert(_toolbar);
+    _toolbarController.forward(from: 0.0);
+  }
+
+  bool get isToolbarVisible => _toolbar != null;
+  bool get isToolbarHidden => _toolbar == null;
+
   @override
   TextEditingValue get textEditingValue =>
-      widget.controller.plainTextEditingValue;
+      _scope.controller.plainTextEditingValue;
 
   set textEditingValue(TextEditingValue value) {
     final cursorPosition = value.selection.extentOffset;
-    final oldText = widget.controller.document.toPlainText();
+    final oldText = _scope.controller.document.toPlainText();
     final newText = value.text;
     final diff = fastDiff(oldText, newText, cursorPosition);
-    widget.controller.replaceText(
+    _scope.controller.replaceText(
         diff.start, diff.deleted.length, diff.inserted,
         selection: value.selection);
   }
@@ -62,73 +102,60 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
     // TODO: implement bringIntoView
   }
 
-  bool get isToolbarVisible => _toolbar != null;
-  bool get isToolbarHidden => _toolbar == null;
-
   @override
   void hideToolbar() {
     _didCaretTap = false; // reset double tap.
     _toolbar?.remove();
     _toolbar = null;
-    _toolbarController.stop();
+    _toolbarController?.stop();
   }
 
-  void showToolbar() {
-    final toolbarOpacity = _toolbarController.view;
-    _toolbar = new OverlayEntry(
-      builder: (context) => new FadeTransition(
-        opacity: toolbarOpacity,
-        child: new _SelectionToolbar(
-          scope: _editor,
-          controls: widget.controls,
-          delegate: this,
-        ),
-      ),
-    );
-    widget.overlay.insert(_toolbar);
-    _toolbarController.forward(from: 0.0);
-  }
-
-  //
-  // Overridden members of State
-  //
+  static const Duration _kFadeDuration = const Duration(milliseconds: 150);
 
   @override
   void initState() {
     super.initState();
-    _toolbarController = new AnimationController(
-        duration: _kFadeDuration, vsync: widget.overlay);
+    _controls = widget.controls;
   }
 
-  static const Duration _kFadeDuration = const Duration(milliseconds: 150);
-
   @override
   void didUpdateWidget(ZefyrSelectionOverlay oldWidget) {
     super.didUpdateWidget(oldWidget);
-    if (oldWidget.overlay != widget.overlay) {
-      hideToolbar();
-      _toolbarController.dispose();
-      _toolbarController = new AnimationController(
-          duration: _kFadeDuration, vsync: widget.overlay);
-    }
+    _controls = widget.controls;
   }
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    final editor = ZefyrScope.of(context);
-    if (_editor != editor) {
-      _editor?.removeListener(_handleChange);
-      _editor = editor;
-      _editor.addListener(_handleChange);
-      _selection = _editor.selection;
-      _focusOwner = _editor.focusOwner;
+    final scope = ZefyrScope.of(context);
+    if (_scope != scope) {
+      _scope?.removeListener(_handleChange);
+      _scope = scope;
+      _scope.addListener(_handleChange);
+      _selection = _scope.selection;
+      _focusOwner = _scope.focusOwner;
+    }
+
+    final overlay = Overlay.of(context, debugRequiredFor: widget);
+    if (_overlay != overlay) {
+      hideToolbar();
+      _overlay = overlay;
+      _toolbarController?.dispose();
+      _toolbarController = null;
+    }
+    if (_toolbarController == null) {
+      _toolbarController = AnimationController(
+        duration: _kFadeDuration,
+        vsync: _overlay,
+      );
     }
+
+    _toolbar?.markNeedsBuild();
   }
 
   @override
   void dispose() {
-    _editor.removeListener(_handleChange);
+    _scope.removeListener(_handleChange);
     hideToolbar();
     _toolbarController.dispose();
     _toolbarController = null;
@@ -148,11 +175,11 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
         children: <Widget>[
           new SelectionHandleDriver(
             position: _SelectionHandlePosition.base,
-            controls: widget.controls,
+            selectionOverlay: this,
           ),
           new SelectionHandleDriver(
             position: _SelectionHandlePosition.extent,
-            controls: widget.controls,
+            selectionOverlay: this,
           ),
         ],
       ),
@@ -164,23 +191,8 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
   // Private members
   //
 
-  /// Global position of last TapDown event.
-  Offset _lastTapDownPosition;
-
-  /// Global position of last TapDown which is potentially a long press.
-  Offset _longPressPosition;
-
-  OverlayEntry _toolbar;
-  AnimationController _toolbarController;
-
-  ZefyrScope _editor;
-  TextSelection _selection;
-  FocusOwner _focusOwner;
-
-  bool _didCaretTap = false;
-
   void _handleChange() {
-    if (_selection != _editor.selection || _focusOwner != _editor.focusOwner) {
+    if (_selection != _scope.selection || _focusOwner != _scope.focusOwner) {
       _updateToolbar();
     }
   }
@@ -190,14 +202,16 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
       return;
     }
 
-    final selection = _editor.selection;
-    final focusOwner = _editor.focusOwner;
+    final selection = _scope.selection;
+    final focusOwner = _scope.focusOwner;
     setState(() {
-      if (focusOwner != FocusOwner.editor) {
+      if (shouldHideControls && isToolbarVisible) {
         hideToolbar();
       } else {
         if (_selection != selection) {
-          if (selection.isCollapsed && isToolbarVisible) hideToolbar();
+          if (selection.isCollapsed && isToolbarVisible) {
+            hideToolbar();
+          }
           _toolbar?.markNeedsBuild();
           if (!selection.isCollapsed && isToolbarHidden) showToolbar();
         } else {
@@ -232,7 +246,7 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
 
     RenderEditableProxyBox box = _getEditableBox(result);
     if (box == null) {
-      box = _editor.renderContext.closestBoxForGlobalPoint(globalPoint);
+      box = _scope.renderContext.closestBoxForGlobalPoint(globalPoint);
     }
     if (box == null) return null;
 
@@ -252,7 +266,7 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
     } else {
       _didCaretTap = true;
     }
-    widget.controller.updateSelection(selection, source: ChangeSource.local);
+    _scope.controller.updateSelection(selection, source: ChangeSource.local);
   }
 
   void _handleLongPress() {
@@ -271,21 +285,20 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
       baseOffset: word.start,
       extentOffset: word.end,
     );
-    widget.controller.updateSelection(selection, source: ChangeSource.local);
+    _scope.controller.updateSelection(selection, source: ChangeSource.local);
   }
 
-  // TODO: these methods should also take into account enabled state.
   @override
-  bool get copyEnabled => _editor.isEditable;
+  bool get copyEnabled => _scope.mode.canSelect && !_selection.isCollapsed;
 
   @override
-  bool get cutEnabled => _editor.isEditable;
+  bool get cutEnabled => _scope.mode.canEdit && !_selection.isCollapsed;
 
   @override
-  bool get pasteEnabled => _editor.isEditable;
+  bool get pasteEnabled => _scope.mode.canEdit;
 
   @override
-  bool get selectAllEnabled => _editor.isEditable;
+  bool get selectAllEnabled => _scope.mode.canSelect;
 }
 
 enum _SelectionHandlePosition { base, extent }
@@ -294,11 +307,12 @@ class SelectionHandleDriver extends StatefulWidget {
   const SelectionHandleDriver({
     Key key,
     @required this.position,
-    @required this.controls,
-  }) : super(key: key);
+    @required this.selectionOverlay,
+  })  : assert(selectionOverlay != null),
+        super(key: key);
 
   final _SelectionHandlePosition position;
-  final TextSelectionControls controls;
+  final _ZefyrSelectionOverlayState selectionOverlay;
 
   @override
   _SelectionHandleDriverState createState() =>
@@ -361,10 +375,7 @@ class _SelectionHandleDriverState extends State<SelectionHandleDriver>
 
   @override
   Widget build(BuildContext context) {
-    if (selection == null ||
-        selection.isCollapsed ||
-        widget.controls == null ||
-        _scope.focusOwner != FocusOwner.editor) {
+    if (widget.selectionOverlay.shouldHideControls) {
       return new Container();
     }
     final block = _scope.renderContext.boxForTextOffset(documentOffset);
@@ -404,11 +415,12 @@ class _SelectionHandleDriverState extends State<SelectionHandleDriver>
       point.dy.clamp(0.0, viewport.height),
     );
 
-    final Offset handleAnchor = widget.controls.getHandleAnchor(
+    final Offset handleAnchor =
+        widget.selectionOverlay.controls.getHandleAnchor(
       type,
       block.preferredLineHeight,
     );
-    final Size handleSize = widget.controls.getHandleSize(
+    final Size handleSize = widget.selectionOverlay.controls.getHandleSize(
       block.preferredLineHeight,
     );
     final Rect handleRect = Rect.fromLTWH(
@@ -451,7 +463,7 @@ class _SelectionHandleDriverState extends State<SelectionHandleDriver>
               right: padding.right,
               bottom: padding.bottom,
             ),
-            child: widget.controls.buildHandle(
+            child: widget.selectionOverlay.controls.buildHandle(
               context,
               type,
               block.preferredLineHeight,
@@ -525,22 +537,20 @@ class _SelectionHandleDriverState extends State<SelectionHandleDriver>
 class _SelectionToolbar extends StatefulWidget {
   const _SelectionToolbar({
     Key key,
-    @required this.scope,
-    @required this.controls,
-    @required this.delegate,
+    @required this.selectionOverlay,
   }) : super(key: key);
 
-  final ZefyrScope scope;
-  final TextSelectionControls controls;
-  final TextSelectionDelegate delegate;
+  final _ZefyrSelectionOverlayState selectionOverlay;
 
   @override
   _SelectionToolbarState createState() => new _SelectionToolbarState();
 }
 
 class _SelectionToolbarState extends State<_SelectionToolbar> {
-  ZefyrScope get editable => widget.scope;
-  TextSelection get selection => widget.delegate.textEditingValue.selection;
+  TextSelectionControls get controls => widget.selectionOverlay.controls;
+  ZefyrScope get scope => widget.selectionOverlay.scope;
+  TextSelection get selection =>
+      widget.selectionOverlay.textEditingValue.selection;
 
   @override
   Widget build(BuildContext context) {
@@ -549,8 +559,7 @@ class _SelectionToolbarState extends State<_SelectionToolbar> {
 
   Widget _buildToolbar(BuildContext context) {
     final base = selection.baseOffset;
-    // TODO: Editable is not refreshed and may contain stale renderContext instance.
-    final block = editable.renderContext.boxForTextOffset(base);
+    final block = scope.renderContext.boxForTextOffset(base);
     if (block == null) {
       return Container();
     }
@@ -584,8 +593,13 @@ class _SelectionToolbarState extends State<_SelectionToolbar> {
       block.localToGlobal(block.size.bottomRight(Offset.zero)),
     );
 
-    final toolbar = widget.controls.buildToolbar(context, editingRegion,
-        block.preferredLineHeight, midpoint, endpoints, widget.delegate);
+    final toolbar = controls.buildToolbar(
+        context,
+        editingRegion,
+        block.preferredLineHeight,
+        midpoint,
+        endpoints,
+        widget.selectionOverlay);
     return new CompositedTransformFollower(
       link: block.layerLink,
       showWhenUnlinked: false,

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

@@ -1,3 +1,6 @@
+// Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 import 'package:flutter/material.dart';
 import 'package:meta/meta.dart';
 import 'package:notus/notus.dart';
@@ -6,6 +9,7 @@ import 'code.dart';
 import 'common.dart';
 import 'image.dart';
 import 'list.dart';
+import 'mode.dart';
 import 'paragraph.dart';
 import 'quote.dart';
 import 'scope.dart';
@@ -33,7 +37,10 @@ class ZefyrViewState extends State<ZefyrView> {
   @override
   void initState() {
     super.initState();
-    _scope = ZefyrScope.view(imageDelegate: widget.imageDelegate);
+    _scope = ZefyrScope.view(
+      mode: ZefyrMode.view,
+      imageDelegate: widget.imageDelegate,
+    );
   }
 
   @override

packages/zefyr/lib/zefyr.dart

@@ -19,6 +19,7 @@ export 'src/widgets/field.dart';
 export 'src/widgets/horizontal_rule.dart';
 export 'src/widgets/image.dart';
 export 'src/widgets/list.dart';
+export 'src/widgets/mode.dart';
 export 'src/widgets/paragraph.dart';
 export 'src/widgets/quote.dart';
 export 'src/widgets/scaffold.dart';

packages/zefyr/pubspec.yaml

@@ -1,6 +1,6 @@
 name: zefyr
 description: Clean, minimalistic and collaboration-ready rich text editor for Flutter.
-version: 0.6.0
+version: 0.7.0
 author: Anatoly Pulyaevskiy <anatoly.pulyaevskiy@gmail.com>
 homepage: https://github.com/memspace/zefyr
 
@@ -16,6 +16,7 @@ dependencies:
   quill_delta: ^1.0.0-dev.1.0
   notus: ^0.1.0
   meta: ^1.1.0
+  quiver_hashcode: ^2.0.0
 
 dev_dependencies:
   flutter_test:

packages/zefyr/test/rendering/render_zefyr_paragraph_test.dart

@@ -0,0 +1,41 @@
+// Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:zefyr/src/widgets/render_context.dart';
+import 'package:zefyr/src/widgets/rich_text.dart';
+import 'package:zefyr/zefyr.dart';
+
+void main() {
+  group('$RenderZefyrParagraph', () {
+    final doc = new NotusDocument();
+    doc.insert(0, 'This House Is A Circus');
+    final text = new TextSpan(text: 'This House Is A Circus');
+
+    ZefyrRenderContext renderContext;
+    RenderZefyrParagraph p;
+
+    setUp(() {
+      WidgetsFlutterBinding.ensureInitialized();
+      renderContext = new ZefyrRenderContext();
+      p = new RenderZefyrParagraph(
+        text,
+        node: doc.root.children.first as LineNode,
+        textDirection: TextDirection.ltr,
+      );
+    });
+
+    test('it registers with viewport', () {
+      var owner = new PipelineOwner();
+      expect(renderContext.active, isNot(contains(p)));
+      p.attach(owner);
+      expect(renderContext.dirty, contains(p));
+      p.layout(new BoxConstraints());
+      expect(renderContext.active, contains(p));
+    }, skip: 'TODO: move to RenderEditableProxyBox');
+  });
+}

packages/zefyr/test/testing.dart

@@ -134,7 +134,7 @@ class _ZefyrSandboxState extends State<_ZefyrSandbox> {
     return new ZefyrEditor(
       controller: widget.controller,
       focusNode: widget.focusNode,
-      enabled: _enabled,
+      mode: _enabled ? ZefyrMode.edit : ZefyrMode.view,
       autofocus: widget.autofocus,
     );
   }

packages/zefyr/test/widgets/editor_test.dart

@@ -45,7 +45,7 @@ void main() {
       await editor.updateSelection(base: 0, extent: 3);
       await editor.disable();
       ZefyrEditor widget = tester.widget(find.byType(ZefyrEditor));
-      expect(widget.enabled, isFalse);
+      expect(widget.mode, ZefyrMode.view);
     });
   });
 }

packages/zefyr/test/widgets/image_test.dart

@@ -75,8 +75,7 @@ void main() {
       expect(editor.selection.extentOffset, embed.documentOffset);
     });
 
-    testWidgets('tap right side of image puts caret after it',
-        (tester) async {
+    testWidgets('tap right side of image puts caret after it', (tester) async {
       final editor = new EditorSandBox(tester: tester);
       await editor.pumpAndTap();
       await editor.tapButtonWithIcon(Icons.photo);
@@ -105,7 +104,7 @@ void main() {
       EmbedNode embed = line.children.single;
       expect(editor.selection.baseOffset, embed.documentOffset);
       expect(editor.selection.extentOffset, embed.documentOffset + 1);
-      expect(find.text('Paste'), findsOneWidget);
+      expect(find.text('PASTE'), findsOneWidget);
     });
   });
 }

packages/zefyr/test/widgets/scope_test.dart

@@ -14,6 +14,7 @@ void main() {
       WidgetsFlutterBinding.ensureInitialized();
       final doc = NotusDocument();
       scope = ZefyrScope.editable(
+        mode: ZefyrMode.edit,
         controller: ZefyrController(doc),
         imageDelegate: ZefyrDefaultImageDelegate(),
         focusNode: FocusNode(),

packages/zefyr/test/widgets/selection_test.dart

@@ -22,7 +22,7 @@ void main() {
       await tester.pumpAndSettle();
       await tester.tapAt(offset);
       await tester.pumpAndSettle();
-      expect(find.text('Paste'), findsOneWidget);
+      expect(find.text('PASTE'), findsOneWidget);
     });
 
     testWidgets('hides when editor lost focus', (tester) async {