How to Add Word Highlighting in Flutter Super Editor?

[KhaledEzzet]

Hi and thank you for this amazing package!

I'm currently exploring Flutter Super Editor and trying to implement a feature that allows highlighting specific words or ranges of text (e.g. change background color or add styles like Apple Notes). However, I've tried multiple approaches and wasn't able to achieve the desired result.

Could you please guide me on the best way to implement word or range highlighting within the Super Editor? Is there a recommended approach or extension point to use for this use case?

Any help or example would be greatly appreciated. Thanks again for your great work on this project!

[JostSchenck]

You should start by adding an Attribution to the text that is supposed to be highlighted, a HighlightedAttribution for example. The attribution itself, however, does not contain any information about highlighting and it is not where it is implemented -- it's just the info, that this text between two positions carries this attribution. If you have that, the easiest way of highlighting the text is by specifying a custom stylesheet. Say, you have your own stylesheet based on a default stylesheet, you could go like this:

final myStyleSheet = defaultStylesheet.copyWith(
  inlineTextStyler: (attributions, existingStyle) {
    TextStyle style = defaultInlineTextStyler(attributions, existingStyle);

    if (attributions.any((a) => a is HighlightedAttribution)) {
      style = style.copyWith(
        backgroundColor: Color(0xFFF8EF3B),
      );
    }
    return style;
  },
);

You can pass this stylesheet to your SuperEditor widget.

This is the easiest way, if a highlighted background color and maybe a changed text color (for contrast) is all you want. If you want fancy stuff like rounded border, tooltips over highlighted text etc. it get's more complicated and you will likely have to build some Underlay/Overlay objects. I'd go with stylesheet for now and see how far that works for you.

[KhaledEzzet]

Thanks a lot for the detailed explanation! That really helped clarify how the Attribution and inlineTextStyler work — much appreciated 🙏

I’d like to ask a follow-up:
In my case, I’m trying to build something similar to Apple Notes where users can not only highlight text but also apply different styles like underlining, outlining, or using multiple highlight colors — each representing different meanings or categories.

Is it possible to support that level of customization with SuperEditor? For example:

Yellow background for general highlights

Blue underline for important notes

Red outline for warnings or attention

Would this be manageable using custom Attribution classes and stylesheets? Or would I need to go deeper with overlays or another approach?

Thanks again for your time and awesome support! 🙌

[JostSchenck]

That should be no problem just with stylesheets, just create different attributions and style them. I found Over/Underlays to be necessary when you try to achieve fancy highlights (rounded corners etc) or on-mouse-hover tooltips. KhaledEzzet ***@***.***> schrieb am Sa., 31. Mai 2025, 14:24:

…

Thanks a lot for the detailed explanation! That really helped clarify how the Attribution and inlineTextStyler work — much appreciated 🙏 I’d like to ask a follow-up: In my case, I’m trying to build something similar to Apple Notes where users can not only highlight text but also apply different styles like underlining, outlining, or using multiple highlight colors — each representing different meanings or categories. Is it possible to support that level of customization with SuperEditor? For example: Yellow background for general highlights Blue underline for important notes Red outline for warnings or attention Would this be manageable using custom Attribution classes and stylesheets? Or would I need to go deeper with overlays or another approach? Thanks again for your time and awesome support! 🙌 — Reply to this email directly, view it on GitHub <#2691 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC4BBGLYJ375DABMDG662QL3BGNPZAVCNFSM6AAAAAB56U7R3CVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZSHA4DSNQ> . You are receiving this because you commented.Message ID: ***@***.*** com>