feat: add auto expanded editor showcase (#920)

example/lib/home_page.dart

@@ -5,6 +5,7 @@ import 'dart:math';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:example/pages/auto_complete_editor.dart';
+import 'package:example/pages/auto_expand_editor.dart';
 import 'package:example/pages/collab_editor.dart';
 import 'package:example/pages/collab_selection_editor.dart';
 import 'package:example/pages/customize_theme_for_editor.dart';
@@ -251,6 +252,17 @@ class _HomePageState extends State<HomePage> {
             );
           }),
 
+          _buildListTile(context, 'Auto Expand Editor', () {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => AutoExpandEditor(
+                  editorState: EditorState.blank(),
+                ),
+              ),
+            );
+          }),
+
           // Encoder Demo
           _buildSeparator(context, 'Export To X Demo'),
           _buildListTile(context, 'Export To JSON', () {

example/lib/pages/auto_expand_editor.dart

@@ -0,0 +1,76 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+
+class AutoExpandEditor extends StatelessWidget {
+  const AutoExpandEditor({
+    super.key,
+    required this.editorState,
+  });
+
+  final EditorState editorState;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.black,
+        title: const Text('Custom Theme For Editor'),
+        titleTextStyle: const TextStyle(color: Colors.white),
+        iconTheme: const IconThemeData(
+          color: Colors.white,
+        ),
+      ),
+      body: SafeArea(
+        child: Center(
+          child: IntrinsicHeight(
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                border: Border.all(color: Colors.grey),
+              ),
+              constraints: const BoxConstraints(
+                maxHeight: 360,
+                maxWidth: 400,
+              ),
+              child: SingleChildScrollView(
+                child: IntrinsicHeight(
+                  child: AppFlowyEditor(
+                    editorState: editorState,
+                    disableAutoScroll: true,
+                    shrinkWrap: true,
+                    editorStyle: const EditorStyle.desktop(
+                      padding: EdgeInsets.symmetric(horizontal: 8),
+                    ),
+                    blockComponentBuilders: _buildBlockComponentBuilders(),
+                    editorScrollController: EditorScrollController(
+                      editorState: editorState,
+                      shrinkWrap: true,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Map<String, BlockComponentBuilder> _buildBlockComponentBuilders() {
+    return standardBlockComponentBuilderMap.map(
+      (key, value) {
+        // hide the placeholder for all block components
+        // and customize the padding for all block components
+        value.configuration = value.configuration.copyWith(
+          placeholderText: (_) => '',
+          padding: (_) => const EdgeInsets.symmetric(
+            vertical: 2,
+          ),
+        );
+        // hide the actions for all block components
+        value.showActions = (_) => false;
+        return MapEntry(key, value);
+      },
+    );
+  }
+}