[3.0.0] Migration to fully native components

[tneotia]

Hello all, the PR at https://github.com/flutter/flutter/pull/83537 now enables support for rich content (ie any widget under the sun) inside the stock editable text. This is absolutely huge for the future of rich text editors and I plan to try and use these new features to make a more native-feeling solution for HTML.

I am not saying that it will be possible to make an HTML editor using native components, however. There will need to be a fairly robust parser mechanism to convert a Flutter widget tree back into an HTML widget tree. Thankfully we already have parsers like flutter_html to do it the opposite direction and support initialText.

If anyone has any ideas or feature requests feel free to drop them below. This issue may be open for a while as I try and work on this, and again, there is no guarantee this will come to fruition. Though I will certainly try!

I appreciate all the support I have had so far on this package, much more to come ♥️

[tneotia]

I messed around with EditableText for a little bit and yes, it does support rich content, but as far as I can tell there is no relatively simple way to accomplish the editing of ranges or the insertion of new content.

As you can see I was able to add bold and italic and thin text, but I had to hardcode this as a parameter in the constructor of the widget:

AnnotatedEditableText(
  style: Theme.of(context).textTheme.bodyText1!,
  controller: controller,
  focusNode: node,
  backgroundCursorColor: Colors.amber,
  cursorColor: Colors.green,
  annotations: [
    Annotation(range: TextRange(start: 1, end: 2), style: TextStyle(fontWeight: FontWeight.w100)),
    Annotation(range: TextRange(start: 2, end: 5), style: TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic))
  ],
)

I have yet to try making annotations an updatable variable but that might be a hacky solution? Just worried about performance with larger texts with fancy elements like videos if updating that variable will repaint the entire contents of the editable. Also I am worried that it may not remember things like the current user selection or user caret position, but these may be things that can be stored and then restored on my end.

[tneotia]

https://flutter.github.io/samples/rich_text_editor.html

[Alspb]

Seems that some rich text editors, built with native components, already exist. The most popular and feature-rich among them is flutter_quill. The problem is that the formats they use (typically, markdown or delta) are much simpler than html and therefore have less functionality. So, it's possible to convert, for example, delta to html, but converting html to delta without loosing an information is harder. But potentially it should be possible, for instance, <script> tags cold be converted to some "code" elements (looking like source code inserted by user into the rich text editor).