feat: add placeholder to card editor (#3870)

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_document.dart

@@ -116,6 +116,10 @@ class _RowEditorState extends State<RowEditor> {
                           context: context,
                           padding: const EdgeInsets.symmetric(horizontal: 10),
                         ),
+                        showParagraphPlaceholder: (editorState, node) =>
+                            editorState.document.isEmpty,
+                        placeholderText: (node) =>
+                            LocaleKeys.cardDetails_notesPlaceholder.tr(),
                       ),
                     ),
                   );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart

@@ -11,6 +11,8 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
   required EditorStyleCustomizer styleCustomizer,
   List<SelectionMenuItem>? slashMenuItems,
   bool editable = true,
+  ShowPlaceholder? showParagraphPlaceholder,
+  String Function(Node)? placeholderText,
 }) {
   final standardActions = [
     OptionAction.delete,
@@ -29,7 +31,8 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
   final customBlockComponentBuilderMap = {
     PageBlockKeys.type: PageBlockComponentBuilder(),
     ParagraphBlockKeys.type: ParagraphBlockComponentBuilder(
-      configuration: configuration,
+      configuration: configuration.copyWith(placeholderText: placeholderText),
+      showPlaceholder: showParagraphPlaceholder,
     ),
     TodoListBlockKeys.type: TodoListBlockComponentBuilder(
       configuration: configuration.copyWith(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -47,6 +47,8 @@ class AppFlowyEditorPage extends StatefulWidget {
     this.scrollController,
     this.autoFocus,
     required this.styleCustomizer,
+    this.showParagraphPlaceholder,
+    this.placeholderText,
   });
 
   final Widget? header;
@@ -55,6 +57,8 @@ class AppFlowyEditorPage extends StatefulWidget {
   final bool shrinkWrap;
   final bool? autoFocus;
   final EditorStyleCustomizer styleCustomizer;
+  final ShowPlaceholder? showParagraphPlaceholder;
+  final String Function(Node)? placeholderText;
 
   @override
   State<AppFlowyEditorPage> createState() => _AppFlowyEditorPageState();
@@ -112,6 +116,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     context: context,
     editorState: widget.editorState,
     styleCustomizer: widget.styleCustomizer,
+    showParagraphPlaceholder: widget.showParagraphPlaceholder,
+    placeholderText: widget.placeholderText,
   );
 
   List<CharacterShortcutEvent> get characterShortcutEvents => [

frontend/resources/translations/en.json

@@ -1040,5 +1040,8 @@
   "favorite": {
     "noFavorite": "No favorite page",
     "noFavoriteHintText": "Swipe the page to the left to add it to your favorites"
+  },
+  "cardDetails": {
+    "notesPlaceholder": "Enter a / to insert a block, or start typing"
   }
 }