Markers - Custom markers embedded in the document

[adrian-moisa]

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?

[kairan77]

for markers, they currently have a background color picker, but it's very cumbersome to use, I think this is a good place for a tutorial on custom icon implementations to walk through how to implement marker icon and its functions for users on their own, and the code does not need to go into the core library of quill.

Simply because we should not dictate on how the colour pallete should be rendered and what colors should be available. It is extremely difficult to design something which fits everyone's desired look and feel/aesthetics/color selection arrangement.

[kairan77]

what need to be done is facilitate custom attribute on the infrastructure level, this way user can define their own custom attribute and implement their own hooks and be creative.

with such an infrastructure in place, highlights can be implemented by attribute injection on the fly with a custom description attribute defined by the user.

[adrian-moisa]

So the text background color is a standard feature of every rich text editor. I don't plan to interfere with that one and then that one is not suitable for the use cases I need. I need to be able to render markers even on top of text that already has a background color (similar to how the selection indicator works). I need to be able to toggle arbitrary sets of highlights with arbitrarily defined behaviours when hovering them.

For example I want to mark the chunks of content that are dedicated to expert users as so. And this toggle can be enabled conditionally on user preference from within my own app. Therefore VE needs to provide an API that can define these sets of markers + support to define them as attributes. They will be part of the delta text as attributes. On the other hand, the other feature called highlights will be available only by imperative commands on the controller for short-lived highlights (such as when showcasing the text found when using the search feature). These highlights don't need to live in the document itself.

[
  {
    "insert": "Lorem ipsum dolor sit amet.\n",
    "attributes": {
      "bold": true,
      "marker": {
        "type": "expert",
        "id": "UmSuvI9ZcP"
      }
    }
  }
]

Work in progress:

final SAMPLE_MARKERS_TYPES = [
  MarkerTypeM(
      id: 'UmSuvI9ZcP',
      name: 'Reminder',
      onEnter: (_) {
        print('Entering reminder marker 1');
      },
      onLeave: (_) {
        print('Leaving reminder marker 1');
      },
      onSingleTapUp: (_) {
        print('Tapped reminder marker 1');
      }
  ),
];

Create a new controller and provide the markers you desire.

final _controller = EditorController(
  document: doc,
  selection: const TextSelection.collapsed(offset: 0),
  markersTypes: SAMPLE_MARKERS_TYPES,
);

[kairan77]

great, looking forward to see this in place.

[adrian-moisa]

Finally reached a major milestone: Rendering the markers. Markers can be added from the toolbar, persisted in the document together with custom data and later retrieved on document init. They are useful for marking passages of text for various purposes. The list is fully customisable. I still have to work on several things: better rendering, removal, automatic testing, improved docs. So it will be some time until this feature is stable. For now I'm planning to merge the basic state of it. I'll keep you posted. After this one is done I'll slow down a bit my work on the VE. I'll be in vacation for a couple of weeks and then I have to push further with work on the Visual Space app. So Visual Editor will progress in parallel by adding features needed by the VS platform. There are still a ton of open tickets that I wish to allocate time into, but priority is becoming self sustainable via the VS app. So bear with me. Progress is happening.

Screen_Recording_2022-08-15_at_23.54.37.mov

As usual, I've been documenting the entire process. I'll be working on releasing the vids starting with September. I've got already quite some backlog. This one in particular will be highly informative, explaining many parts of how Visual Editor (Quill) works.

That's how the delta looks for markers:

First test drive

[adrian-moisa]

I will close this ticket, additional improvements will be done in standalone tickets