This pull enables adding highlights programmatically, and also introduces some helper methods to make managing HighlightM objects easier. Additionally, the ability to programmatically remove arbitrary sections of a highlight (and have the highlights persist) has been added.

This was one of the major pain points when using Flutter Quill. I'm working in parallel with the refactoring work to develop a full set of documentation articles that cover all use cases. Please post here what you think it's missing from the documentation. I'll be happy to receive feedback.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

It will be a while until visual editor is all packed up and ready to serve duty. At best at least 1 month until we get testing and docs such that we can provide a better service. (I mean it's currently usable as it is a direct clone of Flutter Quill). I've been already going trough the steps to setup the repo. There's a lot to review. Today I started work on the cleanup effort. There's a lot to unpack here. My first goal, not have files with over 300 LOC. And to split in modules. Plus rename / document where necessary to make it easy to follow the code flow.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

Every time I call setState() in the parent component which is pretty critical for me. I think it's initialized as late here.

Component looks like this when I'm calling setState.

Code snippet:

class Screen extends StatefulWidget {
  @override
  State<Screen> createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
          child: ListView(
            children: [
              EditorToolbar.basic(
                controller: controller,
              ),
              Expanded(
                child: VisualEditor.basic(
                  controller: controller,
                ),
              ),
              OutlinedButton(
                  onPressed: () => {
                    setState();
                  },
                  child: const Text('Break')),
            ],
          ),
        ),
    );
  }
}

I only tried it in web.

Video: https://cdn.discordapp.com/attachments/972503769113829427/996005922193281127/Peek_2022-07-11_12-49.mp4

Markers are highlights that are permanently embedded in the document. Meaning the delta document uses a dedicated attribute for markers. Highlights are defined without touching the delta document and have a short life span. They can be used to highlight portions of the document. Markers can be triggered in several ways, either by hovering them, or by invoking a method. Markers can belong to a set. Multiple marker sets can be defined, each one with unique colors, callbacks and settings.

Temporary Notes:

Markers

V - Markers folder

• Hide markers (all, set, individual) --> BRAINSTORM
• New attribute
• Generic API with
  • Type, id, color, callback,
• Preserve at copy paste
• Toolbar Dropdown (Lists marker sets)
• Testing
• Docs

Markers

• Capture markers so far for YT, Capture highlights
• Update docs on the markers .md
• Highlights demo, Select text, add highlight
• Use setHighlights
• Highlights tests
• Highlights controller methods
• Study V - How TextLine works, V - How Styles are applied to Text spans, V - How embeds are rendered V - How attributes are converted to nodes
  • Why check for only inline or only ignored? How to add custom attributed without changing core? Data resolver?

Highlights

• setHighlights()
  • Trigger update
  • Checks doc boundaries
• resetHighlights()
  • FIx highlights hover

Study

• Link text spans have gesture recognizers. We can use them for the marker attribute.
• lineLeadingWidget - Maybe this is how I can do the heading counters
• Attributes seem to be a plain old map of keys and values. So anything could be added there.
  • Multiple styles are allowed per attributes
  • Unknown styles are rejected
• We need to define new attributes to be recognised
• StyleM converts attributes to models
  • attr = AttributeM.fromKeyValue(key, value);
  • looks for the attribute in the registry
  • So it appears we can only use known attributes
    • It appears to be creating an AttributeM but with AttributeM(key, AttributeScope.IGNORE, value)
• Can we define new attributed from outside of the lib?
  • So far I can see they end up in the ignore scope and if there's a mix of inline or ignore then the editor fails, but there's no explanation why.
• Most likely I need to define data decoders for the custom data types (embeds)
• Useful with embedded blocks. typedef DataDecoder
• Many attributes seem to have a value although there's no useful info in it. For example bold has value true... ok... and what happens with value false?

I noticed a small bug when implementing the Quill Editor. It happens when using the enumeration feature. I was pretty amazed when I found out that the indent button changes the enumeration from numbers to letters on indent, but it seems that once you go back to the first indentation level, the enumeration always resumes at '2'. Additionally, the one after that is a 2 as well. After that it will resort to normal.

I tried it as well for a list of say 9 items and then creating an indent at 9.a. Pressing Enter and the Decrease Indentation button make the item after 9 resort to 2. Writing some text and pressing Enter again yields a 2 again.

Original issue: https://github.com/singerdmx/flutter-quill/issues/696

Join us on discord to get implementation advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter software architecture advice.

Locale class use upper case for country code in dart. But i18n is found to use lower case for identification. The 'zh_CN' and 'zh_HK' needs to change to 'zh_cn' and 'zh_hk' for i18n to select the correct translation.

Original issue: https://github.com/singerdmx/flutter-quill/issues/868

Even if we don't display content as pages, the ability to select a section of the document and setup a multiple columns layout would be highly beneficial. Besides columns we can introduce in the future custom shapes or other grid types.

Join us on discord to get implementation advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter software architecture advice.

Current source code uses a regular font as it was done in Flutter Quill. Which is not the way code editors handle this situation.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

Hitting undo and redo will remove the markers. We are expecting to have the markers restored as well. All other styles work just fine. Maybe there's something related to the markers attribute format (objects instead of primite value).

This issue might be fixed if we fix the copy paste losing styles issue: #8

https://user-images.githubusercontent.com/11160141/193270535-add5b1f0-1e12-4123-99cd-061601253b38.mov

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

Position widgets in sync with the markers found in the text

Markers provide support for attachments by returning their pixel coordinates and dimensions for positioning in text. Based on this information any widget can be linked to a marker. Keep in mind that markers are not widgets, so a simple Overlay from Flutter wont do the trick. Markers are rendered as painted rectangles in a canvas on top of the text. Actually it's possible to use Overlay and CompositeTargetFollower to track the scroll, but we want to have precise control over the coordinates (performance reasons). We simulate attached widgets by positioning them to the exact coordinates. Attachments can be used render elements such as the markers options menu or delete button.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

In the limited headings length page, the highlight pulsates every time a char is inserted.

https://user-images.githubusercontent.com/105392078/209430942-5337ed0d-3ca8-4ba6-8782-102a300d01cc.mp4

Hi,

I tried to add the Visual Editor, but it looks that some libraries are quite old, is it possible to upgrade i18n_extension to ^6.0.0?

Without this I got some incompatibilities with other libraries.

Inside the method _removeTabCharacter() logic, when pressing shift + tab even though there aren't any tab char added. The logic is going to remove 4 chars before the charet. That's not what we intend. One possible solution to this is to verify if there are 4 whitespaces before the charet. If there are, apply the method logic, else do not.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

We need to understand the logic of each rule and model in document rules, create docs for them and then add a rule for not being able to edit the text inside code blocks and inline code.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

The current demo page sidebar does not show any indication which page is currently open. It is somewhat annoying.

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

• There's a setting in the visual editor to take over the controls and render them in a custom way instead of the dual iOS/android style.
• We need a demo page to demonstrate how such a custom control works.
• Tutorial: https://ktuusj.medium.com/flutter-custom-selection-toolbar-3acbe7937dd3

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.