[Web] Impossible to make an empty line

[NicolasDionB]

I'm having a weird issue in my editor, if I press Enter multiple times, it will only change line but will not put more (empty) lines. I can't reproduce this in the example, that's why I didn't open an issue for that. But I'm trying to figure out what could impact the editor rendering in such a way.

I output the changes and document json and the multiple carriage return are there but not displayed in the editor.

Document delta:

[{"insert":"a\n\n\n\n\nb\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nc\n"}]

Actual display:

I'm using Flutter 2.8.1, with the latest Flutter Quill 3.8.3, running on Chrome.

Here's my widget editor build:

Widget build(BuildContext context) {
  // ... Variables initialization

  return Positioned(
    left: position.dx,
    top: position.dy,
    child: ClipRect(
      child: GestureDetector(
        onPanDown: (_) => null, // Prevent document drag in editor zone
        onDoubleTap: () => null, // Prevent document zoom in editor zone
        child: SizedBox(
          width: annotationBoundaries.width,
          height: annotationBoundaries.height,
          child: RepaintBoundary(
            child: QuillEditor(
              controller: _editor.quillController,
              scrollController: _scrollController,
              maxHeight: annotationBoundaries.height,
              scrollable: true,
              focusNode: _focusNode,
              autoFocus: true,
              readOnly: false,
              expands: false,
              customStyles: theme.textAnnotationTheme.editorStyles,
              padding: TextAnnotationTheme.PADDING,
              enableInteractiveSelection: true,
            ),
          ),
        ),
      ),
    ),
  );
}

In case you're wondering why the GestureDetector is there, it's because I'm displaying the editor in a InteractiveViewer widget so I want to block zoom and drag gestures.

[HUA616436641]

I solved it by replacing a new line with a special char when rendering，otherwise its height is 0

[NicolasDionB]

Interesting, where did you find this code? I can find the _buildTextSpan in the TextLine class but the method body is different. But there must be more to it since it's working fine in the example, just not in my use case. Where would you put the fix in FlutterQuill source itself? A PR for that would be awesome!

[HUA616436641]

来信已收到！

[NicolasDionB]

"Message received"? 😁

[HUA616436641]

It looks like a bug in flutter，and It has been fixed in the latest version

[NicolasDionB]

I tried with Flutter 2.10.1 and Flutter Quill 4.0.0 and still have the issue. No fix yet. I did some more, deeper investigation, and the RichText line is really rendering a 0 pixels height. All the empty lines are there but not taking any vertical space. I can play with verticalSpacing on the paragraph style to make them more visible but that also, of course, impacts all other paragraph which is not what I intend to do.

[NicolasDionB]

@HUA616436641 Is it possible to contribute with your fix on the project?

[NicolasDionB]

I've managed to get a somewhat functional modification but it's not perfect. I adapted @HUA616436641's proposition and put it in the Controller class. It does inserts new line but also an invisible char, obviously, making the deletion act weird as we have to hit backspace twice to get rid of the empty line... I don't think it's a viable solution but maybe this could help getting new ideas:

[HUA616436641]

I run the example in the latest version with flutter 2.10，and it work fine，did you do any change to the source code？

flutter-quill 4.0.2

[HUA616436641]

[NicolasDionB]

@HUA616436641 As I mentioned, I did not reproduce the problem using the example app. I did get deep in the text rendering and I still don't see what could make a RichText line have a height of 0. Even using the default styles I have the issue. I though that maybe the locale could be partly responsible here but even after changing it back to the default "en-US" I think, I get the same result.

[NicolasDionB]

I figured out why I have a different behavior on this, and other things, vs the example app: the rendering mode. I my project, we forced html rendering over canvaskit. We did recent developements and had to enable canvaskit instead and surprise: everything is back to normal!

So if I force html rendering (adding --web-renderer html argument), I can reproduce the problem in the example. So the fix is to force canvaskit.

[xinyuezhang0402]

PR is welcome

[HUA616436641]

@NicolasDionB pr opened #705

[NicolasDionB]

@xinyuezhang0402 Actually, there is no need for a PR as both html and canvaskit are supported rendering mode for flutter web. A fix for the html rendering would still be required, ideally, but personally I have no idea how to fix that.

[HUA616436641]

I have already make a issue to flutter flutter/flutter#99845

[kairan77]

@NicolasDionB，could you please kindly check if CTRL+F and search works on the editor content if you force canvasKit rendering?

[NicolasDionB]

@kairan77 Yes it works. Canvaskit is the default rendering mode for web on desktop so unless you specify html, it is canvaskit.

[kairan77]

@NicolasDionB Thanks!

[HUA616436641]

来信已收到！