[web] All inserted widgets in editor (e.g. image) has been rebuilding constantly

[radoslaw-sz]

Hello,

I would like to ask about whether it is a editor nature (and its internal limitation) or could be improved.
When I am entering new line by clicking enter (or pasting new image or other action) the inserted image (and every custom widget which I have inserted) is being rebuilt every time when such action appears.
It looks like every action which I mentioned (new line etc.) causes that the whole editor executes embedBuilder and create new instances of inserted widgets (i.e. image).
Do you see any chance which could improve this situation?

[singerdmx]

@rish07 do you know anything about it?

[singerdmx]

Fixed by 54c3eb4

Please reopen if it still exists

[radoslaw-sz]

@singerdmx I would like to reopen this issue, because it is still visible in 1.0.9 version. The video shows the blinking image when I am adding new line..

blinking.image.mp4

[ellet0]

I can confirm there still such issues in the latest versions

[rish07]

Hey @singerdmx, i am busy with my exams rn, will take a look after them.

[radoslaw-sz]

hello @rish07
I know exams are more important than this plugin, but I am wondering if you had time to take a look at that :)
Or at least maybe you have some tip how "rendering" of inserted objects are done by this plugin - maybe it would help me to find the problematic part of the code.

PS. I think it might be not only relevant to Web, but this is only my suspicious.

[rish07]

[radoslaw-sz]

From what I checked, it looks like the basic assumptions might be problematic.
I debugged this case and from what I understand every "new line" makes all children rebuilding:

  void _didChangeTextEditingValue([bool ignoreFocus = false]) {
    if (kIsWeb) {
      _onChangeTextEditingValue(ignoreFocus);
      if (!ignoreFocus) {
        requestKeyboard();
      }
      return;
    }

    if (ignoreFocus || _keyboardVisible) {
      _onChangeTextEditingValue(ignoreFocus);
    } else {
      requestKeyboard();
      if (mounted) {
        setState(() {
          // Use widget.controller.value in build()
          // Trigger build and updateChildren
        });
      }
    }
  }

It wouldn't be so bad, but at the same time QuillEditor takes every new line as TextLine widget and evaluate what need to be inserted - whether it shall be a text or some embed object. If embed - then it uses embedBuilder to create new object.

Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));

    if (line.hasEmbed) {
      final embed = line.children.single as Embed;
      return EmbedProxy(embedBuilder(context, embed));
    }

In other words - it returns new instance of image.
At this moment I do not have a good idea how to solve it, but I am just letting you know what I have analyzed.

[radoslaw-sz]

I can make an update to this, as I have tried analyze it deeper.
I am not an expert in flutter framework, so I can't say whether my assumption is correct, but I have noticed that even if I remember the embed widget in RawEditor in some map, and then put it in the list again when "_buildChildren" is being executed, nothing changed (widget is being rebuild anyway). I have checked the implementation of "_buildChildren" in RawEditor and it returns List which is put finally in "MultiChildRenderObjectWidget". Every time, when new line is added, then new list of widgets is put in "MultiChildRenderObjectWidget". I have tried even give key for every widget (EditableTextLine), but nothing changed... ;(

[hoangsang17th]

Did you fix this problem?

[rsegecin]

_onChangeTextEditingValue from RawEditor is being triggered by every mouse and keyboard event that calls setState triggering rebuild of the whole Widget. A base building block of Quill editor is the TextLine that includes embedded callbacks which inserts Images and Videos. To update the editor properly I think it would required to expose an update method or a Notifier from the TextLine or maybe RenderEditableTextLine (don't know which one or neither of them would be better) so the RawEditor can update only the necessary Lines. But the way it was programmed I don't think its a very straight forward process. I think also it should be considered having a Notifier to separate the TextLine's build process from the cursor, so when triggered it can rebuild the cursor position without rebuilding the rest of the line if there's nothing to be rebuilt. If anyone could tell me on what I'm wrong or if in the right track it would be very helpful.

[hoangsang17th]

Any code for this solution?

[krishnagandrath]

Any update on this issue yet?

[L0Kl]

Today, I experimented quite a bit with the QuillEditorWebImageEmbedBuilder. It works well for the most part, and the "flickering" doesn't occur. However, the challenge that arises is that you can only specify a fixed BoxConstraint for all images in the document. Having two images of different sizes disrupts the layout.

I tried to make the BoxConstraints adjustable during the building process, depending on which image is currently being built. However, this led back to the "flickering" issue because it took some time to extract the height and width of the image via HTML.

If anyone finds a way to scale the BoxConstraints of the QuillEditorWebImageEmbedBuilder variably according to the image size, this problem would also be solved on the web.

Maybe something like this:

    final ((imageSize), margin, alignment) = getElementAttributes(
      node,
      context,
    );

....

   return ConstrainedBox(
      constraints: BoxConstraints.tightFor(
          width: imageSize.width, height: imageSize.height),
      child: HtmlElementView(viewType: imageSource),
   );

In my case, it didn't work because imageSize.height and imageSize.width were null.

[L0Kl]

I have now solved it for my use case. I adapted the QuillEditorWebImageEmbedBuilder in flutter_quill_extensions so that the height and width of every image from the base64 string are extracted and given to the image as constraints when it is built.
When placing multiple images in the text, the editor becomes somewhat slower, but the user experience still improves if the "flickering" no longer occurs:

import 'dart:convert';

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/widgets.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:image/image.dart' as img;
import 'package:universal_html/html.dart' as html;

import '../../../utils/dart_ui/dart_ui_fake.dart'
    if (dart.library.html) '../../../utils/dart_ui/dart_ui_real.dart' as ui;
import '../../../utils/utils.dart';

class QuillEditorWebImageEmbedBuilder extends EmbedBuilder {
  const QuillEditorWebImageEmbedBuilder();

  @override
  String get key => BlockEmbed.imageType;

  @override
  bool get expanded => false;

  @override
  Widget build(
    BuildContext context,
    QuillController controller,
    Embed node,
    bool readOnly,
    bool inline,
    TextStyle textStyle,
  ) {
    assert(kIsWeb, 'ImageEmbedBuilderWeb is only for web platform');

    double imageWidth = 200;
    double imageHeight = 200;

    var imageSource = node.value.data.toString();

    // This logic make sure if the image is imageBase64 then
    // it make sure if the pattern is like
    // data:image/png;base64, [base64 encoded image string here]
    // if not then it will add the data:image/png;base64, at the first
    if (isImageBase64(imageSource)) {
      // Sometimes the image base 64 for some reasons
      // doesn't displayed with the 'data:image/png;base64'
      if (!(imageSource.startsWith('data:image/') &&
          imageSource.contains('base64'))) {
        imageSource = 'data:image/png;base64, $imageSource';
      }
    }

    var base64Content = imageSource.split(',')[1];
    var imageBytes = base64Decode(base64Content);
    img.Image? image = img.decodeImage(imageBytes);
    if (image != null) {
      imageWidth = image.width as double;
      imageHeight = image.height as double;
    }

    ui.PlatformViewRegistry().registerViewFactory(imageSource, (viewId) {
      return html.ImageElement()
        ..src = imageSource
        ..style.height = 'auto'
        ..style.width = 'auto'
        ..attributes['loading'] = 'lazy';
    });

    return ConstrainedBox(
      constraints:
          BoxConstraints.tightFor(width: imageWidth, height: imageHeight),
      child: HtmlElementView(viewType: imageSource),
    );
  }
}

And in my flutter project it looks like this:

child: quill.QuillEditor.basic(
   configurations: quill.QuillEditorConfigurations(
   controller: controller,
   readOnly: loading,
   embedBuilders: [quillex.QuillEditorWebImageEmbedBuilder()],
   sharedConfigurations: const quill.QuillSharedConfigurations(
   locale: Locale('de'),
   ),
),