Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3.0.0] Migration to fully native components #92

Open
tneotia opened this issue Jul 23, 2021 · 3 comments
Open

[3.0.0] Migration to fully native components #92

tneotia opened this issue Jul 23, 2021 · 3 comments
Labels
enhancement New feature or request

Comments

@tneotia
Copy link
Owner

tneotia commented Jul 23, 2021

Hello all, the PR at flutter/flutter#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 tneotia added the enhancement New feature or request label Jul 23, 2021
@tneotia tneotia pinned this issue Jul 23, 2021
@tneotia
Copy link
Owner Author

tneotia commented Jul 28, 2021

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.

image

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
Copy link
Owner Author

tneotia commented Aug 31, 2022

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

@Alspb
Copy link

Alspb commented May 14, 2023

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants