Refactoring render objects to reduce duplication, WIP

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

@@ -5,12 +5,13 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
-import 'editable_paragraph.dart';
+import 'editable_box.dart';
+import 'editable_rich_text.dart';
 import 'editable_text.dart';
 import 'horizontal_rule.dart';
 import 'theme.dart';
 
-/// Raw widget representing a single line of Notus document in Zefyr editor.
+/// Raw widget representing a single line of rich text document in Zefyr editor.
 ///
 /// See [ZefyrParagraph] and [ZefyrHeading] which wrap this widget and
 /// integrate it with current [ZefyrTheme].
@@ -50,9 +51,14 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
       content = buildEmbed(context);
     } else {
       assert(widget.style != null);
-      content = new EditableParagraph(
+
+      final text = new EditableRichText(
         node: widget.node,
         text: buildText(context),
+      );
+      content = new EditableBox(
+        child: text,
+        node: widget.node,
         layerLink: _link,
         renderContext: editable.renderContext,
         showCursor: editable.showCursor,
@@ -137,7 +143,9 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
     EmbedAttribute embed = node.style.get(NotusAttribute.embed);
 
     if (embed.type == EmbedType.horizontalRule) {
-      return new HorizontalRule(
+      final hr = new HorizontalRule(node: node);
+      return new EditableBox(
+        child: hr,
         node: widget.node,
         layerLink: _link,
         renderContext: editable.renderContext,

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

@@ -1,18 +1,247 @@
 // 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:math' as math;
 import 'dart:ui' as ui;
 
 import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
-abstract class RenderEditableBox implements RenderBox {
-  ContainerNode get node;
+import 'render_context.dart';
+
+class EditableBox extends SingleChildRenderObjectWidget {
+  EditableBox({
+    @required Widget child,
+    @required this.node,
+    @required this.layerLink,
+    @required this.renderContext,
+    @required this.showCursor,
+    @required this.selection,
+    @required this.selectionColor,
+  }) : super(child: child);
+
+  final ContainerNode node;
+  final LayerLink layerLink;
+  final ZefyrRenderContext renderContext;
+  final ValueNotifier<bool> showCursor;
+  final TextSelection selection;
+  final Color selectionColor;
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return new RenderEditableProxyBox(
+      node: node,
+      layerLink: layerLink,
+      renderContext: renderContext,
+      showCursor: showCursor,
+      selection: selection,
+      selectionColor: selectionColor,
+    );
+  }
+}
+
+class RenderEditableProxyBox extends RenderBox
+    with
+        RenderObjectWithChildMixin<RenderEditableBox>,
+        RenderProxyBoxMixin<RenderEditableBox>
+    implements RenderEditableBox {
+  RenderEditableProxyBox({
+    RenderEditableBox child,
+    @required ContainerNode node,
+    @required LayerLink layerLink,
+    @required ZefyrRenderContext renderContext,
+    @required ValueNotifier<bool> showCursor,
+    @required TextSelection selection,
+    @required Color selectionColor,
+  })  : _node = node,
+        _layerLink = layerLink,
+        _renderContext = renderContext,
+        _showCursor = showCursor,
+        _selection = selection,
+        _selectionColor = selectionColor,
+        super() {
+    this.child = child;
+  }
+
+  ContainerNode get node => _node;
+  ContainerNode _node;
+  void set node(ContainerNode value) {
+    _node = value;
+  }
+
+  LayerLink get layerLink => _layerLink;
+  LayerLink _layerLink;
+  void set layerLink(LayerLink value) {
+    if (_layerLink == value) return;
+    _layerLink = value;
+  }
+
+  ZefyrRenderContext _renderContext;
+  void set renderContext(ZefyrRenderContext value) {
+    if (_renderContext == value) return;
+    if (attached) _renderContext.removeBox(this);
+    _renderContext = value;
+    if (attached) _renderContext.addBox(this);
+  }
+
+  ValueNotifier<bool> _showCursor;
+  set showCursor(ValueNotifier<bool> value) {
+    assert(value != null);
+    if (_showCursor == value) return;
+    if (attached) _showCursor.removeListener(markNeedsPaint);
+    _showCursor = value;
+    if (attached) _showCursor.addListener(markNeedsPaint);
+    markNeedsPaint();
+  }
+
+  /// Current document selection.
+  TextSelection get selection => _selection;
+  TextSelection _selection;
+  set selection(TextSelection value) {
+    if (_selection == value) return;
+    // TODO: check if selection affects this block (also check previous value)
+    _selection = value;
+    markNeedsPaint();
+  }
+
+  /// Color of selection.
+  Color get selectionColor => _selectionColor;
+  Color _selectionColor;
+  set selectionColor(Color value) {
+    if (_selectionColor == value) return;
+    _selectionColor = value;
+    markNeedsPaint();
+  }
+
+  double get preferredLineHeight => child.preferredLineHeight;
+
+  /// Returns `true` if current selection is collapsed, located within
+  /// this paragraph and is visible according to tick timer.
+  bool get isCaretVisible {
+    if (!_selection.isCollapsed) return false;
+    if (!_showCursor.value) return false;
+
+    final int start = node.documentOffset;
+    final int end = start + node.length;
+    final int caretOffset = _selection.extentOffset;
+    return caretOffset >= start && caretOffset < end;
+  }
+
+  /// Returns `true` if selection is not collapsed and intersects with this
+  /// paragraph.
+  bool get isSelectionVisible {
+    if (_selection.isCollapsed) return false;
+    return intersectsWithSelection(_selection);
+  }
+
+  //
+  // Overridden members of RenderBox
+  //
+
+  @override
+  void attach(PipelineOwner owner) {
+    super.attach(owner);
+    _showCursor.addListener(markNeedsPaint);
+    _renderContext.addBox(this);
+  }
+
+  @override
+  void detach() {
+    _showCursor.removeListener(markNeedsPaint);
+    _renderContext.removeBox(this);
+    super.detach();
+  }
+
+  /// Subclasses must call super as the last statement when overriding this
+  /// method.
+  @override
+  @mustCallSuper
+  void performLayout() {
+    super.performLayout();
+    // Indicate to render context that this object can be used by other
+    // layers (selection overlay, for instance).
+    _renderContext.markDirty(this, false);
+  }
+
+  @override
+  void markNeedsLayout() {
+    // Temporarily remove this object from the render context.
+    _renderContext.markDirty(this, true);
+    super.markNeedsLayout();
+  }
+
+  @override
+  bool hitTestSelf(Offset position) => true;
+
+  @override
+  bool hitTest(HitTestResult result, {Offset position}) {
+    if (size.contains(position)) {
+      result.add(new BoxHitTestEntry(this, position));
+      return true;
+    }
+    return false;
+  }
+
+  @override
+  TextSelection getLocalSelection(TextSelection documentSelection) =>
+      child.getLocalSelection(documentSelection);
+
+  bool intersectsWithSelection(TextSelection selection) =>
+      child.intersectsWithSelection(selection);
+
+  @override
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
+          {bool isLocal: false}) =>
+      child.getEndpointsForSelection(selection, isLocal: isLocal);
+
+  @override
+  ui.TextPosition getPositionForOffset(ui.Offset offset) =>
+      child.getPositionForOffset(offset);
+
+  @override
+  TextRange getWordBoundary(ui.TextPosition position) =>
+      child.getWordBoundary(position);
+}
+
+abstract class RenderEditableBox extends RenderBox {
+  Node get node;
   double get preferredLineHeight;
-  LayerLink get layerLink;
+
   TextPosition getPositionForOffset(Offset offset);
   List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
       {bool isLocal: false});
-  TextSelection getLocalSelection(TextSelection selection);
+
+  /// Returns the text range of the word at the given offset. Characters not
+  /// part of a word, such as spaces, symbols, and punctuation, have word breaks
+  /// on both sides. In such cases, this method will return a text range that
+  /// contains the given text position.
+  ///
+  /// Word boundaries are defined more precisely in Unicode Standard Annex #29
+  /// <http://www.unicode.org/reports/tr29/#Word_Boundaries>.
+  ///
+  /// Valid only after [layout].
   TextRange getWordBoundary(TextPosition position);
+
+  /// Returns part of [documentSelection] local to this box. May return
+  /// `null`.
+  ///
+  /// [documentSelection] must not be collapsed.
+  TextSelection getLocalSelection(TextSelection documentSelection) {
+    if (!intersectsWithSelection(documentSelection)) return null;
+
+    int nodeBase = node.documentOffset;
+    int nodeExtent = nodeBase + node.length;
+    int base = math.max(0, documentSelection.baseOffset - nodeBase);
+    int extent =
+        math.min(documentSelection.extentOffset, nodeExtent) - nodeBase;
+    return documentSelection.copyWith(baseOffset: base, extentOffset: extent);
+  }
+
+  /// Returns `true` if this box intersects with document [selection].
+  bool intersectsWithSelection(TextSelection selection) {
+    final int base = node.documentOffset;
+    final int extent = base + node.length;
+    return base <= selection.extentOffset && selection.baseOffset <= extent;
+  }
 }

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

@@ -9,65 +9,29 @@ import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
 import 'editable_box.dart';
-import 'render_context.dart';
 
 class EditableImage extends LeafRenderObjectWidget {
-  EditableImage({
-    @required this.node,
-    @required this.layerLink,
-    @required this.renderContext,
-    @required this.showCursor,
-    @required this.selection,
-    @required this.selectionColor,
-  }) : assert(renderContext != null);
+  EditableImage({@required this.node}) : assert(node != null);
 
-  final ContainerNode node;
-  final LayerLink layerLink;
-  final ZefyrRenderContext renderContext;
-  final ValueNotifier<bool> showCursor;
-  final TextSelection selection;
-  final Color selectionColor;
+  final EmbedNode node;
 
   @override
   RenderEditableImage createRenderObject(BuildContext context) {
-    return new RenderEditableImage(
-      node: node,
-      layerLink: layerLink,
-      renderContext: renderContext,
-      showCursor: showCursor,
-      selection: selection,
-      selectionColor: selectionColor,
-    );
+    return new RenderEditableImage(node: node);
   }
 
   @override
   void updateRenderObject(
       BuildContext context, RenderEditableImage renderObject) {
-    renderObject
-      ..node = node
-      ..layerLink = layerLink
-      ..renderContext = renderContext
-      ..showCursor = showCursor
-      ..selection = selection
-      ..selectionColor = selectionColor;
+    renderObject..node = node;
   }
 }
 
 class RenderEditableImage extends RenderImage implements RenderEditableBox {
   RenderEditableImage({
     ui.Image image,
-    @required ContainerNode node,
-    @required LayerLink layerLink,
-    @required ZefyrRenderContext renderContext,
-    @required ValueNotifier<bool> showCursor,
-    @required TextSelection selection,
-    @required Color selectionColor,
+    @required EmbedNode node,
   })  : _node = node,
-        _layerLink = layerLink,
-        _renderContext = renderContext,
-        _showCursor = showCursor,
-        _selection = selection,
-        _selectionColor = selectionColor,
         super(
           image: image,
         );
@@ -75,66 +39,25 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   // Public members
   //
 
-  ContainerNode get node => _node;
-  ContainerNode _node;
-  void set node(ContainerNode value) {
+  @override
+  EmbedNode get node => _node;
+  EmbedNode _node;
+  void set node(EmbedNode value) {
     _node = value;
   }
 
-  LayerLink get layerLink => _layerLink;
-  LayerLink _layerLink;
-  void set layerLink(LayerLink value) {
-    if (_layerLink == value) return;
-    _layerLink = value;
-  }
-
-  ZefyrRenderContext _renderContext;
-  void set renderContext(ZefyrRenderContext value) {
-    if (_renderContext == value) return;
-    if (attached) _renderContext.removeBox(this);
-    _renderContext = value;
-    if (attached) _renderContext.addBox(this);
-  }
-
-  ValueNotifier<bool> _showCursor;
-  set showCursor(ValueNotifier<bool> value) {
-    assert(value != null);
-    if (_showCursor == value) return;
-    if (attached) _showCursor.removeListener(markNeedsPaint);
-    _showCursor = value;
-    if (attached) _showCursor.addListener(markNeedsPaint);
-    markNeedsPaint();
-  }
-
-  TextSelection _selection;
-  set selection(TextSelection value) {
-    if (_selection == value) return;
-    // TODO: check if selection affects this block (also check previous value)
-    _selection = value;
-    markNeedsPaint();
-  }
-
-  Color _selectionColor;
-  set selectionColor(Color value) {
-    if (_selectionColor == value) return;
-    _selectionColor = value;
-    markNeedsPaint();
-  }
-
   double get preferredLineHeight => size.height;
 
-  /// Returns part of document [selection] local to this paragraph. May return
-  /// `null`.
-  ///
-  /// [selection] must not be collapsed.
-  TextSelection getLocalSelection(TextSelection selection) {
-    if (!_intersectsWithSelection(selection)) return null;
+  @override
+  TextSelection getLocalSelection(TextSelection documentSelection) {
+    if (!intersectsWithSelection(documentSelection)) return null;
 
     int nodeBase = node.documentOffset;
     int nodeExtent = nodeBase + node.length;
-    int base = math.max(0, selection.baseOffset - nodeBase);
-    int extent = math.min(selection.extentOffset, nodeExtent) - nodeBase;
-    return _selection.copyWith(baseOffset: base, extentOffset: extent);
+    int base = math.max(0, documentSelection.baseOffset - nodeBase);
+    int extent =
+        math.min(documentSelection.extentOffset, nodeExtent) - nodeBase;
+    return documentSelection.copyWith(baseOffset: base, extentOffset: extent);
   }
 
   List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
@@ -153,45 +76,12 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
     ];
   }
 
-  //
-  // Overridden members
-  //
-
-  @override
-  void attach(PipelineOwner owner) {
-    super.attach(owner);
-    _showCursor.addListener(markNeedsPaint);
-    _renderContext.addBox(this);
-  }
-
-  @override
-  void detach() {
-    _showCursor.removeListener(markNeedsPaint);
-    _renderContext.removeBox(this);
-    super.detach();
-  }
-
-  @override
-  bool hitTestSelf(Offset position) => true;
-
-  @override
-  bool hitTest(HitTestResult result, {Offset position}) {
-    if (size.contains(position)) {
-      result.add(new BoxHitTestEntry(this, position));
-      return true;
-    }
-    return false;
-  }
-
   @override
   void performLayout() {
     super.performLayout();
 //    _prototypePainter.layout(
 //        minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
 //    _caretPainter.layout(_prototypePainter.height);
-    // Indicate to render context that this object can be used by other
-    // layers (selection overlay, for instance).
-    _renderContext.markDirty(this, false);
   }
 
   @override
@@ -201,46 +91,13 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
 //    if (_isCaretVisible) _paintCaret(context, offset);
   }
 
-  @override
-  void markNeedsLayout() {
-    // Temporarily remove this object from the render context.
-    _renderContext.markDirty(this, true);
-    super.markNeedsLayout();
-  }
-
   @override
   ui.TextPosition getPositionForOffset(ui.Offset offset) {
     return new ui.TextPosition(offset: node.documentOffset);
   }
 
-  //
-  // Private members
-  //
-
-//  final CaretPainter _caretPainter = new CaretPainter();
-//  List<ui.TextBox> _selectionRects;
-
-  /// Returns `true` if current selection is collapsed, located within
-  /// this paragraph and is visible according to tick timer.
-//  bool get _isCaretVisible {
-//    if (!_selection.isCollapsed) return false;
-//    if (!_showCursor.value) return false;
-//
-//    final int start = node.documentOffset;
-//    final int end = start + node.length;
-//    final int caretOffset = _selection.extentOffset;
-//    return caretOffset >= start && caretOffset < end;
-//  }
-
-  /// Returns `true` if selection is not collapsed and intersects with this
-  /// paragraph.
-//  bool get _isSelectionVisible {
-//    if (_selection.isCollapsed) return false;
-//    return _intersectsWithSelection(_selection);
-//  }
-
   /// Returns `true` if this paragraph intersects with document [selection].
-  bool _intersectsWithSelection(TextSelection selection) {
+  bool intersectsWithSelection(TextSelection selection) {
     final int base = node.documentOffset;
     final int extent = base + node.length;
     return base <= selection.extentOffset && selection.baseOffset <= extent;
@@ -250,22 +107,4 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   TextRange getWordBoundary(ui.TextPosition position) {
     return new TextRange(start: position.offset, end: position.offset + 1);
   }
-
-//
-//  void _paintCaret(PaintingContext context, Offset offset) {
-//    final TextPosition caret = new TextPosition(
-//      offset: _selection.extentOffset - node.documentOffset,
-//    );
-//    Offset caretOffset = getOffsetForCaret(caret, _caretPainter.prototype);
-//    _caretPainter.paint(context.canvas, caretOffset + offset);
-//  }
-//
-//  void _paintSelection(PaintingContext context, Offset offset) {
-//    assert(_isSelectionVisible);
-//    // TODO: this could be improved by painting additional box for line-break characters.
-//    _selectionRects ??= getBoxesForSelection(getLocalSelection(_selection));
-//    final Paint paint = new Paint()..color = _selectionColor;
-//    for (ui.TextBox box in _selectionRects)
-//      context.canvas.drawRect(box.toRect().shift(offset), paint);
-//  }
 }

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

@@ -1,333 +0,0 @@
-// 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:math' as math;
-import 'dart:ui' as ui;
-
-import 'package:flutter/rendering.dart';
-import 'package:flutter/widgets.dart';
-import 'package:notus/notus.dart';
-
-import 'caret.dart';
-import 'editable_box.dart';
-import 'render_context.dart';
-
-class EditableParagraph extends LeafRenderObjectWidget {
-  EditableParagraph({
-    @required this.node,
-    @required this.text,
-    @required this.layerLink,
-    @required this.renderContext,
-    @required this.showCursor,
-    @required this.selection,
-    @required this.selectionColor,
-  }) : assert(renderContext != null);
-
-  final ContainerNode node;
-  final TextSpan text;
-  final LayerLink layerLink;
-  final ZefyrRenderContext renderContext;
-  final ValueNotifier<bool> showCursor;
-  final TextSelection selection;
-  final Color selectionColor;
-
-  @override
-  RenderObject createRenderObject(BuildContext context) {
-    return new RenderEditableParagraph(
-      text,
-      node: node,
-      layerLink: layerLink,
-      renderContext: renderContext,
-      showCursor: showCursor,
-      selection: selection,
-      selectionColor: selectionColor,
-      textDirection: Directionality.of(context),
-    );
-  }
-
-  @override
-  void updateRenderObject(
-      BuildContext context, RenderEditableParagraph renderObject) {
-    renderObject
-      ..text = text
-      ..node = node
-      ..layerLink = layerLink
-      ..renderContext = renderContext
-      ..showCursor = showCursor
-      ..selection = selection
-      ..selectionColor = selectionColor;
-  }
-}
-
-class RenderEditableParagraph extends RenderParagraph
-    implements RenderEditableBox {
-  RenderEditableParagraph(
-    TextSpan text, {
-    @required ContainerNode node,
-    @required LayerLink layerLink,
-    @required ZefyrRenderContext renderContext,
-    @required ValueNotifier<bool> showCursor,
-    @required TextSelection selection,
-    @required Color selectionColor,
-    TextAlign textAlign: TextAlign.start,
-    @required TextDirection textDirection,
-    bool softWrap: true,
-    TextOverflow overflow: TextOverflow.clip,
-    double textScaleFactor: 1.0,
-    int maxLines,
-  })  : _node = node,
-        _layerLink = layerLink,
-        _renderContext = renderContext,
-        _showCursor = showCursor,
-        _selection = selection,
-        _selectionColor = selectionColor,
-        _prototypePainter = new TextPainter(
-          text: new TextSpan(text: '.', style: text.style),
-          textAlign: textAlign,
-          textDirection: textDirection,
-          textScaleFactor: textScaleFactor,
-        ),
-        super(
-          text,
-          textAlign: textAlign,
-          textDirection: textDirection,
-          softWrap: softWrap,
-          overflow: overflow,
-          textScaleFactor: textScaleFactor,
-          maxLines: maxLines,
-        );
-
-  //
-  // Public members
-  //
-
-  ContainerNode get node => _node;
-  ContainerNode _node;
-  void set node(ContainerNode value) {
-    _node = value;
-  }
-
-  LayerLink get layerLink => _layerLink;
-  LayerLink _layerLink;
-  void set layerLink(LayerLink value) {
-    if (_layerLink == value) return;
-    _layerLink = value;
-  }
-
-  ZefyrRenderContext _renderContext;
-  void set renderContext(ZefyrRenderContext value) {
-    if (_renderContext == value) return;
-    if (attached) _renderContext.removeBox(this);
-    _renderContext = value;
-    if (attached) _renderContext.addBox(this);
-  }
-
-  ValueNotifier<bool> _showCursor;
-  set showCursor(ValueNotifier<bool> value) {
-    assert(value != null);
-    if (_showCursor == value) return;
-    if (attached) _showCursor.removeListener(markNeedsPaint);
-    _showCursor = value;
-    if (attached) _showCursor.addListener(markNeedsPaint);
-    markNeedsPaint();
-  }
-
-  TextSelection _selection;
-  set selection(TextSelection value) {
-    if (_selection == value) return;
-    // TODO: check if selection affects this block (also check previous value)
-    _selection = value;
-    _selectionRects = null;
-    markNeedsPaint();
-  }
-
-  Color _selectionColor;
-  set selectionColor(Color value) {
-    if (_selectionColor == value) return;
-    _selectionColor = value;
-    markNeedsPaint();
-  }
-
-  double get preferredLineHeight => _prototypePainter.height;
-
-  /// Returns part of document [selection] local to this paragraph. May return
-  /// `null`.
-  ///
-  /// [selection] must not be collapsed.
-  TextSelection getLocalSelection(TextSelection selection) {
-    if (!_intersectsWithSelection(selection)) return null;
-
-    int nodeBase = node.documentOffset;
-    int nodeExtent = nodeBase + node.length;
-    int base = math.max(0, selection.baseOffset - nodeBase);
-    int extent = math.min(selection.extentOffset, nodeExtent) - nodeBase;
-    return _selection.copyWith(baseOffset: base, extentOffset: extent);
-  }
-
-  // This method works around some issues in getBoxesForSelection and handleы
-  // edge-case with our TextSpan objects not having last line-break character.
-  // Wait for https://github.com/flutter/flutter/issues/16418 to be resolved.
-  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
-      {bool isLocal: false}) {
-    TextSelection local = isLocal ? selection : getLocalSelection(selection);
-    if (local.isCollapsed) {
-      final offset = getOffsetForCaret(local.extent, _caretPainter.prototype);
-      return [
-        new ui.TextBox.fromLTRBD(
-          offset.dx,
-          offset.dy,
-          offset.dx,
-          offset.dy + _caretPainter.prototype.height,
-          TextDirection.ltr,
-        )
-      ];
-    }
-
-    int isBaseShifted = 0;
-    bool isExtentShifted = false;
-    if (local.baseOffset == node.length - 1 && local.baseOffset > 0) {
-      // Since we exclude last line-break from rendered TextSpan we have to
-      // handle end-of-line selection explicitly.
-      local = local.copyWith(baseOffset: local.baseOffset - 1);
-      isBaseShifted = -1;
-    } else if (local.baseOffset == 0 && local.isCollapsed) {
-      // This takes care of beginning of line position.
-      local = local.copyWith(baseOffset: local.baseOffset + 1);
-      isBaseShifted = 1;
-    }
-    if (text.codeUnitAt(local.extentOffset - 1) == 0xA) {
-      // This takes care of the rest end-of-line scenarios, where there are
-      // actually line-breaks in the TextSpan (e.g. in code blocks).
-      local = local.copyWith(extentOffset: local.extentOffset + 1);
-      isExtentShifted = true;
-    }
-    final result = getBoxesForSelection(local).toList();
-    if (isBaseShifted != 0) {
-      final box = result.first;
-      final dx = isBaseShifted == -1 ? box.right : box.left;
-      result.removeAt(0);
-      result.insert(0,
-          new ui.TextBox.fromLTRBD(dx, box.top, dx, box.bottom, box.direction));
-    }
-    if (isExtentShifted) {
-      final box = result.last;
-      result.removeLast;
-      result.add(new ui.TextBox.fromLTRBD(
-          box.left, box.top, box.left, box.bottom, box.direction));
-    }
-    return result;
-  }
-
-  //
-  // Overridden members
-  //
-
-  @override
-  void set text(TextSpan value) {
-    _prototypePainter.text = new TextSpan(text: '.', style: value.style);
-    _selectionRects = null;
-    super.text = value;
-  }
-
-  @override
-  void attach(PipelineOwner owner) {
-    super.attach(owner);
-    _showCursor.addListener(markNeedsPaint);
-    _renderContext.addBox(this);
-  }
-
-  @override
-  void detach() {
-    _showCursor.removeListener(markNeedsPaint);
-    _renderContext.removeBox(this);
-    super.detach();
-  }
-
-  @override
-  bool hitTestSelf(Offset position) => true;
-
-  @override
-  bool hitTest(HitTestResult result, {Offset position}) {
-    if (size.contains(position)) {
-      result.add(new BoxHitTestEntry(this, position));
-      return true;
-    }
-    return false;
-  }
-
-  @override
-  void performLayout() {
-    super.performLayout();
-    _prototypePainter.layout(
-        minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
-    _caretPainter.layout(_prototypePainter.height);
-    // Indicate to render context that this object can be used by other
-    // layers (selection overlay, for instance).
-    _renderContext.markDirty(this, false);
-  }
-
-  @override
-  void paint(PaintingContext context, Offset offset) {
-    if (_isSelectionVisible) _paintSelection(context, offset);
-    super.paint(context, offset);
-    if (_isCaretVisible) _paintCaret(context, offset);
-  }
-
-  @override
-  void markNeedsLayout() {
-    // Temporarily remove this object from the render context.
-    _renderContext.markDirty(this, true);
-    super.markNeedsLayout();
-  }
-
-  //
-  // Private members
-  //
-
-  final TextPainter _prototypePainter;
-  final CaretPainter _caretPainter = new CaretPainter();
-  List<ui.TextBox> _selectionRects;
-
-  /// Returns `true` if current selection is collapsed, located within
-  /// this paragraph and is visible according to tick timer.
-  bool get _isCaretVisible {
-    if (!_selection.isCollapsed) return false;
-    if (!_showCursor.value) return false;
-
-    final int start = node.documentOffset;
-    final int end = start + node.length;
-    final int caretOffset = _selection.extentOffset;
-    return caretOffset >= start && caretOffset < end;
-  }
-
-  /// Returns `true` if selection is not collapsed and intersects with this
-  /// paragraph.
-  bool get _isSelectionVisible {
-    if (_selection.isCollapsed) return false;
-    return _intersectsWithSelection(_selection);
-  }
-
-  /// Returns `true` if this paragraph intersects with document [selection].
-  bool _intersectsWithSelection(TextSelection selection) {
-    final int base = node.documentOffset;
-    final int extent = base + node.length;
-    return base <= selection.extentOffset && selection.baseOffset <= extent;
-  }
-
-  void _paintCaret(PaintingContext context, Offset offset) {
-    final TextPosition caret = new TextPosition(
-      offset: _selection.extentOffset - node.documentOffset,
-    );
-    Offset caretOffset = getOffsetForCaret(caret, _caretPainter.prototype);
-    _caretPainter.paint(context.canvas, caretOffset + offset);
-  }
-
-  void _paintSelection(PaintingContext context, Offset offset) {
-    assert(_isSelectionVisible);
-    // TODO: this could be improved by painting additional box for line-break characters.
-    _selectionRects ??= getBoxesForSelection(getLocalSelection(_selection));
-    final Paint paint = new Paint()..color = _selectionColor;
-    for (ui.TextBox box in _selectionRects)
-      context.canvas.drawRect(box.toRect().shift(offset), paint);
-  }
-}

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

@@ -0,0 +1,203 @@
+// 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:math' as math;
+import 'dart:ui' as ui;
+
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+import 'package:notus/notus.dart';
+
+import 'caret.dart';
+import 'editable_box.dart';
+
+class EditableRichText extends LeafRenderObjectWidget {
+  EditableRichText({
+    @required this.node,
+    @required this.text,
+  }) : assert(node != null && text != null);
+
+  final LineNode node;
+  final TextSpan text;
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return new RenderEditableParagraph(
+      text,
+      node: node,
+      textDirection: Directionality.of(context),
+    );
+  }
+
+  @override
+  void updateRenderObject(
+      BuildContext context, RenderEditableParagraph renderObject) {
+    renderObject
+      ..text = text
+      ..node = node;
+  }
+}
+
+class RenderEditableParagraph extends RenderParagraph
+    implements RenderEditableBox {
+  RenderEditableParagraph(
+    TextSpan text, {
+    @required ContainerNode node,
+    TextAlign textAlign: TextAlign.start,
+    @required TextDirection textDirection,
+    bool softWrap: true,
+    TextOverflow overflow: TextOverflow.clip,
+    double textScaleFactor: 1.0,
+    int maxLines,
+  })  : _node = node,
+        _prototypePainter = new TextPainter(
+          text: new TextSpan(text: '.', style: text.style),
+          textAlign: textAlign,
+          textDirection: textDirection,
+          textScaleFactor: textScaleFactor,
+        ),
+        super(
+          text,
+          textAlign: textAlign,
+          textDirection: textDirection,
+          softWrap: softWrap,
+          overflow: overflow,
+          textScaleFactor: textScaleFactor,
+          maxLines: maxLines,
+        );
+
+  LineNode get node => _node;
+  LineNode _node;
+  void set node(LineNode value) {
+    _node = value;
+  }
+
+  @override
+  double get preferredLineHeight => _prototypePainter.height;
+
+  @override
+  TextSelection getLocalSelection(TextSelection documentSelection) {
+    if (!intersectsWithSelection(documentSelection)) return null;
+
+    int nodeBase = node.documentOffset;
+    int nodeExtent = nodeBase + node.length;
+    int base = math.max(0, documentSelection.baseOffset - nodeBase);
+    int extent =
+        math.min(documentSelection.extentOffset, nodeExtent) - nodeBase;
+    return documentSelection.copyWith(baseOffset: base, extentOffset: extent);
+  }
+
+  // This method works around some issues in getBoxesForSelection and handles
+  // edge-case with our TextSpan objects not having last line-break character.
+  // Wait for https://github.com/flutter/flutter/issues/16418 to be resolved.
+  @override
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
+      {bool isLocal: false}) {
+    TextSelection local = isLocal ? selection : getLocalSelection(selection);
+    if (local.isCollapsed) {
+      final offset = getOffsetForCaret(local.extent, _caretPainter.prototype);
+      return [
+        new ui.TextBox.fromLTRBD(
+          offset.dx,
+          offset.dy,
+          offset.dx,
+          offset.dy + _caretPainter.prototype.height,
+          TextDirection.ltr,
+        )
+      ];
+    }
+
+    int isBaseShifted = 0;
+    bool isExtentShifted = false;
+    if (local.baseOffset == node.length - 1 && local.baseOffset > 0) {
+      // Since we exclude last line-break from rendered TextSpan we have to
+      // handle end-of-line selection explicitly.
+      local = local.copyWith(baseOffset: local.baseOffset - 1);
+      isBaseShifted = -1;
+    } else if (local.baseOffset == 0 && local.isCollapsed) {
+      // This takes care of beginning of line position.
+      local = local.copyWith(baseOffset: local.baseOffset + 1);
+      isBaseShifted = 1;
+    }
+    if (text.codeUnitAt(local.extentOffset - 1) == 0xA) {
+      // This takes care of the rest end-of-line scenarios, where there are
+      // actually line-breaks in the TextSpan (e.g. in code blocks).
+      local = local.copyWith(extentOffset: local.extentOffset + 1);
+      isExtentShifted = true;
+    }
+    final result = getBoxesForSelection(local).toList();
+    if (isBaseShifted != 0) {
+      final box = result.first;
+      final dx = isBaseShifted == -1 ? box.right : box.left;
+      result.removeAt(0);
+      result.insert(0,
+          new ui.TextBox.fromLTRBD(dx, box.top, dx, box.bottom, box.direction));
+    }
+    if (isExtentShifted) {
+      final box = result.last;
+      result.removeLast;
+      result.add(new ui.TextBox.fromLTRBD(
+          box.left, box.top, box.left, box.bottom, box.direction));
+    }
+    return result;
+  }
+
+  //
+  // Overridden members
+  //
+
+  @override
+  void set text(TextSpan value) {
+    _prototypePainter.text = new TextSpan(text: '.', style: value.style);
+    _selectionRects = null;
+    super.text = value;
+  }
+
+  @override
+  void performLayout() {
+    super.performLayout();
+    _prototypePainter.layout(
+        minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
+    _caretPainter.layout(_prototypePainter.height);
+  }
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+//    if (isSelectionVisible) _paintSelection(context, offset);
+    super.paint(context, offset);
+//    if (isCaretVisible) _paintCaret(context, offset);
+  }
+
+  //
+  // Private members
+  //
+
+  final TextPainter _prototypePainter;
+  final CaretPainter _caretPainter = new CaretPainter();
+  List<ui.TextBox> _selectionRects;
+
+  /// Returns `true` if this paragraph intersects with document [selection].
+  bool intersectsWithSelection(TextSelection selection) {
+    final int base = node.documentOffset;
+    final int extent = base + node.length;
+    return base <= selection.extentOffset && selection.baseOffset <= extent;
+  }
+
+//
+//  void _paintCaret(PaintingContext context, Offset offset) {
+//    final TextPosition caret = new TextPosition(
+//      offset: _selection.extentOffset - node.documentOffset,
+//    );
+//    Offset caretOffset = getOffsetForCaret(caret, _caretPainter.prototype);
+//    _caretPainter.paint(context.canvas, caretOffset + offset);
+//  }
+//
+  void paintSelection(PaintingContext context, Offset offset,
+      TextSelection selection, Color selectionColor) {
+    // TODO: this could be improved by painting additional box for line-break characters.
+    _selectionRects ??= getBoxesForSelection(getLocalSelection(selection));
+    final Paint paint = new Paint()..color = selectionColor;
+    for (ui.TextBox box in _selectionRects)
+      context.canvas.drawRect(box.toRect().shift(offset), paint);
+  }
+}

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

@@ -1,7 +1,6 @@
 // Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
-import 'dart:math' as math;
 import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
@@ -9,137 +8,46 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
-import 'caret.dart';
 import 'editable_box.dart';
-import 'render_context.dart';
 
 class HorizontalRule extends LeafRenderObjectWidget {
-  HorizontalRule({
-    @required this.node,
-    @required this.layerLink,
-    @required this.renderContext,
-    @required this.showCursor,
-    @required this.selection,
-    @required this.selectionColor,
-  }) : assert(renderContext != null);
+  HorizontalRule({@required this.node}) : assert(node != null);
 
-  final ContainerNode node;
-  final LayerLink layerLink;
-  final ZefyrRenderContext renderContext;
-  final ValueNotifier<bool> showCursor;
-  final TextSelection selection;
-  final Color selectionColor;
+  final EmbedNode node;
 
   @override
   RenderHorizontalRule createRenderObject(BuildContext context) {
-    return new RenderHorizontalRule(
-      node: node,
-      layerLink: layerLink,
-      renderContext: renderContext,
-      showCursor: showCursor,
-      selection: selection,
-      selectionColor: selectionColor,
-    );
+    return new RenderHorizontalRule(node: node);
   }
 
   @override
   void updateRenderObject(
       BuildContext context, RenderHorizontalRule renderObject) {
-    renderObject
-      ..node = node
-      ..layerLink = layerLink
-      ..renderContext = renderContext
-      ..showCursor = showCursor
-      ..selection = selection
-      ..selectionColor = selectionColor;
+    renderObject..node = node;
   }
 }
 
-class RenderHorizontalRule extends RenderBox implements RenderEditableBox {
-  static const kPaddingBottom = 24.0;
-  static const kWidth = 3.0;
+class RenderHorizontalRule extends RenderEditableBox {
+  static const _kPaddingBottom = 24.0;
+  static const _kThickness = 3.0;
+  static const _kHeight = _kThickness + _kPaddingBottom;
 
   RenderHorizontalRule({
-    @required ContainerNode node,
-    @required LayerLink layerLink,
-    @required ZefyrRenderContext renderContext,
-    @required ValueNotifier<bool> showCursor,
-    @required TextSelection selection,
-    @required Color selectionColor,
-  })  : _node = node,
-        _layerLink = layerLink,
-        _renderContext = renderContext,
-        _showCursor = showCursor,
-        _selection = selection,
-        _selectionColor = selectionColor,
-        super();
+    @required EmbedNode node,
+  }) : _node = node;
 
-  //
-  // Public members
-  //
-
-  ContainerNode get node => _node;
-  ContainerNode _node;
-  void set node(ContainerNode value) {
+  @override
+  EmbedNode get node => _node;
+  EmbedNode _node;
+  set node(EmbedNode value) {
+    if (_node == value) return;
     _node = value;
-  }
-
-  LayerLink get layerLink => _layerLink;
-  LayerLink _layerLink;
-  void set layerLink(LayerLink value) {
-    if (_layerLink == value) return;
-    _layerLink = value;
-  }
-
-  ZefyrRenderContext _renderContext;
-  void set renderContext(ZefyrRenderContext value) {
-    if (_renderContext == value) return;
-    if (attached) _renderContext.removeBox(this);
-    _renderContext = value;
-    if (attached) _renderContext.addBox(this);
-  }
-
-  ValueNotifier<bool> _showCursor;
-  set showCursor(ValueNotifier<bool> value) {
-    assert(value != null);
-    if (_showCursor == value) return;
-    if (attached) _showCursor.removeListener(markNeedsPaint);
-    _showCursor = value;
-    if (attached) _showCursor.addListener(markNeedsPaint);
-    markNeedsPaint();
-  }
-
-  TextSelection _selection;
-  set selection(TextSelection value) {
-    if (_selection == value) return;
-    // TODO: check if selection affects this block (also check previous value)
-    _selection = value;
-    markNeedsPaint();
-  }
-
-  Color _selectionColor;
-  set selectionColor(Color value) {
-    if (_selectionColor == value) return;
-    _selectionColor = value;
     markNeedsPaint();
   }
 
+  @override
   double get preferredLineHeight => size.height;
 
-  /// Returns part of document [selection] local to this paragraph. May return
-  /// `null`.
-  ///
-  /// [selection] must not be collapsed.
-  TextSelection getLocalSelection(TextSelection selection) {
-    if (!_intersectsWithSelection(selection)) return null;
-
-    int nodeBase = node.documentOffset;
-    int nodeExtent = nodeBase + node.length;
-    int base = math.max(0, selection.baseOffset - nodeBase);
-    int extent = math.min(selection.extentOffset, nodeExtent) - nodeBase;
-    return _selection.copyWith(baseOffset: base, extentOffset: extent);
-  }
-
   List<ui.TextBox> getEndpointsForSelection(TextSelection selection,
       {bool isLocal: false}) {
     TextSelection local = isLocal ? selection : getLocalSelection(selection);
@@ -156,66 +64,25 @@ class RenderHorizontalRule extends RenderBox implements RenderEditableBox {
     ];
   }
 
-  //
-  // Overridden members
-  //
-
-  @override
-  void attach(PipelineOwner owner) {
-    super.attach(owner);
-    _showCursor.addListener(markNeedsPaint);
-    _renderContext.addBox(this);
-  }
-
-  @override
-  void detach() {
-    _showCursor.removeListener(markNeedsPaint);
-    _renderContext.removeBox(this);
-    super.detach();
-  }
-
-  @override
-  bool hitTestSelf(Offset position) => true;
-
-  @override
-  bool hitTest(HitTestResult result, {Offset position}) {
-    if (size.contains(position)) {
-      result.add(new BoxHitTestEntry(this, position));
-      return true;
-    }
-    return false;
-  }
-
   @override
   void performLayout() {
     assert(constraints.hasBoundedWidth);
-    final height = kWidth + kPaddingBottom;
-    size = new Size(constraints.maxWidth, height);
-    _caretPainter.layout(height);
-    // Indicate to render context that this object can be used by other
-    // layers (selection overlay, for instance).
-    _renderContext.markDirty(this, false);
+    size = new Size(constraints.maxWidth, _kHeight);
+//    _caretPainter.layout(height);
   }
 
   @override
   void paint(PaintingContext context, Offset offset) {
-//    if (_isSelectionVisible) _paintSelection(context, offset);
-    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, kWidth);
+//    if (isSelectionVisible) _paintSelection(context, offset);
+    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kThickness);
     final paint = new ui.Paint()..color = Colors.grey.shade200;
     context.canvas.drawRect(rect.shift(offset), paint);
-    if (_isCaretVisible) _paintCaret(context, offset);
-  }
-
-  @override
-  void markNeedsLayout() {
-    // Temporarily remove this object from the render context.
-    _renderContext.markDirty(this, true);
-    super.markNeedsLayout();
+//    if (isCaretVisible) _paintCaret(context, offset);
   }
 
   @override
   ui.TextPosition getPositionForOffset(ui.Offset offset) {
-    return new ui.TextPosition(offset: node.documentOffset);
+    return new ui.TextPosition(offset: _node.documentOffset);
   }
 
   @override
@@ -226,52 +93,22 @@ class RenderHorizontalRule extends RenderBox implements RenderEditableBox {
   //
   // Private members
   //
-
-  final CaretPainter _caretPainter = new CaretPainter();
-//  List<ui.TextBox> _selectionRects;
-
-  /// Returns `true` if current selection is collapsed, located within
-  /// this paragraph and is visible according to tick timer.
-  bool get _isCaretVisible {
-    if (!_selection.isCollapsed) return false;
-    if (!_showCursor.value) return false;
-
-    final int start = node.documentOffset;
-    final int end = start + node.length;
-    final int caretOffset = _selection.extentOffset;
-    return caretOffset >= start && caretOffset < end;
-  }
-
-  /// Returns `true` if selection is not collapsed and intersects with this
-  /// paragraph.
-//  bool get _isSelectionVisible {
-//    if (_selection.isCollapsed) return false;
-//    return _intersectsWithSelection(_selection);
+//
+//  final CaretPainter _caretPainter = new CaretPainter();
+//
+//  void _paintCaret(PaintingContext context, Offset offset) {
+//    final pos = selection.extentOffset - node.documentOffset;
+//    Offset caretOffset = Offset.zero;
+//    if (pos == 1) {
+//      caretOffset = caretOffset + new Offset(size.width - 1.0, 0.0);
+//    }
+//    _caretPainter.paint(context.canvas, caretOffset + offset);
 //  }
-
-  /// Returns `true` if this paragraph intersects with document [selection].
-  bool _intersectsWithSelection(TextSelection selection) {
-    final int base = node.documentOffset;
-    final int extent = base + node.length;
-    return base <= selection.extentOffset && selection.baseOffset <= extent;
-  }
-
-  void _paintCaret(PaintingContext context, Offset offset) {
-    final pos = _selection.extentOffset - node.documentOffset;
-    Offset caretOffset = Offset.zero;
-    if (pos == 1) {
-      caretOffset = caretOffset + new Offset(size.width - 1.0, 0.0);
-    }
-    _caretPainter.paint(context.canvas, caretOffset + offset);
-  }
-
 //
 //  void _paintSelection(PaintingContext context, Offset offset) {
-//    assert(_isSelectionVisible);
-//    // TODO: this could be improved by painting additional box for line-break characters.
-//    _selectionRects ??= getBoxesForSelection(getLocalSelection(_selection));
-//    final Paint paint = new Paint()..color = _selectionColor;
-//    for (ui.TextBox box in _selectionRects)
-//      context.canvas.drawRect(box.toRect().shift(offset), paint);
+//    assert(isSelectionVisible);
+//    final Paint paint = new Paint()..color = selectionColor;
+//    final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kHeight);
+//    context.canvas.drawRect(rect.shift(offset), paint);
 //  }
 }

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

@@ -6,16 +6,16 @@ import 'package:flutter/widgets.dart';
 
 import 'editable_box.dart';
 
-/// Registry of all [RenderEditableBox]es inside a [ZefyrEditableText].
+/// Registry of all [RenderEditableProxyBox]es inside a [ZefyrEditableText].
 ///
-/// Provides access to all currently active [RenderEditableBox]
+/// Provides access to all currently active [RenderEditableProxyBox]
 /// instances of a [ZefyrEditableText].
 ///
 /// Use [boxForTextOffset] or [boxForGlobalPoint] to retrieve a
 /// specific box.
 ///
 /// The [addBox], [removeBox] and [markDirty] are intended to be
-/// only used by [RenderEditableBox] objects to register with a rendering
+/// only used by [RenderEditableProxyBox] objects to register with a rendering
 /// context.
 ///
 /// ### Life cycle details
@@ -35,31 +35,31 @@ import 'editable_box.dart';
 /// When a box is detached from rendering pipeline it unregisters
 /// itself by calling [removeBox].
 class ZefyrRenderContext extends ChangeNotifier {
-  final Set<RenderEditableBox> _dirtyBoxes = new Set();
-  final Set<RenderEditableBox> _activeBoxes = new Set();
+  final Set<RenderEditableProxyBox> _dirtyBoxes = new Set();
+  final Set<RenderEditableProxyBox> _activeBoxes = new Set();
 
-  Set<RenderEditableBox> get dirty => _dirtyBoxes;
-  Set<RenderEditableBox> get active => _activeBoxes;
+  Set<RenderEditableProxyBox> get dirty => _dirtyBoxes;
+  Set<RenderEditableProxyBox> get active => _activeBoxes;
 
   bool _disposed = false;
 
   /// Adds [box] to this context. The box is considered "dirty" at
   /// this point and is not included in query results of `boxFor*`
   /// methods.
-  void addBox(RenderEditableBox box) {
+  void addBox(RenderEditableProxyBox box) {
     assert(!_disposed);
     _dirtyBoxes.add(box);
   }
 
   /// Removes [box] from this render context.
-  void removeBox(RenderEditableBox box) {
+  void removeBox(RenderEditableProxyBox box) {
     assert(!_disposed);
     _dirtyBoxes.remove(box);
     _activeBoxes.remove(box);
     notifyListeners();
   }
 
-  void markDirty(RenderEditableBox box, bool isDirty) {
+  void markDirty(RenderEditableProxyBox box, bool isDirty) {
     assert(!_disposed);
 
     var collection = isDirty ? _dirtyBoxes : _activeBoxes;
@@ -76,7 +76,7 @@ class ZefyrRenderContext extends ChangeNotifier {
   }
 
   /// Returns box containing character at specified document [offset].
-  RenderEditableBox boxForTextOffset(int offset) {
+  RenderEditableProxyBox boxForTextOffset(int offset) {
     assert(!_disposed);
     return _activeBoxes.firstWhere(
       (p) => p.node.containsOffset(offset),
@@ -86,7 +86,7 @@ class ZefyrRenderContext extends ChangeNotifier {
 
   /// Returns box located at specified global [point] on the screen or
   /// `null`.
-  RenderEditableBox boxForGlobalPoint(Offset point) {
+  RenderEditableProxyBox boxForGlobalPoint(Offset point) {
     assert(!_disposed);
     return _activeBoxes.firstWhere((p) {
       final localPoint = p.globalToLocal(point);

packages/zefyr/test/rendering/render_editable_paragraph_test.dart

@@ -6,7 +6,7 @@ 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/editable_paragraph.dart';
+import 'package:zefyr/src/widgets/editable_rich_text.dart';
 import 'package:zefyr/src/widgets/render_context.dart';
 import 'package:zefyr/zefyr.dart';
 
@@ -15,35 +15,27 @@ void main() {
     final doc = new NotusDocument();
     doc.insert(0, 'This House Is A Circus');
     final text = new TextSpan(text: '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;
-    ZefyrRenderContext viewport;
 
+    ZefyrRenderContext renderContext;
     RenderEditableParagraph p;
+
     setUp(() {
       WidgetsFlutterBinding.ensureInitialized();
-      viewport = new ZefyrRenderContext();
+      renderContext = new ZefyrRenderContext();
       p = new RenderEditableParagraph(
         text,
         node: doc.root.children.first,
-        layerLink: link,
-        renderContext: viewport,
-        showCursor: showCursor,
-        selection: selection,
-        selectionColor: selectionColor,
         textDirection: TextDirection.ltr,
       );
     });
 
     test('it registers with viewport', () {
       var owner = new PipelineOwner();
-      expect(viewport.active, isNot(contains(p)));
+      expect(renderContext.active, isNot(contains(p)));
       p.attach(owner);
-      expect(viewport.dirty, contains(p));
+      expect(renderContext.dirty, contains(p));
       p.layout(new BoxConstraints());
-      expect(viewport.active, contains(p));
-    });
+      expect(renderContext.active, contains(p));
+    }, skip: 'TODO: move to RenderEditableProxyBox');
   });
 }

packages/zefyr/test/widgets/editable_paragraph_test.dart

@@ -5,41 +5,30 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:zefyr/src/widgets/editable_paragraph.dart';
-import 'package:zefyr/src/widgets/render_context.dart';
+import 'package:zefyr/src/widgets/editable_rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 void main() {
-  group('$EditableParagraph', () {
+  group('$EditableRichText', () {
     final doc = new NotusDocument();
     doc.insert(0, 'This House Is A Circus');
     final text = new TextSpan(text: '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;
-    ZefyrRenderContext viewport;
 
     Widget widget;
     setUp(() {
-      viewport = new ZefyrRenderContext();
       widget = new Directionality(
         textDirection: TextDirection.ltr,
-        child: new EditableParagraph(
-            node: doc.root.children.first,
-            text: text,
-            layerLink: link,
-            renderContext: viewport,
-            showCursor: showCursor,
-            selection: selection,
-            selectionColor: selectionColor),
+        child: new EditableRichText(
+          node: doc.root.children.first,
+          text: text,
+        ),
       );
     });
 
     testWidgets('initialize', (tester) async {
       await tester.pumpWidget(widget);
-      EditableParagraph result =
-          tester.firstWidget(find.byType(EditableParagraph));
+      EditableRichText result =
+          tester.firstWidget(find.byType(EditableRichText));
       expect(result, isNotNull);
       expect(result.text.text, 'This House Is A Circus');
     });

packages/zefyr/test/widgets/editable_text_scope_test.dart

@@ -1,11 +1,10 @@
 // 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_test/flutter_test.dart';
-import 'package:zefyr/src/widgets/editable_paragraph.dart';
+import 'package:zefyr/src/widgets/editable_box.dart';
 import 'package:zefyr/src/widgets/render_context.dart';
 import 'package:zefyr/zefyr.dart';
 
@@ -74,22 +73,19 @@ ZefyrEditableTextScope createScope({
   );
 }
 
-RenderEditableParagraph createParagraph(ZefyrRenderContext context) {
+RenderEditableProxyBox createParagraph(ZefyrRenderContext context) {
   final doc = new NotusDocument();
   doc.insert(0, 'This House Is A Circus');
-  final text = new TextSpan(text: '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 RenderEditableParagraph(
-    text,
+  return new RenderEditableProxyBox(
     node: doc.root.children.first,
     layerLink: link,
     renderContext: context,
     showCursor: showCursor,
     selection: selection,
     selectionColor: selectionColor,
-    textDirection: TextDirection.ltr,
   );
 }

packages/zefyr/test/widgets/editor_test.dart

@@ -4,7 +4,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:quill_delta/quill_delta.dart';
-import 'package:zefyr/src/widgets/editable_paragraph.dart';
+import 'package:zefyr/src/widgets/editable_rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 import '../testing.dart';
@@ -23,7 +23,7 @@ void main() {
       var editor =
           new EditorSandBox(tester: tester, document: doc, theme: theme);
       await editor.tapEditor();
-      EditableParagraph p = tester.widget(find.byType(EditableParagraph).first);
+      EditableRichText p = tester.widget(find.byType(EditableRichText).first);
       expect(p.text.children.first.style.color, Colors.red);
     });
 

packages/zefyr/test/widgets/render_context_test.dart

@@ -3,7 +3,7 @@
 // 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_paragraph.dart';
+import 'package:zefyr/src/widgets/editable_box.dart';
 import 'package:zefyr/src/widgets/render_context.dart';
 import 'package:zefyr/zefyr.dart';
 
@@ -68,22 +68,20 @@ void main() {
   });
 }
 
-RenderEditableParagraph createParagraph(ZefyrRenderContext viewport) {
+RenderEditableProxyBox createParagraph(ZefyrRenderContext viewport) {
   final doc = new NotusDocument();
   doc.insert(0, 'This House Is A Circus');
-  final text = new TextSpan(text: 'This House Is A Circus');
+  final LineNode node = doc.root.children.first;
   final link = new LayerLink();
   final showCursor = new ValueNotifier<bool>(true);
   final selection = new TextSelection.collapsed(offset: 0);
   final selectionColor = Colors.blue;
-  return new RenderEditableParagraph(
-    text,
-    node: doc.root.children.first,
+  return new RenderEditableProxyBox(
+    node: node,
     layerLink: link,
     renderContext: viewport,
     showCursor: showCursor,
     selection: selection,
     selectionColor: selectionColor,
-    textDirection: TextDirection.ltr,
   );
 }

packages/zefyr/test/widgets/selection_test.dart

@@ -3,7 +3,7 @@
 // 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_paragraph.dart';
+import 'package:zefyr/src/widgets/editable_rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 import '../testing.dart';
@@ -15,7 +15,7 @@ void main() {
       await editor.tapEditor();
 
       RenderEditableParagraph renderObject =
-          tester.firstRenderObject(find.byType(EditableParagraph));
+          tester.firstRenderObject(find.byType(EditableRichText));
       var offset = renderObject.localToGlobal(Offset.zero);
       offset += Offset(5.0, 5.0);
       await tester.tapAt(offset);