Merge pull request #63 from memspace/zefyr-view

Zefyr view

doc/quick_start.md

 
 ```yaml
 dependencies:
-  zefyr: ^0.3.0
+  zefyr: [latest_version]
 ```
 
 And run `flutter packages get` to install. This installs both `zefyr`

packages/notus/analysis_options.yaml

 analyzer:
-  language:
-    enableSuperMixins: true
+  strong-mode:
+    implicit-casts: false
+    implicit-dynamic: false
 
 # Lint rules and documentation, see http://dart-lang.github.io/linter/lints
 linter:
   rules:
-    # - avoid_init_to_null
+    - avoid_init_to_null
     - cancel_subscriptions
     - close_sinks
     - directives_ordering

packages/notus/lib/src/convert/markdown.dart

   String _writeLine(String text, NotusStyle style) {
     StringBuffer buffer = new StringBuffer();
     if (style.contains(NotusAttribute.heading)) {
-      _writeAttribute(buffer, style.get(NotusAttribute.heading));
+      _writeAttribute(buffer, style.get<int>(NotusAttribute.heading));
     }
 
     // Write the text itself
     } else if (attribute == NotusAttribute.italic) {
       _writeItalicTag(buffer);
     } else if (attribute.key == NotusAttribute.link.key) {
-      _writeLinkTag(buffer, attribute, close: close);
+      _writeLinkTag(buffer, attribute as NotusAttribute<String>, close: close);
     } else if (attribute.key == NotusAttribute.heading.key) {
-      _writeHeadingTag(buffer, attribute);
+      _writeHeadingTag(buffer, attribute as NotusAttribute<int>);
     } else if (attribute.key == NotusAttribute.block.key) {
-      _writeBlockTag(buffer, attribute, close: close);
+      _writeBlockTag(buffer, attribute as NotusAttribute<String>, close: close);
     } else {
       throw new ArgumentError('Cannot handle $attribute');
     }

packages/notus/lib/src/document.dart

     _loadDocument(_delta);
   }
 
-  NotusDocument.fromJson(dynamic data)
+  NotusDocument.fromJson(List data)
       : _heuristics = NotusHeuristics.fallback,
         _delta = Delta.fromJson(data) {
     _loadDocument(_delta);

packages/notus/lib/src/document/attributes.dart

   /// Embed style attribute.
   static const embed = const EmbedAttributeBuilder._();
 
-  factory NotusAttribute._fromKeyValue(String key, T value) {
+  static NotusAttribute _fromKeyValue(String key, dynamic value) {
     if (!_registry.containsKey(key))
       throw new ArgumentError.value(
           key, 'No attribute with key "$key" registered.');
       new NotusAttribute<T>._(key, scope, value);
 
   @override
-  bool operator ==(other) {
+  bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is! NotusAttribute<T>) return false;
     NotusAttribute<T> typedOther = other;
 
   final Map<String, NotusAttribute> _data;
 
-  static NotusStyle fromJson(Map data) {
+  static NotusStyle fromJson(Map<String, dynamic> data) {
     if (data == null) return new NotusStyle();
 
-    final result = data.map((key, value) {
-      var attr = new NotusAttribute._fromKeyValue(key, value);
+    final result = data.map((String key, dynamic value) {
+      var attr = NotusAttribute._fromKeyValue(key, value);
       return new MapEntry<String, NotusAttribute>(key, attr);
     });
     return new NotusStyle._(result);
   /// [attribute].
   bool containsSame(NotusAttribute attribute) {
     assert(attribute != null);
-    return get(attribute) == attribute;
+    return get<dynamic>(attribute) == attribute;
   }
 
   /// Returns value of specified attribute [key] in this set.
   /// Returns JSON-serializable representation of this style.
   Map<String, dynamic> toJson() => _data.isEmpty
       ? null
-      : _data.map(
-          (_, value) => new MapEntry<String, dynamic>(value.key, value.value));
+      : _data.map<String, dynamic>((String _, NotusAttribute value) =>
+          new MapEntry<String, dynamic>(value.key, value.value));
 
   @override
-  bool operator ==(other) {
+  bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is! NotusStyle) return false;
     NotusStyle typedOther = other;

packages/notus/lib/src/document/block.dart

       while (child != line) {
         child.unlink();
         before.add(child);
-        child = this.first;
+        child = this.first as LineNode;
       }
       line.unlink();
       insertBefore(line);

packages/notus/lib/src/document/leaf.dart

     assert(index >= 0 && index <= length);
     if (index == 0) return this;
     if (index == length && isLast) return null;
-    if (index == length && !isLast) return next;
+    if (index == length && !isLast) return next as LeafNode;
 
     String text = _value;
     _value = text.substring(0, index);
   }
 
   @override
-  LineNode get parent => super.parent;
+  LineNode get parent => super.parent as LineNode;
 
   @override
   int get length => _value.length;

packages/notus/lib/src/document/line.dart

     if (isLast) {
       if (parent is BlockNode) {
         if (parent.isLast) return null;
-        return (parent.next is BlockNode)
+        LineNode line = (parent.next is BlockNode)
             ? (parent.next as BlockNode).first
             : parent.next;
+        return line;
       } else
         return null;
     } else {
-      return (next is BlockNode) ? (next as BlockNode).first : next;
+      LineNode line = (next is BlockNode) ? (next as BlockNode).first : next;
+      return line;
     }
   }
 
       result = result.mergeAll(node.style);
       int pos = node.length - data.offset;
       while (!node.isLast && pos < local) {
-        node = node.next;
+        node = node.next as LeafNode;
         _handle(node.style);
         pos += node.length;
       }

packages/notus/lib/src/document/node.dart

 
     if (isEmpty) {
       assert(index == 0);
-      Node node = defaultChild;
+      T node = defaultChild;
       add(node);
       node.insert(index, value, style);
     } else {

packages/notus/lib/src/heuristics/delete_rules.dart

 
   Map<String, dynamic> _unsetAttributes(Map<String, dynamic> attributes) {
     if (attributes == null) return null;
-    return attributes.map((key, value) => new MapEntry(key, null));
+    return attributes.map<String, dynamic>((String key, dynamic value) =>
+        new MapEntry<String, dynamic>(key, null));
   }
 }
 

packages/notus/lib/src/heuristics/insert_rules.dart

     final target = iter.next();
 
     if (target.data.startsWith('\n')) {
-      Map<String, dynamic> resetStyle = null;
+      Map<String, dynamic> resetStyle;
       if (target.attributes != null &&
           target.attributes.containsKey(NotusAttribute.heading.key)) {
         resetStyle = NotusAttribute.heading.unset.toJson();
       }
     }
 
-    Map<String, dynamic> resetStyle = null;
-    Map<String, dynamic> blockStyle = null;
+    Map<String, dynamic> resetStyle;
+    Map<String, dynamic> blockStyle;
     if (lineStyle != null) {
       if (lineStyle.containsKey(NotusAttribute.heading.key)) {
         resetStyle = NotusAttribute.heading.unset.toJson();

packages/notus/test/convert/markdown_test.dart

 
 final doc =
     r'[{"insert":"Zefyr"},{"insert":"\n","attributes":{"heading":1}},{"insert":"Soft and gentle rich text editing for Flutter applications.","attributes":{"i":true}},{"insert":"\nZefyr is an "},{"insert":"early preview","attributes":{"b":true}},{"insert":" open source library.\nDocumentation"},{"insert":"\n","attributes":{"heading":3}},{"insert":"Quick Start"},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Data format and Document Model"},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Style attributes"},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Heuristic rules"},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Clean and modern look"},{"insert":"\n","attributes":{"heading":2}},{"insert":"Zefyr’s rich text editor is built with simplicity and flexibility in mind. It provides clean interface for distraction-free editing. Think Medium.com-like experience.\nimport ‘package:flutter/material.dart’;"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"import ‘package:notus/notus.dart’;"},{"insert":"\n\n","attributes":{"block":"code"}},{"insert":"void main() {"},{"insert":"\n","attributes":{"block":"code"}},{"insert":" print(“Hello world!”);"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"}"},{"insert":"\n","attributes":{"block":"code"}}]';
-final delta = Delta.fromJson(json.decode(doc));
+final delta = Delta.fromJson(json.decode(doc) as List);
 
 final expectedMarkdown = '''
 # Zefyr

packages/notus/test/document/attributes_test.dart

 void main() {
   group('$NotusStyle', () {
     test('get', () {
-      var attrs = NotusStyle.fromJson({'block': 'ul'});
+      var attrs = NotusStyle.fromJson(<String, dynamic>{'block': 'ul'});
       var attr = attrs.get(NotusAttribute.block);
       expect(attr, NotusAttribute.ul);
     });

packages/notus/test/document_test.dart

     test('json serialization', () {
       final original = dartconfDoc();
       final jsonData = json.encode(original);
-      final doc = NotusDocument.fromJson(json.decode(jsonData));
+      final doc = NotusDocument.fromJson(json.decode(jsonData) as List);
       expect(doc.toDelta(), original.toDelta());
       expect(json.encode(doc), jsonData);
     });

packages/zefyr/CHANGELOG.md

+## Unreleased
+
+* Added non-scrollable `ZefyrView` widget which allows previewing Notus documents inside
+  layouts using their own scrollables like ListView.
+* Breaking change: renamed `EditableRichText` to `ZefyrRichText`. User code is unlikely to be
+  affected unless you've extended Zefyr with custom implementations of block widgets.
+* Breaking change: renamed `RenderEditableParagraph` to `RenderZefyrParagraph`. User code is
+  unlikely to be affected unless you've extended Zefyr with custom implementations of block widgets.
+* Added `ZefyrScope` class - replaces previously used scope objects `ZefyrEditableTextScope` and
+  `ZefyrEditorScope`. Unified all shared resources under one class.
+* Breaking change: removed `ZefyrEditor.of` and `ZefyrEditableText.of` static methods.
+  Use `ZefyrScope.of` instead.
+
 ## 0.3.0
 
 This version introduces new widget `ZefyrScaffold` which allows embedding Zefyr in custom

packages/zefyr/analysis_options.yaml

 analyzer:
-  language:
-#    enableSuperMixins: true
+  strong-mode:
+    implicit-casts: false
+    implicit-dynamic: false
 
 # Lint rules and documentation, see http://dart-lang.github.io/linter/lints
 linter:
   rules:
-    # - avoid_init_to_null
+    - avoid_init_to_null
     - cancel_subscriptions
     - close_sinks
     - directives_ordering

packages/zefyr/example/lib/main.dart

 import 'package:flutter/material.dart';
 import 'src/form.dart';
 import 'src/full_page.dart';
+import 'src/view.dart';
 
 void main() {
   runApp(new ZefyrApp());
       routes: {
         "/fullPage": buildFullPage,
         "/form": buildFormPage,
+        "/view": buildViewPage,
       },
     );
   }
   Widget buildFormPage(BuildContext context) {
     return FormEmbeddedScreen();
   }
+
+  Widget buildViewPage(BuildContext context) {
+    return ViewScreen();
+  }
 }
 
 class HomePage extends StatelessWidget {
             color: Colors.lightBlue,
             textColor: Colors.white,
           ),
+          FlatButton(
+            onPressed: () => nav.pushNamed('/view'),
+            child: Text('Read-only embeddable view'),
+            color: Colors.lightBlue,
+            textColor: Colors.white,
+          ),
           Expanded(child: Container()),
         ],
       ),

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

+import 'dart:async';
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
     r'g":2}},{"insert":"Of course:\nimport ‘package:flutter/material.dart’;"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"import ‘package:zefyr/zefyr.dart’;"},{"insert":"\n\n","attributes":{"block":"code"}},{"insert":"void main() {"},{"insert":"\n","attributes":{"block":"code"}},{"insert":" runApp(MyZefyrApp());"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"}"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"\n\n\n"}]';
 
 Delta getDelta() {
-  return Delta.fromJson(json.decode(doc));
+  return Delta.fromJson(json.decode(doc) as List);
 }
 
 class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
       ZefyrController(NotusDocument.fromDelta(getDelta()));
   final FocusNode _focusNode = new FocusNode();
   bool _editing = false;
+  StreamSubscription<NotusChange> _sub;
+
+  @override
+  void initState() {
+    super.initState();
+    _sub = _controller.document.changes.listen((change) {
+      print('${change.source}: ${change.change}');
+    });
+  }
+
+  @override
+  void dispose() {
+    _sub.cancel();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {

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

+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:quill_delta/quill_delta.dart';
+import 'package:zefyr/zefyr.dart';
+
+import 'full_page.dart';
+
+class ViewScreen extends StatefulWidget {
+  @override
+  _ViewScreen createState() => new _ViewScreen();
+}
+
+final doc =
+    r'[{"insert":"Zefyr"},{"insert":"\n","attributes":{"heading":1}},{"insert":"Soft and gentle rich text editing for Flutter applications.","attributes":{"i":true}},{"insert":"\n"},{"insert":"​","attributes":{"embed":{"type":"image","source":"asset://images/breeze.jpg"}}},{"insert":"\n"},{"insert":"Photo by Hiroyuki Takeda.","attributes":{"i":true}},{"insert":"\nZefyr is currently in "},{"insert":"early preview","attributes":{"b":true}},{"insert":". If you have a feature request or found a bug, please file it at the "},{"insert":"issue tracker","attributes":{"a":"https://github.com/memspace/zefyr/issues"}},{"insert":'
+    r'".\nDocumentation"},{"insert":"\n","attributes":{"heading":3}},{"insert":"Quick Start","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/quick_start.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Data Format and Document Model","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/data_and_document.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Style Attributes","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/attr'
+    r'ibutes.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Heuristic Rules","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/heuristics.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"FAQ","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/faq.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Clean and modern look"},{"insert":"\n","attributes":{"heading":2}},{"insert":"Zefyr’s rich text editor is built with simplicity and fle'
+    r'xibility in mind. It provides clean interface for distraction-free editing. Think Medium.com-like experience.\nMarkdown inspired semantics"},{"insert":"\n","attributes":{"heading":2}},{"insert":"Ever needed to have a heading line inside of a quote block, like this:\nI’m a Markdown heading"},{"insert":"\n","attributes":{"block":"quote","heading":3}},{"insert":"And I’m a regular paragraph"},{"insert":"\n","attributes":{"block":"quote"}},{"insert":"Code blocks"},{"insert":"\n","attributes":{"headin'
+    r'g":2}},{"insert":"Of course:\nimport ‘package:flutter/material.dart’;"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"import ‘package:zefyr/zefyr.dart’;"},{"insert":"\n\n","attributes":{"block":"code"}},{"insert":"void main() {"},{"insert":"\n","attributes":{"block":"code"}},{"insert":" runApp(MyZefyrApp());"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"}"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"\n\n\n"}]';
+
+Delta getDelta() {
+  return Delta.fromJson(json.decode(doc) as List);
+}
+
+class _ViewScreen extends State<ViewScreen> {
+  final doc = NotusDocument.fromDelta(getDelta());
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = new ZefyrThemeData(
+      toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
+        color: Colors.grey.shade800,
+        toggleColor: Colors.grey.shade900,
+        iconColor: Colors.white,
+        disabledIconColor: Colors.grey.shade500,
+      ),
+    );
+    return Scaffold(
+      resizeToAvoidBottomPadding: true,
+      appBar: AppBar(
+        elevation: 1.0,
+        backgroundColor: Colors.grey.shade200,
+        brightness: Brightness.light,
+        title: ZefyrLogo(),
+      ),
+      body: ZefyrTheme(
+        data: theme,
+        child: ListView(
+          children: <Widget>[
+            SizedBox(height: 16.0),
+            ListTile(
+              leading: Icon(Icons.info),
+              title: Text('ZefyrView inside ListView'),
+              subtitle: Text(
+                  'Allows embedding Notus documents in custom scrollables'),
+              trailing: Icon(Icons.keyboard_arrow_down),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: ZefyrView(
+                document: doc,
+                imageDelegate: new CustomImageDelegate(),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Custom image delegate used by this example to load image from application
+/// assets.
+///
+/// Default image delegate only supports [FileImage]s.
+class CustomImageDelegate extends ZefyrDefaultImageDelegate {
+  @override
+  Widget buildImage(BuildContext context, String imageSource) {
+    // We use custom "asset" scheme to distinguish asset images from other files.
+    if (imageSource.startsWith('asset://')) {
+      final asset = new AssetImage(imageSource.replaceFirst('asset://', ''));
+      return new Image(image: asset);
+    } else {
+      return super.buildImage(context, imageSource);
+    }
+  }
+}

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

 import 'package:notus/notus.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-import 'editor.dart';
+import 'scope.dart';
 import 'theme.dart';
 import 'toolbar.dart';
 
     }
   }
 
-  Color _getColor(ZefyrEditorScope editor, ZefyrToolbarTheme theme) {
+  Color _getColor(ZefyrScope editor, ZefyrToolbarTheme theme) {
     if (isAttributeAction) {
       final attribute = kZefyrToolbarAttributeActions[action];
       final isToggled = (attribute is NotusAttribute)
   }
 
   VoidCallback _getPressedHandler(
-      ZefyrEditorScope editor, ZefyrToolbarState toolbar) {
+      ZefyrScope editor, ZefyrToolbarState toolbar) {
     if (onPressed != null) {
       return onPressed;
     } else if (isAttributeAction) {
     return null;
   }
 
-  void _toggleAttribute(NotusAttribute attribute, ZefyrEditorScope editor) {
+  void _toggleAttribute(NotusAttribute attribute, ZefyrScope editor) {
     final isToggled = editor.selectionStyle.containsSame(attribute);
     if (isToggled) {
       editor.formatSelection(attribute.unset);
   final TextEditingController _inputController = TextEditingController();
   Key _inputKey;
   bool _formatError = false;
-  ZefyrEditorScope _editor;
+  ZefyrScope _editor;
 
   bool get isEditing => _inputKey != null;
 
 class _LinkInputState extends State<_LinkInput> {
   final FocusNode _focusNode = FocusNode();
 
-  ZefyrEditorScope _editor;
+  ZefyrScope _editor;
   bool _didAutoFocus = false;
 
   @override
     final toolbar = ZefyrToolbar.of(context);
 
     if (_editor != toolbar.editor) {
-      _editor?.setToolbarFocusNode(null);
+      _editor?.toolbarFocusNode = null;
       _editor = toolbar.editor;
-      _editor.setToolbarFocusNode(_focusNode);
+      _editor.toolbarFocusNode = _focusNode;
     }
   }
 
   @override
   void dispose() {
-    _editor?.setToolbarFocusNode(null);
+    _editor?.toolbarFocusNode = null;
     _focusNode.dispose();
     _editor = null;
     super.dispose();

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

 import 'package:notus/notus.dart';
 
 import 'editable_box.dart';
-import 'editable_text.dart';
 import 'horizontal_rule.dart';
 import 'image.dart';
 import 'rich_text.dart';
+import 'scope.dart';
 import 'theme.dart';
 
 /// Raw widget representing a single line of rich text document in Zefyr editor.
 
   @override
   Widget build(BuildContext context) {
-    ensureVisible(context);
+    final scope = ZefyrScope.of(context);
+    if (scope.isEditable) {
+      ensureVisible(context, scope);
+    }
     final theme = ZefyrTheme.of(context);
-    final editable = ZefyrEditableText.of(context);
 
     Widget content;
     if (widget.node.hasEmbed) {
-      content = buildEmbed(context);
+      content = buildEmbed(context, scope);
     } else {
       assert(widget.style != null);
-
-      final text = new EditableRichText(
+      content = ZefyrRichText(
         node: widget.node,
         text: buildText(context),
       );
-      content = new EditableBox(
-        child: text,
+    }
+
+    if (scope.isEditable) {
+      content = EditableBox(
+        child: content,
         node: widget.node,
         layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
+        renderContext: scope.renderContext,
+        showCursor: scope.showCursor,
+        selection: scope.selection,
         selectionColor: theme.selectionColor,
       );
+      content = CompositedTransformTarget(link: _link, child: content);
     }
 
-    final result = new CompositedTransformTarget(link: _link, child: content);
     if (widget.padding != null) {
-      return new Padding(padding: widget.padding, child: result);
+      return Padding(padding: widget.padding, child: content);
     }
-    return result;
+    return content;
   }
 
-  void ensureVisible(BuildContext context) {
-    final editable = ZefyrEditableText.of(context);
-    if (editable.selection.isCollapsed &&
-        widget.node.containsOffset(editable.selection.extentOffset)) {
+  void ensureVisible(BuildContext context, ZefyrScope scope) {
+    if (scope.selection.isCollapsed &&
+        widget.node.containsOffset(scope.selection.extentOffset)) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         bringIntoView(context);
       });
     return result;
   }
 
-  Widget buildEmbed(BuildContext context) {
-    final theme = ZefyrTheme.of(context);
-    final editable = ZefyrEditableText.of(context);
-
+  Widget buildEmbed(BuildContext context, ZefyrScope scope) {
     EmbedNode node = widget.node.children.single;
     EmbedAttribute embed = node.style.get(NotusAttribute.embed);
 
     if (embed.type == EmbedType.horizontalRule) {
-      final hr = new ZefyrHorizontalRule(node: node);
-      return new EditableBox(
-        child: hr,
-        node: widget.node,
-        layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
-        selectionColor: theme.selectionColor,
-      );
+      return ZefyrHorizontalRule(node: node);
     } else if (embed.type == EmbedType.image) {
-      return new EditableBox(
-        child: ZefyrImage(node: node, delegate: editable.imageDelegate),
-        node: widget.node,
-        layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
-        selectionColor: theme.selectionColor,
-      );
+      return ZefyrImage(node: node, delegate: scope.imageDelegate);
     } else {
       throw new UnimplementedError('Unimplemented embed type ${embed.type}');
     }

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

+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+/// Helper class that keeps state relevant to the editing cursor.
+class CursorTimer {
+  static const _kCursorBlinkHalfPeriod = const Duration(milliseconds: 500);
+
+  Timer _timer;
+  final ValueNotifier<bool> _showCursor = new ValueNotifier<bool>(false);
+
+  ValueNotifier<bool> get value => _showCursor;
+
+  void _cursorTick(Timer timer) {
+    _showCursor.value = !_showCursor.value;
+  }
+
+  /// Starts cursor timer.
+  void start() {
+    _showCursor.value = true;
+    _timer = new Timer.periodic(_kCursorBlinkHalfPeriod, _cursorTick);
+  }
+
+  /// Stops cursor timer.
+  void stop() {
+    _timer?.cancel();
+    _timer = null;
+    _showCursor.value = false;
+  }
+
+  /// Starts or stops cursor timer based on current state of [focusNode]
+  /// and [selection].
+  void startOrStop(FocusNode focusNode, TextSelection selection) {
+    final hasFocus = focusNode.hasFocus;
+    final selectionCollapsed = selection.isCollapsed;
+    if (_timer == null && hasFocus && selectionCollapsed) {
+      start();
+    } else if (_timer != null && (!hasFocus || !selectionCollapsed)) {
+      stop();
+    }
+  }
+}

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

   set showCursor(ValueNotifier<bool> value) {
     assert(value != null);
     if (_showCursor == value) return;
-    if (attached) _showCursor.removeListener(markNeedsPaint);
+    if (attached) _showCursor.removeListener(markNeedsCursorPaint);
     _showCursor = value;
-    if (attached) _showCursor.addListener(markNeedsPaint);
+    if (attached) _showCursor.addListener(markNeedsCursorPaint);
     markNeedsPaint();
   }
 
   /// Returns `true` if current selection is collapsed, located within
   /// this paragraph and is visible according to tick timer.
   bool get isCaretVisible {
+    return _showCursor.value && containsCaret;
+  }
+
+  /// Returns `true` if current selection is collapsed and located
+  /// within this paragraph.
+  bool get containsCaret {
     if (!_selection.isCollapsed) return false;
-    if (!_showCursor.value) return false;
 
     final int start = node.documentOffset;
     final int end = start + node.length;
     return intersectsWithSelection(_selection);
   }
 
+  void markNeedsCursorPaint() {
+    if (containsCaret) {
+      markNeedsPaint();
+    }
+  }
+
   //
   // Overridden members of RenderBox
   //
   @override
   void attach(PipelineOwner owner) {
     super.attach(owner);
-    _showCursor.addListener(markNeedsPaint);
+    _showCursor.addListener(markNeedsCursorPaint);
     _renderContext.addBox(this);
   }
 
   @override
   void detach() {
-    _showCursor.removeListener(markNeedsPaint);
+    _showCursor.removeListener(markNeedsCursorPaint);
     _renderContext.removeBox(this);
     super.detach();
   }

packages/zefyr/lib/src/widgets/editable_text.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:async';
-
-import 'package:collection/collection.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 import 'code.dart';
 import 'common.dart';
 import 'controller.dart';
-import 'editable_box.dart';
+import 'cursor_timer.dart';
 import 'editor.dart';
 import 'image.dart';
 import 'input.dart';
 import 'paragraph.dart';
 import 'quote.dart';
 import 'render_context.dart';
+import 'scope.dart';
 import 'selection.dart';
+import 'theme.dart';
 
 /// Core widget responsible for editing Zefyr documents.
 ///
-/// Depends on presence of [ZefyrTheme] somewhere up the widget tree.
+/// Depends on presence of [ZefyrTheme] and [ZefyrScope] somewhere up the
+/// widget tree.
 ///
 /// Consider using [ZefyrEditor] which wraps this widget and adds a toolbar to
 /// edit style attributes.
   /// Padding around editable area.
   final EdgeInsets padding;
 
-  static ZefyrEditableTextScope of(BuildContext context) {
-    final ZefyrEditableTextScope result =
-        context.inheritFromWidgetOfExactType(ZefyrEditableTextScope);
-    return result;
-  }
-
   @override
   _ZefyrEditableTextState createState() => new _ZefyrEditableTextState();
 }
 
-/// Provides access to shared state of [ZefyrEditableText].
-class ZefyrEditableTextScope extends InheritedWidget {
-  static const _kEquality = const SetEquality<RenderEditableBox>();
-
-  ZefyrEditableTextScope({
-    Key key,
-    @required Widget child,
-    @required this.selection,
-    @required this.showCursor,
-    @required this.renderContext,
-    @required this.imageDelegate,
-  })  : _activeBoxes = new Set.from(renderContext.active),
-        super(key: key, child: child);
-
-  final TextSelection selection;
-  final ValueNotifier<bool> showCursor;
-  final ZefyrRenderContext renderContext;
-  final ZefyrImageDelegate imageDelegate;
-  final Set<RenderEditableBox> _activeBoxes;
-
-  @override
-  bool updateShouldNotify(ZefyrEditableTextScope oldWidget) {
-    return selection != oldWidget.selection ||
-        showCursor != oldWidget.showCursor ||
-        imageDelegate != oldWidget.imageDelegate ||
-        !_kEquality.equals(_activeBoxes, oldWidget._activeBoxes);
-  }
-}
-
 class _ZefyrEditableTextState extends State<ZefyrEditableText>
     with AutomaticKeepAliveClientMixin {
   //
 
   /// Current text selection.
   TextSelection get selection => widget.controller.selection;
-  ZefyrRenderContext get renderContext => _renderContext;
-  ValueNotifier<bool> get showCursor => _cursorTimer.value;
 
   /// Express interest in interacting with the keyboard.
   ///
   Widget build(BuildContext context) {
     FocusScope.of(context).reparentIfNeeded(focusNode);
     super.build(context); // See AutomaticKeepAliveState.
-    ZefyrEditor.of(context);
 
     Widget body = ListBody(children: _buildChildren(context));
     if (widget.padding != null) {
       ));
     }
 
-    return new ZefyrEditableTextScope(
-      selection: selection,
-      showCursor: showCursor,
-      renderContext: renderContext,
-      imageDelegate: widget.imageDelegate,
-      child: Stack(fit: StackFit.expand, children: layers),
-    );
+    return Stack(fit: StackFit.expand, children: layers);
   }
 
   @override
     }
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final scope = ZefyrScope.of(context);
+    if (_renderContext != scope.renderContext) {
+      _renderContext?.removeListener(_handleRenderContextChange);
+      _renderContext = scope.renderContext;
+      _renderContext.addListener(_handleRenderContextChange);
+    }
+    if (_cursorTimer != scope.cursorTimer) {
+      _cursorTimer?.stop();
+      _cursorTimer = scope.cursorTimer;
+      _cursorTimer.startOrStop(focusNode, selection);
+    }
+  }
+
   @override
   void dispose() {
     _cancelSubscriptions();
   // Private members
   //
 
-  final ScrollController _scrollController = new ScrollController();
-  final ZefyrRenderContext _renderContext = new ZefyrRenderContext();
-  final _CursorTimer _cursorTimer = new _CursorTimer();
+  final ScrollController _scrollController = ScrollController();
+  ZefyrRenderContext _renderContext;
+  CursorTimer _cursorTimer;
   InputConnectionController _input;
   bool _didAutoFocus = false;
 
     final BlockNode block = node;
     final blockStyle = block.style.get(NotusAttribute.block);
     if (blockStyle == NotusAttribute.block.code) {
-      return new ZefyrCode(node: node);
+      return new ZefyrCode(node: block);
     } else if (blockStyle == NotusAttribute.block.bulletList) {
-      return new ZefyrList(node: node);
+      return new ZefyrList(node: block);
     } else if (blockStyle == NotusAttribute.block.numberList) {
-      return new ZefyrList(node: node);
+      return new ZefyrList(node: block);
     } else if (blockStyle == NotusAttribute.block.quote) {
-      return new ZefyrQuote(node: node);
+      return new ZefyrQuote(node: block);
     }
 
     throw new UnimplementedError('Block format $blockStyle.');
 
   void _updateSubscriptions([ZefyrEditableText oldWidget]) {
     if (oldWidget == null) {
-      _renderContext.addListener(_handleRenderContextChange);
       widget.controller.addListener(_handleLocalValueChange);
       focusNode.addListener(_handleFocusChange);
       return;
 
   void _cancelSubscriptions() {
     _renderContext.removeListener(_handleRenderContextChange);
-    _renderContext.dispose();
     widget.controller.removeListener(_handleLocalValueChange);
     focusNode.removeListener(_handleFocusChange);
     _input.closeConnection();
     });
   }
 }
-
-/// Helper class that keeps state relevant to the cursor.
-class _CursorTimer {
-  static const _kCursorBlinkHalfPeriod = const Duration(milliseconds: 500);
-
-  Timer _timer;
-  final ValueNotifier<bool> _showCursor = new ValueNotifier<bool>(false);
-
-  ValueNotifier<bool> get value => _showCursor;
-
-  void _cursorTick(Timer timer) {
-    _showCursor.value = !_showCursor.value;
-  }
-
-  /// Starts cursor timer.
-  void start() {
-    _showCursor.value = true;
-    _timer = new Timer.periodic(_kCursorBlinkHalfPeriod, _cursorTick);
-  }
-
-  /// Stops cursor timer.
-  void stop() {
-    _timer?.cancel();
-    _timer = null;
-    _showCursor.value = false;
-  }
-
-  /// Starts or stops cursor timer based on current state of [focusNode]
-  /// and [selection].
-  void startOrStop(FocusNode focusNode, TextSelection selection) {
-    final hasFocus = focusNode.hasFocus;
-    final selectionCollapsed = selection.isCollapsed;
-    if (_timer == null && hasFocus && selectionCollapsed) {
-      start();
-    } else if (_timer != null && (!hasFocus || !selectionCollapsed)) {
-      stop();
-    }
-  }
-}

packages/zefyr/lib/src/widgets/editor.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/widgets.dart';
-import 'package:notus/notus.dart';
 
 import 'controller.dart';
 import 'editable_text.dart';
 import 'image.dart';
 import 'scaffold.dart';
+import 'scope.dart';
 import 'theme.dart';
 import 'toolbar.dart';
 
-class ZefyrEditorScope extends ChangeNotifier {
-  ZefyrEditorScope({
-    @required ZefyrImageDelegate imageDelegate,
-    @required ZefyrController controller,
-    @required FocusNode focusNode,
-    @required FocusScopeNode focusScope,
-  })  : _controller = controller,
-        _imageDelegate = imageDelegate,
-        _focusScope = focusScope,
-        _focusNode = focusNode {
-    _selectionStyle = _controller.getSelectionStyle();
-    _selection = _controller.selection;
-    _controller.addListener(_handleControllerChange);
-    _focusNode.addListener(_handleFocusChange);
-  }
-
-  bool _disposed = false;
-
-  ZefyrImageDelegate _imageDelegate;
-  ZefyrImageDelegate get imageDelegate => _imageDelegate;
-
-  FocusScopeNode _focusScope;
-  FocusNode _focusNode;
-
-  ZefyrController _controller;
-  NotusStyle get selectionStyle => _selectionStyle;
-  NotusStyle _selectionStyle;
-  TextSelection get selection => _selection;
-  TextSelection _selection;
-
-  @override
-  void dispose() {
-    assert(!_disposed);
-    _controller.removeListener(_handleControllerChange);
-    _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();
-  }
-
-  FocusNode _toolbarFocusNode;
-
-  void setToolbarFocusNode(FocusNode node) {
-    assert(!_disposed || node == null);
-    if (_toolbarFocusNode != node) {
-      _toolbarFocusNode?.removeListener(_handleFocusChange);
-      _toolbarFocusNode = node;
-      _toolbarFocusNode?.addListener(_handleFocusChange);
-      // We do not notify listeners here because it will happen when
-      // focus state changes, see [_handleFocusChange].
-    }
-  }
-
-  FocusOwner get focusOwner {
-    assert(!_disposed);
-    if (_focusNode.hasFocus) {
-      return FocusOwner.editor;
-    } else if (_toolbarFocusNode?.hasFocus == true) {
-      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() {
-    assert(!_disposed);
-    _focusScope.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({
   /// Padding around editable area.
   final EdgeInsets padding;
 
-  static ZefyrEditorScope of(BuildContext context) {
-    _ZefyrEditorScope widget =
-        context.inheritFromWidgetOfExactType(_ZefyrEditorScope);
-    return widget.scope;
-  }
-
   @override
   _ZefyrEditorState createState() => new _ZefyrEditorState();
 }
 
 class _ZefyrEditorState extends State<ZefyrEditor> {
   ZefyrImageDelegate _imageDelegate;
-  ZefyrEditorScope _scope;
+  ZefyrScope _scope;
   ZefyrThemeData _themeData;
   GlobalKey<ZefyrToolbarState> _toolbarKey;
   ZefyrScaffoldState _scaffold;
     _toolbarKey = null;
   }
 
-  Widget buildToolbar(BuildContext) {
+  Widget buildToolbar(BuildContext context) {
     return ZefyrTheme(
       data: _themeData,
       child: ZefyrToolbar(
     } else if (!hasToolbar) {
       showToolbar();
     } else {
+      // TODO: is there a nicer way to do this?
       WidgetsBinding.instance.addPostFrameCallback((_) {
         _toolbarKey?.currentState?.markNeedsRebuild();
       });
   @override
   void didUpdateWidget(ZefyrEditor oldWidget) {
     super.didUpdateWidget(oldWidget);
-    _scope._updateControllerIfNeeded(widget.controller);
-    _scope._updateFocusNodeIfNeeded(widget.focusNode);
+    _scope.controller = widget.controller;
+    _scope.focusNode = widget.focusNode;
     if (widget.imageDelegate != oldWidget.imageDelegate) {
       _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
-      _scope._updateImageDelegateIfNeeded(_imageDelegate);
+      _scope.imageDelegate = _imageDelegate;
     }
   }
 
         : fallbackTheme;
 
     if (_scope == null) {
-      _scope = ZefyrEditorScope(
+      _scope = ZefyrScope.editable(
         imageDelegate: _imageDelegate,
         controller: widget.controller,
         focusNode: widget.focusNode,
       _scope.addListener(_handleChange);
     } else {
       final focusScope = FocusScope.of(context);
-      if (focusScope != _scope._focusScope) {
-        _scope._focusScope = focusScope;
-      }
+      _scope.focusScope = focusScope;
     }
 
     final scaffold = ZefyrScaffold.of(context);
   @override
   Widget build(BuildContext context) {
     Widget editable = new ZefyrEditableText(
-      controller: widget.controller,
-      focusNode: widget.focusNode,
-      imageDelegate: _imageDelegate,
+      controller: _scope.controller,
+      focusNode: _scope.focusNode,
+      imageDelegate: _scope.imageDelegate,
       autofocus: widget.autofocus,
       enabled: widget.enabled,
       padding: widget.padding,
 
     return ZefyrTheme(
       data: _themeData,
-      child: _ZefyrEditorScope(
+      child: ZefyrScopeAccess(
         scope: _scope,
         child: editable,
       ),

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

 class _ZefyrImageState extends State<ZefyrImage> {
   String get imageSource {
     EmbedAttribute attribute = widget.node.style.get(NotusAttribute.embed);
-    return attribute.value['source'];
+    return attribute.value['source'] as String;
   }
 
   @override

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

 
     Widget content;
     if (line.style.contains(NotusAttribute.heading)) {
-      content = new ZefyrHeading(node: node, blockStyle: blockStyle);
+      content = new ZefyrHeading(node: line, blockStyle: blockStyle);
     } else {
-      content = new ZefyrParagraph(node: node, blockStyle: blockStyle);
+      content = new ZefyrParagraph(node: line, blockStyle: blockStyle);
     }
 
     final row = Row(children: <Widget>[Expanded(child: content)]);

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

   /// Returns closest render box to the specified global [point].
   ///
   /// If [point] is inside of one of active render boxes that box is returned.
-  /// Otherwise this method checks if [point] is to the left or to the right
+  /// If no box found this method checks if [point] is to the left or to the right
   /// side of a box, e.g. if vertical offset of this point is inside of one of
-  /// the active boxes. If it is then that box is returned.
+  /// the active boxes. If it is then that box is returned. If not then this
+  /// method picks a box with shortest vertical distance to this [point].
   RenderEditableProxyBox closestBoxForGlobalPoint(Offset point) {
     assert(!_disposed);
     RenderEditableProxyBox box = boxForGlobalPoint(point);

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

 import 'caret.dart';
 import 'editable_box.dart';
 
-class EditableRichText extends LeafRenderObjectWidget {
-  EditableRichText({
+/// Represents single paragraph of Zefyr rich-text.
+class ZefyrRichText extends LeafRenderObjectWidget {
+  ZefyrRichText({
     @required this.node,
     @required this.text,
   }) : assert(node != null && text != null);
 
   @override
   RenderObject createRenderObject(BuildContext context) {
-    return new RenderEditableParagraph(
+    return new RenderZefyrParagraph(
       text,
       node: node,
       textDirection: Directionality.of(context),
 
   @override
   void updateRenderObject(
-      BuildContext context, RenderEditableParagraph renderObject) {
+      BuildContext context, RenderZefyrParagraph renderObject) {
     renderObject
       ..text = text
       ..node = node;
   }
 }
 
-class RenderEditableParagraph extends RenderParagraph
+class RenderZefyrParagraph extends RenderParagraph
     implements RenderEditableBox {
-  RenderEditableParagraph(
+  RenderZefyrParagraph(
     TextSpan text, {
-    @required ContainerNode node,
+    @required LineNode node,
     TextAlign textAlign: TextAlign.start,
     @required TextDirection textDirection,
     bool softWrap: true,

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

+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:notus/notus.dart';
+
+import 'controller.dart';
+import 'cursor_timer.dart';
+import 'editor.dart';
+import 'image.dart';
+import 'render_context.dart';
+import 'view.dart';
+
+/// Provides access to shared state of [ZefyrEditor] or [ZefyrView].
+///
+/// A scope object can be created by an editable widget like [ZefyrEditor] in
+/// which case it provides access to editing state, including focus nodes,
+/// selection and such. Editable scope can be created using
+/// [ZefyrScope.editable] constructor.
+///
+/// If a scope object is created by a view-only widget like [ZefyrView] then
+/// it only provides access to [imageDelegate].
+///
+/// Can be retrieved using [ZefyrScope.of].
+class ZefyrScope extends ChangeNotifier {
+  /// Creates a view-only scope.
+  ///
+  /// Normally used in [ZefyrView].
+  ZefyrScope.view({@required ZefyrImageDelegate imageDelegate})
+      : assert(imageDelegate != null),
+        isEditable = false,
+        _imageDelegate = imageDelegate;
+
+  /// Creates editable scope.
+  ///
+  /// Normally used in [ZefyrEditor].
+  ZefyrScope.editable({
+    @required ZefyrController controller,
+    @required ZefyrImageDelegate imageDelegate,
+    @required FocusNode focusNode,
+    @required FocusScopeNode focusScope,
+  })  : assert(controller != null),
+        assert(imageDelegate != null),
+        assert(focusNode != null),
+        assert(focusScope != null),
+        isEditable = true,
+        _controller = controller,
+        _imageDelegate = imageDelegate,
+        _focusNode = focusNode,
+        _focusScope = focusScope,
+        _cursorTimer = CursorTimer(),
+        _renderContext = ZefyrRenderContext() {
+    _selectionStyle = _controller.getSelectionStyle();
+    _selection = _controller.selection;
+    _controller.addListener(_handleControllerChange);
+    _focusNode.addListener(_handleFocusChange);
+  }
+
+  static ZefyrScope of(BuildContext context) {
+    final ZefyrScopeAccess widget =
+        context.inheritFromWidgetOfExactType(ZefyrScopeAccess);
+    return widget.scope;
+  }
+
+  ZefyrImageDelegate _imageDelegate;
+  ZefyrImageDelegate get imageDelegate => _imageDelegate;
+  set imageDelegate(ZefyrImageDelegate value) {
+    assert(value != null);
+    if (_imageDelegate != value) {
+      _imageDelegate = value;
+      notifyListeners();
+    }
+  }
+
+  ZefyrController _controller;
+  ZefyrController get controller => _controller;
+  set controller(ZefyrController value) {
+    assert(isEditable && value != null);
+    if (_controller != value) {
+      _controller.removeListener(_handleControllerChange);
+      _controller = value;
+      _selectionStyle = _controller.getSelectionStyle();
+      _selection = _controller.selection;
+      _controller.addListener(_handleControllerChange);
+      notifyListeners();
+    }
+  }
+
+  FocusNode _focusNode;
+  FocusNode get focusNode => _focusNode;
+  set focusNode(FocusNode value) {
+    assert(isEditable && value != null);
+    if (_focusNode != value) {
+      _focusNode.removeListener(_handleFocusChange);
+      _focusNode = value;
+      _focusNode.addListener(_handleFocusChange);
+      notifyListeners();
+    }
+  }
+
+  FocusScopeNode _focusScope;
+  FocusScopeNode get focusScope => _focusScope;
+  set focusScope(FocusScopeNode value) {
+    assert(isEditable && value != null);
+    if (_focusScope != value) {
+      _focusScope = value;
+    }
+  }
+
+  CursorTimer _cursorTimer;
+  CursorTimer get cursorTimer => _cursorTimer;
+  ValueNotifier<bool> get showCursor => cursorTimer.value;
+
+  ZefyrRenderContext _renderContext;
+  ZefyrRenderContext get renderContext => _renderContext;
+
+  NotusStyle get selectionStyle => _selectionStyle;
+  NotusStyle _selectionStyle;
+  TextSelection get selection => _selection;
+  TextSelection _selection;
+
+  bool _disposed = false;
+  FocusNode _toolbarFocusNode;
+
+  /// Whether this scope is backed by editable Zefyr widgets or read-only view.
+  ///
+  /// Returns `true` if this scope provides Zefyr interface that allows editing
+  /// (e.g. created by [ZefyrEditor]). Returns `false` if this scope provides
+  /// read-only view (e.g. created by [ZefyrView]).
+  ///
+  /// Editable scope provides access to corresponding [controller], [focusNode],
+  /// [focusScope], [showCursor], [renderContext] and other shared objects. For
+  /// non-editable scopes these are set to `null`. You can still access
+  /// objects which are not dependent on editing flow, e.g. [imageDelegate].
+  final bool isEditable;
+
+  set toolbarFocusNode(FocusNode node) {
+    assert(isEditable);
+    assert(!_disposed || node == null);
+    if (_toolbarFocusNode != node) {
+      _toolbarFocusNode?.removeListener(_handleFocusChange);
+      _toolbarFocusNode = node;
+      _toolbarFocusNode?.addListener(_handleFocusChange);
+      // We do not notify listeners here because it will happen when
+      // focus state changes, see [_handleFocusChange].
+    }
+  }
+
+  FocusOwner get focusOwner {
+    assert(isEditable);
+    assert(!_disposed);
+    if (_focusNode.hasFocus) {
+      return FocusOwner.editor;
+    } else if (_toolbarFocusNode?.hasFocus == true) {
+      return FocusOwner.toolbar;
+    } else {
+      return FocusOwner.none;
+    }
+  }
+
+  void updateSelection(TextSelection value,
+      {ChangeSource source: ChangeSource.remote}) {
+    assert(isEditable);
+    assert(!_disposed);
+    _controller.updateSelection(value, source: source);
+  }
+
+  void formatSelection(NotusAttribute value) {
+    assert(isEditable);
+    assert(!_disposed);
+    _controller.formatSelection(value);
+  }
+
+  void focus() {
+    assert(isEditable);
+    assert(!_disposed);
+    _focusScope.requestFocus(_focusNode);
+  }
+
+  void hideKeyboard() {
+    assert(isEditable);
+    assert(!_disposed);
+    _focusNode.unfocus();
+  }
+
+  @override
+  void dispose() {
+    assert(!_disposed);
+    _controller?.removeListener(_handleControllerChange);
+    _focusNode?.removeListener(_handleFocusChange);
+    _disposed = true;
+    super.dispose();
+  }
+
+  void _handleControllerChange() {
+    assert(!_disposed);
+    final attrs = _controller.getSelectionStyle();
+    final selection = _controller.selection;
+    if (_selectionStyle != attrs || _selection != selection) {
+      _selectionStyle = attrs;
+      _selection = 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();
+  }
+
+  @override
+  String toString() {
+    return '$ZefyrScope#${shortHash(this)}';
+  }
+}
+
+class ZefyrScopeAccess extends InheritedWidget {
+  final ZefyrScope scope;
+
+  ZefyrScopeAccess({Key key, @required this.scope, @required Widget child})
+      : super(key: key, child: child);
+
+  @override
+  bool updateShouldNotify(ZefyrScopeAccess oldWidget) {
+    return scope != oldWidget.scope;
+  }
+}

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

 
 import 'controller.dart';
 import 'editable_box.dart';
-import 'editable_text.dart';
-import 'editor.dart';
+import 'scope.dart';
 
 RenderEditableBox _getEditableBox(HitTestResult result) {
   for (var entry in result.path) {
     if (entry.target is RenderEditableBox) {
-      return entry.target;
+      return entry.target as RenderEditableBox;
     }
   }
   return null;
   }
 
   void showToolbar() {
-    final editable = ZefyrEditableText.of(context);
-    assert(editable != null);
+    final scope = ZefyrScope.of(context);
+    assert(scope != null);
     final toolbarOpacity = _toolbarController.view;
     _toolbar = new OverlayEntry(
       builder: (context) => new FadeTransition(
             opacity: toolbarOpacity,
             child: new _SelectionToolbar(
-              editable: editable,
+              scope: scope,
               controls: widget.controls,
               delegate: this,
             ),
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    final editor = ZefyrEditor.of(context);
+    final editor = ZefyrScope.of(context);
     if (_editor != editor) {
       _editor?.removeListener(_handleChange);
       _editor = editor;
   OverlayEntry _toolbar;
   AnimationController _toolbarController;
 
-  ZefyrEditorScope _editor;
+  ZefyrScope _editor;
   TextSelection _selection;
   FocusOwner _focusOwner;
 
     if (!mounted) {
       return;
     }
-    final editor = ZefyrEditor.of(context);
-    final selection = editor.selection;
-    final focusOwner = editor.focusOwner;
+
+    final selection = _editor.selection;
+    final focusOwner = _editor.focusOwner;
     setState(() {
       if (focusOwner != FocusOwner.editor) {
         hideToolbar();
 
     RenderEditableProxyBox box = _getEditableBox(result);
     if (box == null) {
-      final editable = ZefyrEditableText.of(context);
-      box = editable.renderContext.closestBoxForGlobalPoint(globalPoint);
+      box = _editor.renderContext.closestBoxForGlobalPoint(globalPoint);
     }
     if (box == null) return null;
 
 }
 
 class _SelectionHandleDriverState extends State<SelectionHandleDriver> {
+  ZefyrScope _scope;
+
   /// Current document selection.
   TextSelection get selection => _selection;
   TextSelection _selection;
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    final editable = ZefyrEditableText.of(context);
-    _selection = editable.selection;
+    final scope = ZefyrScope.of(context);
+    if (_scope != scope) {
+      _scope?.removeListener(_handleScopeChange);
+      _scope = scope;
+      _scope.addListener(_handleScopeChange);
+    }
+    _selection = _scope.selection;
+  }
+
+  @override
+  void dispose() {
+    _scope?.removeListener(_handleScopeChange);
+    super.dispose();
   }
 
   //
 
   @override
   Widget build(BuildContext context) {
-    final editor = ZefyrEditor.of(context);
-    final editable = ZefyrEditableText.of(context);
     if (selection == null ||
         selection.isCollapsed ||
         widget.controls == null ||
-        editor.focusOwner != FocusOwner.editor) {
+        _scope.focusOwner != FocusOwner.editor) {
       return new Container();
     }
-    final block = editable.renderContext.boxForTextOffset(documentOffset);
+    final block = _scope.renderContext.boxForTextOffset(documentOffset);
     final position = getPosition(block);
     Widget handle;
     if (position == null) {
 
   Offset _dragPosition;
 
+  void _handleScopeChange() {
+    if (_selection != _scope.selection) {
+      setState(() {
+        _selection = _scope.selection;
+      });
+    }
+  }
+
   void _handleDragStart(DragStartDetails details) {
     _dragPosition = details.globalPosition;
   }
   void _handleDragUpdate(DragUpdateDetails details) {
     _dragPosition += details.delta;
     final globalPoint = _dragPosition;
-    final editor = ZefyrEditor.of(context);
-    final editable = ZefyrEditableText.of(context);
-    final paragraph = editable.renderContext.boxForGlobalPoint(globalPoint);
+    final paragraph = _scope.renderContext.boxForGlobalPoint(globalPoint);
     if (paragraph == null) {
       return;
     }
     }
 
     if (newSelection != _selection) {
-      editor.updateSelection(newSelection, source: ChangeSource.local);
+      _scope.updateSelection(newSelection, source: ChangeSource.local);
     }
   }
 }
 class _SelectionToolbar extends StatefulWidget {
   const _SelectionToolbar({
     Key key,
-    @required this.editable,
+    @required this.scope,
     @required this.controls,
     @required this.delegate,
   }) : super(key: key);
 
-  final ZefyrEditableTextScope editable;
+  final ZefyrScope scope;
   final TextSelectionControls controls;
   final TextSelectionDelegate delegate;
 
 }
 
 class _SelectionToolbarState extends State<_SelectionToolbar> {
-  ZefyrEditableTextScope get editable => widget.editable;
+  ZefyrScope get editable => widget.scope;
   TextSelection get selection => widget.delegate.textEditingValue.selection;
 
   @override
       return Container();
     }
     final boxes = block.getEndpointsForSelection(selection);
-
     // Find the horizontal midpoint, just above the selected text.
     final Offset midpoint = new Offset(
       (boxes.length == 1)
       block.localToGlobal(Offset.zero),
       block.localToGlobal(block.size.bottomRight(Offset.zero)),
     );
-
     final toolbar = widget.controls
         .buildToolbar(context, editingRegion, midpoint, widget.delegate);
     return new CompositedTransformFollower(

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

 import 'package:notus/notus.dart';
 
 import 'buttons.dart';
-import 'editor.dart';
+import 'scope.dart';
 import 'theme.dart';
 
 /// List of all button actions supported by [ZefyrToolbar] buttons.
   }) : super(key: key);
 
   final ZefyrToolbarDelegate delegate;
-  final ZefyrEditorScope editor;
+  final ZefyrScope editor;
 
   /// Whether to automatically hide this toolbar when editor loses focus.
   final bool autoHide;
 
   bool get hasOverlay => _overlayBuilder != null;
 
-  ZefyrEditorScope get editor => widget.editor;
+  ZefyrScope get editor => widget.editor;
 
   @override
   void initState() {

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

+import 'package:flutter/material.dart';
+import 'package:notus/notus.dart';
+
+import 'code.dart';
+import 'common.dart';
+import 'image.dart';
+import 'list.dart';
+import 'paragraph.dart';
+import 'quote.dart';
+import 'scope.dart';
+import 'theme.dart';
+
+/// Non-scrollable read-only view of Notus rich text documents.
+class ZefyrView extends StatefulWidget {
+  final NotusDocument document;
+  final ZefyrImageDelegate imageDelegate;
+
+  const ZefyrView({Key key, @required this.document, this.imageDelegate})
+      : super(key: key);
+
+  @override
+  ZefyrViewState createState() => ZefyrViewState();
+}
+
+class ZefyrViewState extends State<ZefyrView> {
+  ZefyrScope _scope;
+  ZefyrThemeData _themeData;
+
+  ZefyrImageDelegate get imageDelegate => widget.imageDelegate;
+
+  @override
+  void initState() {
+    super.initState();
+    _scope = ZefyrScope.view(imageDelegate: widget.imageDelegate);
+  }
+
+  @override
+  void didUpdateWidget(ZefyrView oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _scope.imageDelegate = widget.imageDelegate;
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final parentTheme = ZefyrTheme.of(context, nullOk: true);
+    final fallbackTheme = ZefyrThemeData.fallback(context);
+    _themeData = (parentTheme != null)
+        ? fallbackTheme.merge(parentTheme)
+        : fallbackTheme;
+  }
+
+  @override
+  void dispose() {
+    _scope.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ZefyrTheme(
+      data: _themeData,
+      child: ZefyrScopeAccess(
+        scope: _scope,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: _buildChildren(context),
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _buildChildren(BuildContext context) {
+    final result = <Widget>[];
+    for (var node in widget.document.root.children) {
+      result.add(_defaultChildBuilder(context, node));
+    }
+    return result;
+  }
+
+  Widget _defaultChildBuilder(BuildContext context, Node node) {
+    if (node is LineNode) {
+      if (node.hasEmbed) {
+        return new RawZefyrLine(node: node);
+      } else if (node.style.contains(NotusAttribute.heading)) {
+        return new ZefyrHeading(node: node);
+      }
+      return new ZefyrParagraph(node: node);
+    }
+
+    final BlockNode block = node;
+    final blockStyle = block.style.get(NotusAttribute.block);
+    if (blockStyle == NotusAttribute.block.code) {
+      return new ZefyrCode(node: block);
+    } else if (blockStyle == NotusAttribute.block.bulletList) {
+      return new ZefyrList(node: block);
+    } else if (blockStyle == NotusAttribute.block.numberList) {
+      return new ZefyrList(node: block);
+    } else if (blockStyle == NotusAttribute.block.quote) {
+      return new ZefyrQuote(node: block);
+    }
+
+    throw new UnimplementedError('Block format $blockStyle.');
+  }
+}

packages/zefyr/lib/zefyr.dart

 export 'src/widgets/paragraph.dart';
 export 'src/widgets/quote.dart';
 export 'src/widgets/scaffold.dart';
+export 'src/widgets/scope.dart' hide ZefyrScopeAccess;
 export 'src/widgets/selection.dart' hide SelectionHandleDriver;
 export 'src/widgets/theme.dart';
 export 'src/widgets/toolbar.dart';
+export 'src/widgets/view.dart';

packages/zefyr/test/rendering/render_editable_paragraph_test.dart

 import 'package:zefyr/zefyr.dart';
 
 void main() {
-  group('$RenderEditableParagraph', () {
+  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;
-    RenderEditableParagraph p;
+    RenderZefyrParagraph p;
 
     setUp(() {
       WidgetsFlutterBinding.ensureInitialized();
       renderContext = new ZefyrRenderContext();
-      p = new RenderEditableParagraph(
+      p = new RenderZefyrParagraph(
         text,
-        node: doc.root.children.first,
+        node: doc.root.children.first as LineNode,
         textDirection: TextDirection.ltr,
       );
     });

packages/zefyr/test/widgets/buttons_test.dart

       expect(bold.value, 'House');
 
       await editor.tapButtonWithIcon(Icons.format_bold);
-      line = editor.document.root.children.first;
+      line = editor.document.root.children.first as LineNode;
       expect(line.childCount, 1);
     });
 
       await editor.updateSelection(base: 7, extent: 7);
       await editor.tapButtonWithIcon(Icons.link);
       await editor.tapButtonWithIcon(Icons.link_off);
-      line = editor.document.root.children.first;
+      line = editor.document.root.children.first as LineNode;
       expect(line.childCount, 1);
     });
   });

packages/zefyr/test/widgets/editable_text_scope_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 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:zefyr/src/widgets/editable_box.dart';
-import 'package:zefyr/src/widgets/render_context.dart';
-import 'package:zefyr/zefyr.dart';
-
-void main() {
-  group('$ZefyrEditableTextScope', () {
-    setUp(() {
-      WidgetsFlutterBinding.ensureInitialized();
-    });
-
-    test('updateShouldNotify for rendering context changes', () {
-      var context = new ZefyrRenderContext();
-      var paragraph1 = createParagraph(context);
-      var paragraph2 = createParagraph(context);
-      context.addBox(paragraph1);
-      context.markDirty(paragraph1, false);
-      var widget1 = createScope(renderingContext: context);
-      var widget2 = createScope(renderingContext: context);
-
-      expect(widget2.updateShouldNotify(widget1), isFalse);
-      context.addBox(paragraph2);
-      context.markDirty(paragraph2, false);
-      widget2 = createScope(renderingContext: context);
-      expect(widget2.updateShouldNotify(widget1), isTrue);
-    });
-
-    test('updateShouldNotify for selection changes', () {
-      var context = new ZefyrRenderContext();
-      var selection = new TextSelection.collapsed(offset: 0);
-      var widget1 =
-          createScope(renderingContext: context, selection: selection);
-      var widget2 =
-          createScope(renderingContext: context, selection: selection);
-
-      expect(widget2.updateShouldNotify(widget1), isFalse);
-      selection = new TextSelection.collapsed(offset: 1);
-      widget2 = createScope(renderingContext: context, selection: selection);
-      expect(widget2.updateShouldNotify(widget1), isTrue);
-    });
-
-    test('updateShouldNotify for showCursor changes', () {
-      var context = new ZefyrRenderContext();
-      var showCursor = new ValueNotifier<bool>(true);
-      var widget1 =
-          createScope(renderingContext: context, showCursor: showCursor);
-      var widget2 =
-          createScope(renderingContext: context, showCursor: showCursor);
-
-      expect(widget2.updateShouldNotify(widget1), isFalse);
-      showCursor = new ValueNotifier<bool>(true);
-      widget2 = createScope(renderingContext: context, showCursor: showCursor);
-      expect(widget2.updateShouldNotify(widget1), isTrue);
-    });
-
-    test('updateShouldNotify for imageDelegate changes', () {
-      var context = new ZefyrRenderContext();
-      var delegate = new ZefyrDefaultImageDelegate();
-      var widget1 =
-          createScope(renderingContext: context, imageDelegate: delegate);
-      var widget2 =
-          createScope(renderingContext: context, imageDelegate: delegate);
-
-      expect(widget2.updateShouldNotify(widget1), isFalse);
-      delegate = new ZefyrDefaultImageDelegate();
-      widget2 = createScope(renderingContext: context, imageDelegate: delegate);
-      expect(widget2.updateShouldNotify(widget1), isTrue);
-    });
-  });
-}
-
-ZefyrEditableTextScope createScope({
-  @required ZefyrRenderContext renderingContext,
-  TextSelection selection,
-  ValueNotifier<bool> showCursor,
-  ZefyrImageDelegate imageDelegate,
-}) {
-  return ZefyrEditableTextScope(
-    renderContext: renderingContext,
-    selection: selection,
-    showCursor: showCursor,
-    imageDelegate: imageDelegate,
-    child: null,
-  );
-}
-
-RenderEditableProxyBox createParagraph(ZefyrRenderContext context) {
-  final doc = new NotusDocument();
-  doc.insert(0, 'This House Is A Circus');
-  final link = new LayerLink();
-  final showCursor = new ValueNotifier<bool>(true);
-  final selection = new TextSelection.collapsed(offset: 0);
-  final selectionColor = Colors.blue;
-  return new RenderEditableProxyBox(
-    node: doc.root.children.first,
-    layerLink: link,
-    renderContext: context,
-    showCursor: showCursor,
-    selection: selection,
-    selectionColor: selectionColor,
-  );
-}

packages/zefyr/test/widgets/editor_test.dart

       await editor.tapEditor();
       // TODO: figure out why this extra pump is needed here
       await tester.pumpAndSettle();
-      EditableRichText p = tester.widget(find.byType(EditableRichText).first);
+      ZefyrRichText p = tester.widget(find.byType(ZefyrRichText).first);
       expect(p.text.children.first.style.color, Colors.red);
     });
 

packages/zefyr/test/widgets/image_test.dart

       EmbedNode embed = line.children.single;
       expect(editor.selection.baseOffset, embed.documentOffset);
       expect(editor.selection.extentOffset, embed.documentOffset + 1);
+      expect(find.text('Paste'), findsOneWidget);
     });
   });
 }

packages/zefyr/test/widgets/rich_text_test.dart

 import 'package:zefyr/zefyr.dart';
 
 void main() {
-  group('$EditableRichText', () {
+  group('$ZefyrRichText', () {
     final doc = new NotusDocument();
     doc.insert(0, 'This House Is A Circus');
     final text = new TextSpan(text: 'This House Is A Circus');
     setUp(() {
       widget = new Directionality(
         textDirection: TextDirection.ltr,
-        child: new EditableRichText(
-          node: doc.root.children.first,
+        child: new ZefyrRichText(
+          node: doc.root.children.first as LineNode,
           text: text,
         ),
       );
 
     testWidgets('initialize', (tester) async {
       await tester.pumpWidget(widget);
-      EditableRichText result =
-          tester.firstWidget(find.byType(EditableRichText));
+      ZefyrRichText result =
+          tester.firstWidget(find.byType(ZefyrRichText));
       expect(result, isNotNull);
       expect(result.text.text, 'This House Is A Circus');
     });

packages/zefyr/test/widgets/scope_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 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:zefyr/zefyr.dart';
+
+void main() {
+  group('$ZefyrScope', () {
+    ZefyrScope scope;
+
+    setUp(() {
+      WidgetsFlutterBinding.ensureInitialized();
+      final doc = NotusDocument();
+      scope = ZefyrScope.editable(
+        controller: ZefyrController(doc),
+        imageDelegate: ZefyrDefaultImageDelegate(),
+        focusNode: FocusNode(),
+        focusScope: FocusScopeNode(),
+      );
+    });
+
+    test('it notifies on image delegate update', () {
+      bool notified = false;
+      scope.addListener(() {
+        notified = true;
+      });
+      final delegate = ZefyrDefaultImageDelegate();
+      scope.imageDelegate = delegate;
+      expect(notified, isTrue);
+      notified = false;
+      scope.imageDelegate = delegate;
+      expect(notified, isFalse);
+    });
+
+    test('it notifies on controller update', () {
+      bool notified = false;
+      scope.addListener(() {
+        notified = true;
+      });
+      final controller = ZefyrController(NotusDocument());
+      scope.controller = controller;
+      expect(notified, isTrue);
+      notified = false;
+      scope.controller = controller;
+      expect(notified, isFalse);
+    });
+
+    test('it notifies on focus node update', () {
+      bool notified = false;
+      scope.addListener(() {
+        notified = true;
+      });
+      final focusNode = FocusNode();
+      scope.focusNode = focusNode;
+      expect(notified, isTrue);
+      notified = false;
+      scope.focusNode = focusNode;
+      expect(notified, isFalse);
+    });
+
+    test('it notifies on selection changes but not text changes', () {
+      bool notified = false;
+      scope.addListener(() {
+        notified = true;
+      });
+
+      scope.controller.replaceText(0, 0, 'Hello');
+      expect(notified, isFalse);
+      scope.controller.updateSelection(TextSelection.collapsed(offset: 4));
+      expect(notified, isTrue);
+    });
+  });
+}

packages/zefyr/test/widgets/selection_test.dart

       final editor = new EditorSandBox(tester: tester);
       await editor.tapEditor();
 
-      RenderEditableParagraph renderObject =
-          tester.firstRenderObject(find.byType(EditableRichText));
+      RenderZefyrParagraph renderObject =
+          tester.firstRenderObject(find.byType(ZefyrRichText));
       var offset = renderObject.localToGlobal(Offset.zero);
       offset += Offset(5.0, 5.0);
       await tester.tapAt(offset);
       await tester.pumpAndSettle();
       expect(editor.controller.selection.extentOffset, 10);
 
-      RenderEditableParagraph renderObject =
-          tester.firstRenderObject(find.byType(EditableRichText));
+      RenderZefyrParagraph renderObject =
+          tester.firstRenderObject(find.byType(ZefyrRichText));
       var offset = renderObject.localToGlobal(Offset.zero);
       offset += Offset(-5.0, 5.0);
       await tester.tapAt(offset);