feat: text and layout direction settings (#3247)

* feat: text and layout direction settings

Added ltr|rtl|auto direction button to appflowy toolbar.
Introduced layout and default direction settings.

* chore: formate code

* feat: added hint for direction settings

* fix: flutter analyze

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

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

@@ -2,6 +2,7 @@ import 'package:appflowy/plugins/document/application/doc_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
+import 'package:appflowy/workspace/application/appearance.dart';
 import 'package:appflowy/workspace/application/settings/shortcuts/settings_shortcuts_service.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:collection/collection.dart';
@@ -74,6 +75,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     alignToolbarItem,
     buildTextColorItem(),
     buildHighlightColorItem(),
+    ...textDirectionItems
   ];
 
   late final List<SelectionMenuItem> slashMenuItems;
@@ -175,13 +177,22 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       footer: const VSpace(200),
     );
 
+    final layoutDirection =
+        context.read<AppearanceSettingsCubit>().state.layoutDirection ==
+                LayoutDirection.rtlLayout
+            ? TextDirection.rtl
+            : TextDirection.ltr;
+
     return Center(
       child: FloatingToolbar(
         style: styleCustomizer.floatingToolbarStyleBuilder(),
         items: toolbarItems,
         editorState: widget.editorState,
         editorScrollController: editorScrollController,
-        child: editor,
+        child: Directionality(
+          textDirection: layoutDirection,
+          child: editor,
+        ),
       ),
     );
   }

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

@@ -30,9 +30,13 @@ class EditorStyleCustomizer {
     final theme = Theme.of(context);
     final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
     final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
+    final defaultTextDirection =
+        context.read<DocumentAppearanceCubit>().state.defaultTextDirection;
+
     return EditorStyle.desktop(
       padding: padding,
       cursorColor: theme.colorScheme.primary,
+      defaultTextDirection: defaultTextDirection,
       textStyleConfiguration: TextStyleConfiguration(
         text: baseTextStyle(fontFamily).copyWith(
           fontSize: fontSize,

frontend/appflowy_flutter/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart

@@ -6,18 +6,22 @@ class DocumentAppearance {
   const DocumentAppearance({
     required this.fontSize,
     required this.fontFamily,
+    this.defaultTextDirection,
   });
 
   final double fontSize;
   final String fontFamily;
+  final String? defaultTextDirection;
 
   DocumentAppearance copyWith({
     double? fontSize,
     String? fontFamily,
+    String? defaultTextDirection,
   }) {
     return DocumentAppearance(
       fontSize: fontSize ?? this.fontSize,
       fontFamily: fontFamily ?? this.fontFamily,
+      defaultTextDirection: defaultTextDirection,
     );
   }
 }
@@ -32,6 +36,8 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
         prefs.getDouble(KVKeys.kDocumentAppearanceFontSize) ?? 16.0;
     final fontFamily =
         prefs.getString(KVKeys.kDocumentAppearanceFontFamily) ?? 'Poppins';
+    final defaultTextDirection =
+        prefs.getString(KVKeys.kDocumentAppearanceDefaultTextDirection);
 
     if (isClosed) {
       return;
@@ -41,6 +47,7 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
       state.copyWith(
         fontSize: fontSize,
         fontFamily: fontFamily,
+        defaultTextDirection: defaultTextDirection,
       ),
     );
   }
@@ -74,4 +81,26 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
       ),
     );
   }
+
+  Future<void> syncDefaultTextDirection(String? direction) async {
+    final prefs = await SharedPreferences.getInstance();
+    if (direction == null) {
+      prefs.remove(KVKeys.kDocumentAppearanceDefaultTextDirection);
+    } else {
+      prefs.setString(
+        KVKeys.kDocumentAppearanceDefaultTextDirection,
+        direction,
+      );
+    }
+
+    if (isClosed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(
+        defaultTextDirection: direction,
+      ),
+    );
+  }
 }