Efficiently applying text formatting on-the-fly by setting Spans onto EditText

Question

I'm using an EditText control that I allow text formatting of (bold, italics etc.).

To apply formatting, within my TextWatcher's AfterTextChanged event handler I detect whether a formatting style, such as bold, has been toggled on via the UI. If it is, I've tried two different approaches, neither of which are satisfactory for different reasons:

Approach 1

textView.EditableText.SetSpan(new StyleSpan(TypefaceStyle.Bold), start, end, SpanTypes.ExclusiveExclusive);

For the start value, I've tried using _textView.SelectionStart - 1 or the starting position when the StyleSpan was first applied. And for the end value _textView.SelectionStart.

Although the text appears formatted fine using this method, it creates unnecessary StyleSpans when only the single would suffice. This is clear when I try to save the text to my local db through a Html conversion:

string html = Html.ToHtml(new SpannableString(Fragment_Textarea.Instance().Textarea().EditableText));

For example, instead of this is bold text, I'm getting this is bold text. So, clearly, I'm doing something wrong/being inefficient in this approach. What obviously this leads to is eventual slowdowns when both inputting text as well as retrieving at launch.

Something I've considered is to check whether there's a Span on the preceding character (_textView.SelectionStart - 1), and, if yes, to remove the span, and then add a span that starts at that point up until _textView.SelectionStart i.e. ensures there's only a single Span by constantly checking/removing/adding the necessary Span. But this seems like another inefficient method to handle this.

Approach 2

textView.EditableText.SetSpan(new StyleSpan(TypefaceStyle.Bold), start, end, SpanTypes.ExclusiveInclusive);

So, this doesn't lead to the same inefficiencies as above, but because of the SpanTypes.ExclusiveInclusive flag, I'm unable to stop the style formatting to end when I toggle it off via the UI. In other words, when I toggle the Bold style on, all text that follows will be formatted in bold styling, even when I've turned its toggle off.

Of the two, this seems to me like the one that's the correct general approach, and so I'm wondering whether I can do anything to stop the style being applied as soon as I turn its toggle off. Or is there another way that I've missed altogether as best practice for handling this sort of requirement.

Both solutions, approach 1 and approach 2 sounds correct. I wonder why you think that the solution that you proposed to improve approach 1 is inefficient. It doesn't sound inefficient and i'd both try to see if it is laggy and also if possible measure (via benchmark lib?). Moreover you can use the same improvement when in approach 2 user turns off bold. At that point you can replace the existing inclusive span with a exc_exc. You might need approach 1 for user selecting a text and toggling the style. — Siyamed, Feb 15 '20 at 16:35
Thanks for the validation and suggestion too Siyamed. Since my original post and your reply, I was actually thinking of exactly what you proposed in terms of swapping the exc_inc span with an exc_exc one. My reluctance was purely from a feeling that creating a span and then replacing it on every toggle switch seems more inefficient compared to a way to achieve the same but without requiring a span switch. But I guess there's no better (and therefore more efficient) way to pull this off. — Barrrdi, Feb 16 '20 at 13:54
So exc_exc looks like the right solution here, but you will want to track the start of the span with the hitting of the toggle after a character is entered to start that span. You shouldn't be applying an entire span to an individual character. The listener used is fine too, but I imagine on the string that you might be seeing the unformatted string on the screen for a moment? I'd be interested to know. — childofthehorn, Feb 18 '20 at 18:49
Nope, the unformatted string wasn't noticeable, even for a moment. Not previously when the span was being applied to every character, nor now when I performed the changes needed to optimise (which I'll write about separately). — Barrrdi, Feb 21 '20 at 13:59

score 1 · Accepted Answer · answered Feb 21 '20 at 14:19

So, I ended up taking quite a different approach by moving the responsibility of setting the span to when the button on the Toolbar to active a style is toggled (as opposed to in any of the text changed listeners).

For example, when the bold style is toggled on, its event handler runs hitting the following code:

int start = _textarea.SelectionStart - 1;
var spanType = SpanTypes.ExclusiveInclusive;
_textarea.EditableText.SetSpan(new StyleSpan(TypefaceStyle.Bold), start, _textarea.SelectionStart, spanType);

The span type needs to be ExclusiveInclusive as suggested above. The trick is to change this as soon as the style has been toggled off. This is relatively straightforward if you're typing in bold and then turn the style off (just a matter of finding the span, removing it and then adding a new span with same start/end points but that's ExcExc). But I needed the code to be more flexible and account for a situation whereby you may later decide to type within the span text of another style. For example, let's say I start with:

This is bold text

But then I edit and want to change it to:

This is bold yes text

In such a scenario, I need to make sure I create an ExclusiveExclusive bold span on either side of the "yes". :

int start = -1;
int end = -1;
List<Tuple<int, int>> respans = new List<Tuple<int, int>>(); 

// go through all relevant spans that start from -1 indices ago
var spans = _textarea.EditableText.GetSpans(_textarea.SelectionStart - 1, _textarea.SelectionStart, Class.FromType(typeof(StyleSpan)));
if (spans.Length > 0)
{
    for (int u = 0; u < spans.Length; u++)
    {
        // found a matching span!
        if (((StyleSpan)spans[u]).Style == TypefaceStyle.Bold)
        {
            // get the starting and ending indices for the iterated span
            start = _textarea.EditableText.GetSpanStart(spans[u]);
            end = _textarea.EditableText.GetSpanEnd(spans[u]);

            // remove the span
            _textarea.EditableText.RemoveSpan(spans[u]);

            // if the current index is less than when this iterated span ended
            // and greater than when it started
            // then that means non-bold text is being inserted in the middle of a bold span
            // that needs to be split into 2 (before current index + after current index)
            if (_textarea.SelectionStart > start && _textarea.SelectionStart < end)
            {
                respans.Add(new Tuple<int, int>(start, _textarea.SelectionStart - 1));
                for(int c = _textarea.SelectionStart + 1; c < _textarea.Length(); c++ )
                {
                    if(_textarea.Text[c] != ' ' )
                    {
                        respans.Add(new Tuple<int, int>(c, end));
                        break;
                    }
                }
            }
            // otherwise, the recreated span needs to start and end when the iterated did
            // with one important change in relation to its span type
            else
            {
                respans.Add(new Tuple<int, int>(start, end));
            }
        }
    }

    // if there are 1 or more spans that need to be restored,
    // go through them and add them back according to start/end points set on their creation
    // as an ExclusiveExclusive span type
    if( respans.Count > 0 )
    {
        foreach( Tuple<int,int> tp in respans )
        {
            _textarea.EditableText.SetSpan(new StyleSpan(TypefaceStyle.Bold), tp.Item1, tp.Item2, SpanTypes.ExclusiveExclusive);
        }
    }
}

This seems to be doing the job: spans are created/managed when the UI is interacted with (and not text changed)

Efficiently applying text formatting on-the-fly by setting Spans onto EditText

1 Answers1