feat: text and layout direction settings

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

frontend/appflowy_flutter/lib/core/config/kv_keys.dart

@@ -29,6 +29,8 @@ class KVKeys {
       'kDocumentAppearanceFontSize';
   static const String kDocumentAppearanceFontFamily =
       'kDocumentAppearanceFontFamily';
+  static const String kDocumentAppearanceDefaultTextDirection =
+      'kDocumentAppearanceDefaultTextDirection';
 
   /// The key for saving the expanded views
   ///

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';
@@ -67,6 +68,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     linkItem,
     buildTextColorItem(),
     buildHighlightColorItem(),
+    ...textDirectionItems
   ];
 
   late final List<SelectionMenuItem> slashMenuItems;
@@ -162,6 +164,12 @@ 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: ConstrainedBox(
         constraints: const BoxConstraints(
@@ -173,7 +181,10 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
           items: toolbarItems,
           editorState: widget.editorState,
           scrollController: effectiveScrollController,
-          child: editor,
+          child: Directionality(
+            textDirection: layoutDirection,
+            child: editor,
+          ),
         ),
       ),
     );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart

@@ -132,7 +132,7 @@ class _ToggleListBlockComponentWidgetState
   EdgeInsets get indentPadding => configuration.indentPadding(
         node,
         calculateTextDirection(
-          defaultTextDirection: Directionality.maybeOf(context),
+          layoutDirection: Directionality.maybeOf(context),
         ),
       );
 
@@ -148,7 +148,7 @@ class _ToggleListBlockComponentWidgetState
   @override
   Widget buildComponent(BuildContext context) {
     final textDirection = calculateTextDirection(
-      defaultTextDirection: Directionality.maybeOf(context),
+      layoutDirection: Directionality.maybeOf(context),
     );
 
     Widget child = Container(

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,
+      ),
+    );
+  }
 }

frontend/appflowy_flutter/lib/workspace/application/appearance.dart

@@ -30,6 +30,8 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
             setting.themeMode,
             setting.font,
             setting.monospaceFont,
+            setting.layoutDirection,
+            setting.textDirection,
             setting.locale,
             setting.isMenuCollapsed,
             setting.menuOffset,
@@ -67,6 +69,18 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
     );
   }
 
+  void setLayoutDirection(LayoutDirection layoutDirection) {
+    _setting.layoutDirection = _layoutDirectionToPB(layoutDirection);
+    _saveAppearanceSettings();
+    emit(state.copyWith(layoutDirection: layoutDirection));
+  }
+
+  void setTextDirection(AppFlowyTextDirection? textDirection) {
+    _setting.textDirection = _textDirectionToPB(textDirection);
+    _saveAppearanceSettings();
+    emit(state.copyWith(textDirection: textDirection));
+  }
+
   /// Update selected font in the user's settings and emit an updated state
   /// with the font name.
   void setFontFamily(String fontFamilyName) {
@@ -188,6 +202,65 @@ ThemeModePB _themeModeToPB(ThemeMode themeMode) {
   }
 }
 
+enum LayoutDirection {
+  ltrLayout,
+  rtlLayout,
+}
+
+LayoutDirection _layoutDirectionFromPB(LayoutDirectionPB layoutDirectionPB) {
+  switch (layoutDirectionPB) {
+    case LayoutDirectionPB.LTRLayout:
+      return LayoutDirection.ltrLayout;
+    case LayoutDirectionPB.RTLLayout:
+      return LayoutDirection.rtlLayout;
+    default:
+      return LayoutDirection.ltrLayout;
+  }
+}
+
+LayoutDirectionPB _layoutDirectionToPB(LayoutDirection direction) {
+  switch (direction) {
+    case LayoutDirection.ltrLayout:
+      return LayoutDirectionPB.LTRLayout;
+    case LayoutDirection.rtlLayout:
+      return LayoutDirectionPB.RTLLayout;
+    default:
+      return LayoutDirectionPB.LTRLayout;
+  }
+}
+
+enum AppFlowyTextDirection {
+  ltr,
+  rtl,
+  auto,
+}
+
+AppFlowyTextDirection? _textDirectionFromPB(TextDirectionPB? textDirectionPB) {
+  switch (textDirectionPB) {
+    case TextDirectionPB.LTR:
+      return AppFlowyTextDirection.ltr;
+    case TextDirectionPB.RTL:
+      return AppFlowyTextDirection.rtl;
+    case TextDirectionPB.AUTO:
+      return AppFlowyTextDirection.auto;
+    default:
+      return null;
+  }
+}
+
+TextDirectionPB _textDirectionToPB(AppFlowyTextDirection? textDirection) {
+  switch (textDirection) {
+    case AppFlowyTextDirection.ltr:
+      return TextDirectionPB.LTR;
+    case AppFlowyTextDirection.rtl:
+      return TextDirectionPB.RTL;
+    case AppFlowyTextDirection.auto:
+      return TextDirectionPB.AUTO;
+    default:
+      return TextDirectionPB.NULL;
+  }
+}
+
 @freezed
 class AppearanceSettingsState with _$AppearanceSettingsState {
   const AppearanceSettingsState._();
@@ -197,6 +270,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
     required ThemeMode themeMode,
     required String font,
     required String monospaceFont,
+    required LayoutDirection layoutDirection,
+    required AppFlowyTextDirection? textDirection,
     required Locale locale,
     required bool isMenuCollapsed,
     required double menuOffset,
@@ -207,6 +282,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
     ThemeModePB themeModePB,
     String font,
     String monospaceFont,
+    LayoutDirectionPB layoutDirectionPB,
+    TextDirectionPB? textDirectionPB,
     LocaleSettingsPB localePB,
     bool isMenuCollapsed,
     double menuOffset,
@@ -215,6 +292,8 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
       appTheme: AppTheme.fallback,
       font: font,
       monospaceFont: monospaceFont,
+      layoutDirection: _layoutDirectionFromPB(layoutDirectionPB),
+      textDirection: _textDirectionFromPB(textDirectionPB),
       themeMode: _themeModeFromPB(themeModePB),
       locale: Locale(localePB.languageCode, localePB.countryCode),
       isMenuCollapsed: isMenuCollapsed,