fix: #814

frontend/app_flowy/packages/flowy_editor/example/lib/main.dart

@@ -63,7 +63,10 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: _buildBody(),
+      body: Container(
+        alignment: Alignment.topCenter,
+        child: _buildBody(),
+      ),
       floatingActionButton: _buildExpandableFab(),
     );
   }

frontend/app_flowy/packages/flowy_editor/lib/src/render/rich_text/flowy_rich_text.dart

@@ -44,7 +44,6 @@ class _FlowyRichTextState extends State<FlowyRichText> with Selectable {
   final _placeholderTextKey = GlobalKey();
 
   final _lineHeight = 1.5;
-  double? _cursorHeight;
 
   RenderParagraph get _renderParagraph =>
       _textKey.currentContext?.findRenderObject() as RenderParagraph;
@@ -57,13 +56,6 @@ class _FlowyRichTextState extends State<FlowyRichText> with Selectable {
     return _buildRichText(context);
   }
 
-  @override
-  void didUpdateWidget(covariant FlowyRichText oldWidget) {
-    super.didUpdateWidget(oldWidget);
-
-    _cursorHeight = null;
-  }
-
   @override
   Position start() => Position(path: widget.textNode.path, offset: 0);
 
@@ -76,16 +68,18 @@ class _FlowyRichTextState extends State<FlowyRichText> with Selectable {
     final textPosition = TextPosition(offset: position.offset);
     final cursorOffset =
         _renderParagraph.getOffsetForCaret(textPosition, Rect.zero);
-    _cursorHeight ??= widget.cursorHeight ??
+    final cursorHeight = widget.cursorHeight ??
         _renderParagraph.getFullHeightForCaret(textPosition) ??
         _placeholderRenderParagraph.getFullHeightForCaret(textPosition) ??
-        18.0; // default height
+        16.0; // default height
-    return Rect.fromLTWH(
+
+    final rect = Rect.fromLTWH(
       cursorOffset.dx - (widget.cursorWidth / 2),
       cursorOffset.dy,
       widget.cursorWidth,
-      _cursorHeight!,
+      cursorHeight,
     );
+    return rect;
   }
 
   @override
@@ -148,24 +142,13 @@ class _FlowyRichTextState extends State<FlowyRichText> with Selectable {
   }
 
   Widget _buildPlaceholderText(BuildContext context) {
-    final textSpan = TextSpan(
+    final textSpan = _placeholderTextSpan;
-      children: [
-        TextSpan(
-          text: widget.placeholderText,
-          style: TextStyle(
-            color: widget.textNode.toRawString().isNotEmpty
-                ? Colors.transparent
-                : Colors.grey,
-            fontSize: baseFontSize,
-            height: _lineHeight,
-          ),
-        ),
-      ],
-    );
     return RichText(
       key: _placeholderTextKey,
-      text: widget.placeholderTextSpanDecorator != null
+      textHeightBehavior: const TextHeightBehavior(
-          ? widget.placeholderTextSpanDecorator!(textSpan)
+          applyHeightToFirstAscent: false, applyHeightToLastDescent: false),
+      text: widget.textSpanDecorator != null
+          ? widget.textSpanDecorator!(textSpan)
           : textSpan,
     );
   }
@@ -219,4 +202,14 @@ class _FlowyRichTextState extends State<FlowyRichText> with Selectable {
                 ).toTextSpan())
             .toList(growable: false),
       );
+
+  TextSpan get _placeholderTextSpan => TextSpan(children: [
+        RichTextStyle(
+          text: widget.placeholderText,
+          attributes: {
+            StyleKey.color: '0xFF707070',
+          },
+          height: _lineHeight,
+        ).toTextSpan()
+      ]);
 }

frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/whitespace_handler.dart

@@ -39,8 +39,8 @@ FlowyKeyEventHandler whiteSpaceHandler = (editorState, event) {
     return _toCheckboxList(editorState, textNode);
   } else if (_bulletedListSymbols.any(text.startsWith)) {
     return _toBulletedList(editorState, textNode);
-  } else if (_countOfSign(text) != 0) {
+  } else if (_countOfSign(text, selection) != 0) {
-    return _toHeadingStyle(editorState, textNode);
+    return _toHeadingStyle(editorState, textNode, selection);
   }
 
   return KeyEventResult.ignored;
@@ -99,8 +99,12 @@ KeyEventResult _toCheckboxList(EditorState editorState, TextNode textNode) {
   return KeyEventResult.handled;
 }
 
-KeyEventResult _toHeadingStyle(EditorState editorState, TextNode textNode) {
+KeyEventResult _toHeadingStyle(
-  final x = _countOfSign(textNode.toRawString());
+    EditorState editorState, TextNode textNode, Selection selection) {
+  final x = _countOfSign(
+    textNode.toRawString(),
+    selection,
+  );
   final hX = 'h$x';
   if (textNode.attributes.heading == hX) {
     return KeyEventResult.ignored;
@@ -121,9 +125,9 @@ KeyEventResult _toHeadingStyle(EditorState editorState, TextNode textNode) {
   return KeyEventResult.handled;
 }
 
-int _countOfSign(String text) {
+int _countOfSign(String text, Selection selection) {
   for (var i = 6; i >= 0; i--) {
-    if (text.startsWith('#' * i)) {
+    if (text.substring(0, selection.end.offset).startsWith('#' * i)) {
       return i;
     }
   }