feat: support text align in text-based blocks (#1002)

AppFlowy-IO · Dec 24, 2024 · c68e5f6 · c68e5f6
1 parent 6c54748
commit c68e5f6
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 6 deletions.
diff --git a/lib/src/editor/block_component/base_component/block_component_configuration.dart b/lib/src/editor/block_component/base_component/block_component_configuration.dart
@@ -10,6 +10,7 @@ class BlockComponentConfiguration {
     this.textStyle = _textStyle,
     this.placeholderTextStyle = _placeholderTextStyle,
     this.blockSelectionAreaMargin = _blockSelectionAreaPadding,
+    this.textAlign = _textAlign,
   });
 
   /// The padding of a block component.
@@ -39,12 +40,19 @@ class BlockComponentConfiguration {
   /// The padding of a block selection area.
   final EdgeInsets Function(Node node) blockSelectionAreaMargin;
 
+  /// The text align of a block component.
+  ///
+  /// This value is only available for the block with text,
+  /// e.g. paragraph, heading, quote, to-do list, bulleted list, numbered list
+  final TextAlign Function(Node node) textAlign;
+
   BlockComponentConfiguration copyWith({
     EdgeInsets Function(Node node)? padding,
     TextStyle Function(Node node)? textStyle,
     String Function(Node node)? placeholderText,
     TextStyle Function(Node node)? placeholderTextStyle,
     EdgeInsets Function(Node node)? blockSelectionAreaMargin,
+    TextAlign Function(Node node)? textAlign,
   }) {
     return BlockComponentConfiguration(
       padding: padding ?? this.padding,
@@ -53,6 +61,7 @@ class BlockComponentConfiguration {
       placeholderTextStyle: placeholderTextStyle ?? this.placeholderTextStyle,
       blockSelectionAreaMargin:
           blockSelectionAreaMargin ?? this.blockSelectionAreaMargin,
+      textAlign: textAlign ?? this.textAlign,
     );
   }
 }
@@ -69,6 +78,8 @@ mixin BlockComponentConfigurable<T extends StatefulWidget> on State<T> {
 
   TextStyle get placeholderTextStyle =>
       configuration.placeholderTextStyle(node);
+
+  TextAlign get textAlign => configuration.textAlign(node);
 }
 
 EdgeInsets _padding(Node node) {
@@ -101,3 +112,7 @@ TextStyle _placeholderTextStyle(Node node) {
 EdgeInsets _blockSelectionAreaPadding(Node node) {
   return const EdgeInsets.symmetric(vertical: 0.0);
 }
+
+TextAlign _textAlign(Node node) {
+  return TextAlign.left;
+}
diff --git a/...c/editor/block_component/bulleted_list_block_component/bulleted_list_block_component.dart b/...c/editor/block_component/bulleted_list_block_component/bulleted_list_block_component.dart
@@ -137,7 +137,7 @@ class _BulletedListBlockComponentWidgetState
               delegate: this,
               node: widget.node,
               editorState: editorState,
-              textAlign: alignment?.toTextAlign,
+              textAlign: alignment?.toTextAlign ?? textAlign,
               placeholderText: placeholderText,
               textSpanDecorator: (textSpan) => textSpan.updateTextStyle(
                 textStyle,

diff --git a/lib/src/editor/block_component/heading_block_component/heading_block_component.dart b/lib/src/editor/block_component/heading_block_component/heading_block_component.dart
@@ -137,7 +137,7 @@ class _HeadingBlockComponentWidgetState
               delegate: this,
               node: widget.node,
               editorState: editorState,
-              textAlign: alignment?.toTextAlign,
+              textAlign: alignment?.toTextAlign ?? textAlign,
               textSpanDecorator: (textSpan) {
                 var result = textSpan.updateTextStyle(textStyle);
                 result = result.updateTextStyle(

diff --git a/...c/editor/block_component/numbered_list_block_component/numbered_list_block_component.dart b/...c/editor/block_component/numbered_list_block_component/numbered_list_block_component.dart
@@ -152,7 +152,7 @@ class _NumberedListBlockComponentWidgetState
               delegate: this,
               node: widget.node,
               editorState: editorState,
-              textAlign: alignment?.toTextAlign,
+              textAlign: alignment?.toTextAlign ?? textAlign,
               placeholderText: placeholderText,
               textSpanDecorator: (textSpan) => textSpan.updateTextStyle(
                 textStyle,

diff --git a/lib/src/editor/block_component/paragraph_block_component/paragraph_block_component.dart b/lib/src/editor/block_component/paragraph_block_component/paragraph_block_component.dart
@@ -161,7 +161,7 @@ class _ParagraphBlockComponentWidgetState
             delegate: this,
             node: widget.node,
             editorState: editorState,
-            textAlign: alignment?.toTextAlign,
+            textAlign: alignment?.toTextAlign ?? textAlign,
             placeholderText: _showPlaceholder ? placeholderText : ' ',
             textSpanDecorator: (textSpan) =>
                 textSpan.updateTextStyle(textStyle),

diff --git a/lib/src/editor/block_component/quote_block_component/quote_block_component.dart b/lib/src/editor/block_component/quote_block_component/quote_block_component.dart
@@ -130,7 +130,7 @@ class _QuoteBlockComponentWidgetState extends State<QuoteBlockComponentWidget>
                 delegate: this,
                 node: widget.node,
                 editorState: editorState,
-                textAlign: alignment?.toTextAlign,
+                textAlign: alignment?.toTextAlign ?? textAlign,
                 placeholderText: placeholderText,
                 textSpanDecorator: (textSpan) => textSpan.updateTextStyle(
                   textStyle,

diff --git a/lib/src/editor/block_component/todo_list_block_component/todo_list_block_component.dart b/lib/src/editor/block_component/todo_list_block_component/todo_list_block_component.dart
@@ -169,7 +169,7 @@ class _TodoListBlockComponentWidgetState
               delegate: this,
               node: widget.node,
               editorState: editorState,
-              textAlign: alignment?.toTextAlign,
+              textAlign: alignment?.toTextAlign ?? textAlign,
               placeholderText: placeholderText,
               textDirection: textDirection,
               textSpanDecorator: (textSpan) =>