zefyr

zefyr copied to clipboard

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.

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 :+1:

@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 https://github.com/flutter/flutter/issues/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:

https://github.com/memspace/zefyr/blob/a79859a1ba251e85f4364021b2199084dd37c7c0/packages/notus/lib/src/document.dart#L55

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?

Hi,

I saw it also, we have to fix it upstream.

:)

On Tue, Oct 6, 2020 at 7:48 AM Dheeraj Sarwaiya [email protected] wrote:

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?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/memspace/zefyr/issues/409#issuecomment-704024694, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAL75PMZQI5J2T7GQHMUJLSJKORFANCNFSM4R5LHQ6Q .

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?.

On Wed, Nov 18, 2020, 01:47 Elochukwu Prince [email protected] wrote:

Please guys am totally lost and needed help .

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

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?.

Hi,

For the toolbar, you have to put it in a bottomsheet somehow. Not sure if anyone has done it with 1.0-dev but it would be beneficial to know how to do it.

For the embbeds we miss a piece of code to allow them to receive events correctly. (like taps)

—

You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/memspace/zefyr/issues/409#issuecomment-729282289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAL75IOUUFW7MWYGVGTOATSQMDSHANCNFSM4R5LHQ6Q .

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!

@hyouuu You can check out the https://github.com/memspace/zefyr/tree/1.0-dev/packages/zefyr/example

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 https://github.com/memspace/zefyr/issues/463