Explore how to improve the integration of the Rich Text Editor

[jmartinesp]

Your use case

What would you like to do?

Improve the way the RTE is integrated in the EAX project as the main message composer.

Why would you like to do it?

The current implementation uses an EditText based implementation wrapped in a composable component using an AndroidView. This is not ideal and has been a source of issues in the past.

How would you like to achieve it?

That's the difficult part. The RTE for Android is composed by 2 libraries:

1. The Rust RTE library, that does most of the work around building the Dom tree based on the user input and exports HTML/Markdown.
2. The Android library, that acts as a bridge between the Android OS and UI and this Rust library.

This Android library contains a user input interceptor, the actual UI component, an index mapping system between Android and the RTE, an HTML to spans parser, and some other utilities. Long story short, if we do a Compose version of the library, we need to re-implement all of those, because all of those components are built around EditText and Spans, which aren't used by Compose at all.

So we would have to:

• Create another TextInputService interceptor. This should be possible by overriding the returned value of LocalTextInputService.current, but it might not be that easy as we also probably need to wrap the default one to handle compositions correctly. At least that was the case with EditText, but it might work out of the box in Compose.
• Create the actual UI component based on TextField and AnnotatedStrings.
• Re-write the HTML parsing to use AnnotatedStrings instead of Spans, and re-implement our custom Spans as AnnotatedStrings too. This could be tricky for block spans (code block, quote, list items) but I haven't really explored those APIs yet, so it might be easier than expected.

Basically, we would be re-writing the Android library almost from scratch, so we need to decide if it's really worth it.

Have you considered any alternatives?

Keep using the EditText approach and try to fix the corner cases when using it inside Compose.

Additional context

No response

Are you willing to provide a PR?

Yes

[bmarty]

Thanks for creating the issue!

It's also worth noting that EAx uses RichTextComposerLayout class, and the XML layout composer_rich_text_layout.xml, which have been copy pasted form EA, to handle the Rich text composer buttons. The reason is that we wanted to integrate the composer very fast (and it was very fast!).

At some point this will have to be converted as @Composable as well, maybe when we will have a design for EAx for this part.

Once done, some cleanup can be done, like removing the legacy Android theme which has also been imported.

[jmartinesp]

If we just want to replace the XML layout and RichTextComposerLayout class, this should be a lot easier.

Also, during the weekend it seems like Google decided to make this possible re-write a lot easier: r.android.com/2406439.

[jonnyandrew]

@jmartinesp @bmarty is this issue still relevant to EXA now that the RTE provides a composable implementation (matrix-org/matrix-rich-text-editor#315)? The library does still use AndroidView under the hood but, as this implementation detail no longer impacts on the host app, I think we may be able to close?