Theming layer rewrite and Dark Mode support (#232)

packages/zefyr/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.10.0
+
+This release contains breaking changes.
+The entire theming layer of ZefyrEditor has been rewritten. Most notable changes include:
+
+* Removed `selectionColor` and `cursorColor` from `ZefyrThemeData`. Relying on the Flutter 
+  `ThemeData.textSelectionColor` and `ThemeData.cursorColor` instead.
+* All attribute styles moved to the new `AttributeTheme` class.
+* `indentSize` renamed to `indentWidth`
+* Purpose of `BlockTheme` changed to specify styles for particular block type (list, quote, code)
+* Removed `HeadingTheme` and `StyleTheme`
+* Added new `LineTheme` to describe styles of headings and paragraphs
+
+Other changes in this release include:
+
+* Added: Support for Dark Mode
+* Changed: Minor tweaks to default theme
+* Fixed: ZefyrField decoration when focused appeared as disabled
+* Fixed: Caret color for iOS
+
 ## 0.9.1
 
 * Added: Support for iOS keyboard appearance. See `ZefyrEditor.keyboardAppearance` and `ZefyrField.keyboardAppearance`

packages/zefyr/example/lib/main.dart

@@ -2,6 +2,7 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 import 'package:flutter/material.dart';
+
 import 'src/form.dart';
 import 'src/full_page.dart';
 import 'src/view.dart';
@@ -16,7 +17,6 @@ class ZefyrApp extends StatelessWidget {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'Zefyr Editor',
-      theme: ThemeData(primarySwatch: Colors.cyan),
       home: HomePage(),
       routes: {
         "/fullPage": buildFullPage,
@@ -44,32 +44,21 @@ class HomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     final nav = Navigator.of(context);
     return Scaffold(
-      appBar: AppBar(
-        elevation: 1.0,
-        backgroundColor: Colors.grey.shade200,
-        brightness: Brightness.light,
-        title: ZefyrLogo(),
-      ),
+      appBar: AppBar(title: ZefyrLogo()),
       body: Column(
         children: <Widget>[
           Expanded(child: Container()),
-          FlatButton(
+          RaisedButton(
             onPressed: () => nav.pushNamed('/fullPage'),
             child: Text('Full page editor'),
-            color: Colors.lightBlue,
-            textColor: Colors.white,
           ),
-          FlatButton(
+          RaisedButton(
             onPressed: () => nav.pushNamed('/form'),
             child: Text('Embedded in a form'),
-            color: Colors.lightBlue,
-            textColor: Colors.white,
           ),
-          FlatButton(
+          RaisedButton(
             onPressed: () => nav.pushNamed('/view'),
             child: Text('Read-only embeddable view'),
-            color: Colors.lightBlue,
-            textColor: Colors.white,
           ),
           Expanded(child: Container()),
         ],

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

@@ -8,6 +8,8 @@ import 'package:zefyr/zefyr.dart';
 import 'full_page.dart';
 import 'images.dart';
 
+enum _Options { darkTheme }
+
 class FormEmbeddedScreen extends StatefulWidget {
   @override
   _FormEmbeddedScreenState createState() => _FormEmbeddedScreenState();
@@ -17,6 +19,8 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
   final ZefyrController _controller = ZefyrController(NotusDocument());
   final FocusNode _focusNode = FocusNode();
 
+  bool _darkTheme = false;
+
   @override
   Widget build(BuildContext context) {
     final form = ListView(
@@ -27,13 +31,16 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
       ],
     );
 
-    return Scaffold(
+    final result = Scaffold(
       resizeToAvoidBottomPadding: true,
       appBar: AppBar(
-        elevation: 1.0,
-        backgroundColor: Colors.grey.shade200,
-        brightness: Brightness.light,
         title: ZefyrLogo(),
+        actions: [
+          PopupMenuButton<_Options>(
+            itemBuilder: buildPopupMenu,
+            onSelected: handlePopupItemSelected,
+          )
+        ],
       ),
       body: ZefyrScaffold(
         child: Padding(
@@ -42,29 +49,41 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
         ),
       ),
     );
+
+    if (_darkTheme) {
+      return Theme(data: ThemeData.dark(), child: result);
+    }
+    return Theme(data: ThemeData(primarySwatch: Colors.cyan), child: result);
   }
 
   Widget buildEditor() {
-    final theme = ZefyrThemeData(
-      toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
-        color: Colors.grey.shade800,
-        toggleColor: Colors.grey.shade900,
-        iconColor: Colors.white,
-        disabledIconColor: Colors.grey.shade500,
-      ),
+    return ZefyrField(
+      height: 200.0,
+      decoration: InputDecoration(labelText: 'Description'),
+      controller: _controller,
+      focusNode: _focusNode,
+      autofocus: true,
+      imageDelegate: CustomImageDelegate(),
+      physics: ClampingScrollPhysics(),
     );
+  }
+
+  void handlePopupItemSelected(value) {
+    if (!mounted) return;
+    setState(() {
+      if (value == _Options.darkTheme) {
+        _darkTheme = !_darkTheme;
+      }
+    });
+  }
 
-    return ZefyrTheme(
-      data: theme,
-      child: ZefyrField(
-        height: 200.0,
-        decoration: InputDecoration(labelText: 'Description'),
-        controller: _controller,
-        focusNode: _focusNode,
-        autofocus: true,
-        imageDelegate: CustomImageDelegate(),
-        physics: ClampingScrollPhysics(),
+  List<PopupMenuEntry<_Options>> buildPopupMenu(BuildContext context) {
+    return [
+      CheckedPopupMenuItem(
+        value: _Options.darkTheme,
+        child: Text("Dark theme"),
+        checked: _darkTheme,
       ),
-    );
+    ];
   }
 }

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

@@ -41,12 +41,15 @@ Delta getDelta() {
   return Delta.fromJson(json.decode(doc) as List);
 }
 
+enum _Options { darkTheme }
+
 class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
   final ZefyrController _controller =
       ZefyrController(NotusDocument.fromDelta(getDelta()));
   final FocusNode _focusNode = FocusNode();
   bool _editing = false;
   StreamSubscription<NotusChange> _sub;
+  bool _darkTheme = false;
 
   @override
   void initState() {
@@ -64,41 +67,54 @@ class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ZefyrThemeData(
-      cursorColor: Colors.blue,
-      toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
-        color: Colors.grey.shade800,
-        toggleColor: Colors.grey.shade900,
-        iconColor: Colors.white,
-        disabledIconColor: Colors.grey.shade500,
-      ),
-    );
-
     final done = _editing
-        ? [FlatButton(onPressed: _stopEditing, child: Text('DONE'))]
-        : [FlatButton(onPressed: _startEditing, child: Text('EDIT'))];
-    return Scaffold(
+        ? IconButton(onPressed: _stopEditing, icon: Icon(Icons.save))
+        : IconButton(onPressed: _startEditing, icon: Icon(Icons.edit));
+    final result = Scaffold(
       resizeToAvoidBottomPadding: true,
       appBar: AppBar(
-        elevation: 1.0,
-        backgroundColor: Colors.grey.shade200,
-        brightness: Brightness.light,
         title: ZefyrLogo(),
-        actions: done,
+        actions: [
+          done,
+          PopupMenuButton<_Options>(
+            itemBuilder: buildPopupMenu,
+            onSelected: handlePopupItemSelected,
+          )
+        ],
       ),
       body: ZefyrScaffold(
-        child: ZefyrTheme(
-          data: theme,
-          child: ZefyrEditor(
-            controller: _controller,
-            focusNode: _focusNode,
-            mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
-            imageDelegate: CustomImageDelegate(),
-            keyboardAppearance: Brightness.dark,
-          ),
+        child: ZefyrEditor(
+          controller: _controller,
+          focusNode: _focusNode,
+          mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
+          imageDelegate: CustomImageDelegate(),
+          keyboardAppearance: _darkTheme ? Brightness.dark : Brightness.light,
         ),
       ),
     );
+    if (_darkTheme) {
+      return Theme(data: ThemeData.dark(), child: result);
+    }
+    return Theme(data: ThemeData(primarySwatch: Colors.cyan), child: result);
+  }
+
+  void handlePopupItemSelected(value) {
+    if (!mounted) return;
+    setState(() {
+      if (value == _Options.darkTheme) {
+        _darkTheme = !_darkTheme;
+      }
+    });
+  }
+
+  List<PopupMenuEntry<_Options>> buildPopupMenu(BuildContext context) {
+    return [
+      CheckedPopupMenuItem(
+        value: _Options.darkTheme,
+        child: Text("Dark theme"),
+        checked: _darkTheme,
+      ),
+    ];
   }
 
   void _startEditing() {

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

@@ -32,43 +32,27 @@ class _ViewScreen extends State<ViewScreen> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ZefyrThemeData(
-      toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
-        color: Colors.grey.shade800,
-        toggleColor: Colors.grey.shade900,
-        iconColor: Colors.white,
-        disabledIconColor: Colors.grey.shade500,
-      ),
-    );
     return Scaffold(
       resizeToAvoidBottomPadding: true,
-      appBar: AppBar(
-        elevation: 1.0,
-        backgroundColor: Colors.grey.shade200,
-        brightness: Brightness.light,
-        title: ZefyrLogo(),
-      ),
-      body: ZefyrTheme(
-        data: theme,
-        child: ListView(
-          children: <Widget>[
-            SizedBox(height: 16.0),
-            ListTile(
-              leading: Icon(Icons.info),
-              title: Text('ZefyrView inside ListView'),
-              subtitle: Text(
-                  'Allows embedding Notus documents in custom scrollables'),
-              trailing: Icon(Icons.keyboard_arrow_down),
+      appBar: AppBar(title: ZefyrLogo()),
+      body: ListView(
+        children: <Widget>[
+          SizedBox(height: 16.0),
+          ListTile(
+            leading: Icon(Icons.info),
+            title: Text('ZefyrView inside ListView'),
+            subtitle:
+                Text('Allows embedding Notus documents in custom scrollables'),
+            trailing: Icon(Icons.keyboard_arrow_down),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: ZefyrView(
+              document: doc,
+              imageDelegate: CustomImageDelegate(),
             ),
-            Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: ZefyrView(
-                document: doc,
-                imageDelegate: CustomImageDelegate(),
-              ),
-            )
-          ],
-        ),
+          )
+        ],
       ),
     );
   }

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

@@ -0,0 +1,330 @@
+// Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:meta/meta.dart';
+
+/// Applies a Zefyr editor theme to descendant widgets.
+///
+/// Describes colors and typographic styles for an editor.
+///
+/// Descendant widgets obtain the current theme's [ZefyrThemeData] object using
+/// [ZefyrTheme.of].
+///
+/// See also:
+///
+///   * [ZefyrThemeData], which describes actual configuration of a theme.
+class ZefyrTheme extends InheritedWidget {
+  final ZefyrThemeData data;
+
+  /// Applies the given theme [data] to [child].
+  ///
+  /// The [data] and [child] arguments must not be null.
+  ZefyrTheme({
+    Key key,
+    @required this.data,
+    @required Widget child,
+  })  : assert(data != null),
+        assert(child != null),
+        super(key: key, child: child);
+
+  @override
+  bool updateShouldNotify(ZefyrTheme oldWidget) {
+    return data != oldWidget.data;
+  }
+
+  /// The data from the closest [ZefyrTheme] instance that encloses the given
+  /// context.
+  ///
+  /// Returns `null` if there is no [ZefyrTheme] in the given build context
+  /// and [nullOk] is set to `true`. If [nullOk] is set to `false` (default)
+  /// then this method asserts.
+  static ZefyrThemeData of(BuildContext context, {bool nullOk = false}) {
+    final ZefyrTheme widget =
+        context.dependOnInheritedWidgetOfExactType<ZefyrTheme>();
+    if (widget == null && nullOk) return null;
+    assert(widget != null,
+        '$ZefyrTheme.of() called with a context that does not contain a ZefyrEditor.');
+    return widget.data;
+  }
+}
+
+/// Holds colors and typography styles for [ZefyrEditor].
+class ZefyrThemeData {
+  final TextStyle boldStyle;
+  final TextStyle italicStyle;
+  final TextStyle linkStyle;
+  final StyleTheme paragraphTheme;
+  final HeadingTheme headingTheme;
+  final BlockTheme blockTheme;
+  final Color selectionColor;
+  final Color cursorColor;
+
+  /// Size of indentation for blocks.
+  final double indentSize;
+  final ZefyrToolbarTheme toolbarTheme;
+
+  factory ZefyrThemeData.fallback(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+    final defaultStyle = DefaultTextStyle.of(context);
+    final paragraphStyle = defaultStyle.style.copyWith(
+      fontSize: 16.0,
+      height: 1.3,
+    );
+    const padding = EdgeInsets.symmetric(vertical: 8.0);
+    final boldStyle = TextStyle(fontWeight: FontWeight.bold);
+    final italicStyle = TextStyle(fontStyle: FontStyle.italic);
+    final linkStyle = TextStyle(
+        color: themeData.accentColor, decoration: TextDecoration.underline);
+
+    return ZefyrThemeData(
+      boldStyle: boldStyle,
+      italicStyle: italicStyle,
+      linkStyle: linkStyle,
+      paragraphTheme: StyleTheme(textStyle: paragraphStyle, padding: padding),
+      headingTheme: HeadingTheme.fallback(context),
+      blockTheme: BlockTheme.fallback(context),
+      selectionColor: themeData.textSelectionColor,
+      cursorColor: themeData.cursorColor,
+      indentSize: 16.0,
+      toolbarTheme: ZefyrToolbarTheme.fallback(context),
+    );
+  }
+
+  const ZefyrThemeData({
+    this.boldStyle,
+    this.italicStyle,
+    this.linkStyle,
+    this.paragraphTheme,
+    this.headingTheme,
+    this.blockTheme,
+    this.selectionColor,
+    this.cursorColor,
+    this.indentSize,
+    this.toolbarTheme,
+  });
+
+  ZefyrThemeData copyWith({
+    TextStyle textStyle,
+    TextStyle boldStyle,
+    TextStyle italicStyle,
+    TextStyle linkStyle,
+    StyleTheme paragraphTheme,
+    HeadingTheme headingTheme,
+    BlockTheme blockTheme,
+    Color selectionColor,
+    Color cursorColor,
+    double indentSize,
+    ZefyrToolbarTheme toolbarTheme,
+  }) {
+    return ZefyrThemeData(
+      boldStyle: boldStyle ?? this.boldStyle,
+      italicStyle: italicStyle ?? this.italicStyle,
+      linkStyle: linkStyle ?? this.linkStyle,
+      paragraphTheme: paragraphTheme ?? this.paragraphTheme,
+      headingTheme: headingTheme ?? this.headingTheme,
+      blockTheme: blockTheme ?? this.blockTheme,
+      selectionColor: selectionColor ?? this.selectionColor,
+      cursorColor: cursorColor ?? this.cursorColor,
+      indentSize: indentSize ?? this.indentSize,
+      toolbarTheme: toolbarTheme ?? this.toolbarTheme,
+    );
+  }
+
+  ZefyrThemeData merge(ZefyrThemeData other) {
+    return copyWith(
+      boldStyle: other.boldStyle,
+      italicStyle: other.italicStyle,
+      linkStyle: other.linkStyle,
+      paragraphTheme: other.paragraphTheme,
+      headingTheme: other.headingTheme,
+      blockTheme: other.blockTheme,
+      selectionColor: other.selectionColor,
+      cursorColor: other.cursorColor,
+      indentSize: other.indentSize,
+      toolbarTheme: other.toolbarTheme,
+    );
+  }
+}
+
+/// Theme for heading-styled lines of text.
+class HeadingTheme {
+  /// Style theme for level 1 headings.
+  final StyleTheme level1;
+
+  /// Style theme for level 2 headings.
+  final StyleTheme level2;
+
+  /// Style theme for level 3 headings.
+  final StyleTheme level3;
+
+  HeadingTheme({
+    @required this.level1,
+    @required this.level2,
+    @required this.level3,
+  });
+
+  /// Creates fallback theme for headings.
+  factory HeadingTheme.fallback(BuildContext context) {
+    final defaultStyle = DefaultTextStyle.of(context);
+    return HeadingTheme(
+      level1: StyleTheme(
+        textStyle: defaultStyle.style.copyWith(
+          fontSize: 34.0,
+          color: defaultStyle.style.color.withOpacity(0.70),
+          height: 1.15,
+          fontWeight: FontWeight.w300,
+        ),
+        padding: EdgeInsets.only(top: 16.0, bottom: 0.0),
+      ),
+      level2: StyleTheme(
+        textStyle: TextStyle(
+          fontSize: 24.0,
+          color: defaultStyle.style.color.withOpacity(0.70),
+          height: 1.15,
+          fontWeight: FontWeight.normal,
+        ),
+        padding: EdgeInsets.only(bottom: 0.0, top: 8.0),
+      ),
+      level3: StyleTheme(
+        textStyle: TextStyle(
+          fontSize: 20.0,
+          color: defaultStyle.style.color.withOpacity(0.70),
+          height: 1.25,
+          fontWeight: FontWeight.w500,
+        ),
+        padding: EdgeInsets.only(bottom: 0.0, top: 8.0),
+      ),
+    );
+  }
+}
+
+/// Theme for a block of lines in a document.
+class BlockTheme {
+  /// Style theme for bullet lists.
+  final StyleTheme bulletList;
+
+  /// Style theme for number lists.
+  final StyleTheme numberList;
+
+  /// Style theme for code snippets.
+  final StyleTheme code;
+
+  /// Style theme for quotes.
+  final StyleTheme quote;
+
+  BlockTheme({
+    @required this.bulletList,
+    @required this.numberList,
+    @required this.quote,
+    @required this.code,
+  });
+
+  /// Creates fallback theme for blocks.
+  factory BlockTheme.fallback(BuildContext context) {
+    final themeData = Theme.of(context);
+    final defaultTextStyle = DefaultTextStyle.of(context);
+    final padding = const EdgeInsets.symmetric(vertical: 8.0);
+    String fontFamily;
+    switch (themeData.platform) {
+      case TargetPlatform.iOS:
+        fontFamily = 'Menlo';
+        break;
+      case TargetPlatform.android:
+      case TargetPlatform.fuchsia:
+        fontFamily = 'Roboto Mono';
+        break;
+    }
+
+    return BlockTheme(
+      bulletList: StyleTheme(padding: padding),
+      numberList: StyleTheme(padding: padding),
+      quote: StyleTheme(
+        textStyle: TextStyle(
+          color: defaultTextStyle.style.color.withOpacity(0.6),
+        ),
+        padding: padding,
+      ),
+      code: StyleTheme(
+        textStyle: TextStyle(
+          color: defaultTextStyle.style.color.withOpacity(0.8),
+          fontFamily: fontFamily,
+          fontSize: 14.0,
+          height: 1.25,
+        ),
+        padding: padding,
+      ),
+    );
+  }
+}
+
+/// Theme for a specific attribute style.
+///
+/// Used in [HeadingTheme] and [BlockTheme], as well as in
+/// [ZefyrThemeData.paragraphTheme].
+class StyleTheme {
+  /// Text style of this theme.
+  final TextStyle textStyle;
+
+  /// Padding to apply around lines of text.
+  final EdgeInsets padding;
+
+  /// Creates a new [StyleTheme].
+  StyleTheme({
+    this.textStyle,
+    this.padding,
+  });
+}
+
+/// Defines styles and colors for [ZefyrToolbar].
+class ZefyrToolbarTheme {
+  /// The background color of toolbar.
+  final Color color;
+
+  /// Color of buttons in toggled state.
+  final Color toggleColor;
+
+  /// Color of button icons.
+  final Color iconColor;
+
+  /// Color of button icons in disabled state.
+  final Color disabledIconColor;
+
+  /// Creates fallback theme for editor toolbars.
+  factory ZefyrToolbarTheme.fallback(BuildContext context) {
+    final theme = Theme.of(context);
+    return ZefyrToolbarTheme._(
+      color: theme.primaryColorBrightness == Brightness.light
+          ? Colors.grey.shade300
+          : Colors.grey.shade800,
+      toggleColor: theme.primaryColorBrightness == Brightness.light
+          ? Colors.grey.shade400
+          : Colors.grey.shade900,
+      iconColor: theme.primaryIconTheme.color,
+      disabledIconColor: theme.disabledColor,
+    );
+  }
+
+  ZefyrToolbarTheme._({
+    @required this.color,
+    @required this.toggleColor,
+    @required this.iconColor,
+    @required this.disabledIconColor,
+  });
+
+  ZefyrToolbarTheme copyWith({
+    Color color,
+    Color toggleColor,
+    Color iconColor,
+    Color disabledIconColor,
+  }) {
+    return ZefyrToolbarTheme._(
+      color: color ?? this.color,
+      toggleColor: toggleColor ?? this.toggleColor,
+      iconColor: iconColor ?? this.iconColor,
+      disabledIconColor: disabledIconColor ?? this.disabledIconColor,
+    );
+  }
+}

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

@@ -93,7 +93,7 @@ class ZefyrButton extends StatelessWidget {
     }
   }
 
-  Color _getColor(ZefyrScope editor, ZefyrToolbarTheme theme) {
+  Color _getColor(ZefyrScope editor, ToolbarTheme theme) {
     if (isAttributeAction) {
       final attribute = kZefyrToolbarAttributeActions[action];
       final isToggled = (attribute is NotusAttribute)

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

@@ -16,19 +16,23 @@ class ZefyrCode extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ZefyrTheme.of(context);
+    final theme = Theme.of(context);
+    final zefyrTheme = ZefyrTheme.of(context);
 
     List<Widget> items = [];
     for (var line in node.children) {
-      items.add(_buildLine(line, theme.blockTheme.code.textStyle));
+      items.add(_buildLine(line, zefyrTheme.attributeTheme.code.textStyle));
     }
 
+    // TODO: move background color and decoration to BlockTheme
+    final color = theme.primaryColorBrightness == Brightness.light
+        ? Colors.grey.shade200
+        : Colors.grey.shade800;
     return Padding(
-      padding: theme.blockTheme.code.padding,
+      padding: zefyrTheme.attributeTheme.code.padding,
       child: Container(
-        // TODO: make decorations configurable
         decoration: BoxDecoration(
-          color: Colors.blueGrey.shade50,
+          color: color,
           borderRadius: BorderRadius.circular(3.0),
         ),
         padding: const EdgeInsets.all(16.0),
@@ -42,6 +46,6 @@ class ZefyrCode extends StatelessWidget {
 
   Widget _buildLine(Node node, TextStyle style) {
     LineNode line = node;
-    return RawZefyrLine(node: line, style: style);
+    return ZefyrLine(node: line, style: style);
   }
 }

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

@@ -1,6 +1,8 @@
 // Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:notus/notus.dart';
@@ -12,17 +14,11 @@ import 'rich_text.dart';
 import 'scope.dart';
 import 'theme.dart';
 
-/// 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].
-class RawZefyrLine extends StatefulWidget {
-  const RawZefyrLine({
-    Key key,
-    @required this.node,
-    this.style,
-    this.padding,
-  }) : super(key: key);
+/// Represents single line of rich text document in Zefyr editor.
+class ZefyrLine extends StatefulWidget {
+  const ZefyrLine({Key key, @required this.node, this.style, this.padding})
+      : assert(node != null),
+        super(key: key);
 
   /// Line in the document represented by this widget.
   final LineNode node;
@@ -35,10 +31,10 @@ class RawZefyrLine extends StatefulWidget {
   final EdgeInsets padding;
 
   @override
-  _RawZefyrLineState createState() => _RawZefyrLineState();
+  _ZefyrLineState createState() => _ZefyrLineState();
 }
 
-class _RawZefyrLineState extends State<RawZefyrLine> {
+class _ZefyrLineState extends State<ZefyrLine> {
   final LayerLink _link = LayerLink();
 
   @override
@@ -47,7 +43,7 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
     if (scope.isEditable) {
       ensureVisible(context, scope);
     }
-    final theme = ZefyrTheme.of(context);
+    final theme = Theme.of(context);
 
     Widget content;
     if (widget.node.hasEmbed) {
@@ -61,6 +57,18 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
     }
 
     if (scope.isEditable) {
+      Color cursorColor;
+      switch (theme.platform) {
+        case TargetPlatform.iOS:
+          cursorColor ??= CupertinoTheme.of(context).primaryColor;
+          break;
+
+        case TargetPlatform.android:
+        case TargetPlatform.fuchsia:
+          cursorColor = theme.cursorColor;
+          break;
+      }
+
       content = EditableBox(
         child: content,
         node: widget.node,
@@ -68,8 +76,8 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
         renderContext: scope.renderContext,
         showCursor: scope.showCursor,
         selection: scope.selection,
-        selectionColor: theme.selectionColor,
-        cursorColor: theme.cursorColor,
+        selectionColor: theme.textSelectionColor,
+        cursorColor: cursorColor,
       );
       content = CompositedTransformTarget(link: _link, child: content);
     }
@@ -129,13 +137,13 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
   TextStyle _getTextStyle(NotusStyle style, ZefyrThemeData theme) {
     TextStyle result = TextStyle();
     if (style.containsSame(NotusAttribute.bold)) {
-      result = result.merge(theme.boldStyle);
+      result = result.merge(theme.attributeTheme.bold);
     }
     if (style.containsSame(NotusAttribute.italic)) {
-      result = result.merge(theme.italicStyle);
+      result = result.merge(theme.attributeTheme.italic);
     }
     if (style.contains(NotusAttribute.link)) {
-      result = result.merge(theme.linkStyle);
+      result = result.merge(theme.attributeTheme.link);
     }
     return result;
   }

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

@@ -72,7 +72,7 @@ class RenderEditableProxyBox extends RenderBox
     @required TextSelection selection,
     @required Color selectionColor,
     @required Color cursorColor,
-  })  : _node = node,
+  })  : node = node,
         _layerLink = layerLink,
         _renderContext = renderContext,
         _showCursor = showCursor,
@@ -94,11 +94,7 @@ class RenderEditableProxyBox extends RenderBox
 
   bool _isDirty = true;
 
-  ContainerNode get node => _node;
-  ContainerNode _node;
-  set node(ContainerNode value) {
-    _node = value;
-  }
+  ContainerNode node;
 
   LayerLink get layerLink => _layerLink;
   LayerLink _layerLink;
@@ -153,6 +149,13 @@ class RenderEditableProxyBox extends RenderBox
   /// Returns `true` if current selection is collapsed and located
   /// within this paragraph.
   bool get containsCaret {
+    if (!node.mounted) {
+      // It is possible that a document node gets unmounted before widget tree
+      // is updated, in which case this function fails when triggered by
+      // _showCursor notification calling markNeedsCursorPaint.
+      // TODO: react to document node's mounted state.
+      return false;
+    }
     if (!_selection.isCollapsed) return false;
 
     final int start = node.documentOffset;

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

@@ -239,7 +239,7 @@ class _ZefyrEditableTextState extends State<ZefyrEditableText>
   Widget _defaultChildBuilder(BuildContext context, Node node) {
     if (node is LineNode) {
       if (node.hasEmbed) {
-        return RawZefyrLine(node: node);
+        return ZefyrLine(node: node);
       } else if (node.style.contains(NotusAttribute.heading)) {
         return ZefyrHeading(node: node);
       }

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

@@ -47,6 +47,7 @@ class ZefyrField extends StatefulWidget {
 }
 
 class _ZefyrFieldState extends State<ZefyrField> {
+  ZefyrMode get _effectiveMode => widget.mode ?? ZefyrMode.edit;
   @override
   Widget build(BuildContext context) {
     Widget child = ZefyrEditor(
@@ -54,7 +55,7 @@ class _ZefyrFieldState extends State<ZefyrField> {
       controller: widget.controller,
       focusNode: widget.focusNode,
       autofocus: widget.autofocus,
-      mode: widget.mode ?? ZefyrMode.edit,
+      mode: _effectiveMode,
       toolbarDelegate: widget.toolbarDelegate,
       imageDelegate: widget.imageDelegate,
       physics: widget.physics,
@@ -88,7 +89,7 @@ class _ZefyrFieldState extends State<ZefyrField> {
         (widget.decoration ?? const InputDecoration())
             .applyDefaults(Theme.of(context).inputDecorationTheme)
             .copyWith(
-              enabled: widget.mode == ZefyrMode.edit,
+              enabled: _effectiveMode == ZefyrMode.edit,
             );
 
     return effectiveDecoration;

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

@@ -9,6 +9,7 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:meta/meta.dart';
 import 'package:notus/notus.dart';
+import 'package:zefyr/zefyr.dart';
 
 import 'editable_box.dart';
 
@@ -58,9 +59,13 @@ class _ZefyrImageState extends State<ZefyrImage> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = ZefyrTheme.of(context);
     final image = widget.delegate.buildImage(context, imageSource);
     return _EditableImage(
-      child: image,
+      child: Padding(
+        padding: theme.defaultLineTheme.padding,
+        child: image,
+      ),
       node: widget.node,
     );
   }
@@ -88,25 +93,19 @@ class _EditableImage extends SingleChildRenderObjectWidget {
 class RenderEditableImage extends RenderBox
     with RenderObjectWithChildMixin<RenderBox>, RenderProxyBoxMixin<RenderBox>
     implements RenderEditableBox {
-  static const kPaddingBottom = 24.0;
-
   RenderEditableImage({
     RenderImage child,
     @required EmbedNode node,
-  }) : _node = node {
+  }) : node = node {
     this.child = child;
   }
 
   @override
-  EmbedNode get node => _node;
-  EmbedNode _node;
-  set node(EmbedNode value) {
-    _node = value;
-  }
+  EmbedNode node;
 
   // TODO: Customize caret height offset instead of adjusting here by 2px.
   @override
-  double get preferredLineHeight => size.height - kPaddingBottom + 2.0;
+  double get preferredLineHeight => size.height + 2.0;
 
   @override
   SelectionOrder get selectionOrder => SelectionOrder.foreground;
@@ -129,8 +128,7 @@ class RenderEditableImage extends RenderBox
     if (local.isCollapsed) {
       final dx = local.extentOffset == 0 ? _childOffset.dx : size.width;
       return [
-        ui.TextBox.fromLTRBD(
-            dx, 0.0, dx, size.height - kPaddingBottom, TextDirection.ltr),
+        ui.TextBox.fromLTRBD(dx, 0.0, dx, size.height, TextDirection.ltr),
       ];
     }
 
@@ -145,7 +143,7 @@ class RenderEditableImage extends RenderBox
 
   @override
   TextPosition getPositionForOffset(Offset offset) {
-    int position = _node.documentOffset;
+    int position = node.documentOffset;
 
     if (offset.dx > size.width / 2) {
       position++;
@@ -155,7 +153,7 @@ class RenderEditableImage extends RenderBox
 
   @override
   TextRange getWordBoundary(TextPosition position) {
-    final start = _node.documentOffset;
+    final start = node.documentOffset;
     return TextRange(start: start, end: start + 1);
   }
 
@@ -203,7 +201,7 @@ class RenderEditableImage extends RenderBox
 
   Offset get _childOffset {
     final dx = (size.width - _lastChildSize.width) / 2 + kHorizontalPadding;
-    final dy = (size.height - _lastChildSize.height - kPaddingBottom) / 2;
+    final dy = (size.height - _lastChildSize.height) / 2;
     return Offset(dx, dy);
   }
 
@@ -226,7 +224,7 @@ class RenderEditableImage extends RenderBox
       );
       child.layout(childConstraints, parentUsesSize: true);
       _lastChildSize = child.size;
-      size = Size(constraints.maxWidth, _lastChildSize.height + kPaddingBottom);
+      size = Size(constraints.maxWidth, _lastChildSize.height);
     } else {
       performResize();
     }

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

@@ -27,9 +27,9 @@ class ZefyrList extends StatelessWidget {
     final isNumberList =
         node.style.get(NotusAttribute.block) == NotusAttribute.block.numberList;
     EdgeInsets padding = isNumberList
-        ? theme.blockTheme.numberList.padding
-        : theme.blockTheme.bulletList.padding;
-    padding = padding.copyWith(left: theme.indentSize);
+        ? theme.attributeTheme.numberList.padding
+        : theme.attributeTheme.bulletList.padding;
+    padding = padding.copyWith(left: theme.indentWidth);
 
     return Padding(
       padding: padding,
@@ -55,6 +55,9 @@ class ZefyrListItem extends StatelessWidget {
     final BlockNode block = node.parent;
     final style = block.style.get(NotusAttribute.block);
     final theme = ZefyrTheme.of(context);
+    final blockTheme = (style == NotusAttribute.block.bulletList)
+        ? theme.attributeTheme.bulletList
+        : theme.attributeTheme.numberList;
     final bulletText =
         (style == NotusAttribute.block.bulletList) ? '•' : '$index.';
 
@@ -68,8 +71,13 @@ class ZefyrListItem extends StatelessWidget {
       padding = headingTheme.padding;
       content = ZefyrHeading(node: node);
     } else {
-      textStyle = theme.paragraphTheme.textStyle;
-      content = RawZefyrLine(node: node, style: textStyle);
+      textStyle = theme.defaultLineTheme.textStyle;
+      content = ZefyrLine(
+        node: node,
+        style: textStyle,
+        padding: blockTheme.linePadding,
+      );
+      padding = blockTheme.linePadding;
     }
 
     Widget bullet =

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

@@ -18,14 +18,14 @@ class ZefyrParagraph extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = ZefyrTheme.of(context);
-    TextStyle style = theme.paragraphTheme.textStyle;
+    TextStyle style = theme.defaultLineTheme.textStyle;
     if (blockStyle != null) {
       style = style.merge(blockStyle);
     }
-    return RawZefyrLine(
+    return ZefyrLine(
       node: node,
       style: style,
-      padding: theme.paragraphTheme.padding,
+      padding: theme.defaultLineTheme.padding,
     );
   }
 }
@@ -46,22 +46,22 @@ class ZefyrHeading extends StatelessWidget {
     if (blockStyle != null) {
       style = style.merge(blockStyle);
     }
-    return RawZefyrLine(
+    return ZefyrLine(
       node: node,
       style: style,
       padding: theme.padding,
     );
   }
 
-  static StyleTheme themeOf(LineNode node, BuildContext context) {
+  static LineTheme themeOf(LineNode node, BuildContext context) {
     final theme = ZefyrTheme.of(context);
     final style = node.style.get(NotusAttribute.heading);
     if (style == NotusAttribute.heading.level1) {
-      return theme.headingTheme.level1;
+      return theme.attributeTheme.heading1;
     } else if (style == NotusAttribute.heading.level2) {
-      return theme.headingTheme.level2;
+      return theme.attributeTheme.heading2;
     } else if (style == NotusAttribute.heading.level3) {
-      return theme.headingTheme.level3;
+      return theme.attributeTheme.heading3;
     }
     throw UnimplementedError('Unsupported heading style $style');
   }

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

@@ -16,14 +16,14 @@ class ZefyrQuote extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = ZefyrTheme.of(context);
-    final style = theme.blockTheme.quote.textStyle;
+    final style = theme.attributeTheme.quote.textStyle;
     List<Widget> items = [];
     for (var line in node.children) {
-      items.add(_buildLine(line, style, theme.indentSize));
+      items.add(_buildLine(line, style, theme.indentWidth));
     }
 
     return Padding(
-      padding: theme.blockTheme.quote.padding,
+      padding: theme.attributeTheme.quote.padding,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: items,

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

@@ -50,7 +50,7 @@ class RenderZefyrParagraph extends RenderParagraph
     TextOverflow overflow = TextOverflow.clip,
     double textScaleFactor = 1.0,
     int maxLines,
-  })  : _node = node,
+  })  : node = node,
         _prototypePainter = TextPainter(
           text: TextSpan(text: '.', style: text.style),
           textAlign: textAlign,
@@ -67,11 +67,7 @@ class RenderZefyrParagraph extends RenderParagraph
           maxLines: maxLines,
         );
 
-  LineNode get node => _node;
-  LineNode _node;
-  set node(LineNode value) {
-    _node = value;
-  }
+  LineNode node;
 
   @override
   double get preferredLineHeight => _prototypePainter.height;
@@ -95,7 +91,7 @@ class RenderZefyrParagraph extends RenderParagraph
   TextPosition getPositionForOffset(Offset offset) {
     final position = super.getPositionForOffset(offset);
     return TextPosition(
-      offset: _node.documentOffset + position.offset,
+      offset: node.documentOffset + position.offset,
       affinity: position.affinity,
     );
   }
@@ -103,20 +99,20 @@ class RenderZefyrParagraph extends RenderParagraph
   @override
   TextRange getWordBoundary(TextPosition position) {
     final localPosition = TextPosition(
-      offset: position.offset - _node.documentOffset,
+      offset: position.offset - node.documentOffset,
       affinity: position.affinity,
     );
     final localRange = super.getWordBoundary(localPosition);
     return TextRange(
-      start: _node.documentOffset + localRange.start,
-      end: _node.documentOffset + localRange.end,
+      start: node.documentOffset + localRange.start,
+      end: node.documentOffset + localRange.end,
     );
   }
 
   @override
   Offset getOffsetForCaret(TextPosition position, Rect caretPrototype) {
     final localPosition = TextPosition(
-      offset: position.offset - _node.documentOffset,
+      offset: position.offset - node.documentOffset,
       affinity: position.affinity,
     );
     return super.getOffsetForCaret(localPosition, caretPrototype);
@@ -169,7 +165,7 @@ class RenderZefyrParagraph extends RenderParagraph
     }
     if (isExtentShifted) {
       final box = result.last;
-      result.removeLast;
+      result.removeLast();
       result.add(ui.TextBox.fromLTRBD(
           box.left, box.top, box.left, box.bottom, box.direction));
     }

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

@@ -381,7 +381,7 @@ class _SelectionHandleDriverState extends State<SelectionHandleDriver>
       // TODO: For some reason sometimes we get updates when render boxes
       //      are in process of rebuilding so we don't have access to them here.
       //      As a workaround we just return empty container. There is usually
-      //      another rebuild right after which "fixes" the view.
+      //      another rebuild right after this one which "fixes" the view.
       //      Example: when toolbar button is toggled changing style of current
       //      selection.
       return Container();

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

@@ -1,21 +1,11 @@
-// Copyright (c) 2018, the Zefyr project authors.  Please see the AUTHORS file
-// for details. All rights reserved. Use of this source code is governed by a
-// BSD-style license that can be found in the LICENSE file.
-
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-import 'package:meta/meta.dart';
 
 /// Applies a Zefyr editor theme to descendant widgets.
 ///
-/// Describes colors and typographic styles for an editor.
+/// Describes colors and typographic styles.
 ///
 /// Descendant widgets obtain the current theme's [ZefyrThemeData] object using
 /// [ZefyrTheme.of].
-///
-/// See also:
-///
-///   * [ZefyrThemeData], which describes actual configuration of a theme.
 class ZefyrTheme extends InheritedWidget {
   final ZefyrThemeData data;
 
@@ -51,233 +41,454 @@ class ZefyrTheme extends InheritedWidget {
   }
 }
 
-/// Holds colors and typography styles for [ZefyrEditor].
+/// Holds colors and typography values for a Zefyr design theme.
+///
+/// To obtain the current theme, use [ZefyrTheme.of].
+@immutable
 class ZefyrThemeData {
-  final TextStyle boldStyle;
-  final TextStyle italicStyle;
-  final TextStyle linkStyle;
-  final StyleTheme paragraphTheme;
-  final HeadingTheme headingTheme;
-  final BlockTheme blockTheme;
-  final Color selectionColor;
-  final Color cursorColor;
-
-  /// Size of indentation for blocks.
-  final double indentSize;
-  final ZefyrToolbarTheme toolbarTheme;
+  /// Default theme used for document lines in Zefyr editor.
+  ///
+  /// Defines text style and spacing for regular paragraphs of text with
+  /// no style attributes applied.
+  final LineTheme defaultLineTheme;
 
+  /// The text styles, padding and decorations used to render text with
+  /// different style attributes.
+  final AttributeTheme attributeTheme;
+
+  /// The width of indentation used for blocks (lists, quotes, code).
+  final double indentWidth;
+
+  /// The colors used to render editor toolbar.
+  final ToolbarTheme toolbarTheme;
+
+  /// Creates a [ZefyrThemeData] given a set of exact values.
+  const ZefyrThemeData({
+    this.defaultLineTheme,
+    this.attributeTheme,
+    this.indentWidth,
+    this.toolbarTheme,
+  });
+
+  /// The default editor theme.
   factory ZefyrThemeData.fallback(BuildContext context) {
-    final ThemeData themeData = Theme.of(context);
     final defaultStyle = DefaultTextStyle.of(context);
-    final paragraphStyle = defaultStyle.style.copyWith(
-      fontSize: 16.0,
-      height: 1.25,
-      fontWeight: FontWeight.normal,
-      color: Colors.grey.shade800,
+    final defaultLineTheme = LineTheme(
+      textStyle: defaultStyle.style.copyWith(
+        fontSize: 16.0,
+        height: 1.3,
+      ),
+      padding: EdgeInsets.symmetric(vertical: 8.0),
     );
-    final padding = const EdgeInsets.only(bottom: 16.0);
-    final boldStyle = TextStyle(fontWeight: FontWeight.bold);
-    final italicStyle = TextStyle(fontStyle: FontStyle.italic);
-    final linkStyle =
-        TextStyle(color: Colors.blue, decoration: TextDecoration.underline);
-
     return ZefyrThemeData(
-      boldStyle: boldStyle,
-      italicStyle: italicStyle,
-      linkStyle: linkStyle,
-      paragraphTheme: StyleTheme(textStyle: paragraphStyle, padding: padding),
-      headingTheme: HeadingTheme.fallback(),
-      blockTheme: BlockTheme.fallback(themeData),
-      selectionColor: Colors.lightBlueAccent.shade100,
-      cursorColor: Colors.black,
-      indentSize: 16.0,
-      toolbarTheme: ZefyrToolbarTheme.fallback(context),
+      defaultLineTheme: defaultLineTheme,
+      attributeTheme: AttributeTheme.fallback(context, defaultLineTheme),
+      indentWidth: 16.0,
+      toolbarTheme: ToolbarTheme.fallback(context),
     );
   }
 
-  const ZefyrThemeData({
-    this.boldStyle,
-    this.italicStyle,
-    this.linkStyle,
-    this.paragraphTheme,
-    this.headingTheme,
-    this.blockTheme,
-    this.selectionColor,
-    this.cursorColor,
-    this.indentSize,
-    this.toolbarTheme,
-  });
-
+  /// Creates a copy of this theme but with the given fields replaced with
+  /// the new values.
   ZefyrThemeData copyWith({
-    TextStyle textStyle,
-    TextStyle boldStyle,
-    TextStyle italicStyle,
-    TextStyle linkStyle,
-    StyleTheme paragraphTheme,
-    HeadingTheme headingTheme,
-    BlockTheme blockTheme,
-    Color selectionColor,
-    Color cursorColor,
-    double indentSize,
-    ZefyrToolbarTheme toolbarTheme,
+    LineTheme defaultLineTheme,
+    AttributeTheme attributeTheme,
+    double indentWidth,
+    ToolbarTheme toolbarTheme,
   }) {
     return ZefyrThemeData(
-      boldStyle: boldStyle ?? this.boldStyle,
-      italicStyle: italicStyle ?? this.italicStyle,
-      linkStyle: linkStyle ?? this.linkStyle,
-      paragraphTheme: paragraphTheme ?? this.paragraphTheme,
-      headingTheme: headingTheme ?? this.headingTheme,
-      blockTheme: blockTheme ?? this.blockTheme,
-      selectionColor: selectionColor ?? this.selectionColor,
-      cursorColor: cursorColor ?? this.cursorColor,
-      indentSize: indentSize ?? this.indentSize,
+      defaultLineTheme: defaultLineTheme ?? this.defaultLineTheme,
+      attributeTheme: attributeTheme ?? this.attributeTheme,
+      indentWidth: indentWidth ?? this.indentWidth,
       toolbarTheme: toolbarTheme ?? this.toolbarTheme,
     );
   }
 
+  /// Creates a new [ZefyrThemeData] where each property from this object has
+  /// been merged with the matching text style from the `other` object.
   ZefyrThemeData merge(ZefyrThemeData other) {
+    if (other == null) return this;
     return copyWith(
-      boldStyle: other.boldStyle,
-      italicStyle: other.italicStyle,
-      linkStyle: other.linkStyle,
-      paragraphTheme: other.paragraphTheme,
-      headingTheme: other.headingTheme,
-      blockTheme: other.blockTheme,
-      selectionColor: other.selectionColor,
-      cursorColor: other.cursorColor,
-      indentSize: other.indentSize,
-      toolbarTheme: other.toolbarTheme,
+      defaultLineTheme: defaultLineTheme?.merge(other.defaultLineTheme) ??
+          other.defaultLineTheme,
+      attributeTheme:
+          attributeTheme?.merge(other.attributeTheme) ?? other.attributeTheme,
+      indentWidth: other.indentWidth ?? indentWidth,
+      toolbarTheme:
+          toolbarTheme?.merge(other.toolbarTheme) ?? other.toolbarTheme,
     );
   }
+
+  @override
+  bool operator ==(other) {
+    if (other.runtimeType != runtimeType) return false;
+    final ZefyrThemeData otherData = other;
+    return (otherData.defaultLineTheme == defaultLineTheme) &&
+        (otherData.attributeTheme == attributeTheme) &&
+        (otherData.indentWidth == indentWidth) &&
+        (otherData.toolbarTheme == toolbarTheme);
+  }
+
+  @override
+  int get hashCode {
+    return hashList([
+      defaultLineTheme,
+      attributeTheme,
+      indentWidth,
+      toolbarTheme,
+    ]);
+  }
 }
 
-/// Theme for heading-styled lines of text.
-class HeadingTheme {
-  /// Style theme for level 1 headings.
-  final StyleTheme level1;
+/// Holds typography values for a document line in Zefyr editor.
+///
+/// Applicable for regular paragraphs, headings and lines within blocks
+/// (lists, quotes). Blocks may override some of these values using [BlockTheme].
+@immutable
+class LineTheme {
+  /// Default text style for a document line.
+  final TextStyle textStyle;
 
-  /// Style theme for level 2 headings.
-  final StyleTheme level2;
+  /// Additional space around a document line.
+  final EdgeInsets padding;
 
-  /// Style theme for level 3 headings.
-  final StyleTheme level3;
+  /// Creates a [LineTheme] given a set of exact values.
+  LineTheme({this.textStyle, this.padding})
+      : assert(textStyle != null),
+        assert(padding != null);
+
+  /// Creates a copy of this theme but with the given fields replaced with
+  /// the new values.
+  LineTheme copyWith({TextStyle textStyle, EdgeInsets padding}) {
+    return LineTheme(
+      textStyle: textStyle ?? this.textStyle,
+      padding: padding ?? this.padding,
+    );
+  }
 
-  HeadingTheme({
-    @required this.level1,
-    @required this.level2,
-    @required this.level3,
+  /// Creates a new [LineTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  ///
+  /// Text style is merged using [TextStyle.merge] when this and other
+  /// theme have this value set.
+  ///
+  /// If padding property is set in other then it replaces value of this
+  /// theme.
+  LineTheme merge(LineTheme other) {
+    if (other == null) return this;
+    return copyWith(
+      textStyle: textStyle?.merge(other.textStyle) ?? other.textStyle,
+      padding: other.padding ?? padding,
+    );
+  }
+
+  @override
+  bool operator ==(other) {
+    if (other.runtimeType != runtimeType) return false;
+    final LineTheme otherTheme = other;
+    return (otherTheme.textStyle == textStyle) &&
+        (otherTheme.padding == padding);
+  }
+
+  @override
+  int get hashCode => hashValues(textStyle, padding);
+}
+
+/// Holds typography values for a block of lines in Zefyr editor.
+@immutable
+class BlockTheme {
+  /// Default text style for all text within a block, can be null.
+  ///
+  /// Takes precedence over line-level text style set by [LineTheme] if
+  /// [inheritLineTextStyle] is set to `false`. Otherwise this text style
+  /// is merged with the line's style.
+  final TextStyle textStyle;
+
+  /// Whether [textStyle] specified by this block theme should be merged with
+  /// text style of each individual line.
+  ///
+  /// Only applicable if [textStyle] is not null.
+  ///
+  /// If set to `true` then [textStyle] is merged with text style specified
+  /// by [LineTheme] of each line within a block. Otherwise [textStyle]
+  /// takes precedence and replaces style of [LineTheme].
+  final bool inheritLineTextStyle;
+
+  /// Space around the block.
+  final EdgeInsets padding;
+
+  /// Space around each individual line within a block, can be null.
+  ///
+  /// Takes precedence over line padding set in [LineTheme].
+  final EdgeInsets linePadding;
+
+  /// Creates a [BlockTheme] given a set of exact values.
+  const BlockTheme({
+    this.textStyle,
+    this.inheritLineTextStyle = true,
+    this.padding,
+    this.linePadding,
   });
 
-  /// Creates fallback theme for headings.
-  factory HeadingTheme.fallback() {
-    return HeadingTheme(
-      level1: StyleTheme(
-        textStyle: TextStyle(
-          fontSize: 30.0,
-          color: Colors.grey.shade800,
-          height: 1.25,
-          fontWeight: FontWeight.w600,
-        ),
-        padding: EdgeInsets.only(top: 16.0, bottom: 16.0),
-      ),
-      level2: StyleTheme(
-        textStyle: TextStyle(
-          fontSize: 24.0,
-          color: Colors.grey.shade800,
-          height: 1.25,
-          fontWeight: FontWeight.w600,
-        ),
-        padding: EdgeInsets.only(bottom: 8.0, top: 8.0),
-      ),
-      level3: StyleTheme(
-        textStyle: TextStyle(
-          fontSize: 20.0,
-          color: Colors.grey.shade800,
-          height: 1.25,
-          fontWeight: FontWeight.w600,
-        ),
-        padding: EdgeInsets.only(bottom: 8.0, top: 8.0),
-      ),
+  /// Creates a copy of this theme but with the given fields replaced with
+  /// the new values.
+  BlockTheme copyWith({
+    TextStyle textStyle,
+    EdgeInsets padding,
+    bool inheritLineTextStyle,
+    EdgeInsets linePadding,
+  }) {
+    return BlockTheme(
+      textStyle: textStyle ?? this.textStyle,
+      inheritLineTextStyle: inheritLineTextStyle ?? this.inheritLineTextStyle,
+      padding: padding ?? this.padding,
+      linePadding: linePadding ?? this.linePadding,
     );
   }
+
+  /// Creates a new [BlockTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  ///
+  /// Text style is merged using [TextStyle.merge] when this and other
+  /// theme have this field set.
+  ///
+  /// If padding property is set in other then it replaces value of this
+  /// theme. [linePadding] follows the same logic.
+  BlockTheme merge(BlockTheme other) {
+    if (other == null) return this;
+    return copyWith(
+      textStyle: textStyle?.merge(other.textStyle) ?? other.textStyle,
+      inheritLineTextStyle: other.inheritLineTextStyle ?? inheritLineTextStyle,
+      padding: other.padding ?? padding,
+      linePadding: other.linePadding ?? linePadding,
+    );
+  }
+
+  @override
+  bool operator ==(other) {
+    if (other.runtimeType != runtimeType) return false;
+    final BlockTheme otherTheme = other;
+    return (otherTheme.textStyle == textStyle) &&
+        (otherTheme.inheritLineTextStyle == inheritLineTextStyle) &&
+        (otherTheme.padding == padding) &&
+        (otherTheme.linePadding == linePadding);
+  }
+
+  @override
+  int get hashCode =>
+      hashValues(textStyle, inheritLineTextStyle, padding, linePadding);
 }
 
-/// Theme for a block of lines in a document.
-class BlockTheme {
-  /// Style theme for bullet lists.
-  final StyleTheme bulletList;
+/// Holds style information for all format attributes supported by Zefyr editor.
+@immutable
+class AttributeTheme {
+  /// Style used to render "bold" text.
+  final TextStyle bold;
 
-  /// Style theme for number lists.
-  final StyleTheme numberList;
+  /// Style used to render "italic" text.
+  final TextStyle italic;
 
-  /// Style theme for code snippets.
-  final StyleTheme code;
+  /// Style used to render text containing links.
+  final TextStyle link;
 
-  /// Style theme for quotes.
-  final StyleTheme quote;
+  /// Style theme used to render largest headings.
+  final LineTheme heading1;
 
-  BlockTheme({
-    @required this.bulletList,
-    @required this.numberList,
-    @required this.quote,
-    @required this.code,
+  /// Style theme used to render medium headings.
+  final LineTheme heading2;
+
+  /// Style theme used to render smaller headings.
+  final LineTheme heading3;
+
+  /// Style theme used to render bullet lists.
+  final BlockTheme bulletList;
+
+  /// Style theme used to render number lists.
+  final BlockTheme numberList;
+
+  /// Style theme used to render quote blocks.
+  final BlockTheme quote;
+
+  /// Style theme used to render code blocks.
+  final BlockTheme code;
+
+  /// Creates a [AttributeTheme] given a set of exact values.
+  AttributeTheme({
+    this.bold,
+    this.italic,
+    this.link,
+    this.heading1,
+    this.heading2,
+    this.heading3,
+    this.bulletList,
+    this.numberList,
+    this.quote,
+    this.code,
   });
 
-  /// Creates fallback theme for blocks.
-  factory BlockTheme.fallback(ThemeData themeData) {
-    final padding = const EdgeInsets.only(bottom: 8.0);
-    String fontFamily;
-    switch (themeData.platform) {
+  /// The default attribute theme.
+  factory AttributeTheme.fallback(
+      BuildContext context, LineTheme defaultLineTheme) {
+    final theme = Theme.of(context);
+
+    String monospaceFontFamily;
+    switch (theme.platform) {
       case TargetPlatform.iOS:
-        fontFamily = 'Menlo';
+        monospaceFontFamily = 'Menlo';
         break;
       case TargetPlatform.android:
       case TargetPlatform.fuchsia:
-        fontFamily = 'Roboto Mono';
+        monospaceFontFamily = 'Roboto Mono';
         break;
+      default:
+        throw UnimplementedError("Platform ${theme.platform} not implemented.");
     }
 
-    return BlockTheme(
-      bulletList: StyleTheme(padding: padding),
-      numberList: StyleTheme(padding: padding),
-      quote: StyleTheme(
-        textStyle: TextStyle(color: Colors.grey.shade700),
-        padding: padding,
+    return AttributeTheme(
+      bold: TextStyle(fontWeight: FontWeight.bold),
+      italic: TextStyle(fontStyle: FontStyle.italic),
+      link: TextStyle(
+        decoration: TextDecoration.underline,
+        color: theme.accentColor,
+      ),
+      heading1: LineTheme(
+        textStyle: defaultLineTheme.textStyle.copyWith(
+          fontSize: 34.0,
+          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
+          height: 1.15,
+          fontWeight: FontWeight.w300,
+        ),
+        padding: EdgeInsets.only(top: 16.0),
+      ),
+      heading2: LineTheme(
+        textStyle: defaultLineTheme.textStyle.copyWith(
+          fontSize: 24.0,
+          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
+          height: 1.15,
+          fontWeight: FontWeight.normal,
+        ),
+        padding: EdgeInsets.only(top: 8.0),
+      ),
+      heading3: LineTheme(
+        textStyle: defaultLineTheme.textStyle.copyWith(
+          fontSize: 20.0,
+          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
+          height: 1.15,
+          fontWeight: FontWeight.w500,
+        ),
+        padding: EdgeInsets.only(top: 8.0),
+      ),
+      bulletList: BlockTheme(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
+        linePadding: EdgeInsets.symmetric(vertical: 2.0),
+      ),
+      numberList: BlockTheme(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
+        linePadding: EdgeInsets.symmetric(vertical: 2.0),
       ),
-      code: StyleTheme(
+      quote: BlockTheme(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
         textStyle: TextStyle(
-          color: Colors.blueGrey.shade800,
-          fontFamily: fontFamily,
+          color: defaultLineTheme.textStyle.color.withOpacity(0.6),
+        ),
+        inheritLineTextStyle: true,
+      ),
+      code: BlockTheme(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
+        textStyle: TextStyle(
+          fontFamily: monospaceFontFamily,
           fontSize: 14.0,
+          color: defaultLineTheme.textStyle.color.withOpacity(0.8),
           height: 1.25,
         ),
-        padding: padding,
+        inheritLineTextStyle: false,
+        linePadding: EdgeInsets.zero,
       ),
     );
   }
-}
 
-/// Theme for a specific attribute style.
-///
-/// Used in [HeadingTheme] and [BlockTheme], as well as in
-/// [ZefyrThemeData.paragraphTheme].
-class StyleTheme {
-  /// Text style of this theme.
-  final TextStyle textStyle;
+  /// Creates a new [AttributeTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  AttributeTheme copyWith({
+    TextStyle bold,
+    TextStyle italic,
+    TextStyle link,
+    LineTheme heading1,
+    LineTheme heading2,
+    LineTheme heading3,
+    BlockTheme bulletList,
+    BlockTheme numberList,
+    BlockTheme quote,
+    BlockTheme code,
+  }) {
+    return AttributeTheme(
+      bold: bold ?? this.bold,
+      italic: italic ?? this.italic,
+      link: link ?? this.link,
+      heading1: heading1 ?? this.heading1,
+      heading2: heading2 ?? this.heading2,
+      heading3: heading3 ?? this.heading3,
+      bulletList: bulletList ?? this.bulletList,
+      numberList: numberList ?? this.numberList,
+      quote: quote ?? this.quote,
+      code: code ?? this.code,
+    );
+  }
 
-  /// Padding to apply around lines of text.
-  final EdgeInsets padding;
+  /// Creates a new [AttributeTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  AttributeTheme merge(AttributeTheme other) {
+    if (other == null) return this;
+    return copyWith(
+      bold: bold?.merge(other.bold) ?? other.bold,
+      italic: italic?.merge(other.italic) ?? other.italic,
+      link: link?.merge(other.link) ?? other.link,
+      heading1: heading1?.merge(other.heading1) ?? other.heading1,
+      heading2: heading2?.merge(other.heading2) ?? other.heading2,
+      heading3: heading3?.merge(other.heading3) ?? other.heading3,
+      bulletList: bulletList?.merge(other.bulletList) ?? other.bulletList,
+      numberList: numberList?.merge(other.numberList) ?? other.numberList,
+      quote: quote?.merge(other.quote) ?? other.quote,
+      code: code?.merge(other.code) ?? other.code,
+    );
+  }
 
-  /// Creates a new [StyleTheme].
-  StyleTheme({
-    this.textStyle,
-    this.padding,
-  });
+  @override
+  bool operator ==(other) {
+    if (other.runtimeType != runtimeType) return false;
+    final AttributeTheme otherTheme = other;
+    return (otherTheme.bold == bold) &&
+        (otherTheme.italic == italic) &&
+        (otherTheme.link == link) &&
+        (otherTheme.heading1 == heading1) &&
+        (otherTheme.heading2 == heading2) &&
+        (otherTheme.heading3 == heading3) &&
+        (otherTheme.bulletList == bulletList) &&
+        (otherTheme.numberList == numberList) &&
+        (otherTheme.quote == quote) &&
+        (otherTheme.code == code);
+  }
+
+  @override
+  int get hashCode {
+    return hashList([
+      bold,
+      italic,
+      link,
+      heading1,
+      heading2,
+      heading3,
+      bulletList,
+      numberList,
+      quote,
+      code,
+    ]);
+  }
 }
 
-/// Defines styles and colors for [ZefyrToolbar].
-class ZefyrToolbarTheme {
-  /// The background color of toolbar.
+/// Defines styles and colors for Zefyr editor toolbar.
+class ToolbarTheme {
+  /// The background color of the toolbar.
   final Color color;
 
   /// Color of buttons in toggled state.
@@ -289,35 +500,67 @@ class ZefyrToolbarTheme {
   /// Color of button icons in disabled state.
   final Color disabledIconColor;
 
-  /// Creates fallback theme for editor toolbars.
-  factory ZefyrToolbarTheme.fallback(BuildContext context) {
+  /// Creates default theme for editor toolbar.
+  factory ToolbarTheme.fallback(BuildContext context) {
     final theme = Theme.of(context);
-    return ZefyrToolbarTheme._(
-      color: theme.primaryColorLight,
-      toggleColor: theme.primaryColor,
+    return ToolbarTheme._(
+      color: theme.primaryColorBrightness == Brightness.light
+          ? Colors.grey.shade300
+          : Colors.grey.shade800,
+      toggleColor: theme.primaryColorBrightness == Brightness.light
+          ? Colors.grey.shade400
+          : Colors.grey.shade900,
       iconColor: theme.primaryIconTheme.color,
-      disabledIconColor: theme.primaryColor,
+      disabledIconColor: theme.disabledColor,
     );
   }
 
-  ZefyrToolbarTheme._({
+  ToolbarTheme._({
     @required this.color,
     @required this.toggleColor,
     @required this.iconColor,
     @required this.disabledIconColor,
   });
 
-  ZefyrToolbarTheme copyWith({
+  /// Creates a new [ToolbarTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  ToolbarTheme copyWith({
     Color color,
     Color toggleColor,
     Color iconColor,
     Color disabledIconColor,
   }) {
-    return ZefyrToolbarTheme._(
+    return ToolbarTheme._(
       color: color ?? this.color,
       toggleColor: toggleColor ?? this.toggleColor,
       iconColor: iconColor ?? this.iconColor,
       disabledIconColor: disabledIconColor ?? this.disabledIconColor,
     );
   }
+
+  /// Creates a new [ToolbarTheme] where each property from this object has
+  /// been merged with the matching property from the `other` object.
+  ToolbarTheme merge(ToolbarTheme other) {
+    if (other == null) return this;
+    return copyWith(
+      color: other.color ?? color,
+      toggleColor: other.toggleColor ?? toggleColor,
+      iconColor: other.iconColor ?? iconColor,
+      disabledIconColor: other.disabledIconColor ?? disabledIconColor,
+    );
+  }
+
+  @override
+  bool operator ==(other) {
+    if (other.runtimeType != runtimeType) return false;
+    final ToolbarTheme otherTheme = other;
+    return (otherTheme.color == color) &&
+        (otherTheme.toggleColor == toggleColor) &&
+        (otherTheme.iconColor == iconColor) &&
+        (otherTheme.disabledIconColor == disabledIconColor);
+  }
+
+  @override
+  int get hashCode =>
+      hashValues(color, toggleColor, iconColor, disabledIconColor);
 }

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

@@ -86,7 +86,7 @@ class ZefyrViewState extends State<ZefyrView> {
   Widget _defaultChildBuilder(BuildContext context, Node node) {
     if (node is LineNode) {
       if (node.hasEmbed) {
-        return RawZefyrLine(node: node);
+        return ZefyrLine(node: node);
       } else if (node.style.contains(NotusAttribute.heading)) {
         return ZefyrHeading(node: node);
       }

packages/zefyr/pubspec.yaml

@@ -1,6 +1,6 @@
 name: zefyr
 description: Clean, minimalistic and collaboration-ready rich text editor for Flutter.
-version: 0.9.1
+version: 0.10.0
 author: Anatoly Pulyaevskiy <anatoly.pulyaevskiy@gmail.com>
 homepage: https://github.com/memspace/zefyr
 

packages/zefyr/test/widgets/editor_test.dart

@@ -11,7 +11,7 @@ import '../testing.dart';
 
 void main() {
   group('$ZefyrEditor', () {
-    testWidgets('allows merging theme data', (tester) async {
+    testWidgets('allows merging attribute theme data', (tester) async {
       var delta = Delta()
         ..insert(
           'Website',
@@ -19,7 +19,8 @@ void main() {
         )
         ..insert('\n');
       var doc = NotusDocument.fromDelta(delta);
-      var theme = ZefyrThemeData(linkStyle: TextStyle(color: Colors.red));
+      var attributeTheme = AttributeTheme(link: TextStyle(color: Colors.red));
+      var theme = ZefyrThemeData(attributeTheme: attributeTheme);
       var editor = EditorSandBox(tester: tester, document: doc, theme: theme);
       await editor.pumpAndTap();
       // TODO: figure out why this extra pump is needed here