add color attribute

packages/notus/lib/src/document/attributes.dart

@@ -75,6 +75,8 @@ class NotusAttribute<T> implements NotusAttributeBuilder<T> {
   static final Map<String, NotusAttributeBuilder> _registry = {
     NotusAttribute.bold.key: NotusAttribute.bold,
     NotusAttribute.line.key: NotusAttribute.line,
+    NotusAttribute.color.key: NotusAttribute.color,
+    NotusAttribute.highlight.key: NotusAttribute.highlight,
     NotusAttribute.italic.key: NotusAttribute.italic,
     NotusAttribute.link.key: NotusAttribute.link,
     NotusAttribute.heading.key: NotusAttribute.heading,
@@ -97,11 +99,11 @@ class NotusAttribute<T> implements NotusAttributeBuilder<T> {
   // Line attributes
   static const line = LineAttributeBuilder._();
 
-  /// Alias for [NotusAttribute.line.underline].
-  static NotusAttribute<String> get underline => line.underline;
+  // SearchHighLight attributes
+  static const highlight = _HighlightAttribute();
 
-  /// Alias for [NotusAttribute.line.deleteline].
-  static NotusAttribute<String> get deleteline => line.deleteline;
+  // Color attributes
+  static const color = ColorAttributeBuilder._();
 
   /// Heading style attribute.
   // ignore: const_eval_throws_exception
@@ -375,6 +377,28 @@ class LineAttributeBuilder extends NotusAttributeBuilder<String> {
   NotusAttribute<String> get deleteline => NotusAttribute<String>._(key, scope, 'deleteline');
 }
 
+/// Builder for highlight attribute values.
+///
+/// There is no need to use this class directly, consider using
+/// [NotusAttribute.highlight] instead.
+class _HighlightAttribute extends NotusAttribute<bool> {
+  const _HighlightAttribute() : super._('highlight', NotusAttributeScope.inline, true);
+}
+
+/// Builder for color attribute values.
+///
+/// There is no need to use this class directly, consider using
+/// [NotusAttribute.color] instead.
+class ColorAttributeBuilder extends NotusAttributeBuilder<String> {
+  static const _kColor = 'color';
+  const ColorAttributeBuilder._()
+      : super._(_kColor, NotusAttributeScope.inline);
+
+  /// Creates a Highlight attribute with specified Highlight [value].
+  NotusAttribute<String> fromString(String value) =>
+      NotusAttribute<String>._(key, scope, value);
+}
+
 /// Builder for heading attribute styles.
 ///
 /// There is no need to use this class directly, consider using
@@ -438,7 +462,7 @@ class EmbedAttributeBuilder
 
   NotusAttribute<Map<String, dynamic>> image(String source) =>
       EmbedAttribute.image(source);
-
+  
   @override
   NotusAttribute<Map<String, dynamic>> get unset => EmbedAttribute._(null);
 

packages/zefyr/example/android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.1.2'
+        classpath 'com.android.tools.build:gradle:3.5.0'
     }
 }
 

packages/zefyr/example/android/gradle.properties

@@ -1,2 +1,4 @@
 org.gradle.jvmargs=-Xmx1536M
 android.enableR8=true
+android.enableJetifier=true
+android.useAndroidX=true

packages/zefyr/example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip

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

@@ -30,17 +30,13 @@ class FullPageEditorScreen extends StatefulWidget {
   _FullPageEditorScreenState createState() => _FullPageEditorScreenState();
 }
 
-final doc =
-    r'[{"insert":"Zefyr", "attributes":{"line": "underline"}},{"insert":"\n"}]';
-    
-    
-    // ,{"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() {
+  final doc =
+    r'[{"insert":"Zefyr", "attributes": {"color": "#595959", "highlight": true}},{"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"}]';
   return Delta.fromJson(json.decode(doc) as List);
 }
 
@@ -70,6 +66,8 @@ class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
 
   @override
   Widget build(BuildContext context) {
+    Runes input = new Runes(
+        '\u2665  \u{1f605}  \u{1f60e}  \u{1f47b}  \u{1f596}  \u{1f44d} 哇哈哈哈哈！！！');
     final done = _editing
         ? IconButton(onPressed: _stopEditing, icon: Icon(Icons.save))
         : IconButton(onPressed: _startEditing, icon: Icon(Icons.edit));
@@ -85,25 +83,45 @@ class _FullPageEditorScreenState extends State<FullPageEditorScreen> {
           )
         ],
       ),
-      body: ZefyrScaffold(
-        child: ZefyrTheme(
-          data: ZefyrThemeData(
-            // attributeTheme: AttributeTheme(
-            //   link: TextStyle(
-            //     color: Colors.red,
-            //   ),
-            // ),
+      body: Column(
+        children: <Widget>[
+          Container(
+            child: RichText(
+                text: TextSpan(children: [
+              TextSpan(text: 'Flutter is', style: TextStyle(color: Colors.black)),
+              WidgetSpan(
+                child: SizedBox(
+                  height: 20,
+                  width: 20,
+                    child: Image.network(
+                        'http://links-emoticons.oss-cn-hangzhou.aliyuncs.com/v3/e100@2x.gif'),),
+              ),
+              TextSpan(text: '123123', style: TextStyle(color: Colors.black)),
+            ])),
           ),
-          child: ZefyrEditor(
-            autofocus: false,
-            controller: _controller,
-            focusNode: _focusNode,
-            mode: ZefyrMode.edit,
-            imageDelegate: CustomImageDelegate(),
-            linkDelegate: CustomLinkDelegate(),
-            keyboardAppearance: _darkTheme ? Brightness.dark : Brightness.light,
+          Expanded(
+            child: ZefyrScaffold(
+              child: ZefyrTheme(
+                data: ZefyrThemeData(
+                  // attributeTheme: AttributeTheme(
+                  //   link: TextStyle(
+                  //     color: Colors.red,
+                  //   ),
+                  // ),
+                ),
+                child: ZefyrEditor(
+                  autofocus: false,
+                  controller: _controller,
+                  focusNode: _focusNode,
+                  mode: ZefyrMode.edit,
+                  imageDelegate: CustomImageDelegate(),
+                  linkDelegate: CustomLinkDelegate(),
+                  keyboardAppearance: _darkTheme ? Brightness.dark : Brightness.light,
+                ),
+              ),
+            ),
           ),
-        ),
+        ],
       ),
     );
     if (_darkTheme) {

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

@@ -44,6 +44,7 @@ class CustomImageDelegate implements ZefyrImageDelegate<ImageSource> {
   @override
   Future<String> picked(file, isFullImage) async {
     print(isFullImage);
+    // await Future.delayed(Duration(seconds: 2));
     //File file = await asset.file;
     return file.uri.toString();
     // Im.Image image = Im.decodeImage(file.readAsBytesSync());

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

@@ -160,10 +160,22 @@ class HeadingTheme {
   /// Style theme for level 3 headings.
   final StyleTheme level3;
 
+  /// Style theme for level 4 headings.
+  final StyleTheme level4;
+
+  /// Style theme for level 5 headings.
+  final StyleTheme level5;
+
+  /// Style theme for level 6 headings.
+  final StyleTheme level6;
+
   HeadingTheme({
     @required this.level1,
     @required this.level2,
     @required this.level3,
+    @required this.level4,
+    @required this.level5,
+    @required this.level6,
   });
 
   /// Creates fallback theme for headings.
@@ -172,30 +184,56 @@ class HeadingTheme {
     return HeadingTheme(
       level1: StyleTheme(
         textStyle: defaultStyle.style.copyWith(
-          fontSize: 34.0,
-          color: defaultStyle.style.color.withOpacity(0.70),
-          height: 1.15,
-          fontWeight: FontWeight.w300,
+          fontSize: 24.0,
+          color: defaultStyle.style.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(top: 16.0, bottom: 0.0),
+        padding: EdgeInsets.only(top: 16.0),
       ),
       level2: StyleTheme(
         textStyle: TextStyle(
-          fontSize: 24.0,
-          color: defaultStyle.style.color.withOpacity(0.70),
-          height: 1.15,
-          fontWeight: FontWeight.normal,
+          fontSize: 20.0,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(bottom: 0.0, top: 8.0),
+        padding: EdgeInsets.only(top: 8.0),
       ),
       level3: StyleTheme(
         textStyle: TextStyle(
-          fontSize: 20.0,
-          color: defaultStyle.style.color.withOpacity(0.70),
-          height: 1.25,
+          fontSize: 18.0,
+          color: defaultStyle.style.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+        ),
+        padding: EdgeInsets.only(top: 8.0),
+      ),
+      level4: StyleTheme(
+        textStyle: TextStyle(
+          fontSize: 16.0,
+          color: defaultStyle.style.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+        ),
+        padding: EdgeInsets.only(top: 4.0),
+      ),
+      level5: StyleTheme(
+        textStyle: TextStyle(
+          fontSize: 14.0,
+          color: defaultStyle.style.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+        ),
+        padding: EdgeInsets.only(top: 4.0),
+      ),
+      level6: StyleTheme(
+        textStyle: TextStyle(
+          fontSize: 12.0,
+          color: defaultStyle.style.color,
+          height: 1.5,
           fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(bottom: 0.0, top: 8.0),
+        padding: EdgeInsets.only(top: 4.0),
       ),
     );
   }

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

@@ -118,16 +118,16 @@ class ZefyrButton extends StatelessWidget {
 
   Color _getColor(ZefyrScope editor, ToolbarTheme theme) {
     if (kToolbarButtonIcons.contains(action)) {
-      return editor.toolbarAction == action ? theme.toggleColor : theme.surfaceColor;
+      return editor.toolbarAction == action
+          ? theme.toggleColor
+          : theme.surfaceColor;
     } else {
       if (isAttributeAction) {
         final attribute = kZefyrToolbarAttributeActions[action];
         final isToggled = (attribute is NotusAttribute)
             ? editor.selectionStyle.containsSame(attribute)
             : editor.selectionStyle.contains(attribute);
-        return isToggled
-            ? theme.toggleColor
-            : theme.iconColor;
+        return isToggled ? theme.toggleColor : theme.iconColor;
       }
       return null;
     }
@@ -262,7 +262,7 @@ class RawZefyrButton extends StatelessWidget {
 
     // Widget button = Row(
     //   children: <Widget>[
-        
+
     //     // if (action == ZefyrToolbarAction.showKeyboard || action == ZefyrToolbarAction.hideKeyboard || action == ZefyrToolbarAction.link)
     //     // Container(
     //     //   width: 1,
@@ -328,9 +328,18 @@ class _HeadingButtonState extends State<HeadingButton> {
     );
   }
 
+  bool hasColor(NotusStyle style, String color) {
+    if (style.contains(NotusAttribute.color)) {
+      var _style = style.get(NotusAttribute.color);
+      return _style.value.toLowerCase() == color.toLowerCase();
+    }
+    return false;
+  }
+
   Widget buildOverlay(BuildContext context) {
     final theme = ZefyrTheme.of(context).toolbarTheme;
     final toolbar = ZefyrToolbar.of(context);
+
     final headingButtons = <Widget>[
       toolbar.buildButton(context, ZefyrToolbarAction.headingLevel1),
       toolbar.buildButton(context, ZefyrToolbarAction.headingLevel2),
@@ -354,112 +363,110 @@ class _HeadingButtonState extends State<HeadingButton> {
       toolbar.buildButton(context, ZefyrToolbarAction.horizontalRule),
       toolbar.buildButton(context, ZefyrToolbarAction.code),
     ];
+    final textColors = [
+      ZefyrTheme.of(context).defaultLineTheme.textStyle.color, ...List.of(kTextColors),
+    ];
+
     return Material(
       color: theme.color,
       child: Container(
         decoration: BoxDecoration(
           border: Border(top: BorderSide(color: theme.dividerColor, width: 1)),
         ),
-        child: Column(
-          children: [
-            Container(
-              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
-              child: Column(
-                children: [
-                  _buildButtonsView(headingButtons),
-                  _buildButtonsView(textButtons),
-                  _buildButtonsView(listButtons),
-                  _buildButtonsView(otherButtons),
-                ],
-              ),
-            ),
-            Container(
-              decoration: BoxDecoration(
-                border: Border(
-                    top: BorderSide(color: theme.dividerColor, width: 1)),
+        child: SingleChildScrollView(
+          physics: ClampingScrollPhysics(),
+          child: Column(
+            children: [
+              Container(
+                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
+                child: Column(
+                  children: [
+                    _buildButtonsView(headingButtons),
+                    _buildButtonsView(textButtons),
+                    _buildButtonsView(listButtons),
+                    _buildButtonsView(otherButtons),
+                  ],
+                ),
               ),
-              padding: EdgeInsets.symmetric(vertical: 16),
-              margin: EdgeInsets.symmetric(horizontal: 16),
-              child: Row(
-                children: <Widget>[
-                  Padding(
-                    padding: EdgeInsets.only(right: 12),
-                    child: Text(
-                      '文字色',
-                      style: Theme.of(context).textTheme.caption.copyWith(
-                            color: Theme.of(context).colorScheme.onSurface,
-                            fontSize: 14,
-                            fontWeight: FontWeight.w500,
-                          ),
-                    ),
-                  ),
-                  Expanded(
-                    child: Container(
-                      height: 20,
-                      child: ListView(
-                        scrollDirection: Axis.horizontal,
-                        children: [
-                          Container(
-                            padding: EdgeInsets.all(1),
-                            decoration: ShapeDecoration(
-                              shape: CircleBorder(
-                                side: BorderSide(
-                                    width: 1, color: theme.toggleColor),
-                              ),
-                            ),
-                            margin: EdgeInsets.symmetric(horizontal: 8),
-                            child: Container(
-                              width: 16,
-                              height: 16,
-                              decoration: ShapeDecoration(
-                                color: Color(0xFFE02020),
-                                shape: CircleBorder(),
-                              ),
-                            ),
-                          ),
-                          Container(
-                            padding: EdgeInsets.all(1),
-                            decoration: ShapeDecoration(
-                              shape: CircleBorder(
-                                side: BorderSide.none,
-                              ),
-                            ),
-                            margin: EdgeInsets.symmetric(horizontal: 8),
-                            child: Container(
-                              width: 16,
-                              height: 16,
-                              decoration: ShapeDecoration(
-                                color: Color(0xFFFA6400),
-                                shape: CircleBorder(),
-                              ),
-                            ),
-                          ),
-                          Container(
-                            padding: EdgeInsets.all(1),
-                            decoration: ShapeDecoration(
-                              shape: CircleBorder(
-                                side: BorderSide.none,
-                              ),
+              Container(
+                decoration: BoxDecoration(
+                  border: Border(
+                      top: BorderSide(color: theme.dividerColor, width: 1)),
+                ),
+                padding: EdgeInsets.symmetric(vertical: 16),
+                margin: EdgeInsets.symmetric(horizontal: 16),
+                child: Row(
+                  children: <Widget>[
+                    Padding(
+                      padding: EdgeInsets.only(right: 12),
+                      child: Text(
+                        '文字色',
+                        style: Theme.of(context).textTheme.caption.copyWith(
+                              color: Theme.of(context).colorScheme.onSurface,
+                              fontSize: 14,
+                              fontWeight: FontWeight.w500,
                             ),
-                            margin: EdgeInsets.symmetric(horizontal: 8),
-                            child: Container(
-                              width: 16,
-                              height: 16,
-                              decoration: ShapeDecoration(
-                                color: Color(0xFF0091FF),
-                                shape: CircleBorder(),
+                      ),
+                    ),
+                    Expanded(
+                      child: Container(
+                        height: 20,
+                        child: ListView(
+                          scrollDirection: Axis.horizontal,
+                          children: textColors.map((color) {
+                            var hex = color.value.toRadixString(16).substring(2, 8);
+                            var has = false;
+                            if (!toolbar.editor.selectionStyle.contains(NotusAttribute.color)) {
+                              if (color == ZefyrTheme.of(context).defaultLineTheme.textStyle.color) {
+                                has = true;
+                              }
+                            } else {
+                              has = hasColor(toolbar.editor.selectionStyle, '#$hex');
+                            }
+                            // var key = kTextColors[index].value;
+                            return GestureDetector(
+                              behavior: HitTestBehavior.translucent,
+                              onTap: () {
+                                toolbar.editor.formatSelection(NotusAttribute.color.fromString('#$hex'));
+                              },
+                              child: Container(
+                                padding: EdgeInsets.all(1),
+                                width: 20,
+                                height: 20,
+                                decoration: ShapeDecoration(
+                                  shape: CircleBorder(
+                                    side: has ? BorderSide(
+                                      width: 1,
+                                      color: theme.toggleColor,
+                                    ) : BorderSide.none,
+                                  ),
+                                ),
+                                margin: EdgeInsets.symmetric(horizontal: 8),
+                                child: Container(
+                                  // width: 16,
+                                  // height: 16,
+                                  decoration: ShapeDecoration(
+                                    color: color,
+                                    shape: CircleBorder(
+                                      side: color == Color(0xFFFFFFFF) && !has ? BorderSide(
+                                        width: 1,
+                                        color: theme.dividerColor,
+                                      ) : BorderSide.none,
+                                    ),
+                                  ),
+                                ),
                               ),
-                            ),
-                          ),
-                        ],
-                        physics: ClampingScrollPhysics(),
+                            );
+                          }).toList(),
+                          physics: ClampingScrollPhysics(),
+                        ),
                       ),
                     ),
-                  ),
-                ],
+                  ],
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
     );
@@ -470,6 +477,45 @@ class _HeadingButtonState extends State<HeadingButton> {
   }
 }
 
+// class TextColorButton extends StatelessWidget {
+
+//   const TextColorButton({Key key, String color, ZefyrThemeData theme}) : super(key: key);
+
+//   @override
+//   Widget build(BuildContext context) {
+//     return GestureDetector(
+//       behavior: HitTestBehavior.translucent,
+//       onTap: () {
+//         // onTap(color);
+//         // toolbar.editor.formatSelection(NotusAttribute.color.fromString('#000000'));
+//       },
+//       child: Container(
+//         padding: EdgeInsets.all(1),
+//         decoration: ShapeDecoration(
+//           shape: CircleBorder(
+//             side: BorderSide(
+//               width: 1,
+//               color: theme,
+//             ),
+//           ),
+//         ),
+//         margin: EdgeInsets.symmetric(horizontal: 8),
+//         child: Container(
+//           width: 16,
+//           height: 16,
+//           decoration: ShapeDecoration(
+//             color: ZefyrTheme.of(context)
+//                 .defaultLineTheme
+//                 .textStyle
+//                 .color,
+//             shape: CircleBorder(),
+//           ),
+//         ),
+//       ),
+//     );
+//   }
+// }
+
 /// Controls image attribute.
 ///
 /// When pressed, this button displays overlay toolbar with three
@@ -576,7 +622,10 @@ class _ImageButtonState extends State<ImageButton> {
                                 shape: RoundedRectangleBorder(),
                                 color: Color(0xFFF6F6F6),
                                 onPressed: () {
-                                  toolbar.editor.keepOverlay = true;
+                                  final editor =
+                                      ZefyrToolbar.of(context).editor;
+                                  // var _selection = toolbar.editor.selection;
+                                  editor.closeKeyboard(true);
                                   PhotoPicker.pickAsset(
                                     context: context,
                                     rowCount: 4,
@@ -588,9 +637,6 @@ class _ImageButtonState extends State<ImageButton> {
                                     photoPathList: null,
                                   ).then((PickedEntity entity) async {
                                     if (entity.asset.isNotEmpty) {
-                                      toolbar.closeOverlay();
-                                      final editor =
-                                          ZefyrToolbar.of(context).editor;
                                       for (var asset in entity.asset) {
                                         var file = await asset.originFile;
                                         final image = await editor.imageDelegate
@@ -599,6 +645,7 @@ class _ImageButtonState extends State<ImageButton> {
                                           editor.formatSelection(NotusAttribute
                                               .embed
                                               .image(image));
+                                          editor.closeKeyboard();
                                         }
                                       }
                                     }
@@ -642,18 +689,19 @@ class _ImageButtonState extends State<ImageButton> {
                           initialData: PickedEntity(),
                           builder: (context, snapshot) {
                             return PhotoPicker.buildGallery(
-                                context: context,
-                                padding: 4,
-                                thumbSize: 300,
-                                itemRadio: 0.5,
-                                provider: I18nProvider.chinese,
-                                sortDelegate: SortDelegate.common,
-                                pickType: PickType.onlyImage,
-                                photoPathList: null,
-                                isFullImage: snapshot.data.isFullImage,
-                                onSelected: (PickedEntity entity) {
-                                  pickedChangeController.add(entity);
-                                });
+                              context: context,
+                              padding: 4,
+                              thumbSize: 300,
+                              itemRadio: 0.5,
+                              provider: I18nProvider.chinese,
+                              sortDelegate: SortDelegate.common,
+                              pickType: PickType.onlyImage,
+                              photoPathList: null,
+                              isFullImage: snapshot.data.isFullImage,
+                              onSelected: (PickedEntity entity) {
+                                pickedChangeController.add(entity);
+                              },
+                            );
                           },
                         ),
                       ),
@@ -724,15 +772,19 @@ class _ImageButtonState extends State<ImageButton> {
                         onPressed: snapshot.data.asset.isNotEmpty
                             ? () async {
                                 pickedChangeController.add(PickedEntity());
-                                toolbar.closeOverlay();
+                                // toolbar.closeOverlay();
+                                toolbar.editor.closeKeyboard(true);
                                 for (var asset in snapshot.data.asset) {
                                   var file = await asset.originFile;
                                   final image = await toolbar
                                       .editor.imageDelegate
                                       .picked(file, snapshot.data.isFullImage);
                                   if (image != null) {
+                                    // toolbar.editor.toolbarAction = null;
+                                    // toolbar.editor.keepOverlay = true;
                                     toolbar.editor.formatSelection(
                                         NotusAttribute.embed.image(image));
+                                    toolbar.editor.closeKeyboard();
                                   }
                                 }
                               }
@@ -826,27 +878,35 @@ class _LinkButtonState extends State<LinkButton> {
   OverlayEntry _overlayEntry;
 
   Future<void> showOverlay() async {
-    final toolbar = ZefyrToolbar.of(context);
-    var _selection = toolbar.editor.selection;
+    final editor = ZefyrToolbar.of(context).editor;
+    editor.closeKeyboard(true);
+    var _selection = editor.selection;
     var value = ZefyrLinkEntity();
-    if (hasLink(toolbar.editor.selectionStyle)) {
-      value = value.copyWith(url: toolbar.editor.selectionStyle.value(NotusAttribute.link));
+    if (hasLink(editor.selectionStyle)) {
+      value =
+          value.copyWith(url: editor.selectionStyle.value(NotusAttribute.link));
     }
     // 已选中
-    if(!toolbar.editor.selection.isCollapsed) {
-      var text = toolbar.editor.controller.document.toPlainText().substring(toolbar.editor.selection.start, toolbar.editor.selection.end);
+    if (!editor.selection.isCollapsed) {
+      var text = editor.controller.document
+          .toPlainText()
+          .substring(editor.selection.start, editor.selection.end);
       value = value.copyWith(text: text);
-    };
-    var result = await toolbar.editor.linkDelegate.fillLink(context, value);
-    
+    }
+    ;
+    var result = await editor.linkDelegate.fillLink(context, value);
+
     if (result != null) {
-      toolbar.editor.updateSelection(_selection, source: ChangeSource.local);
-      _selection = toolbar.editor.selection;
-      toolbar.editor.controller.replaceText(_selection.start, _selection.end - _selection.start, result.text, selection: _selection.copyWith(
-        baseOffset: _selection.start,
-        extentOffset: _selection.start + result.text.length,
-      ));
-      toolbar.editor.formatSelection(NotusAttribute.link.fromString(result.url));
+      // toolbar.editor.updateSelection(_selection, source: ChangeSource.local);
+      // _selection = toolbar.editor.selection;
+      editor.controller.replaceText(
+          _selection.start, _selection.end - _selection.start, result.text,
+          selection: _selection.copyWith(
+            baseOffset: _selection.start,
+            extentOffset: _selection.start + result.text.length,
+          ));
+      editor.formatSelection(NotusAttribute.link.fromString(result.url));
+      editor.closeKeyboard();
     }
   }
 

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

@@ -154,6 +154,23 @@ class _ZefyrLineState extends State<ZefyrLine> {
     if (style.contains(NotusAttribute.link)) {
       result = result.merge(theme.attributeTheme.link);
     }
+    if (style.contains(NotusAttribute.highlight)) {
+      result = result.merge(TextStyle(
+        backgroundColor: Color(0xFFFFAF64).withOpacity(0.5),
+      ));
+    }
+    if (style.contains(NotusAttribute.color)) {
+      final hexStringToColor = (String hex) {
+        hex = hex.replaceFirst('#', '');
+        hex = hex.length == 6 ? 'ff' + hex : hex;
+        var val = int.parse(hex, radix: 16);
+        return Color(val);
+      };
+      final color = hexStringToColor(style.value<String>(NotusAttribute.color));
+      result = result.merge(TextStyle(
+        color: color,
+      ));
+    }
     return result;
   }
 

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

@@ -168,7 +168,10 @@ class ZefyrController extends ChangeNotifier {
 
     if (length == 0 &&
         (attribute.key == NotusAttribute.bold.key ||
-            attribute.key == NotusAttribute.italic.key)) {
+            attribute.key == NotusAttribute.italic.key || 
+            attribute.key == NotusAttribute.highlight.key || 
+            attribute.key == NotusAttribute.color.key || 
+            attribute.key == NotusAttribute.line.key)) {
       // Add the attribute to our toggledStyle. It will be used later upon insertion.
       _toggledStyles = toggledStyles.put(attribute);
     }

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

@@ -74,13 +74,13 @@ class ZefyrFont {
   static const IconData note_more_favorite =
       IconData(0xe6fe, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_more_move = IconData(0xe6ff, fontFamily: _family, fontPackage: _fontPackage);
-  static const IconData note_editor_text_h =
+  static const IconData note_editor_text_h1 =
       IconData(0xe6e4, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_code =
       IconData(0xe6e5, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_bold =
       IconData(0xe6e6, fontFamily: _family, fontPackage: _fontPackage);
-  static const IconData note_editor_text_h1 =
+  static const IconData note_editor_text_h2 =
       IconData(0xe6e7, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_center =
       IconData(0xe6e8, fontFamily: _family, fontPackage: _fontPackage);
@@ -88,16 +88,16 @@ class ZefyrFont {
       IconData(0xe6e9, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_left =
       IconData(0xe6ea, fontFamily: _family, fontPackage: _fontPackage);
-  static const IconData note_editor_text_h2 =
-      IconData(0xe6eb, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_h3 =
+      IconData(0xe6eb, fontFamily: _family, fontPackage: _fontPackage);
+  static const IconData note_editor_text_h4 =
       IconData(0xe6ec, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_right =
       IconData(0xe6ed, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_hr =
       IconData(0xe6ee, fontFamily: _family, fontPackage: _fontPackage);
-  static const IconData note_editor_text_h4 =
-      IconData(0xe6ef, fontFamily: _family, fontPackage: _fontPackage);
+  static const IconData note_editor_text_h5 =
+      IconData(0xe6f4, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_underline =
       IconData(0xe6f0, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_ul =
@@ -106,8 +106,8 @@ class ZefyrFont {
       IconData(0xe6f2, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_in =
       IconData(0xe6f3, fontFamily: _family, fontPackage: _fontPackage);
-  static const IconData note_editor_text_h5 =
-      IconData(0xe6f4, fontFamily: _family, fontPackage: _fontPackage);
+  static const IconData note_editor_text_h6 =
+      IconData(0xe6ef, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_para =
       IconData(0xe6f5, fontFamily: _family, fontPackage: _fontPackage);
   static const IconData note_editor_text_ol =

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

@@ -257,9 +257,12 @@ class ZefyrScope extends ChangeNotifier {
     _focusScope.requestFocus(_focusNode);
   }
 
-  void closeKeyboard() {
+  void closeKeyboard([bool force = false]) {
     assert(isEditable);
     assert(!_disposed);
+    if (force) {
+      _keepOverlay = false;
+    }
     _focusNode.unfocus();
     //tapHandle = null;
   }

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

@@ -77,6 +77,7 @@ class ZefyrThemeData {
       textStyle: defaultStyle.style.copyWith(
         fontSize: 16.0,
         height: 1.3,
+        color: Color(0xFF595959),
       ),
       padding: EdgeInsets.symmetric(vertical: 8.0),
     );
@@ -366,8 +367,8 @@ class AttributeTheme {
 
     return AttributeTheme(
       bold: TextStyle(fontWeight: FontWeight.bold),
-      underline: defaultLineTheme.textStyle.copyWith(decoration: TextDecoration.underline),
-      deleteline: defaultLineTheme.textStyle.copyWith(decoration: TextDecoration.lineThrough),
+      underline: TextStyle(decoration: TextDecoration.underline),
+      deleteline: TextStyle(decoration: TextDecoration.lineThrough),
       italic: TextStyle(fontStyle: FontStyle.italic),
       link: TextStyle(
         decoration: TextDecoration.underline,
@@ -375,54 +376,54 @@ class AttributeTheme {
       ),
       heading1: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 38.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
-          fontWeight: FontWeight.w300,
+          fontSize: 24.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
         ),
         padding: EdgeInsets.only(top: 16.0),
       ),
       heading2: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 34.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
-          fontWeight: FontWeight.normal,
+          fontSize: 20.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(top: 16.0),
+        padding: EdgeInsets.only(top: 8.0),
       ),
       heading3: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 30.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
+          fontSize: 18.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
           fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(top: 16.0),
+        padding: EdgeInsets.only(top: 8.0),
       ),
       heading4: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 26.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
+          fontSize: 16.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
           fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(top: 12.0),
+        padding: EdgeInsets.only(top: 4.0),
       ),
       heading5: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 22.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
+          fontSize: 14.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
           fontWeight: FontWeight.w500,
         ),
-        padding: EdgeInsets.only(top: 8.0),
+        padding: EdgeInsets.only(top: 4.0),
       ),
       heading6: LineTheme(
         textStyle: defaultLineTheme.textStyle.copyWith(
-          fontSize: 18.0,
-          color: defaultLineTheme.textStyle.color.withOpacity(0.7),
-          height: 1.15,
+          fontSize: 12.0,
+          color: defaultLineTheme.textStyle.color,
+          height: 1.5,
           fontWeight: FontWeight.w500,
         ),
         padding: EdgeInsets.only(top: 4.0),
@@ -461,6 +462,7 @@ class AttributeTheme {
   AttributeTheme copyWith({
     TextStyle bold,
     TextStyle underline,
+    TextStyle deleteline,
     TextStyle italic,
     TextStyle link,
     LineTheme heading1,
@@ -477,6 +479,7 @@ class AttributeTheme {
     return AttributeTheme(
       bold: bold ?? this.bold,
       underline: underline ?? this.underline,
+      deleteline: deleteline ?? this.deleteline,
       italic: italic ?? this.italic,
       link: link ?? this.link,
       heading1: heading1 ?? this.heading1,
@@ -499,6 +502,7 @@ class AttributeTheme {
     return copyWith(
       bold: bold?.merge(other.bold) ?? other.bold,
       underline: underline?.merge(other.underline) ?? other.underline,
+      deleteline: underline?.merge(other.deleteline) ?? other.deleteline,
       italic: italic?.merge(other.italic) ?? other.italic,
       link: link?.merge(other.link) ?? other.link,
       heading1: heading1?.merge(other.heading1) ?? other.heading1,
@@ -520,6 +524,7 @@ class AttributeTheme {
     final AttributeTheme otherTheme = other;
     return (otherTheme.bold == bold) &&
         (otherTheme.underline == underline) &&
+        (otherTheme.deleteline == deleteline) &&
         (otherTheme.italic == italic) &&
         (otherTheme.link == link) &&
         (otherTheme.heading1 == heading1) &&
@@ -539,6 +544,7 @@ class AttributeTheme {
     return hashList([
       bold,
       underline,
+      deleteline,
       italic,
       link,
       heading1,
@@ -586,7 +592,7 @@ class ToolbarTheme {
       iconFillColor: theme.brightness == Brightness.light ? Color(0xFFF2F2F2) : Color(0xFF1F1F1F),
       iconColor: Color(0xFF595959),
       disabledIconColor: theme.brightness == Brightness.light ? Color(0xFFBFBFBF) : Color(0xFF363636),
-      dividerColor: theme.brightness == Brightness.light ? Color(0xFFF2F2F2) : Color(0xFF3B3B3B),
+      dividerColor: theme.brightness == Brightness.light ? Color(0x0D1C202B) : Color(0xFF3B3B3B),
     );
   }
 

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

@@ -22,6 +22,7 @@ enum ZefyrToolbarAction {
   link,
   unlink,
   emoji,
+  color,
   undo,
   redo,
   save,
@@ -51,10 +52,11 @@ enum ZefyrToolbarAction {
 
 final kZefyrToolbarAttributeActions = <ZefyrToolbarAction, NotusAttributeKey>{
   ZefyrToolbarAction.bold: NotusAttribute.bold,
-  ZefyrToolbarAction.underline: NotusAttribute.underline,
-  ZefyrToolbarAction.deleteline: NotusAttribute.deleteline,
+  ZefyrToolbarAction.underline: NotusAttribute.line.underline,
+  ZefyrToolbarAction.deleteline: NotusAttribute.line.deleteline,
   ZefyrToolbarAction.italic: NotusAttribute.italic,
   ZefyrToolbarAction.link: NotusAttribute.link,
+  ZefyrToolbarAction.color: NotusAttribute.color,
   // ZefyrToolbarAction.text: NotusAttribute.heading,
   ZefyrToolbarAction.heading: NotusAttribute.heading,
   ZefyrToolbarAction.headingLevel1: NotusAttribute.heading.level1,
@@ -92,12 +94,12 @@ const kDefaultButtonIcons = {
   ZefyrToolbarAction.unlink: Icons.link_off,
   ZefyrToolbarAction.clipboardCopy: Icons.content_copy,
   ZefyrToolbarAction.openInBrowser: Icons.open_in_new,
-  ZefyrToolbarAction.headingLevel1: ZefyrFont.note_editor_text_h,
-  ZefyrToolbarAction.headingLevel2: ZefyrFont.note_editor_text_h1,
-  ZefyrToolbarAction.headingLevel3: ZefyrFont.note_editor_text_h2,
-  ZefyrToolbarAction.headingLevel4: ZefyrFont.note_editor_text_h3,
-  ZefyrToolbarAction.headingLevel5: ZefyrFont.note_editor_text_h4,
-  ZefyrToolbarAction.headingLevel6: ZefyrFont.note_editor_text_h5,
+  ZefyrToolbarAction.headingLevel1: ZefyrFont.note_editor_text_h1,
+  ZefyrToolbarAction.headingLevel2: ZefyrFont.note_editor_text_h2,
+  ZefyrToolbarAction.headingLevel3: ZefyrFont.note_editor_text_h3,
+  ZefyrToolbarAction.headingLevel4: ZefyrFont.note_editor_text_h4,
+  ZefyrToolbarAction.headingLevel5: ZefyrFont.note_editor_text_h5,
+  ZefyrToolbarAction.headingLevel6: ZefyrFont.note_editor_text_h6,
   ZefyrToolbarAction.text: ZefyrFont.note_editor_text,
   ZefyrToolbarAction.code: ZefyrFont.note_editor_text_code,
   ZefyrToolbarAction.horizontalRule: ZefyrFont.note_editor_text_hr,
@@ -122,6 +124,18 @@ final kToolbarDivider = Container(
   margin: EdgeInsets.symmetric(horizontal: 10),
 );
 
+const kTextColors = [
+  Color(0xFFFA6400),
+  Color(0xFFF7B500),
+  Color(0xFF6DD400),
+  Color(0xFF44D7B6),
+  Color(0xFF32C5FF),
+  Color(0xFF0091FF),
+  Color(0xFF6236FF),
+  Color(0xFF000000),
+  Color(0xFFFFFFFF),
+];
+
 /// Allows customizing appearance of [ZefyrToolbar].
 abstract class ZefyrToolbarDelegate {
   /// Builds toolbar button for specified [action].