Basic working image support

packages/zefyr/example/ios/Podfile.lock

@@ -1,20 +1,26 @@
 PODS:
   - Flutter (1.0.0)
+  - image_picker (0.0.1):
+    - Flutter
   - url_launcher (0.0.1):
     - Flutter
 
 DEPENDENCIES:
   - Flutter (from `.symlinks/flutter/ios`)
+  - image_picker (from `.symlinks/plugins/image_picker/ios`)
   - url_launcher (from `.symlinks/plugins/url_launcher/ios`)
 
 EXTERNAL SOURCES:
   Flutter:
     :path: ".symlinks/flutter/ios"
+  image_picker:
+    :path: ".symlinks/plugins/image_picker/ios"
   url_launcher:
     :path: ".symlinks/plugins/url_launcher/ios"
 
 SPEC CHECKSUMS:
   Flutter: 9d0fac939486c9aba2809b7982dfdbb47a7b0296
+  image_picker: ee00aab0487cedc80a304085219503cc6d0f2e22
   url_launcher: 92b89c1029a0373879933c21642958c874539095
 
 PODFILE CHECKSUM: 1e5af4103afd21ca5ead147d7b81d06f494f51a2

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

@@ -3,8 +3,9 @@
 // BSD-style license that can be found in the LICENSE file.
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:url_launcher/url_launcher.dart';
+import 'package:image_picker/image_picker.dart';
 import 'package:notus/notus.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 import 'editor.dart';
 import 'theme.dart';
@@ -246,7 +247,7 @@ class ImageButton extends StatefulWidget {
   _ImageButtonState createState() => _ImageButtonState();
 }
 
-class _ImageButtonState extends State<HeadingButton> {
+class _ImageButtonState extends State<ImageButton> {
   @override
   Widget build(BuildContext context) {
     final toolbar = ZefyrToolbar.of(context);
@@ -276,8 +277,19 @@ class _ImageButtonState extends State<HeadingButton> {
     return ZefyrToolbarScaffold(body: buttons);
   }
 
-  void _pickFromCamera() {}
-  void _pickFromGallery() {}
+  void _pickFromCamera() async {
+    final editor = ZefyrEditor.of(context);
+    final image = await editor.imageDelegate.pickImage(ImageSource.camera);
+    if (image != null)
+      editor.formatSelection(NotusAttribute.embed.image(image));
+  }
+
+  void _pickFromGallery() async {
+    final editor = ZefyrEditor.of(context);
+    final image = await editor.imageDelegate.pickImage(ImageSource.gallery);
+    if (image != null)
+      editor.formatSelection(NotusAttribute.embed.image(image));
+  }
 }
 
 class LinkButton extends StatefulWidget {

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

@@ -6,9 +6,10 @@ import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
 
 import 'editable_box.dart';
-import 'editable_rich_text.dart';
 import 'editable_text.dart';
 import 'horizontal_rule.dart';
+import 'image.dart';
+import 'rich_text.dart';
 import 'theme.dart';
 
 /// Raw widget representing a single line of rich text document in Zefyr editor.
@@ -154,8 +155,15 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
         selectionColor: theme.selectionColor,
       );
     } else if (embed.type == EmbedType.image) {
-      // TODO: implement image embeds.
-      return null;
+      return new EditableBox(
+        child: ImageEmbed(node: node, delegate: editable.imageDelegate),
+        node: widget.node,
+        layerLink: _link,
+        renderContext: editable.renderContext,
+        showCursor: editable.showCursor,
+        selection: editable.selection,
+        selectionColor: theme.selectionColor,
+      );
     } else {
       throw new UnimplementedError('Unimplemented embed type ${embed.type}');
     }

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

@@ -13,6 +13,7 @@ import 'common.dart';
 import 'controller.dart';
 import 'editable_box.dart';
 import 'editor.dart';
+import 'image.dart';
 import 'input.dart';
 import 'list.dart';
 import 'paragraph.dart';
@@ -31,12 +32,14 @@ class ZefyrEditableText extends StatefulWidget {
     Key key,
     @required this.controller,
     @required this.focusNode,
+    @required this.imageDelegate,
     this.autofocus: true,
     this.enabled: true,
   }) : super(key: key);
 
   final ZefyrController controller;
   final FocusNode focusNode;
+  final ZefyrImageDelegate imageDelegate;
   final bool autofocus;
   final bool enabled;
 
@@ -60,18 +63,21 @@ class ZefyrEditableTextScope extends InheritedWidget {
     @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);
   }
 }
@@ -138,6 +144,7 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
       selection: selection,
       showCursor: showCursor,
       renderContext: renderContext,
+      imageDelegate: widget.imageDelegate,
       child: Stack(fit: StackFit.expand, children: layers),
     );
   }

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

@@ -6,6 +6,7 @@ import 'package:notus/notus.dart';
 
 import 'controller.dart';
 import 'editable_text.dart';
+import 'image.dart';
 import 'theme.dart';
 import 'toolbar.dart';
 
@@ -19,6 +20,7 @@ class ZefyrEditor extends StatefulWidget {
     this.enabled: true,
     this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
     this.toolbarDelegate,
+    this.imageDelegate,
   }) : super(key: key);
 
   final ZefyrController controller;
@@ -26,6 +28,7 @@ class ZefyrEditor extends StatefulWidget {
   final bool autofocus;
   final bool enabled;
   final ZefyrToolbarDelegate toolbarDelegate;
+  final ZefyrImageDelegate imageDelegate;
 
   /// Padding around editable area.
   final EdgeInsets padding;
@@ -47,6 +50,7 @@ class ZefyrEditorScope extends InheritedWidget {
   final TextSelection selection;
   final FocusOwner focusOwner;
   final FocusNode toolbarFocusNode;
+  final ZefyrImageDelegate imageDelegate;
   final ZefyrController _controller;
   final FocusNode _focusNode;
 
@@ -57,6 +61,7 @@ class ZefyrEditorScope extends InheritedWidget {
     @required this.selection,
     @required this.focusOwner,
     @required this.toolbarFocusNode,
+    @required this.imageDelegate,
     @required ZefyrController controller,
     @required FocusNode focusNode,
   })  : _controller = controller,
@@ -84,7 +89,8 @@ class ZefyrEditorScope extends InheritedWidget {
   bool updateShouldNotify(ZefyrEditorScope oldWidget) {
     return (selectionStyle != oldWidget.selectionStyle ||
         selection != oldWidget.selection ||
-        focusOwner != oldWidget.focusOwner);
+        focusOwner != oldWidget.focusOwner ||
+        imageDelegate != oldWidget.imageDelegate);
   }
 }
 
@@ -94,6 +100,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   NotusStyle _selectionStyle;
   TextSelection _selection;
   FocusOwner _focusOwner;
+  ZefyrImageDelegate _imageDelegate;
 
   FocusOwner getFocusOwner() {
     if (widget.focusNode.hasFocus) {
@@ -111,6 +118,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     _selectionStyle = widget.controller.getSelectionStyle();
     _selection = widget.controller.selection;
     _focusOwner = getFocusOwner();
+    _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
     widget.controller.addListener(_handleControllerChange);
     _toolbarFocusNode.addListener(_handleFocusChange);
     widget.focusNode.addListener(_handleFocusChange);
@@ -129,6 +137,9 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       _selectionStyle = widget.controller.getSelectionStyle();
       _selection = widget.controller.selection;
     }
+    if (widget.imageDelegate != oldWidget.imageDelegate) {
+      _imageDelegate = widget.imageDelegate ?? new ZefyrDefaultImageDelegate();
+    }
   }
 
   @override
@@ -145,6 +156,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     Widget editable = new ZefyrEditableText(
       controller: widget.controller,
       focusNode: widget.focusNode,
+      imageDelegate: _imageDelegate,
       autofocus: widget.autofocus,
       enabled: widget.enabled,
     );
@@ -173,6 +185,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
         selectionStyle: _selectionStyle,
         focusOwner: _focusOwner,
         toolbarFocusNode: _toolbarFocusNode,
+        imageDelegate: _imageDelegate,
         controller: widget.controller,
         focusNode: widget.focusNode,
         child: Column(children: children),

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

@@ -91,8 +91,8 @@ class _ImageEmbedState extends State<ImageEmbed> {
   @override
   Widget build(BuildContext context) {
     return _EditableImage(
+      child: new RawImage(image: _imageInfo?.image),
       node: widget.node,
-      image: _imageInfo?.image,
     );
   }
 
@@ -112,15 +112,16 @@ class _ImageEmbedState extends State<ImageEmbed> {
   }
 }
 
-class _EditableImage extends LeafRenderObjectWidget {
-  _EditableImage({@required this.node, this.image}) : assert(node != null);
+class _EditableImage extends SingleChildRenderObjectWidget {
+  _EditableImage({@required Widget child, @required this.node})
+      : assert(node != null),
+        super(child: child);
 
   final EmbedNode node;
-  final ui.Image image;
 
   @override
   RenderEditableImage createRenderObject(BuildContext context) {
-    return new RenderEditableImage(node: node, image: image);
+    return new RenderEditableImage(node: node);
   }
 
   @override
@@ -130,14 +131,19 @@ class _EditableImage extends LeafRenderObjectWidget {
   }
 }
 
-class RenderEditableImage extends RenderImage implements RenderEditableBox {
+class RenderEditableImage extends RenderBox
+    with
+        RenderObjectWithChildMixin<RenderImage>,
+        RenderProxyBoxMixin<RenderImage>
+    implements RenderEditableBox {
+  static const kPaddingBottom = 24.0;
+
   RenderEditableImage({
-    ui.Image image,
+    RenderImage child,
     @required EmbedNode node,
-  })  : _node = node,
-        super(
-          image: image,
-        );
+  }) : _node = node {
+    this.child = child;
+  }
 
   @override
   EmbedNode get node => _node;
@@ -150,7 +156,7 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   double get preferredLineHeight => size.height;
 
   @override
-  SelectionOrder get selectionOrder => SelectionOrder.foreground;
+  SelectionOrder get selectionOrder => SelectionOrder.background;
 
   @override
   TextSelection getLocalSelection(TextSelection documentSelection) {
@@ -165,24 +171,36 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   }
 
   @override
-  List<TextBox> getEndpointsForSelection(TextSelection selection) {
+  List<ui.TextBox> getEndpointsForSelection(TextSelection selection) {
     TextSelection local = getLocalSelection(selection);
     if (local.isCollapsed) {
+      final dx = local.extentOffset == 0 ? 0.0 : size.width;
       return [
-        new TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
+        new ui.TextBox.fromLTRBD(dx, 0.0, dx, size.height, TextDirection.ltr),
       ];
     }
 
     return [
-      new TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
-      new TextBox.fromLTRBD(
+      new ui.TextBox.fromLTRBD(0.0, 0.0, 0.0, size.height, TextDirection.ltr),
+      new ui.TextBox.fromLTRBD(
           size.width, 0.0, size.width, size.height, TextDirection.ltr),
     ];
   }
 
   @override
   TextPosition getPositionForOffset(Offset offset) {
-    return new TextPosition(offset: node.documentOffset);
+    int position = _node.documentOffset;
+
+    if (offset.dx > size.width / 2) {
+      position++;
+    }
+    return new TextPosition(offset: position);
+  }
+
+  @override
+  TextRange getWordBoundary(TextPosition position) {
+    final start = _node.documentOffset;
+    return new TextRange(start: start, end: start + 1);
   }
 
   @override
@@ -193,13 +211,7 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   }
 
   @override
-  TextRange getWordBoundary(ui.TextPosition position) {
-    return new TextRange(start: position.offset, end: position.offset + 1);
-  }
-
-  @override
-  ui.Offset getOffsetForCaret(
-      ui.TextPosition position, ui.Rect caretPrototype) {
+  Offset getOffsetForCaret(TextPosition position, Rect caretPrototype) {
     final pos = position.offset - node.documentOffset;
     Offset caretOffset = Offset.zero;
     if (pos == 1) {
@@ -211,6 +223,27 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
   @override
   void paintSelection(PaintingContext context, ui.Offset offset,
       TextSelection selection, ui.Color selectionColor) {
-    // TODO: implement paintSelection
+    final localSelection = getLocalSelection(selection);
+    assert(localSelection != null);
+    if (!localSelection.isCollapsed) {
+      final Paint paint = new Paint()..color = selectionColor;
+      final rect = new Rect.fromLTWH(0.0, 0.0, size.width, size.height);
+      context.canvas.drawRect(rect.shift(offset), paint);
+    }
+  }
+
+  @override
+  void performLayout() {
+    assert(constraints.hasBoundedWidth);
+    if (child != null) {
+      // Make constraints use 16:9 aspect ratio.
+      final childConstraints = constraints.copyWith(
+        maxHeight: (constraints.maxWidth * 9 / 16).floorToDouble(),
+      );
+      child.layout(childConstraints, parentUsesSize: true);
+      size = new Size(child.size.width, child.size.height + kPaddingBottom);
+    } else {
+      performResize();
+    }
   }
 }

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

@@ -264,6 +264,7 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
       buildButton(context, ZefyrToolbarAction.quote),
       buildButton(context, ZefyrToolbarAction.code),
       buildButton(context, ZefyrToolbarAction.horizontalRule),
+      ImageButton(),
     ];
     return buttons;
   }

packages/zefyr/lib/widgets.dart

@@ -1,18 +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.
-library zefyr.widgets;
-
-export 'src/widgets/buttons.dart' hide HeadingButton, LinkButton;
-export 'src/widgets/code.dart';
-export 'src/widgets/common.dart';
-export 'src/widgets/controller.dart';
-export 'src/widgets/editable_text.dart';
-export 'src/widgets/editor.dart';
-export 'src/widgets/list.dart';
-export 'src/widgets/paragraph.dart';
-export 'src/widgets/quote.dart';
-//export 'src/widgets/render_context.dart';
-export 'src/widgets/selection.dart' hide SelectionHandleDriver;
-export 'src/widgets/theme.dart';
-export 'src/widgets/toolbar.dart';

packages/zefyr/lib/zefyr.dart

@@ -5,14 +5,22 @@
 /// Zefyr widgets and document model.
 ///
 /// To use, `import 'package:zefyr/zefyr.dart';`.
-///
-/// See also:
-///
-///   * [Quick start]()
-///   * [NotusDocument], model for Zefyr documents.
-///   * [ZefyrEditor], widget for editing Zefyr documents.
 library zefyr;
 
 export 'package:notus/notus.dart';
 
-export 'widgets.dart';
+export 'src/widgets/buttons.dart' hide HeadingButton, LinkButton;
+export 'src/widgets/code.dart';
+export 'src/widgets/common.dart';
+export 'src/widgets/controller.dart';
+export 'src/widgets/editable_text.dart';
+export 'src/widgets/editor.dart';
+export 'src/widgets/image.dart';
+export 'src/widgets/list.dart';
+export 'src/widgets/paragraph.dart';
+export 'src/widgets/quote.dart';
+export 'src/widgets/selection.dart' hide SelectionHandleDriver;
+export 'src/widgets/theme.dart';
+export 'src/widgets/toolbar.dart';
+//export 'src/widgets/render_context.dart';
+

packages/zefyr/test/rendering/render_editable_paragraph_test.dart

@@ -6,8 +6,8 @@ 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_rich_text.dart';
 import 'package:zefyr/src/widgets/render_context.dart';
+import 'package:zefyr/src/widgets/rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 void main() {

packages/zefyr/test/widgets/editable_paragraph_test.dart

@@ -5,7 +5,7 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:zefyr/src/widgets/editable_rich_text.dart';
+import 'package:zefyr/src/widgets/rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 void main() {

packages/zefyr/test/widgets/editable_text_scope_test.dart

@@ -57,6 +57,20 @@ void main() {
       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);
+    });
   });
 }
 
@@ -64,11 +78,13 @@ ZefyrEditableTextScope createScope({
   @required ZefyrRenderContext renderingContext,
   TextSelection selection,
   ValueNotifier<bool> showCursor,
+  ZefyrImageDelegate imageDelegate,
 }) {
   return ZefyrEditableTextScope(
     renderContext: renderingContext,
     selection: selection,
     showCursor: showCursor,
+    imageDelegate: imageDelegate,
     child: null,
   );
 }

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_rich_text.dart';
+import 'package:zefyr/src/widgets/rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 import '../testing.dart';

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_rich_text.dart';
+import 'package:zefyr/src/widgets/rich_text.dart';
 import 'package:zefyr/zefyr.dart';
 
 import '../testing.dart';