memspace / zefyr

Soft and gentle rich text editing for Flutter applications.

Home Page:https://zefyr-editor.gitbook.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Zefyr 1.0 development updates

pulyaevskiy opened this issue · comments

Hi everyone,

I wanted to post this as an announcement that there is currently work in progress on the new version of Zefyr which will be eventually released as a stable 1.0 version.

There is a lot of changes in this version, it's practically an almost complete rewrite of the package, but it comes with quite a few benefits.

You can head over to https://memspace.github.io/zefyr/#/ and see the editor for yourself in its current state.

image

Note that this is a very early dev version so it's buggy. In addition, Flutter's Web support is still not on par with the rest of the platforms and there are some pretty basic limitations in the engine itself. So don't get surprised if formatting text with bold breaks the entire thing (it does).

The main reason I wanted to get it out there is to let everyone know that there has been some progress lately. Also this is the reason I'm not looking at any PRs at the moment. I'd like to get 1.0-dev branch into a good shape first and then go over the open issues and PRs in order to see which ones are still relevant and if they can be incorporated in the 1.0 release.

The best way for you to stay updated on the progress here is to subscribe to this issue. I will be posting updates in comments below.

The first dev release is out on Pub: https://pub.dev/packages/zefyr/versions/1.0.0-dev.1.0

I'd encourage everyone to give it a try and see if things are working well. Make sure to checkout the changelog for migration instructions.

Thanks Anatoly for the update. Congrats for the plugin.

In case we can help with something ( beside using and testing ), let us know.

Hello Anatoly! I have a question: is there any solutions to this problem in the new version or in the old one. I need my ZefyrEditor(or ZefyrScaffold) to resize depending on the content. I'm trying to implement it inside a ListView, The mode of this ZefyrEditor is ZefyrMode.view. But I'm getting an error about unbounded height. I tried to dynamically change height depending on the length of the Notus document but in the long run, I have a big space at the end of the listview. This is the only solution I found for myself. I also tried to detect how many lines the document has. But it can become tricky since the whole note can have only 1 line. And something like (lines * 50px) won't work. One note, this ListView is inside DraggableScrollableSheet. So something like ZefyrView won't work.
PS: Actually nevermind, I found a solution: DraggableScrollableSheet -> ListView -> ZefyrView. I search for this almost a month🤭.
Thank you for your package. It's amazing. I made a great app because of it.

Hi @eli1stark, look at the examples linked in the original post, it seems that the rewrite helps fixing all that kind of cases 👍

@pulyaevskiy so cool!!!

some behaviors I noticed:

  • when embedded in a ListView moving the keyboard up/down has funny scrolling effect
  • the selection bubbles really work nicely!!! <3
  • the selection bubbles appear on desktop browser (I believe they should not)
  • selection of rich text on the web is still broken because of flutter/flutter#55587
  • inserting a picture seems to insert an HR (at least on the web)

@pulyaevskiy some questions... :D

Why did you deprecate the NotusDocument.fromDelta constructor?

Can we make the focusNode optional?

Why did you deprecate the NotusDocument.fromDelta constructor?

This is due to changes in Notus in regards to handling embeds. You can find details in the changelog here: https://github.com/memspace/zefyr/blob/1.0-dev/packages/notus/CHANGELOG.md

I'm relying embeds are stored as data of insert operations (while previously they were in style attributes). To make things a little bit more statically safe there is now EmbeddableObject class which is JSON-serializable and it's stored directly in the Delta, e.g.:

final delta = Delta()..insert(BlockEmbed('hr')); // this inserts a horizontal rule

When converting to JSON everything works automatically because EmbeddableObject implements toJson. However when decoding from JSON by default this data is turned into a Map.

To turn it back into our custom type I've added a callback argument to Delta constructor which allows to customize decoding of embedded data. And NotusDocument passes its own in the fromJson constructor:

Delta.fromJson(data, dataDecoder: _deltaDataDecoder)) {

The problem with fromDelta constructor is that the Delta has already been decoded and contains Maps for embeds. To fix this we'd have to run a loop over the entire document and convert embeds from Maps to EmbeddableObjects. Which is maybe not that big of a deal, but it's something that would be nice to avoid.

I also feel like it'd be less confusing for first time users, as I've seen quite a few questions about how to save and load documents back into the editor.

Can we make the focusNode optional?

Possibly yes. I'd keep it required for RawEditor, but can make optional for ZefyrEditor and ZefyrField.

please add function NotusDocument to/from HTML as it works in notustohtml, for now it uses Delta to convert, but it will be nice to avoid converting toDelta->toHTML. We need it to share petty formatted data across mobile(Flutter) and Web(React)

Ok. I will think about how I so think and see if I can cover all use case with the new method. (I do apply some transform using delta, for example when highlighting search result)

HI,

Thanks for the update.

Given ZefyrScaffold is gone and we need to add toolbar by ourselves, is there an easy way to make ZefyrToolbar.basic(controller: _controller) scroll-able. When I am using ZefyrToolbar as mentioned in one of your example, it is always overflowing.

Any suggestion?

This is working without any problems for me:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ZefyrToolbar.basic(controller: _controller))

This is working without any problems for me:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ZefyrToolbar.basic(controller: _controller))

This did the trick for me.. Thanks.

Would I be able to put Zefyr text in my firebase Cloud Firestore?

Would I be able to put Zefyr text in my firebase Cloud Firestore?
Of course. Same as it is already.

Would I be able to put Zefyr text in my firebase Cloud Firestore?

You can use quill-delta to manage the text from your cloud functions. Just make sure to append the \n at the end, it didn't do that automatically for me.

Do you have a paypal donation link or something like that? As my software will heavily depend on this library I would like to help speeding up the development process to be able to integrate the new release version in the near future.

Me to my software is all about articles and will depend on this package, I will like to contribute as well.

Yep, this is a great package, no doubt, but I think the maintainers need more contributions from our community to speed up the development process. The first I see that we can try to test existing features, report issues and even better that try to investigate and fix them by ourself.

Yep, this is a great package, no doubt, but I think the maintainers need more contributions from our community to speed up the development process. The first I see that we can try to test existing features, report issues and even better that try to investigate and fix them by ourself.

In general you're right but in this case I don't think there is anything the community can currently do. The maintainer wrote above he is not looking at open PR at the moment due to the breaking changes of the complete rewrite of this package:

Also this is the reason I'm not looking at any PRs at the moment. I'd like to get 1.0-dev branch into a good shape first and then go over the open issues and PRs in order to see which ones are still relevant and if they can be incorporated in the 1.0 release.

As a result of this we just have to wait and therefore I thought it would make sense to support him with donations. Unfortunately I found no way of doing that.

I believe PRs are fine, its just that bug reports are not very useful as this is beta quality code, that we know requires more work.  @pulyaevskiy please correct me if I got it wrong.

Thanks everyone for the feedback.

In regards to progress, I did actually release a dev version on Pub a few weeks ago https://pub.dev/packages/zefyr/versions/1.0.0-dev.1.0 . Which means I'm ok now with users filing bug reports against the 1.0-dev branch. Pull requests are of course much appreciated. If you decide to submit a PR here is a few tips:

  1. Make sure that your PR covers one particular issue you are addressing. It could be one bug, or an improvement or a new feature.
  2. Make sure to use dartfmt to format your code. I have this enabled in my IDE on save so I don't have to worry about it.
  3. Be ready for feedback and willing to address it. We may have several back and forth depending on the size of your change. So it may take some time to land your PR. But don't be discouraged by this. Submitting a PR is definitely the best way to get something addressed sooner.

As for right now, I temporarily switched focus to integrating the new version into my own project which is why there is not much happening in this repo in the past weeks. But I will be looking at PRs and bug reports on the 1.0-dev branch, as time permits.

I'm planning to switch back to finalize Zefyr in a few weeks. Plus I'll likely have some smaller updates in the meantime as I'm making progress integrating it into my personal project.

Do you have a paypal donation link or something like that? As my software will heavily depend on this library I would like to help speeding up the development process to be able to integrate the new release version in the near future.

I appreciate the thought and support! I do not have a donation link at this point. I can probably sign up for Github Sponsors or something, but in terms of speeding up development I'm afraid it won't have a noticeable impact, unfortunately (at least at this point).

Seems like the development of text measurement on the web is in progress on the Flutter side 😁

https://github.com/flutter/flutter/projects/173#column-10413377

Please guys am totally lost and needed help .

  1. How can I do the embedBuilder logic? Am confused and don't know how to make it to work

  2. The toolbar of ZefyrField is at the bottom and can't lift alongside the keyboard when popping up. How can i make it to lift with the device keyboard?.

How can I embed images? Like any hint on how to achieve it? I don't really worry about the taps now . Just a little help

How to use embedBuilder? I want to add images using image picker and display them on Zefyr Editor? How do I achieve this?

How to use embedBuilder? I want to add images using image picker and display them on Zefyr Editor? How do I achieve this?

How can I embed images? Like any hint on how to achieve it? I don't really worry about the taps now . Just a little help

For the embed images, you can look into this #421. It works for me.

Hello! I'm new to Flutter and found this Zefyr package very promising - thanks for making this! However, the docs haven't been updated for over a year and the 1.0-dev development seems to be changing things quite rapidly - is there any sample code or app based on the 1.0-dev branch? If someone could share one it would be very helpful to newcomers!

Thanks @Amir-P ! Is there an example embedding an image in the editor? I've looked at #421 but got You must pass your own builder function to embedBuilder property of ZefyrEditor or ZefyrField widgets. and not sure how to make one for it - probably a newbie question though

Thanks @Amir-P ! Is there an example embedding an image in the editor? I've looked at #421 but got You must pass your own builder function to embedBuilder property of ZefyrEditor or ZefyrField widgets. and not sure how to make one for it - probably a newbie question though

Check out #463

#463 is talking about the image picker itself, but the error message is saying the image display needs us providing a builder

What error message?

#463 is talking about the image picker itself, but the error message is saying the image display needs us providing a builder

Maybe check out https://github.com/singerdmx/flutter-quill/blob/master/lib/widgets/editor.dart#L351
When you click the image in read only mode, it uses ImageWrapper

flutter/flutter#55587 just landed in Flutter master. I tested Zefyr on Web and it works pretty well.

@GyuriMajercsik what do you mean? Could you clarify, please?

Zefyr didn't work pretty well on web due to a Flutter web limitation (as mentioned by @cgestes in #409 (comment) comment). This was fixed recently and now Zefyr is almost ready for web development. Still need to wait until this fix lands in Flutter beta ( or you just use Flutter master )

@GyuriMajercsik
Can we use 1.0 for commercial projects now? Our project doesn't need web support.

I'm looking forward to it. I can't wait.

@HeebeLee , that's hard to say. I would test it thoroughly and decide it afterward.

@HeebeLee , your help and input on development and testing is making Zefyr better.

commented

Hey guys, just ran across this today and was playing around with it after looking through some examples. I had one quirk that I was wondering about. Does pasting work? I can't seem to paste in the ZefyrEditor on Android or iOS. Everything else worked smoothly.

Edit: I can't "Cut" either.

yes

Hey guys, just ran across this today and was playing around with it after looking through some examples. I had one quirk that I was wondering about. Does pasting work? I can't seem to paste in the ZefyrEditor on Android or iOS. Everything else worked smoothly.

Edit: I can't "Cut" either.

I confirm that pasting and cutting text does not work in the latest version on 1.0-dev branch, on Android. Is it working on web and macos.

Could you please add a ticket for this ?

Hey guys, just ran across this today and was playing around with it after looking through some examples. I had one quirk that I was wondering about. Does pasting work? I can't seem to paste in the ZefyrEditor on Android or iOS. Everything else worked smoothly.
Edit: I can't "Cut" either.

I confirm that pasting and cutting text does not work in the latest version on 1.0-dev branch, on Android. Is it working on web and macos.

Could you please add a ticket for this ?

This exists: #420

Hey guys, is there any way to edit the border of a Zefyr text box in Prev 1.0? I want to hide the default border- line at the bottom

Anyone know how to get text from NotusDocument? I was using

final converter = NotusMarkdownCodec();
var text = converter.encode(controller.document.toDelta());

Which worked for plain text but would throw exception when the document includes images etc non string nodes. There must be a better way to get text along with images with their positions?

Is there a way i can select the toolbar that i needed . I don't really need all the Zefyr tool bars . Like how can i use only Bold, underline, and quote tool bar? Any idea?

I've opened issue #485 regarding ListView not scrolling properly to ZefyrField to avoid the keyboard. The keyboard avoidance works fine with a normal TextField for me. However, someone on there is just trying to send me away to their own editor rather than engaging with my issue.

Anyone know how to get text from NotusDocument? I was using


final converter = NotusMarkdownCodec();

var text = converter.encode(controller.document.toDelta());

Which worked for plain text but would throw exception when the document includes images etc non string nodes. There must be a better way to get text along with images with their positions?

I converted NotusDocument to list of Delta object. Then loop through list of delta.

@petchgabriel thanks! Looks like parsing manually is the only way for now

Can someone please confirm whether singerdmx/flutter-quill has anything to do with Zefyr? All that happens in my issue #485 is people telling me to go there instead!

Hey, guys, I have 4 zefyr editors on a single page and whenever I try to press space it creates issues. Like it goes to the toolbar. I have used different controllers and focus Node. Also, there is a page when space works only when I am writing characters quickly If I just press space then it does not work. Collaborators, Can you please help me with my issue. I need to submit this project to the client asap

Hi, it's been three months since the last code merge. In the future, can the relevant update code be merged into the project in time? Even the beta version.

@pulyaevskiy pu @GyuriMajercsik @cgestes

commented

Hi, it's been three months since the last code merge. In the future, can the relevant update code be merged into the project in time? Even the beta version.

@pulyaevskiy pu @GyuriMajercsik @cgestes

Could use an update to support flutter 2 and updated url_launcher dependency

Hi, it's been three months since the last code merge. In the future, can the relevant update code be merged into the project in time? Even the beta version.

@pulyaevskiy pu @GyuriMajercsik @cgestes

It would be really nice but I am just a contributor / user of this plugin. @pulyaevskiy is the owner and he very probably has other stuff on his plate.

@GyuriMajercsik is there some kind of other communication channel that people can reach out to him?
For example, flutter-quill has a Slack Group
If not, you guys may want to create one similar

Has this project been abandoned?

Has this project been abandoned?

@pulyaevskiy hasn't been active in a while and he's the only one that can accept PRs atm. Judging by the number of forks and PRs in this repository, the community is large enough to keep this moving forward.

flutter-quill is active and will be able to take PRs if it helps you guys.
It is very close to Zefyr.
We use it for Bullet Journal App
flutter-quill is under MIT license and no constraint for commercial use for anyone.
We have slack group to join.

build fails with flutter 2.0.0.

ERROR
/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/zefyr-0.12.0/lib/src/widgets/selection.dart:659:42: Error: Too few positional arguments: 8 required, 7 given.
final toolbar = controls.buildToolbar(

zefyr: ^0.12.0

flutter --version
Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (26 hours ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

@GyuriMajercsik is there some kind of other communication channel that people can reach out to him?
For example, flutter-quill has a Slack Group
If not, you guys may want to create one similar

I think creating a slack group and having a dedicated fork would be the way to go. I can create the group and fork and start adding people if there is enough support for it.

Agreed that we should use a fork for now until the owner becomes active again. I'd propose my fork which fixed some bugs & compilation for flutter 2, and brought some enhancements. You can see the code changes here: #479

Sounds good. @hyouuu we can use your fork.

👋 Let’s move this to Slack! It’s a faster, simpler way to talk shop, share files, and work together. You can sign up here: https://join.slack.com/t/newworkspace-opq5273/shared_invite/zt-ni38p7u9-BDtnqptI72setbBWbWNclA

Wouldn't it be better to start from scratch?

Wouldn't it be better to start from scratch?

What do you mean by scratch?

I mean a completely new editor. I see too many compromises with Zefyr, first of all not being fully compatible with Quill.

flutter-quill is fully compatible with Quill. It is under MIT license and no constraint for commercial use for anyone.
If you do not have Zefyr-based production data yet, it is a better choice.

Actually what is the license for Zefyr?
I don't see it in github

flutter-quill is fully compatible with Quill. It is under MIT license and no constraint for commercial use for anyone.
If you do not have Zefyr-based production data yet, it is a better choice.

I might evaluate it tomorrow... my app will be launched in the next month or so, last step missing is the text editor.

I think people come to zefyr because there is no better option available yet. If someone could come up with a new editor without compromises that would be awesome, but I can see it's a rather complicated project. Please do share your evaluation of flutter-quill as it will help others :)

flutter-quill is fully compatible with Quill. It is under MIT license and no constraint for commercial use for anyone.
If you do not have Zefyr-based production data yet, it is a better choice.

I can confirm that. I switched my project from Zefyr to Flutter-Quill today. I think it would make more sense to concentrate development on one editor.

flutter-quill is fully compatible with Quill. It is under MIT license and no constraint for commercial use for anyone.
If you do not have Zefyr-based production data yet, it is a better choice.

I can confirm that. I switched my project from Zefyr to Flutter-Quill today. I think it would make more sense to concentrate development on one editor.

I second that.

flutter-quill is fully compatible with Quill. It is under MIT license and no constraint for commercial use for anyone.
If you do not have Zefyr-based production data yet, it is a better choice.

I can confirm that. I switched my project from Zefyr to Flutter-Quill today. I think it would make more sense to concentrate development on one editor.

Well if the transition went smoothly, I don't see why not just support flutter-quill. Are there any major differences between the packages to be aware of? @florianh01

Would also love to learn what features and scopes your project used @florianh01 to see what aspects are covered in the transition

In principle, the packages are very similar. I think Zefyr can be easily replaced with Flutter Quill at least 90% of the time.

Flutter Quill also supports more formatting options such as colored text. Dark mode is also considered here where I had my concerns at the beginning.

However, I have no experience in inserting images as I do not need this function in my app.

But: Flutter Quill can only be used if no Zefyr documents have been created yet. A document created with Zefyr Editor cannot be displayed in Quill Editor.

If you have any questions feel free to ask.

But: Flutter Quill can only be used if no Zefyr documents have been created yet. A document created with Zefyr Editor cannot be displayed in Quill Editor.

Yes, because Zefyr's data format is not 100% Quill Format while Flutter Quill is 100% compliant with Quill Format

Thanks @florianh01 ! @singerdmx could you add image & horizontal divider examples in the sample? zefyr dev supports them although not documented

Check out https://github.com/singerdmx/flutter-quill/blob/master/app/lib/pages/home_page.dart#L139

image

It supports local image, network image and base-64 encoded image

What about not using QuillToolbar? How about horizontal divider?

No support for horizontal divider yet.
But you are welcome to submit a pull request to add that.
Please make sure that the data format is compliant with Quill Format

https://stackoverflow.com/questions/37525867/how-can-i-add-a-new-format-hr-tag-to-quill-js

Anyone who wants to be the collaborator of flutter-quill please me know.
I will add you.

image

@HeebeLee you can either submit a pull request or become a collaborator (you can directly commit to repo)

Hi all, our repo supports some additional features such as supporting custom font size as well as supporting redo and undo :
screenshot
Feel free to check out our repo https://github.com/singerdmx/flutter-quill , thanks!

Hi all, our repo supports some additional features such as supporting custom font size as well as supporting redo and undo :
Feel free to check out our repo https://github.com/singerdmx/flutter-quill , thanks!

Is it ready for concurrent document edition?

Hi all, our repo supports some additional features such as supporting custom font size as well as supporting redo and undo :
Feel free to check out our repo https://github.com/singerdmx/flutter-quill , thanks!

Is it ready for concurrent document edition?

No, no plan for that. There are too much work to do before even thinking about that.

Is it ready for concurrent document edition?

I think this is possible as you can assign a listener to the quill editor controller and wrap the editor inside a snapshot builder.
Then whenever something changes, you can update the delta data on the server (eg Firestore) and then the editor widget automatically rebuilds on another device.

This is not really a package specific feature but more of an implementation on the app side.

Zefyr is not working for flutter version 2.0.2
Any suggestions how can we make it work

@agarwalrohit2503 We supports own fork of Zefyr. You can easily enable it by adding the following lines to pubspec.yml:

dependencies:
  zefyr:
    git:
      url: git://github.com/glynskyi/zefyr.git
      path: packages/zefyr
      ref: "6f7408d"
  notus:
    git:
      url: git://github.com/glynskyi/zefyr.git
      path: packages/notus
      ref: "6f7408d"

@featzima are you also working on v1.0? if yes, maybe we can help each other

All, I'm working on the 1.0-dev version on my spare time while @pulyaevskiy is not available
So far, it is working (basically) on mobile, but needs some work to be fully functional on web

To not hesitate to test and contribute to https://github.com/amantoux/zefyr/tree/1.0-dev-master

Hi @amantoux
Thanks for providing your fork.
I can hardly find documentation, I tried to update from a previous version of Zefyr to yours, but I got errors, apparently ZefyrScaffold and ZefyrView are not available anymore, do you have any ideas of what they have been replaced by ?

Hi @amantoux
Thanks for providing your fork.
I can hardly find documentation, I tried to update from a previous version of Zefyr to yours, but I got errors, apparently ZefyrScaffold and ZefyrView are not available anymore, do you have any ideas of what they have been replaced by ?

No, indeed, in v1, simple add a ZefyrEditor to the containing widget and set a ZefyrController (pretty similar to TextField widget and TextEditingController)

final controller = ZefyrContoller();
Widget(
  child: ZefyrEditor(
    controller: controller,
   [other options]
  ),
)

@amantoux thanks a lot !
and what about ZefyrView to simply display the content of a document (and not edit it) ? Is there an equivalent remaining in this version ?

@amantoux thanks a lot !
and what about ZefyrView to simply display the content of a document (and not edit it) ? Is there an equivalent remaining in this version ?

There is a readOnly' attribute to ZefyrEditor`

You can look at the examples in the branch, they are updated

If someone needs Zefyr on steroids just try Zefyrka package.

Zefyrka is a fork of Zefyr package with the following improvements:

  • support of Flutter 2.0
  • opt-in the null safety
  • text color
  • background color
  • paragraph alignment
  • paragraph indentation

I want to insert some text to last document but it has a exception, i tried many way but no way doing
image
image

If someone needs Zefyr on steroids just try Zefyrka package.

Zefyrka is a fork of Zefyr package with the following improvements:

  • support of Flutter 2.0
  • opt-in the null safety
  • text color
  • background color
  • paragraph alignment
  • paragraph indentation

Is Zefyrka abandoned too? No answer to issues on GitHub...

@aleripe We`re fixing all critical issues and compatibility issues with Flutter for Zefyrka. Some requested improvement are in our roadmap and we will fix them soon. However other are not. So you can always send the PR for a requested feature and we will say thank you for contributing =)