Introduced ZefyrScaffold instead of putting toolbar in Overlay

packages/zefyr/example/lib/main.dart

@@ -1,125 +1,68 @@
 // 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:convert';
-
 import 'package:flutter/material.dart';
-import 'package:quill_delta/quill_delta.dart';
-import 'package:zefyr/zefyr.dart';
+
+import 'src/full_page.dart';
+import 'src/form.dart';
 
 void main() {
   runApp(new ZefyrApp());
 }
 
-class ZefyrLogo extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: <Widget>[
-        Text('Ze'),
-        FlutterLogo(size: 24.0),
-        Text('yr'),
-      ],
-    );
-  }
-}
-
 class ZefyrApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return new MaterialApp(
+    return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'Zefyr Editor',
-      theme: new ThemeData(primarySwatch: Colors.cyan),
-      home: new MyHomePage(),
+      theme: ThemeData(primarySwatch: Colors.cyan),
+      home: HomePage(),
+      routes: {
+        "/fullPage": buildFullPage,
+        "/form": buildFormPage,
+      },
     );
   }
-}
-
-class MyHomePage extends StatefulWidget {
-  @override
-  _MyHomePageState createState() => new _MyHomePageState();
-}
 
-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"}]';
+  Widget buildFullPage(BuildContext context) {
+    return FullPageEditorScreen();
+  }
 
-Delta getDelta() {
-  return Delta.fromJson(json.decode(doc));
+  Widget buildFormPage(BuildContext context) {
+    return FormEmbeddedScreen();
+  }
 }
 
-class _MyHomePageState extends State<MyHomePage> {
-  final ZefyrController _controller =
-      ZefyrController(NotusDocument.fromDelta(getDelta()));
-  final FocusNode _focusNode = new FocusNode();
-  bool _editing = false;
-
+class HomePage extends StatelessWidget {
   @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,
-      ),
-    );
-
-    final done = _editing
-        ? [new FlatButton(onPressed: _stopEditing, child: Text('DONE'))]
-        : [new FlatButton(onPressed: _startEditing, child: Text('EDIT'))];
+    final nav = Navigator.of(context);
     return Scaffold(
-      resizeToAvoidBottomPadding: true,
       appBar: AppBar(
         elevation: 1.0,
         backgroundColor: Colors.grey.shade200,
         brightness: Brightness.light,
         title: ZefyrLogo(),
-        actions: done,
       ),
-      body: ZefyrTheme(
-        data: theme,
-        child: ZefyrEditor(
-          controller: _controller,
-          focusNode: _focusNode,
-          enabled: _editing,
-          imageDelegate: new CustomImageDelegate(),
-        ),
+      body: Column(
+        children: <Widget>[
+          Expanded(child: Container()),
+          FlatButton(
+            onPressed: () => nav.pushNamed('/fullPage'),
+            child: Text('Full page editor'),
+            color: Colors.lightBlue,
+            textColor: Colors.white,
+          ),
+          FlatButton(
+            onPressed: () => nav.pushNamed('/form'),
+            child: Text('Embedded in a form'),
+            color: Colors.lightBlue,
+            textColor: Colors.white,
+          ),
+          Expanded(child: Container()),
+        ],
       ),
     );
   }
-
-  void _startEditing() {
-    setState(() {
-      _editing = true;
-    });
-  }
-
-  void _stopEditing() {
-    setState(() {
-      _editing = false;
-    });
-  }
-}
-
-/// 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/example/lib/src/form.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+import 'package:zefyr/zefyr.dart';
+
+import 'full_page.dart';
+
+class FormEmbeddedScreen extends StatefulWidget {
+  @override
+  _FormEmbeddedScreenState createState() => _FormEmbeddedScreenState();
+}
+
+class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
+  final ZefyrController _controller = ZefyrController(NotusDocument());
+  final FocusNode _focusNode = new FocusNode();
+
+  @override
+  Widget build(BuildContext context) {
+    final form = ListView(
+      children: <Widget>[
+        TextField(decoration: InputDecoration(labelText: 'Name')),
+        TextField(decoration: InputDecoration(labelText: 'Email')),
+        Container(
+          padding: EdgeInsets.only(top: 16.0),
+          child: Text(
+            'Description',
+            style: TextStyle(color: Colors.black54, fontSize: 16.0),
+          ),
+          alignment: Alignment.centerLeft,
+        ),
+        buildEditor(),
+      ],
+    );
+
+    return Scaffold(
+      resizeToAvoidBottomPadding: true,
+      appBar: AppBar(
+        elevation: 1.0,
+        backgroundColor: Colors.grey.shade200,
+        brightness: Brightness.light,
+        title: ZefyrLogo(),
+      ),
+      body: ZefyrScaffold(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: form,
+        ),
+      ),
+    );
+  }
+
+  Widget buildEditor() {
+    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 Container(
+      margin: EdgeInsets.symmetric(vertical: 8.0),
+      constraints: BoxConstraints.tightFor(height: 300.0),
+      decoration:
+          BoxDecoration(border: Border.all(color: Colors.grey.shade400)),
+      child: ZefyrTheme(
+        data: theme,
+        child: ZefyrEditor(
+          padding: EdgeInsets.all(8.0),
+          controller: _controller,
+          focusNode: _focusNode,
+          autofocus: false,
+          imageDelegate: new CustomImageDelegate(),
+          physics: ClampingScrollPhysics(),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,108 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:quill_delta/quill_delta.dart';
+import 'package:zefyr/zefyr.dart';
+
+class ZefyrLogo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        Text('Ze'),
+        FlutterLogo(size: 24.0),
+        Text('yr'),
+      ],
+    );
+  }
+}
+
+class FullPageEditorScreen extends StatefulWidget {
+  @override
+  _FullPageEditorScreenState createState() => new _FullPageEditorScreenState();
+}
+
+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));
+}
+
+class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
+  final ZefyrController _controller =
+      ZefyrController(NotusDocument.fromDelta(getDelta()));
+  final FocusNode _focusNode = new FocusNode();
+  bool _editing = false;
+
+  @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,
+      ),
+    );
+
+    final done = _editing
+        ? [new FlatButton(onPressed: _stopEditing, child: Text('DONE'))]
+        : [new FlatButton(onPressed: _startEditing, child: Text('EDIT'))];
+    return Scaffold(
+      resizeToAvoidBottomPadding: true,
+      appBar: AppBar(
+        elevation: 1.0,
+        backgroundColor: Colors.grey.shade200,
+        brightness: Brightness.light,
+        title: ZefyrLogo(),
+        actions: done,
+      ),
+      body: ZefyrScaffold(
+        child: ZefyrTheme(
+          data: theme,
+          child: ZefyrEditor(
+            controller: _controller,
+            focusNode: _focusNode,
+            enabled: _editing,
+            imageDelegate: new CustomImageDelegate(),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _startEditing() {
+    setState(() {
+      _editing = true;
+    });
+  }
+
+  void _stopEditing() {
+    setState(() {
+      _editing = false;
+    });
+  }
+}
+
+/// 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

@@ -491,18 +491,19 @@ class _LinkInput extends StatefulWidget {
 class _LinkInputState extends State<_LinkInput> {
   final FocusNode _focusNode = FocusNode();
 
-  bool _didAutoFocus = false;
   ZefyrEditorScope _editor;
+  bool _didAutoFocus = false;
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    final toolbar = ZefyrToolbar.of(context);
     if (!_didAutoFocus) {
       FocusScope.of(context).requestFocus(_focusNode);
       _didAutoFocus = true;
     }
 
+    final toolbar = ZefyrToolbar.of(context);
+
     if (_editor != toolbar.editor) {
       _editor?.setToolbarFocusNode(null);
       _editor = toolbar.editor;
@@ -512,6 +513,7 @@ class _LinkInputState extends State<_LinkInput> {
 
   @override
   void dispose() {
+    _editor?.setToolbarFocusNode(null);
     _focusNode.dispose();
     _editor = null;
     super.dispose();
@@ -519,8 +521,6 @@ class _LinkInputState extends State<_LinkInput> {
 
   @override
   Widget build(BuildContext context) {
-    FocusScope.of(context).reparentIfNeeded(_focusNode);
-
     final theme = Theme.of(context);
     final toolbarTheme = ZefyrTheme.of(context).toolbarTheme;
     final color =
@@ -531,7 +531,7 @@ class _LinkInputState extends State<_LinkInput> {
       keyboardType: TextInputType.url,
       focusNode: _focusNode,
       controller: widget.controller,
-//      autofocus: true,
+      autofocus: true,
       decoration: new InputDecoration(
         hintText: 'https://',
         filled: true,

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

@@ -36,6 +36,7 @@ class ZefyrEditableText extends StatefulWidget {
     this.autofocus: true,
     this.enabled: true,
     this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
+    this.physics,
   }) : super(key: key);
 
   final ZefyrController controller;
@@ -43,6 +44,7 @@ class ZefyrEditableText extends StatefulWidget {
   final ZefyrImageDelegate imageDelegate;
   final bool autofocus;
   final bool enabled;
+  final ScrollPhysics physics;
 
   /// Padding around editable area.
   final EdgeInsets padding;
@@ -132,8 +134,7 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
       body = new Padding(padding: widget.padding, child: body);
     }
     final scrollable = SingleChildScrollView(
-      padding: EdgeInsets.only(top: 16.0),
-      physics: AlwaysScrollableScrollPhysics(),
+      physics: widget.physics,
       controller: _scrollController,
       child: body,
     );

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

@@ -7,6 +7,7 @@ import 'package:notus/notus.dart';
 import 'controller.dart';
 import 'editable_text.dart';
 import 'image.dart';
+import 'scaffold.dart';
 import 'theme.dart';
 import 'toolbar.dart';
 
@@ -31,7 +32,6 @@ class ZefyrEditorScope extends ChangeNotifier {
   ZefyrImageDelegate _imageDelegate;
   ZefyrImageDelegate get imageDelegate => _imageDelegate;
 
-  FocusScopeNode get focusScope => _focusScope;
   FocusScopeNode _focusScope;
   FocusNode _focusNode;
 
@@ -103,13 +103,13 @@ class ZefyrEditorScope extends ChangeNotifier {
   FocusNode _toolbarFocusNode;
 
   void setToolbarFocusNode(FocusNode node) {
-    assert(!_disposed);
+    assert(!_disposed || node == null);
     if (_toolbarFocusNode != node) {
       _toolbarFocusNode?.removeListener(_handleFocusChange);
       _toolbarFocusNode = node;
-      _toolbarFocusNode.addListener(_handleFocusChange);
+      _toolbarFocusNode?.addListener(_handleFocusChange);
       // We do not notify listeners here because it will happen when
-      // focus state changes.
+      // focus state changes, see [_handleFocusChange].
     }
   }
 
@@ -169,6 +169,7 @@ class ZefyrEditor extends StatefulWidget {
     this.padding: const EdgeInsets.symmetric(horizontal: 16.0),
     this.toolbarDelegate,
     this.imageDelegate,
+    this.physics,
   }) : super(key: key);
 
   final ZefyrController controller;
@@ -177,6 +178,7 @@ class ZefyrEditor extends StatefulWidget {
   final bool enabled;
   final ZefyrToolbarDelegate toolbarDelegate;
   final ZefyrImageDelegate imageDelegate;
+  final ScrollPhysics physics;
 
   /// Padding around editable area.
   final EdgeInsets padding;
@@ -195,36 +197,42 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   ZefyrImageDelegate _imageDelegate;
   ZefyrEditorScope _scope;
   ZefyrThemeData _themeData;
+  GlobalKey<ZefyrToolbarState> _toolbarKey;
+  ZefyrScaffoldState _scaffold;
 
-  OverlayEntry _toolbar;
-  OverlayState _overlay;
+  bool get hasToolbar => _toolbarKey != null;
 
   void showToolbar() {
-    _toolbar = new OverlayEntry(
-      builder: (context) => _ZefyrToolbarContainer(
-            theme: _themeData,
-            toolbar: ZefyrToolbar(
-              editor: _scope,
-              delegate: widget.toolbarDelegate,
-            ),
-          ),
-    );
-    _overlay.insert(_toolbar);
+    assert(_toolbarKey == null);
+    _toolbarKey = GlobalKey();
+    _scaffold.showToolbar(buildToolbar);
   }
 
   void hideToolbar() {
-    _toolbar?.remove();
-    _toolbar = null;
+    if (_toolbarKey == null) return;
+    _scaffold.hideToolbar();
+    _toolbarKey = null;
+  }
+
+  Widget buildToolbar(BuildContext) {
+    return ZefyrTheme(
+      data: _themeData,
+      child: ZefyrToolbar(
+        key: _toolbarKey,
+        editor: _scope,
+        delegate: widget.toolbarDelegate,
+      ),
+    );
   }
 
   void _handleChange() {
     if (_scope.focusOwner == FocusOwner.none) {
       hideToolbar();
-    } else if (_toolbar == null) {
+    } else if (!hasToolbar) {
       showToolbar();
     } else {
       WidgetsBinding.instance.addPostFrameCallback((_) {
-        _toolbar?.markNeedsBuild();
+        _toolbarKey?.currentState?.markNeedsRebuild();
       });
     }
   }
@@ -249,6 +257,11 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
+    final parentTheme = ZefyrTheme.of(context, nullOk: true);
+    final fallbackTheme = ZefyrThemeData.fallback(context);
+    _themeData = (parentTheme != null)
+        ? fallbackTheme.merge(parentTheme)
+        : fallbackTheme;
 
     if (_scope == null) {
       _scope = ZefyrEditorScope(
@@ -265,17 +278,12 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       }
     }
 
-    final parentTheme = ZefyrTheme.of(context, nullOk: true);
-    final fallbackTheme = ZefyrThemeData.fallback(context);
-    _themeData = (parentTheme != null)
-        ? fallbackTheme.merge(parentTheme)
-        : fallbackTheme;
-
-    final overlay = Overlay.of(context, debugRequiredFor: widget);
-    if (_overlay != overlay) {
+    final scaffold = ZefyrScaffold.of(context);
+    if (_scaffold != scaffold) {
+      bool didHaveToolbar = hasToolbar;
       hideToolbar();
-      _overlay = overlay;
-      // TODO: update toolbar.
+      _scaffold = scaffold;
+      if (didHaveToolbar) showToolbar();
     }
   }
 
@@ -296,45 +304,15 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       autofocus: widget.autofocus,
       enabled: widget.enabled,
       padding: widget.padding,
+      physics: widget.physics,
     );
 
-    final children = <Widget>[];
-    children.add(Expanded(child: editable));
-    if (_toolbar != null) {
-      children.add(SizedBox(height: ZefyrToolbar.kToolbarHeight));
-    }
-//    final toolbar = ZefyrToolbar(
-//      editor: _scope,
-//      focusNode: _toolbarFocusNode,
-//      delegate: widget.toolbarDelegate,
-//    );
-//    children.add(toolbar);
-
     return ZefyrTheme(
       data: _themeData,
       child: _ZefyrEditorScope(
         scope: _scope,
-        child: Column(children: children),
+        child: editable,
       ),
     );
   }
 }
-
-class _ZefyrToolbarContainer extends StatelessWidget {
-  final ZefyrThemeData theme;
-  final Widget toolbar;
-
-  const _ZefyrToolbarContainer({Key key, this.theme, this.toolbar})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final media = MediaQuery.of(context);
-    return Positioned(
-      bottom: media.viewInsets.bottom,
-      left: 0.0,
-      right: 0.0,
-      child: ZefyrTheme(data: theme, child: toolbar),
-    );
-  }
-}

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

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class ZefyrScaffold extends StatefulWidget {
+  final Widget child;
+
+  const ZefyrScaffold({Key key, this.child}) : super(key: key);
+
+  static ZefyrScaffoldState of(BuildContext context) {
+    final _ZefyrScaffoldAccess widget =
+        context.inheritFromWidgetOfExactType(_ZefyrScaffoldAccess);
+    return widget.scaffold;
+  }
+
+  @override
+  ZefyrScaffoldState createState() => ZefyrScaffoldState();
+}
+
+class ZefyrScaffoldState extends State<ZefyrScaffold> {
+  WidgetBuilder _toolbarBuilder;
+
+  void showToolbar(WidgetBuilder builder) {
+    setState(() {
+      _toolbarBuilder = builder;
+    });
+  }
+
+  void hideToolbar() {
+    if (_toolbarBuilder != null) {
+      setState(() {
+        _toolbarBuilder = null;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final toolbar =
+        (_toolbarBuilder == null) ? Container() : _toolbarBuilder(context);
+    return _ZefyrScaffoldAccess(
+      scaffold: this,
+      child: Column(
+        children: <Widget>[
+          Expanded(child: widget.child),
+          toolbar,
+        ],
+      ),
+    );
+  }
+}
+
+class _ZefyrScaffoldAccess extends InheritedWidget {
+  final ZefyrScaffoldState scaffold;
+
+  _ZefyrScaffoldAccess({Widget child, this.scaffold}) : super(child: child);
+
+  @override
+  bool updateShouldNotify(_ZefyrScaffoldAccess oldWidget) {
+    return oldWidget.scaffold != scaffold;
+  }
+}

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

@@ -66,6 +66,7 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
 
   @override
   void hideToolbar() {
+    _didCaretTap = false; // reset double tap.
     _toolbar?.remove();
     _toolbar = null;
     _toolbarController.stop();
@@ -98,8 +99,6 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
     super.initState();
     _toolbarController = new AnimationController(
         duration: _kFadeDuration, vsync: widget.overlay);
-    _selection = widget.controller.selection;
-    widget.controller.addListener(_handleChange);
   }
 
   static const Duration _kFadeDuration = const Duration(milliseconds: 150);
@@ -113,23 +112,24 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
       _toolbarController = new AnimationController(
           duration: _kFadeDuration, vsync: widget.overlay);
     }
-    if (oldWidget.controller != widget.controller) {
-      oldWidget.controller.removeListener(_handleChange);
-      widget.controller.addListener(_handleChange);
-    }
   }
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      _updateToolbar();
-    });
+    final editor = ZefyrEditor.of(context);
+    if (_editor != editor) {
+      _editor?.removeListener(_handleChange);
+      _editor = editor;
+      _editor.addListener(_handleChange);
+      _selection = _editor.selection;
+      _focusOwner = _editor.focusOwner;
+    }
   }
 
   @override
   void dispose() {
-    widget.controller.removeListener(_handleChange);
+    _editor.removeListener(_handleChange);
     hideToolbar();
     _toolbarController.dispose();
     _toolbarController = null;
@@ -174,12 +174,14 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
   OverlayEntry _toolbar;
   AnimationController _toolbarController;
 
+  ZefyrEditorScope _editor;
   TextSelection _selection;
+  FocusOwner _focusOwner;
 
   bool _didCaretTap = false;
 
   void _handleChange() {
-    if (_selection != widget.controller.selection) {
+    if (_selection != _editor.selection || _focusOwner != _editor.focusOwner) {
       _updateToolbar();
     }
   }
@@ -208,6 +210,7 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
         }
       }
       _selection = selection;
+      _focusOwner = focusOwner;
     });
   }
 

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

@@ -151,7 +151,12 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
   TextSelection _selection;
 
   void markNeedsRebuild() {
-    setState(() {});
+    setState(() {
+      if (_selection != editor.selection) {
+        _selection = editor.selection;
+        closeOverlay();
+      }
+    });
   }
 
   Widget buildButton(BuildContext context, ZefyrToolbarAction action,
@@ -200,10 +205,6 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
     if (widget.delegate != oldWidget.delegate) {
       _delegate = widget.delegate ?? new _DefaultZefyrToolbarDelegate();
     }
-    if (_selection != editor.selection) {
-      _selection = editor.selection;
-      closeOverlay();
-    }
   }
 
   @override
@@ -214,10 +215,6 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
   @override
   Widget build(BuildContext context) {
-    if (editor.focusOwner == FocusOwner.none) {
-      return new Container();
-    }
-
     final layers = <Widget>[];
 
     // Must set unique key for the toolbar to prevent it from reconstructing
@@ -243,14 +240,11 @@ class ZefyrToolbarState extends State<ZefyrToolbar>
 
     final constraints =
         BoxConstraints.tightFor(height: ZefyrToolbar.kToolbarHeight);
-    return FocusScope(
-      node: editor.focusScope,
-      child: _ZefyrToolbarScope(
-        toolbar: this,
-        child: Container(
-          constraints: constraints,
-          child: Stack(children: layers),
-        ),
+    return _ZefyrToolbarScope(
+      toolbar: this,
+      child: Container(
+        constraints: constraints,
+        child: Stack(children: layers),
       ),
     );
   }

packages/zefyr/lib/zefyr.dart

@@ -20,6 +20,7 @@ export 'src/widgets/image.dart';
 export 'src/widgets/list.dart';
 export 'src/widgets/paragraph.dart';
 export 'src/widgets/quote.dart';
+export 'src/widgets/scaffold.dart';
 export 'src/widgets/selection.dart' hide SelectionHandleDriver;
 export 'src/widgets/theme.dart';
 export 'src/widgets/toolbar.dart';

packages/zefyr/test/testing.dart

@@ -30,7 +30,9 @@ class EditorSandBox {
     if (theme != null) {
       widget = ZefyrTheme(data: theme, child: widget);
     }
-    widget = MaterialApp(home: widget);
+    widget = MaterialApp(
+      home: ZefyrScaffold(child: widget),
+    );
 
     return EditorSandBox._(tester, focusNode, document, controller, widget);
   }

packages/zefyr/test/widgets/image_test.dart

@@ -75,7 +75,7 @@ void main() {
       expect(editor.selection.extentOffset, embed.documentOffset);
     });
 
-    testWidgets('tap right side of horizontal rule puts caret after it',
+    testWidgets('tap right side of image puts caret after it',
         (tester) async {
       final editor = new EditorSandBox(tester: tester);
       await editor.tapEditor();

packages/zefyr/test/widgets/render_context_test.dart

@@ -52,12 +52,14 @@ void main() {
     });
 
     testWidgets('notifyListeners is delayed to next frame', (tester) async {
-      var focusNode = new FocusNode();
-      var controller = new ZefyrController(new NotusDocument());
-      var widget = new MaterialApp(
-        home: new ZefyrEditor(
-          controller: controller,
-          focusNode: focusNode,
+      var focusNode = FocusNode();
+      var controller = ZefyrController(new NotusDocument());
+      var widget = MaterialApp(
+        home: ZefyrScaffold(
+          child: ZefyrEditor(
+            controller: controller,
+            focusNode: focusNode,
+          ),
         ),
       );
       await tester.pumpWidget(widget);