[Bug] Images Add Unnecessary Editor Height

[garv-shah]

Bug Description

This is a rather niche use case, but when images are added to the editor when shrink wrap is enabled, the editor seems to be much longer than it normally is. This might have something to do with the resizing of images, but it makes the document extremely long.

How to Reproduce

Add an image to a document and observe that you can scroll much more than you normally would be able to.

Expected Behavior

For the shrinkWrap behaviour to restrict the editor's height to the correct amount

Operating System

Web

AppFlowy Editor Version(s)

main branch

Screenshots

https://github.com/AppFlowy-IO/appflowy-editor/assets/64292655/ec9fd377-28e8-467a-b937-b21040565ed3

Additional Context

No response

[LucasXu0]

@garv-shah, it looks odd. Could you use the widget inspector to check where the padding is coming from?

[garv-shah]

Using the inspector, it seems to be something to do with the height of the column:

None of the individual BlockComponentContainers seem to be contributing to the height

[LucasXu0]

It's odd. Could you provide the minimal code that can reproduce it?

[garv-shah]

Hi @LucasXu0, sorry for the wait, here you go!

import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: const [
        AppFlowyEditorLocalizations.delegate,
      ],
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final editorState = EditorState.blank(withInitialText: true);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          SingleChildScrollView(
            child: IntrinsicHeight(
              child: AppFlowyEditor(
                shrinkWrap: true,
                editorState: editorState,
              ),
            ),
          ),
          const Text("Some text underneath the editor!"),
        ],
      ),
    );
  }
}

And here's a video of running the sample app with the code above, using this image:

https://github.com/AppFlowy-IO/appflowy-editor/assets/64292655/3230fb01-09e1-4366-8b64-29e9b5867bb4

👍

[Xazin]

Seems to come from lib\src\flutter\scrollable_positioned_list\src\positioned_list.dart

More specifically it's either caused by the RepaintBoundary on the SliverList, or from the IndexedStack on the child item.