pulyaevskiy commented 3 years ago

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.

GyuriMajercsik commented 3 years ago

Thanks Anatoly for the update. Congrats for the plugin.

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

eli1stark commented 3 years ago

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.

cgestes commented 3 years ago

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)

cgestes commented 3 years ago

@pulyaevskiy some questions... :D

Why did you deprecate the NotusDocument.fromDelta constructor?

Can we make the focusNode optional?

pulyaevskiy commented 3 years ago

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.

yeras-is commented 3 years ago

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)

cgestes commented 3 years ago

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)

dheerajsarwaiya commented 3 years ago

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?

cgestes commented 3 years ago

Hi,

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

:)

On Tue, Oct 6, 2020 at 7:48 AM Dheeraj Sarwaiya notifications@github.com 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 .

masewo commented 3 years ago

This is working without any problems for me:

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

dheerajsarwaiya commented 3 years ago

This is working without any problems for me:

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

This did the trick for me.. Thanks.

koenhagen commented 3 years ago

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

cgestes commented 3 years ago

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

ciriousjoker commented 3 years ago

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.

FelixMittermeier commented 3 years ago

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.

ElochukwuPrince commented 3 years ago

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

hnvn commented 3 years ago

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.

FelixMittermeier commented 3 years ago

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.

cgestes commented 3 years ago

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.

pulyaevskiy commented 3 years ago

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:

Make sure that your PR covers one particular issue you are addressing. It could be one bug, or an improvement or a new feature.
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.
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).

cgestes commented 3 years ago

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

ElochukwuPrince commented 3 years ago

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

cgestes commented 3 years ago

On Wed, Nov 18, 2020, 01:47 Elochukwu Prince notifications@github.com wrote:

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

1.

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 .

ElochukwuPrince commented 3 years ago

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

nimisha231097 commented 3 years ago

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

petchgabriel commented 3 years ago

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.

hyouuu commented 3 years ago

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!

Amir-P commented 3 years ago

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

hyouuu commented 3 years ago

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

singerdmx commented 3 years ago

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

hyouuu commented 3 years ago

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

singerdmx commented 3 years ago

What error message?

singerdmx commented 3 years ago

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

GyuriMajercsik commented 3 years ago

https://github.com/flutter/flutter/issues/55587 just landed in Flutter master. I tested Zefyr on Web and it works pretty well.

singerdmx commented 3 years ago

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

GyuriMajercsik commented 3 years ago

Zefyr didn't work pretty well on web due to a Flutter web limitation (as mentioned by @cgestes in https://github.com/memspace/zefyr/issues/409#issuecomment-700691787 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 )

SF-Simon commented 3 years ago

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

GyuriMajercsik commented 3 years ago

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

SF-Simon commented 3 years ago

Thank you. Hope to speed up the pace to improve it, because it is our core part.

On Thu, Jan 14, 2021 at 3:54 PM Gyuri Majercsik notifications@github.com wrote:

@HeebeLee https://github.com/HeebeLee , that's hard to say. I would test it thoroughly and decide it afterward.

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

GyuriMajercsik commented 3 years ago

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

m-j-g commented 3 years ago

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.

singerdmx commented 3 years ago

yes

GyuriMajercsik commented 3 years ago

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 ?

britannio commented 3 years ago

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

florianh01 commented 3 years ago

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

hyouuu commented 3 years ago

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?

ElochukwuPrince commented 3 years ago

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?

JacobWrenn commented 3 years ago

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.

petchgabriel commented 3 years ago

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.

hyouuu commented 3 years ago

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

memspace / zefyr

Zefyr 1.0 development updates #409

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

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

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