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

packages/zefyr/CHANGELOG.md

+## 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

           child: ZefyrEditor(
             controller: _controller,
             focusNode: _focusNode,
-            enabled: _editing,
+            mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
             imageDelegate: new CustomImageDelegate(),
           ),
         ),

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

     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

 // 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';
 
 import 'image.dart';
 import 'input.dart';
 import 'list.dart';
+import 'mode.dart';
 import 'paragraph.dart';
 import 'quote.dart';
 import 'render_context.dart';
     @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;
 
   }
 
   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
   //
 
     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);
   }
 
   // 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

 // 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';
     @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.
   @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) {
 
     if (_scope == null) {
       _scope = ZefyrScope.editable(
+        mode: widget.mode,
         imageDelegate: _imageDelegate,
         controller: widget.controller,
         focusNode: widget.focusNode,
       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

 import 'controller.dart';
 import 'editor.dart';
 import 'image.dart';
+import 'mode.dart';
 import 'toolbar.dart';
 
 /// Zefyr editor with material design decorations.
   final ZefyrController controller;
   final FocusNode focusNode;
   final bool autofocus;
-  final bool enabled;
+  final ZefyrMode mode;
   final ZefyrToolbarDelegate toolbarDelegate;
   final ZefyrImageDelegate imageDelegate;
   final ScrollPhysics physics;
     this.controller,
     this.focusNode,
     this.autofocus: false,
-    this.enabled,
+    this.mode,
     this.toolbarDelegate,
     this.imageDelegate,
     this.physics,
       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,
         (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

+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

 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

 import 'cursor_timer.dart';
 import 'editor.dart';
 import 'image.dart';
+import 'mode.dart';
 import 'render_context.dart';
 import 'view.dart';
 
   /// 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;
 
   ///
   /// 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,
     }
   }
 
+  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

 
 /// 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() =>
 
 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);
   }
     // 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;
         children: <Widget>[
           new SelectionHandleDriver(
             position: _SelectionHandlePosition.base,
-            controls: widget.controls,
+            selectionOverlay: this,
           ),
           new SelectionHandleDriver(
             position: _SelectionHandlePosition.extent,
-            controls: widget.controls,
+            selectionOverlay: this,
           ),
         ],
       ),
   // 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();
     }
   }
       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 {
 
     RenderEditableProxyBox box = _getEditableBox(result);
     if (box == null) {
-      box = _editor.renderContext.closestBoxForGlobalPoint(globalPoint);
+      box = _scope.renderContext.closestBoxForGlobalPoint(globalPoint);
     }
     if (box == null) return null;
 
     } else {
       _didCaretTap = true;
     }
-    widget.controller.updateSelection(selection, source: ChangeSource.local);
+    _scope.controller.updateSelection(selection, source: ChangeSource.local);
   }
 
   void _handleLongPress() {
       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 }
   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() =>
 
   @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);
       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(
               right: padding.right,
               bottom: padding.bottom,
             ),
-            child: widget.controls.buildHandle(
+            child: widget.selectionOverlay.controls.buildHandle(
               context,
               type,
               block.preferredLineHeight,
 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) {
 
   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();
     }
       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

+// 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';
 import 'common.dart';
 import 'image.dart';
 import 'list.dart';
+import 'mode.dart';
 import 'paragraph.dart';
 import 'quote.dart';
 import 'scope.dart';
   @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

 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

 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
 
   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

+// 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

     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

       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

       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);
       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

       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

       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 {