Image support WIP

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

@@ -235,6 +235,51 @@ class _HeadingButtonState extends State<HeadingButton> {
   }
 }
 
+/// Controls heading styles.
+///
+/// When pressed, this button displays overlay toolbar with three
+/// buttons for each heading level.
+class ImageButton extends StatefulWidget {
+  const ImageButton({Key key}) : super(key: key);
+
+  @override
+  _ImageButtonState createState() => _ImageButtonState();
+}
+
+class _ImageButtonState extends State<HeadingButton> {
+  @override
+  Widget build(BuildContext context) {
+    final toolbar = ZefyrToolbar.of(context);
+    return toolbar.buildButton(
+      context,
+      ZefyrToolbarAction.image,
+      onPressed: showOverlay,
+    );
+  }
+
+  void showOverlay() {
+    final toolbar = ZefyrToolbar.of(context);
+    toolbar.showOverlay(buildOverlay);
+  }
+
+  Widget buildOverlay(BuildContext context) {
+    final toolbar = ZefyrToolbar.of(context);
+    final buttons = Row(
+      children: <Widget>[
+        SizedBox(width: 8.0),
+        toolbar.buildButton(context, ZefyrToolbarAction.cameraImage,
+            onPressed: _pickFromCamera),
+        toolbar.buildButton(context, ZefyrToolbarAction.galleryImage,
+            onPressed: _pickFromGallery),
+      ],
+    );
+    return ZefyrToolbarScaffold(body: buttons);
+  }
+
+  void _pickFromCamera() {}
+  void _pickFromGallery() {}
+}
+
 class LinkButton extends StatefulWidget {
   const LinkButton({Key key}) : super(key: key);
 

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

@@ -1,23 +1,126 @@
 // 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 'dart:io';
 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 'package:image_picker/image_picker.dart';
 
 import 'editable_box.dart';
 
-class EditableImage extends LeafRenderObjectWidget {
-  EditableImage({@required this.node}) : assert(node != null);
+abstract class ZefyrImageDelegate<S> {
+  /// Creates [ImageProvider] for specified [imageSource].
+  ImageProvider createImageProvider(String imageSource);
+
+  /// Picks an image from specified [source].
+  ///
+  /// Returns unique string key for the selected image. Returned key is stored
+  /// in the document.
+  Future<String> pickImage(S source);
+}
+
+class ZefyrDefaultImageDelegate implements ZefyrImageDelegate<ImageSource> {
+  @override
+  ImageProvider createImageProvider(String imageSource) {
+    final file = new File.fromUri(Uri.parse(imageSource));
+    return new FileImage(file);
+  }
+
+  @override
+  Future<String> pickImage(ImageSource source) async {
+    final file = await ImagePicker.pickImage(source: source);
+    if (file == null) return null;
+    return file.uri.toString();
+  }
+}
+
+class ImageEmbed extends StatefulWidget {
+  const ImageEmbed({Key key, @required this.node, @required this.delegate})
+      : super(key: key);
+
+  final EmbedNode node;
+  final ZefyrImageDelegate delegate;
+
+  @override
+  _ImageEmbedState createState() => _ImageEmbedState();
+}
+
+class _ImageEmbedState extends State<ImageEmbed> {
+  ImageProvider _provider;
+  ImageStream _imageStream;
+  ImageInfo _imageInfo;
+
+  @override
+  void initState() {
+    super.initState();
+    EmbedAttribute attribute = widget.node.style.get(NotusAttribute.embed);
+    final source = attribute.value['source'];
+    _provider = widget.delegate.createImageProvider(source);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _getImage();
+  }
+
+  @override
+  void didUpdateWidget(ImageEmbed oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    EmbedAttribute oldStyle = oldWidget.node.style.get(NotusAttribute.embed);
+    final oldSource = oldStyle.value['source'];
+    EmbedAttribute style = widget.node.style.get(NotusAttribute.embed);
+    final source = style.value['source'];
+    if (oldSource != source || oldWidget.delegate != widget.delegate) {
+      _provider = widget.delegate.createImageProvider(source);
+      _getImage();
+    }
+  }
+
+  @override
+  void dispose() {
+    _imageStream.removeListener(_updateImage);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return _EditableImage(
+      node: widget.node,
+      image: _imageInfo?.image,
+    );
+  }
+
+  void _getImage() {
+    final oldImageStream = _imageStream;
+    _imageStream = _provider.resolve(createLocalImageConfiguration(context));
+    if (_imageStream.key != oldImageStream?.key) {
+      oldImageStream?.removeListener(_updateImage);
+      _imageStream.addListener(_updateImage);
+    }
+  }
+
+  void _updateImage(ImageInfo imageInfo, bool synchronousCall) {
+    setState(() {
+      _imageInfo = imageInfo;
+    });
+  }
+}
+
+class _EditableImage extends LeafRenderObjectWidget {
+  _EditableImage({@required this.node, this.image}) : assert(node != null);
 
   final EmbedNode node;
+  final ui.Image image;
 
   @override
   RenderEditableImage createRenderObject(BuildContext context) {
-    return new RenderEditableImage(node: node);
+    return new RenderEditableImage(node: node, image: image);
   }
 
   @override
@@ -35,9 +138,6 @@ class RenderEditableImage extends RenderImage implements RenderEditableBox {
         super(
           image: image,
         );
-  //
-  // Public members
-  //
 
   @override
   EmbedNode get node => _node;

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

@@ -29,6 +29,9 @@ enum ZefyrToolbarAction {
   code,
   quote,
   horizontalRule,
+  image,
+  cameraImage,
+  galleryImage,
   hideKeyboard,
   close,
   confirm,
@@ -348,6 +351,9 @@ class _DefaultZefyrToolbarDelegate implements ZefyrToolbarDelegate {
     ZefyrToolbarAction.code: Icons.code,
     ZefyrToolbarAction.quote: Icons.format_quote,
     ZefyrToolbarAction.horizontalRule: Icons.remove,
+    ZefyrToolbarAction.image: Icons.photo,
+    ZefyrToolbarAction.cameraImage: Icons.photo_camera,
+    ZefyrToolbarAction.galleryImage: Icons.photo_library,
     ZefyrToolbarAction.hideKeyboard: Icons.keyboard_hide,
     ZefyrToolbarAction.close: Icons.close,
     ZefyrToolbarAction.confirm: Icons.check,

packages/zefyr/pubspec.yaml

@@ -9,6 +9,7 @@ dependencies:
     sdk: flutter
   collection: ^1.14.6
   url_launcher: ^3.0.0
+  image_picker: ^0.4.5
   quill_delta: ^1.0.0-dev.1.0
   notus:
     git: