fix: placeholder on paragraph when selected (#390)

* fix: placeholder on paragraph when selected Closes: #380 * fix: review comment
AppFlowy-IO · Aug 17, 2023 · 61be737 · 61be737
1 parent 56474e8
commit 61be737
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/lib/src/editor/block_component/standard_block_components.dart b/lib/src/editor/block_component/standard_block_components.dart
@@ -6,7 +6,9 @@ const standardBlockComponentConfiguration = BlockComponentConfiguration();
 final Map<String, BlockComponentBuilder> standardBlockComponentBuilderMap = {
   PageBlockKeys.type: PageBlockComponentBuilder(),
   ParagraphBlockKeys.type: TextBlockComponentBuilder(
-    configuration: standardBlockComponentConfiguration,
+    configuration: standardBlockComponentConfiguration.copyWith(
+      placeholderText: (_) => 'Enter a / to insert a block, or start typing',
+    ),
   ),
   TodoListBlockKeys.type: TodoListBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(

diff --git a/lib/src/editor/block_component/text_block_component/text_block_component.dart b/lib/src/editor/block_component/text_block_component/text_block_component.dart
@@ -101,6 +101,29 @@ class _TextBlockComponentWidgetState extends State<TextBlockComponentWidget>
   @override
   Node get node => widget.node;
 
+  bool _showPlaceholder = false;
+
+  @override
+  void initState() {
+    super.initState();
+    editorState.selectionNotifier.addListener(_onSelectionChange);
+    _onSelectionChange();
+  }
+
+  @override
+  void dispose() {
+    editorState.selectionNotifier.removeListener(_onSelectionChange);
+    super.dispose();
+  }
+
+  void _onSelectionChange() {
+    setState(() {
+      final selection = editorState.selection;
+      _showPlaceholder = selection != null &&
+          (selection.isSingle && selection.start.path.equals(node.path));
+    });
+  }
+
   @override
   Widget buildComponent(BuildContext context) {
     final textDirection = calculateTextDirection(
@@ -120,14 +143,11 @@ class _TextBlockComponentWidgetState extends State<TextBlockComponentWidget>
             key: forwardKey,
             node: widget.node,
             editorState: editorState,
-            placeholderText: placeholderText,
-            textSpanDecorator: (textSpan) => textSpan.updateTextStyle(
-              textStyle,
-            ),
+            placeholderText: _showPlaceholder ? placeholderText : ' ',
+            textSpanDecorator: (textSpan) =>
+                textSpan.updateTextStyle(textStyle),
             placeholderTextSpanDecorator: (textSpan) =>
-                textSpan.updateTextStyle(
-              placeholderTextStyle,
-            ),
+                textSpan.updateTextStyle(placeholderTextStyle),
             textDirection: textDirection,
           ),
         ],