fix: rtl related issues

2024-08-30 18:12:39 +00:00 · 2023-09-18 14:33:51 +08:00
parent f3148640eb
commit 0ea5b3c483
11 changed files with 108 additions and 48 deletions
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@ -75,7 +75,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
    alignToolbarItem,
    buildTextColorItem(),
    buildHighlightColorItem(),
-    ...textDirectionItems
+    // TODO: enable it in version 0.3.3
+    // ...textDirectionItems,
  ];

  late final List<SelectionMenuItem> slashMenuItems;
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart
@ -2,11 +2,13 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/option_action.dart';
+import 'package:appflowy/workspace/application/appearance.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';

 class BlockOptionButton extends StatelessWidget {
  const BlockOptionButton({
@ -38,7 +40,11 @@ class BlockOptionButton extends StatelessWidget {
    }).toList();

    return PopoverActionList<PopoverAction>(
-      direction: PopoverDirection.leftWithCenterAligned,
+      direction:
+          context.read<AppearanceSettingsCubit>().state.layoutDirection ==
+                  LayoutDirection.rtlLayout
+              ? PopoverDirection.rightWithCenterAligned
+              : PopoverDirection.leftWithCenterAligned,
      actions: popoverActions,
      onPopupBuilder: () {
        keepEditorFocusNotifier.value += 1;
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
@ -115,7 +115,12 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {

 class _CalloutBlockComponentWidgetState
    extends State<CalloutBlockComponentWidget>
-    with SelectableMixin, DefaultSelectableMixin, BlockComponentConfigurable {
+    with
+        SelectableMixin,
+        DefaultSelectableMixin,
+        BlockComponentConfigurable,
+        BlockComponentTextDirectionMixin,
+        BlockComponentAlignMixin {
  // the key used to forward focus to the richtext child
  @override
  final forwardKey = GlobalKey(debugLabel: 'flowy_rich_text');
@ -146,19 +151,28 @@ class _CalloutBlockComponentWidgetState
  String get emoji => node.attributes[CalloutBlockKeys.icon] ?? '📌';

  // get access to the editor state via provider
+  @override
  late final editorState = Provider.of<EditorState>(context, listen: false);

  // build the callout block widget
  @override
  Widget build(BuildContext context) {
+    final textDirection = calculateTextDirection(
+      layoutDirection: Directionality.maybeOf(context),
+    );
+
    Widget child = Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
        color: backgroundColor,
      ),
      width: double.infinity,
+      alignment: alignment,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        textDirection: textDirection,
        children: [
          // the emoji picker button for the note
          Padding(
@ -178,10 +192,10 @@ class _CalloutBlockComponentWidgetState
              },
            ),
          ),
-          Expanded(
+          Flexible(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
-              child: buildCalloutBlockComponent(context),
+              child: buildCalloutBlockComponent(context, textDirection),
            ),
          ),
          const HSpace(8.0),
@ -218,7 +232,10 @@ class _CalloutBlockComponentWidgetState
  }

  // build the richtext child
-  Widget buildCalloutBlockComponent(BuildContext context) {
+  Widget buildCalloutBlockComponent(
+    BuildContext context,
+    TextDirection textDirection,
+  ) {
    return Padding(
      padding: padding,
      child: AppFlowyRichText(
@ -233,6 +250,7 @@ class _CalloutBlockComponentWidgetState
        placeholderTextSpanDecorator: (textSpan) => textSpan.updateTextStyle(
          placeholderTextStyle,
        ),
+        textDirection: textDirection,
        cursorColor: editorState.editorStyle.cursorColor,
        selectionColor: editorState.editorStyle.selectionColor,
      ),
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
@ -3,7 +3,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selec
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
-import 'package:easy_localization/easy_localization.dart';
+import 'package:easy_localization/easy_localization.dart' hide TextDirection;
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:highlight/highlight.dart' as highlight;
@ -98,7 +98,11 @@ class CodeBlockComponentWidget extends BlockComponentStatefulWidget {
 }

 class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
-    with SelectableMixin, DefaultSelectableMixin, BlockComponentConfigurable {
+    with
+        SelectableMixin,
+        DefaultSelectableMixin,
+        BlockComponentConfigurable,
+        BlockComponentTextDirectionMixin {
  // the key used to forward focus to the richtext child
  @override
  final forwardKey = GlobalKey(debugLabel: 'flowy_rich_text');
@ -175,6 +179,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
    ..add('c')
    ..sort();

+  @override
  late final editorState = context.read<EditorState>();

  String? get language => node.attributes[CodeBlockKeys.language] as String?;
@ -182,6 +187,9 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>

  @override
  Widget build(BuildContext context) {
+    final textDirection = calculateTextDirection(
+      layoutDirection: Directionality.maybeOf(context),
+    );
    Widget child = Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
@ -191,9 +199,10 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
+        textDirection: textDirection,
        children: [
          _buildSwitchLanguageButton(context),
-          _buildCodeBlock(context),
+          _buildCodeBlock(context, textDirection),
        ],
      ),
    );
@ -226,7 +235,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
    return child;
  }

-  Widget _buildCodeBlock(BuildContext context) {
+  Widget _buildCodeBlock(BuildContext context, TextDirection textDirection) {
    final delta = node.delta ?? Delta();
    final content = delta.toPlainText();

@ -258,6 +267,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
        placeholderTextSpanDecorator: (textSpan) => TextSpan(
          style: textStyle,
        ),
+        textDirection: textDirection,
        cursorColor: editorState.editorStyle.cursorColor,
        selectionColor: editorState.editorStyle.selectionColor,
      ),
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart
@ -2,7 +2,8 @@ import 'dart:async';

 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:easy_localization/easy_localization.dart';
+import 'package:easy_localization/easy_localization.dart' hide TextDirection;
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@ -70,7 +71,7 @@ class OutlineBlockWidget extends BlockComponentStatefulWidget {
 }

 class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
-    with BlockComponentConfigurable {
+    with BlockComponentConfigurable, BlockComponentTextDirectionMixin {
  @override
  BlockComponentConfiguration get configuration => widget.configuration;

@ -87,6 +88,7 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
    return colorString.tryToColor() ?? Colors.transparent;
  }

+  @override
  late EditorState editorState = context.read<EditorState>();
  late Stream<(TransactionTime, Transaction)> stream =
      editorState.transactionStream;
@ -109,6 +111,10 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
  }

  Widget _buildOutlineBlock() {
+    final textDirection = calculateTextDirection(
+      layoutDirection: Directionality.maybeOf(context),
+    );
+
    final children = getHeadingNodes()
        .map(
          (e) => Container(
@ -116,7 +122,10 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
              bottom: 4.0,
            ),
            width: double.infinity,
-            child: OutlineItemWidget(node: e),
+            child: OutlineItemWidget(
+              node: e,
+              textDirection: textDirection,
+            ),
          ),
        )
        .toList();
@ -136,7 +145,9 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        textDirection: textDirection,
        children: children,
      ),
    );
@ -152,11 +163,13 @@ class OutlineItemWidget extends StatelessWidget {
  OutlineItemWidget({
    super.key,
    required this.node,
+    required this.textDirection,
  }) {
    assert(node.type == HeadingBlockKeys.type);
  }

  final Node node;
+  final TextDirection textDirection;

  @override
  Widget build(BuildContext context) {
@ -170,15 +183,20 @@ class OutlineItemWidget extends StatelessWidget {
      builder: (context, onHover) {
        return GestureDetector(
          onTap: () => scrollToBlock(context),
-          child: Container(
-            padding: EdgeInsets.only(left: node.leftIndent),
-            child: Text(
-              node.outlineItemText,
-              style: style.copyWith(
-                color:
-                    onHover ? Theme.of(context).colorScheme.onSecondary : null,
+          child: Row(
+            textDirection: textDirection,
+            children: [
+              HSpace(node.leftIndent),
+              Text(
+                node.outlineItemText,
+                textDirection: textDirection,
+                style: style.copyWith(
+                  color: onHover
+                      ? Theme.of(context).colorScheme.onSecondary
+                      : null,
+                ),
              ),
-            ),
+            ],
          ),
        );
      },
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
@ -109,7 +109,8 @@ class _ToggleListBlockComponentWidgetState
        BlockComponentConfigurable,
        BlockComponentBackgroundColorMixin,
        NestedBlockComponentStatefulWidgetMixin,
-        BlockComponentTextDirectionMixin {
+        BlockComponentTextDirectionMixin,
+        BlockComponentAlignMixin {
  // the key used to forward focus to the richtext child
  @override
  final forwardKey = GlobalKey(debugLabel: 'flowy_rich_text');
@ -157,8 +158,12 @@ class _ToggleListBlockComponentWidgetState
    Widget child = Container(
      color: backgroundColor,
      width: double.infinity,
+      alignment: alignment,
      child: Row(
+        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.start,
+        textDirection: textDirection,
        children: [
          // the emoji picker button for the note
          FlowyIconButton(
@ -171,7 +176,7 @@ class _ToggleListBlockComponentWidgetState
          const SizedBox(
            width: 4.0,
          ),
-          Expanded(
+          Flexible(
            child: AppFlowyRichText(
              key: forwardKey,
              delegate: this,
@ -187,6 +192,7 @@ class _ToggleListBlockComponentWidgetState
                placeholderTextStyle,
              ),
              textDirection: textDirection,
+              textAlign: alignment?.toTextAlign,
              cursorColor: editorState.editorStyle.cursorColor,
              selectionColor: editorState.editorStyle.selectionColor,
            ),