Zefyr 1.0 development updates

[pulyaevskiy]

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]

Thanks Anatoly for the update. Congrats for the plugin.

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

[eli1stark]

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]

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 [web] Support rich text in CanvasTextMeasurementService flutter/flutter#55587
• inserting a picture seems to insert an HR (at least on the web)

[cgestes]

@pulyaevskiy some questions... :D

Why did you deprecate the NotusDocument.fromDelta constructor?

Can we make the focusNode optional?

[pulyaevskiy]

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:

zefyr/packages/notus/lib/src/document.dart

Line 55 in a79859a

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.