feat: rtl toolbar item setting (#3958)

frontend/appflowy_flutter/integration_test/document/document_text_direction_test.dart

@@ -1,4 +1,3 @@
-import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
@@ -10,7 +9,7 @@ void main() {
 
   group('text direction', () {
     testWidgets(
-        '''no text direction items will be displayed in the default/LTR mode,and three text direction items will be displayed in the RTL mode.''',
+        '''no text direction items will be displayed in the default/LTR mode, and three text direction items will be displayed when toggle is enabled.''',
         (tester) async {
       // combine the two tests into one to avoid the time-consuming process of initializing the app
       await tester.initializeAppFlowy();
@@ -32,7 +31,7 @@ void main() {
         'toolbar/text_direction_ltr',
         'toolbar/text_direction_rtl',
       ];
-      // no text direction items in default/LTR mode
+      // no text direction items by default
       var button = find.byWidgetPredicate(
         (widget) =>
             widget is SVGIconItemWidget &&
@@ -41,7 +40,7 @@ void main() {
       expect(button, findsNothing);
 
       // switch to the RTL mode
-      await tester.switchLayoutDirectionMode(LayoutDirection.rtlLayout);
+      await tester.toggleEnableRTLToolbarItems();
 
       await tester.editor.tapLineOfEditorAt(0);
       await tester.editor.updateSelection(selection);

frontend/appflowy_flutter/integration_test/util/settings.dart

@@ -1,12 +1,11 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/sidebar_user.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance/direction_setting.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_menu_element.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'base.dart';
@@ -76,31 +75,15 @@ extension AppFlowySettings on WidgetTester {
     await pumpAndSettle();
   }
 
-  // go to settings page and switch the layout direction
+  // go to settings page and toggle enable RTL toolbar items
-  Future<void> switchLayoutDirectionMode(
+  Future<void> toggleEnableRTLToolbarItems() async {
-    LayoutDirection layoutDirection,
-  ) async {
     await openSettings();
     await openSettingsPage(SettingsPage.appearance);
 
-    final button = find.byKey(const ValueKey('layout_direction_option_button'));
+    final switchButton =
-    expect(button, findsOneWidget);
+        find.byKey(EnableRTLToolbarItemsSetting.enableRTLSwitchKey);
-    await tapButton(button);
+    expect(switchButton, findsOneWidget);
-
+    await tapButton(switchButton);
-    switch (layoutDirection) {
-      case LayoutDirection.ltrLayout:
-        final ltrButton = find.text(
-          LocaleKeys.settings_appearance_layoutDirection_ltr.tr(),
-        );
-        await tapButton(ltrButton);
-        break;
-      case LayoutDirection.rtlLayout:
-        final rtlButton = find.text(
-          LocaleKeys.settings_appearance_layoutDirection_rtl.tr(),
-        );
-        await tapButton(rtlButton);
-        break;
-    }
 
     // tap anywhere to close the settings page
     await tapAt(Offset.zero);

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

@@ -259,7 +259,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
             LayoutDirection.rtlLayout;
     final textDirection = isRTL ? TextDirection.rtl : TextDirection.ltr;
 
-    _setRTLToolbarItems(isRTL);
+    _setRTLToolbarItems(
+      context.read<AppearanceSettingsCubit>().state.enableRtlToolbarItems,
+    );
 
     final editor = Directionality(
       textDirection: textDirection,
@@ -412,12 +414,12 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     );
   }
 
-  void _setRTLToolbarItems(bool isRTL) {
+  void _setRTLToolbarItems(bool enableRtlToolbarItems) {
     final textDirectionItemIds = textDirectionItems.map((e) => e.id);
     // clear all the text direction items
     toolbarItems.removeWhere((item) => textDirectionItemIds.contains(item.id));
     // only show the rtl item when the layout direction is ltr.
-    if (isRTL) {
+    if (enableRtlToolbarItems) {
       toolbarItems.addAll(textDirectionItems);
     }
   }

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

@@ -42,6 +42,7 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
             appearanceSettings.monospaceFont,
             appearanceSettings.layoutDirection,
             appearanceSettings.textDirection,
+            appearanceSettings.enableRtlToolbarItems,
             appearanceSettings.locale,
             appearanceSettings.isMenuCollapsed,
             appearanceSettings.menuOffset,
@@ -134,6 +135,12 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
     emit(state.copyWith(textDirection: textDirection));
   }
 
+  void setEnableRTLToolbarItems(bool value) {
+    _appearanceSettings.enableRtlToolbarItems = value;
+    _saveAppearanceSettings();
+    emit(state.copyWith(enableRtlToolbarItems: value));
+  }
+
   /// Update selected font in the user's settings and emit an updated state
   /// with the font name.
   void setFontFamily(String fontFamilyName) {
@@ -365,6 +372,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
     required String monospaceFont,
     required LayoutDirection layoutDirection,
     required AppFlowyTextDirection? textDirection,
+    required bool enableRtlToolbarItems,
     required Locale locale,
     required bool isMenuCollapsed,
     required double menuOffset,
@@ -383,6 +391,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
     String monospaceFont,
     LayoutDirectionPB layoutDirectionPB,
     TextDirectionPB? textDirectionPB,
+    bool enableRtlToolbarItems,
     LocaleSettingsPB localePB,
     bool isMenuCollapsed,
     double menuOffset,
@@ -399,6 +408,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
       monospaceFont: monospaceFont,
       layoutDirection: LayoutDirection.fromLayoutDirectionPB(layoutDirectionPB),
       textDirection: AppFlowyTextDirection.fromTextDirectionPB(textDirectionPB),
+      enableRtlToolbarItems: enableRtlToolbarItems,
       themeMode: _themeModeFromPB(themeModePB),
       locale: Locale(localePB.languageCode, localePB.countryCode),
       isMenuCollapsed: isMenuCollapsed,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/direction_setting.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
@@ -7,6 +5,7 @@ import 'package:appflowy/workspace/application/settings/appearance/appearance_cu
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'theme_setting_entry_template.dart';
@@ -26,7 +25,6 @@ class LayoutDirectionSetting extends StatelessWidget {
       hint: LocaleKeys.settings_appearance_layoutDirection_hint.tr(),
       trailing: [
         FlowySettingValueDropDown(
-          key: const ValueKey('layout_direction_option_button'),
           currentValue: _layoutDirectionLabelText(currentLayoutDirection),
           popupBuilder: (context) => Column(
             mainAxisSize: MainAxisSize.min,
@@ -142,3 +140,34 @@ class TextDirectionSetting extends StatelessWidget {
     }
   }
 }
+
+class EnableRTLToolbarItemsSetting extends StatelessWidget {
+  const EnableRTLToolbarItemsSetting({
+    super.key,
+  });
+
+  static const enableRTLSwitchKey = ValueKey('enable_rtl_toolbar_items_switch');
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowySettingListTile(
+      label: LocaleKeys.settings_appearance_enableRTLToolbarItems.tr(),
+      trailing: [
+        Switch(
+          key: enableRTLSwitchKey,
+          value: context
+              .read<AppearanceSettingsCubit>()
+              .state
+              .enableRtlToolbarItems,
+          splashRadius: 0,
+          activeColor: Theme.of(context).colorScheme.primary,
+          onChanged: (value) {
+            context
+                .read<AppearanceSettingsCubit>()
+                .setEnableRTLToolbarItems(value);
+          },
+        ),
+      ],
+    );
+  }
+}

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -53,6 +53,7 @@ class SettingsAppearanceView extends StatelessWidget {
                 TextDirectionSetting(
                   currentTextDirection: state.textDirection,
                 ),
+                const EnableRTLToolbarItemsSetting(),
                 const Divider(),
                 DateFormatSetting(
                   currentFormat: state.dateFormat,

frontend/resources/translations/en.json

@@ -394,7 +394,8 @@
         "twelveHour": "Twelve hour",
         "twentyFourHour": "Twenty four hour"
       },
-      "showNamingDialogWhenCreatingPage": "Show naming dialog when creating a page"
+      "showNamingDialogWhenCreatingPage": "Show naming dialog when creating a page",
+      "enableRTLToolbarItems": "Enable RTL toolbar items"
     },
     "files": {
       "copy": "Copy",

frontend/rust-lib/flowy-user/src/entities/user_setting.rs

@@ -68,6 +68,10 @@ pub struct AppearanceSettingsPB {
   #[pb(index = 12)]
   #[serde(default)]
   pub document_setting: DocumentSettingsPB,
+
+  #[pb(index = 13)]
+  #[serde(default)]
+  pub enable_rtl_toolbar_items: bool,
 }
 
 const DEFAULT_RESET_VALUE: fn() -> bool = || APPEARANCE_RESET_AS_DEFAULT;
@@ -129,6 +133,7 @@ pub const APPEARANCE_DEFAULT_MONOSPACE_FONT: &str = "SF Mono";
 const APPEARANCE_RESET_AS_DEFAULT: bool = true;
 const APPEARANCE_DEFAULT_IS_MENU_COLLAPSED: bool = false;
 const APPEARANCE_DEFAULT_MENU_OFFSET: f64 = 0.0;
+const APPEARANCE_DEFAULT_ENABLE_RTL_TOOLBAR_ITEMS: bool = false;
 
 impl std::default::Default for AppearanceSettingsPB {
   fn default() -> Self {
@@ -144,6 +149,7 @@ impl std::default::Default for AppearanceSettingsPB {
       menu_offset: APPEARANCE_DEFAULT_MENU_OFFSET,
       layout_direction: LayoutDirectionPB::default(),
       text_direction: TextDirectionPB::default(),
+      enable_rtl_toolbar_items: APPEARANCE_DEFAULT_ENABLE_RTL_TOOLBAR_ITEMS,
       document_setting: DocumentSettingsPB::default(),
     }
   }