[SuperTextField] Fix horizontal aligment (Resolves #668)

super_editor/lib/src/infrastructure/super_textfield/android/android_textfield.dart

@@ -5,6 +5,7 @@ import 'package:super_editor/src/infrastructure/attributed_text_styles.dart';
 import 'package:super_editor/src/infrastructure/focus.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/android/_editing_controls.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/android/_user_interaction.dart';
+import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/fill_width_if_constrained.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/hint_text.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/text_scrollview.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/input_method_engine/_ime_text_editing_controller.dart';
@@ -472,6 +473,7 @@ class SuperAndroidTextFieldState extends State<SuperAndroidTextField>
             textScrollController: _textScrollController,
             textKey: _textContentKey,
             textEditingController: _textEditingController,
+            textAlign: widget.textAlign,
             minLines: widget.minLines,
             maxLines: widget.maxLines,
             lineHeight: widget.lineHeight,
@@ -509,19 +511,21 @@ class SuperAndroidTextFieldState extends State<SuperAndroidTextField>
         ? _textEditingController.text.computeTextSpan(widget.textStyleBuilder)
         : TextSpan(text: "", style: widget.textStyleBuilder({}));
 
-    return SuperTextWithSelection.single(
-      key: _textContentKey,
-      richText: textSpan,
-      textAlign: widget.textAlign,
-      userSelection: UserSelection(
-        highlightStyle: SelectionHighlightStyle(
-          color: widget.selectionColor,
-        ),
-        caretStyle: CaretStyle(
-          color: widget.caretColor,
+    return FillWidthIfConstrained(
+      child: SuperTextWithSelection.single(
+        key: _textContentKey,
+        richText: textSpan,
+        textAlign: widget.textAlign,
+        userSelection: UserSelection(
+          highlightStyle: SelectionHighlightStyle(
+            color: widget.selectionColor,
+          ),
+          caretStyle: CaretStyle(
+            color: widget.caretColor,
+          ),
+          selection: _textEditingController.selection,
+          hasCaret: _focusNode.hasFocus,
         ),
-        selection: _textEditingController.selection,
-        hasCaret: _focusNode.hasFocus,
       ),
     );
   }

super_editor/lib/src/infrastructure/super_textfield/desktop/desktop_textfield.dart

@@ -18,6 +18,7 @@ import 'package:super_text_layout/super_text_layout.dart';
 
 import '../../keyboard.dart';
 import '../../multi_tap_gesture.dart';
+import '../infrastructure/fill_width_if_constrained.dart';
 import '../styles.dart';
 
 final _log = textFieldLog;
@@ -297,6 +298,7 @@ class SuperDesktopTextFieldState extends State<SuperDesktopTextField> implements
                 key: _textScrollKey,
                 textKey: _textKey,
                 textController: _controller,
+                textAlign: widget.textAlign,
                 scrollController: _scrollController,
                 viewportHeight: _viewportHeight,
                 estimatedLineHeight: _getEstimatedLineHeight(),
@@ -323,15 +325,17 @@ class SuperDesktopTextFieldState extends State<SuperDesktopTextField> implements
   }
 
   Widget _buildSelectableText() {
-    return SuperTextWithSelection.single(
-      key: _textKey,
-      richText: _controller.text.computeTextSpan(widget.textStyleBuilder),
-      textAlign: widget.textAlign,
-      userSelection: UserSelection(
-        highlightStyle: widget.selectionHighlightStyle,
-        caretStyle: widget.caretStyle,
-        selection: _controller.selection,
-        hasCaret: _focusNode.hasFocus,
+    return FillWidthIfConstrained(
+      child: SuperTextWithSelection.single(
+        key: _textKey,
+        richText: _controller.text.computeTextSpan(widget.textStyleBuilder),
+        textAlign: widget.textAlign,
+        userSelection: UserSelection(
+          highlightStyle: widget.selectionHighlightStyle,
+          caretStyle: widget.caretStyle,
+          selection: _controller.selection,
+          hasCaret: _focusNode.hasFocus,
+        ),
       ),
     );
   }
@@ -866,6 +870,7 @@ class SuperTextFieldScrollview extends StatefulWidget {
     required this.viewportHeight,
     required this.estimatedLineHeight,
     required this.isMultiline,
+    this.textAlign = TextAlign.left,
     required this.child,
   }) : super(key: key);
 
@@ -895,6 +900,9 @@ class SuperTextFieldScrollview extends StatefulWidget {
   /// Whether or not this text field allows multiple lines of text.
   final bool isMultiline;
 
+  /// The text alignment within the scrollview.
+  final TextAlign textAlign;
+
   /// The rest of the subtree for this text field.
   final Widget child;
 
@@ -1123,6 +1131,22 @@ class SuperTextFieldScrollviewState extends State<SuperTextFieldScrollview> with
     }
   }
 
+  Alignment _getAlignment() {
+    switch (widget.textAlign) {
+      case TextAlign.left:
+      case TextAlign.justify:
+        return Alignment.topLeft;
+      case TextAlign.right:
+        return Alignment.topRight;
+      case TextAlign.center:
+        return Alignment.topCenter;
+      case TextAlign.start:
+        return Directionality.of(context) == TextDirection.ltr ? Alignment.topLeft : Alignment.topRight;
+      case TextAlign.end:
+        return Directionality.of(context) == TextDirection.ltr ? Alignment.topRight : Alignment.topLeft;
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return SizedBox(

super_editor/lib/src/infrastructure/super_textfield/infrastructure/fill_width_if_constrained.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+/// Forces [child] to take up all available width when the
+/// incoming width constraint is bounded, otherwise the [child]
+/// is sized by its intrinsic width.
+///
+/// This widget is used to correctly align the text of a multiline
+/// [SuperTextWithSelection] with a constrained width.
+class FillWidthIfConstrained extends SingleChildRenderObjectWidget {
+  const FillWidthIfConstrained({
+    required Widget child,
+  }) : super(child: child);
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return RenderFillWidthIfConstrained(
+      viewportWidth: _getViewportWidth(context),
+    );
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, RenderFillWidthIfConstrained renderObject) {
+    renderObject.viewportWidth = _getViewportWidth(context);
+  }
+
+  double? _getViewportWidth(BuildContext context) {
+    final scrollable = Scrollable.of(context);
+    if (scrollable == null) {
+      return null;
+    }
+    return (scrollable.context.findRenderObject() as RenderBox?)?.size.width;
+  }
+}
+
+class RenderFillWidthIfConstrained extends RenderProxyBox {
+  RenderFillWidthIfConstrained({
+    double? viewportWidth,
+  }) : _viewportWidth = viewportWidth;
+
+  set viewportWidth(double? value) {
+    _viewportWidth = value;
+    markNeedsLayout();
+  }
+
+  double? _viewportWidth = 0;
+
+  @override
+  void performLayout() {
+    BoxConstraints childConstraints = constraints;
+
+    // If the available width is bounded, 
+    // force the child to be as wide as the available width.
+    if (constraints.hasBoundedWidth) {
+      childConstraints = BoxConstraints(
+        minWidth: constraints.maxWidth,
+        minHeight: constraints.minHeight,
+        maxWidth: constraints.maxWidth,
+        maxHeight: constraints.maxHeight,
+      );
+    } else if (_viewportWidth != null) {
+      // If a viewport width is given, force the child to be at least this width.
+      // This is the case when this widget is placed inside an Scrollable.
+      childConstraints = BoxConstraints(
+        minWidth: _viewportWidth!,
+        minHeight: constraints.minHeight,
+        maxHeight: constraints.maxHeight,
+      );
+    }
+
+    child!.layout(childConstraints, parentUsesSize: true);
+    size = child!.size;
+  }
+}

super_editor/lib/src/infrastructure/super_textfield/infrastructure/text_scrollview.dart

@@ -32,6 +32,7 @@ class TextScrollView extends StatefulWidget {
     this.lineHeight,
     this.perLineAutoScrollDuration = Duration.zero,
     this.showDebugPaint = false,
+    this.textAlign = TextAlign.left,
     required this.child,
   }) : super(key: key);
 
@@ -89,6 +90,9 @@ class TextScrollView extends StatefulWidget {
   /// Whether to paint debug guides.
   final bool showDebugPaint;
 
+  /// The text alignment within the scrollview.
+  final TextAlign textAlign;
+
   /// The child widget.
   final Widget child;
 
@@ -451,15 +455,34 @@ class _TextScrollViewState extends State<TextScrollView>
     );
   }
 
+  Alignment _getAlignment() {
+    switch (widget.textAlign) {
+      case TextAlign.left:
+      case TextAlign.justify:
+        return Alignment.topLeft;
+      case TextAlign.right:
+        return Alignment.topRight;
+      case TextAlign.center:
+        return Alignment.topCenter;
+      case TextAlign.start:
+        return Directionality.of(context) == TextDirection.ltr ? Alignment.topLeft : Alignment.topRight;
+      case TextAlign.end:
+        return Directionality.of(context) == TextDirection.ltr ? Alignment.topRight : Alignment.topLeft;
+    }
+  }
+
   Widget _buildScrollView({
     required Widget child,
   }) {
-    return SingleChildScrollView(
-      key: _textFieldViewportKey,
-      controller: _scrollController,
-      physics: const NeverScrollableScrollPhysics(),
-      scrollDirection: isMultiline ? Axis.vertical : Axis.horizontal,
-      child: widget.child,
+    return Align(
+      alignment: _getAlignment(),
+      child: SingleChildScrollView(
+        key: _textFieldViewportKey,
+        controller: _scrollController,
+        physics: const NeverScrollableScrollPhysics(),
+        scrollDirection: isMultiline ? Axis.vertical : Axis.horizontal,
+        child: widget.child,
+      ),
     );
   }
 

super_editor/lib/src/infrastructure/super_textfield/ios/ios_textfield.dart

@@ -5,6 +5,7 @@ import 'package:super_editor/src/infrastructure/_listenable_builder.dart';
 import 'package:super_editor/src/infrastructure/_logging.dart';
 import 'package:super_editor/src/infrastructure/attributed_text_styles.dart';
 import 'package:super_editor/src/infrastructure/focus.dart';
+import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/fill_width_if_constrained.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/hint_text.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/infrastructure/text_scrollview.dart';
 import 'package:super_editor/src/infrastructure/super_textfield/input_method_engine/_ime_text_editing_controller.dart';
@@ -470,6 +471,7 @@ class SuperIOSTextFieldState extends State<SuperIOSTextField>
             textScrollController: _textScrollController,
             textKey: _textContentKey,
             textEditingController: _textEditingController,
+            textAlign: widget.textAlign,
             minLines: widget.minLines,
             maxLines: widget.maxLines,
             lineHeight: widget.lineHeight,
@@ -516,19 +518,21 @@ class SuperIOSTextFieldState extends State<SuperIOSTextField>
         ? _textEditingController.text.computeTextSpan(widget.textStyleBuilder)
         : AttributedText(text: "").computeTextSpan(widget.textStyleBuilder);
 
-    return SuperTextWithSelection.single(
-      key: _textContentKey,
-      richText: textSpan,
-      textAlign: widget.textAlign,
-      userSelection: UserSelection(
-        highlightStyle: SelectionHighlightStyle(
-          color: widget.selectionColor,
-        ),
-        caretStyle: CaretStyle(
-          color: _floatingCursorController.isShowingFloatingCursor ? Colors.grey : widget.caretColor,
+    return FillWidthIfConstrained(
+      child: SuperTextWithSelection.single(
+        key: _textContentKey,
+        richText: textSpan,
+        textAlign: widget.textAlign,
+        userSelection: UserSelection(
+          highlightStyle: SelectionHighlightStyle(
+            color: widget.selectionColor,
+          ),
+          caretStyle: CaretStyle(
+            color: _floatingCursorController.isShowingFloatingCursor ? Colors.grey : widget.caretColor,
+          ),
+          selection: _textEditingController.selection,
+          hasCaret: _focusNode.hasFocus,
         ),
-        selection: _textEditingController.selection,
-        hasCaret: _focusNode.hasFocus,
       ),
     );
   }