Bugs in zefyr: ^1.0.0-dev.2.0

[SachinTanpure]

I tried dev version and found few bugs

1. If I type text in ZefyrField, text looks bold even bold option is not pressed on toolbar.
2. If text is bigger than ZefyrField and we scroll down, scroll bar on right side is not visible.
3. Cursor is not visible in ZefyrField.
4. Long press text does not highlight text. Cut, copy, paste won't work.
5. So much Line spacing. How to reduce?
6. If i delete text by pressing back button on keyboard below error shown Another exception was thrown: NoSuchMethodError: The getter 'documentOffset' was called on null. Another exception was thrown: 'package:notus/src/document/node.dart': Failed assertion: line 211 pos 12: 'offset >= 0 && offset <= length': is not true.

Screenshot 1 (No scroll bar if text bigger and so much line spacing issue)

Screenshot 2(No cursor and bold text without bold option)

below is my code. I have used flutter_form_builder and created custom form element for rich text. Input and output is html text.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:zefyr/zefyr.dart';
import 'package:zvolv/core/constants/color_constants.dart';
import 'package:zvolv/core/constants/common_constants.dart';
import 'package:zvolv/core/values/values.dart';
import 'package:notus/notus.dart';
import 'package:notustohtml/notustohtml.dart';
import 'package:quill_delta/quill_delta.dart';
class RichTextFormWidget extends StatefulWidget {
  String label;
  FormFieldState formFieldState;
  bool readOnly=false;

  _RichTextFormWidgetState _formWidgetState = new _RichTextFormWidgetState();

  RichTextFormWidget({Key key,this.label,this.formFieldState,this.readOnly=false})
  :  assert(formFieldState != null),
        super(key: key);

  @override
  _RichTextFormWidgetState createState() => _formWidgetState;
}

class _RichTextFormWidgetState extends State {
  String htmlValue;
  ZefyrController _controller = ZefyrController(NotusDocument());
  final FocusNode _focusNode = FocusNode();
  final converter = NotusHtmlCodec();
  Timer _debounce;
  bool hasFocus =false;
  @override
  void initState() {
    htmlValue = widget.formFieldState.value;
     _setDefaultValue(htmlValue);
    _controller.document.changes.listen((event) {_setRichTextWidgetValue();});
    _focusNode.addListener(()
      {
        //use for show and hide toolbar on ZefyrField focus changes
        hasFocus=_focusNode.hasFocus;
        setState(() {});
      });
    super.initState();
  }

  _setDefaultValue(String value)async{
    if(value != null){
      //convert html value to delta to NotusDocument
      var delta = converter.decode(value);
      delta = delta.compose(Delta.fromJson([]));
      NotusDocument document = NotusDocument.fromDelta(delta);
      _controller = ZefyrController(document);
    }
  }

  @override
  Widget build(BuildContext context) {
    return ZefyrField(
        toolbar: Visibility(visible:hasFocus,child: ZefyrToolbar.basic(controller: _controller)),
        controller: _controller,
        focusNode: _focusNode,
        autofocus: false,
        showCursor: true,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(Sizes.PADDING_4),
          disabledBorder:OutlineInputBorder(
            borderRadius: BorderRadius.circular(CommonConstants.CORNER_RADIUS),
            borderSide: BorderSide(color: ColorConstants.FORMS_WIDGET_BORDER_COLOR, width: CommonConstants.FORMS_WIDGET_BORDER_WIDTH),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(CommonConstants.CORNER_RADIUS),
            borderSide: BorderSide(color:  ColorConstants.APP_PRIMARY_COLOR, width: CommonConstants.FORMS_WIDGET_BORDER_WIDTH),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(CommonConstants.CORNER_RADIUS),
            borderSide: BorderSide(color: ColorConstants.FORMS_WIDGET_BORDER_COLOR, width: CommonConstants.FORMS_WIDGET_BORDER_WIDTH),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(CommonConstants.CORNER_RADIUS),
            borderSide: BorderSide(color: Colors.red, width: CommonConstants.FORMS_WIDGET_BORDER_WIDTH),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(CommonConstants.CORNER_RADIUS),
            borderSide: BorderSide(color: Colors.grey, width: CommonConstants.FORMS_WIDGET_BORDER_WIDTH),
          ),
        ),
         minHeight: 35,
         maxHeight: 300,
      );
  }

  //After changing value in ZefyrField, set the value of rich text form widget
  _setRichTextWidgetValue(){
    if (_debounce?.isActive ?? false) _debounce.cancel();
    _debounce = Timer(const Duration(milliseconds: 1000), () {
      htmlValue = converter.encode(_controller.document.toDelta());
      widget.formFieldState.didChange(htmlValue);
    });
  }

  @override
  void dispose() {
    _debounce?.cancel();
    super.dispose();
  }
}

Finally my flutter doctor [✓] Flutter (Channel stable, 1.22.3, on Mac OS X 10.14.6 18G3020, locale en-IN) • Flutter version 1.22.3 at /Users/apple/Documents/FlutterHome/flutter • Framework revision 8874f21e79 (5 weeks ago), 2020-10-29 14:14:35 -0700 • Engine revision a1440ca392 • Dart version 2.10.3

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/apple/Library/Android/sdk • Platform android-30, build-tools 29.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.3.1, Build version 11C504 • CocoaPods version 1.10.0

[✓] Android Studio (version 3.5) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 44.0.1 • Dart plugin version 191.8593 • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Connected device (1 available) • SM M515F (mobile) • RZ8N902J2EL • android-arm64 • Android 10 (API 29)

• No issues found!

[cgestes]

Hi,

Thanks for the report.

This is strange. I will have a look at your example.

Do you have the same issues when you run the example provided in the zefyr repository?

[hyouuu]

I have the same issue that copy, cut or paste doesn't work

[singerdmx]

Check out https://github.com/memspace/zefyr/pull/476/commits/dad98a2ae9692c7311cbe4f035dafe47503e661a

[hyouuu]

Thanks @singerdmx !