zefyr
zefyr copied to clipboard
Bugs in zefyr: ^1.0.0-dev.2.0
I tried dev version and found few bugs
- If I type text in ZefyrField, text looks bold even bold option is not pressed on toolbar.
- If text is bigger than ZefyrField and we scroll down, scroll bar on right side is not visible.
- Cursor is not visible in ZefyrField.
- Long press text does not highlight text. Cut, copy, paste won't work.
- So much Line spacing. How to reduce?
- 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; FormFieldStateformFieldState; 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!
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?
I have the same issue that copy, cut or paste doesn't work
Check out https://github.com/memspace/zefyr/pull/476/commits/dad98a2ae9692c7311cbe4f035dafe47503e661a
Thanks @singerdmx !