Allow the editor in read-only to tighten to the actual necessary width

packages/fleather/example/macos/Podfile.lock

@@ -19,9 +19,9 @@ EXTERNAL SOURCES:
     :path: Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos
 
 SPEC CHECKSUMS:
-  file_selector_macos: 6280b52b459ae6c590af5d78fc35c7267a3c4b31
+  file_selector_macos: cc3858c981fe6889f364731200d6232dac1d812d
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
-  url_launcher_macos: 0fba8ddabfc33ce0a9afe7c5fef5aab3d8d2d673
+  url_launcher_macos: c82c93949963e55b228a30115bd219499a6fe404
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 

packages/fleather/lib/src/rendering/editor.dart

@@ -143,6 +143,7 @@ class RenderEditor extends RenderEditableContainerBox
     required ParchmentDocument document,
     required ViewportOffset offset,
     required bool hasFocus,
+    required TextWidthBasis textWidthBasis,
     required TextSelection selection,
     required LayerLink startHandleLayerLink,
     required LayerLink endHandleLayerLink,
@@ -159,6 +160,7 @@ class RenderEditor extends RenderEditableContainerBox
         _endHandleLayerLink = endHandleLayerLink,
         _cursorController = cursorController,
         _maxContentWidth = maxContentWidth,
+        _textWidthBasis = textWidthBasis,
         super(
           node: document.root,
         );
@@ -262,6 +264,16 @@ class RenderEditor extends RenderEditableContainerBox
     markNeedsLayout();
   }
 
+  TextWidthBasis _textWidthBasis;
+
+  TextWidthBasis get textWidthBasis => _textWidthBasis;
+
+  set textWidthBasis(TextWidthBasis value) {
+    if (_textWidthBasis == value) return;
+    _textWidthBasis = value;
+    markNeedsLayout();
+  }
+
   final CursorController _cursorController;
 
   /// Track whether position of the start of the selected text is within the viewport.
@@ -592,11 +604,14 @@ class RenderEditor extends RenderEditableContainerBox
     resolvePadding();
     assert(resolvedPadding != null);
 
-    var contentSize = resolvedPadding!.top;
+    var contentHeight = resolvedPadding!.top;
+    var contentWidth = 0.0;
     var child = firstChild;
-    final innerConstraints = BoxConstraints.tightFor(
-            width: math.min(
-                _maxContentWidth ?? double.infinity, constraints.maxWidth))
+    double width =
+        math.min(_maxContentWidth ?? double.infinity, constraints.maxWidth);
+    final innerConstraints = (textWidthBasis == TextWidthBasis.longestLine
+            ? BoxConstraints(maxWidth: width)
+            : BoxConstraints.tightFor(width: width))
         .deflate(resolvedPadding!);
     final leftOffset = _maxContentWidth == null
         ? 0.0
@@ -605,15 +620,16 @@ class RenderEditor extends RenderEditableContainerBox
       child.layout(innerConstraints, parentUsesSize: true);
       final childParentData = child.parentData as EditableContainerParentData;
       childParentData.offset =
-          Offset(resolvedPadding!.left + leftOffset, contentSize);
-      contentSize += child.size.height;
+          Offset(resolvedPadding!.left + leftOffset, contentHeight);
+      contentHeight += child.size.height;
+      contentWidth += math.max(contentWidth, child.size.width);
       assert(child.parentData == childParentData);
       child = childParentData.nextSibling;
     }
-    contentSize += resolvedPadding!.bottom;
+    contentHeight += resolvedPadding!.bottom;
     size = constraints
-        .constrain(Size(_maxContentWidth ?? constraints.maxWidth, contentSize));
-    _maxScrollExtent = math.max(0.0, contentSize - size.height);
+        .constrain(Size(_maxContentWidth ?? contentWidth, contentHeight));
+    _maxScrollExtent = math.max(0.0, contentHeight - size.height);
     offset.applyViewportDimension(size.height);
     offset.applyContentDimensions(0.0, _maxScrollExtent);
 

packages/fleather/lib/src/widgets/editable_text_block.dart

@@ -19,6 +19,7 @@ class EditableTextBlock extends StatelessWidget {
   final bool readOnly;
   final VerticalSpacing spacing;
   final CursorController cursorController;
+  final TextWidthBasis textWidthBasis;
   final TextSelection selection;
   final Color selectionColor;
   final bool enableInteractiveSelection;
@@ -35,6 +36,7 @@ class EditableTextBlock extends StatelessWidget {
     required this.readOnly,
     required this.spacing,
     required this.cursorController,
+    required this.textWidthBasis,
     required this.selection,
     required this.selectionColor,
     required this.enableInteractiveSelection,
@@ -83,6 +85,7 @@ class EditableTextBlock extends StatelessWidget {
             embedBuilder: embedBuilder,
             linkActionPicker: linkActionPicker,
             onLaunchUrl: onLaunchUrl,
+            textWidthBasis: textWidthBasis,
           ),
           cursorController: cursorController,
           selection: selection,

packages/fleather/lib/src/widgets/editor.dart

@@ -182,6 +182,13 @@ class FleatherEditor extends StatefulWidget {
   /// the text field from the clipboard.
   final bool enableInteractiveSelection;
 
+  /// Defines how to measure the width of the rendered text when [readOnly] is
+  /// `true`. Otherwise the value is ignored and forced to
+  /// [TextWidthBasis.parent]
+  ///
+  /// Defaults to [TextWidthBasis.parent].
+  final TextWidthBasis textWidthBasis;
+
   /// The minimum height to be occupied by this editor.
   ///
   /// This only has effect if [scrollable] is set to `true` and [expands] is
@@ -309,6 +316,7 @@ class FleatherEditor extends StatefulWidget {
       this.autocorrect = true,
       this.enableSuggestions = true,
       this.enableInteractiveSelection = true,
+      this.textWidthBasis = TextWidthBasis.parent,
       this.minHeight,
       this.maxHeight,
       this.maxContentWidth,
@@ -486,6 +494,7 @@ class _FleatherEditorState extends State<FleatherEditor>
       readOnly: widget.readOnly,
       enableSuggestions: widget.enableSuggestions,
       enableInteractiveSelection: widget.enableInteractiveSelection,
+      textWidthBasis: widget.textWidthBasis,
       minHeight: widget.minHeight,
       maxHeight: widget.maxHeight,
       maxContentWidth: widget.maxContentWidth,
@@ -589,6 +598,7 @@ class RawEditor extends StatefulWidget {
     this.autocorrect = true,
     this.enableSuggestions = true,
     this.enableInteractiveSelection = true,
+    this.textWidthBasis = TextWidthBasis.parent,
     this.minHeight,
     this.maxHeight,
     this.maxContentWidth,
@@ -716,6 +726,9 @@ class RawEditor extends StatefulWidget {
   ///  * [TextCapitalization], for a description of each capitalization behavior.
   final TextCapitalization textCapitalization;
 
+  /// Defines how to measure the width of the rendered text.
+  final TextWidthBasis textWidthBasis;
+
   /// The maximum height this editor can have.
   ///
   /// If this is null then there is no limit to the editor's height and it will
@@ -970,6 +983,9 @@ class RawEditorState extends EditorState
     return result!;
   }
 
+  TextWidthBasis get _textWidthBasis =>
+      widget.readOnly ? widget.textWidthBasis : TextWidthBasis.parent;
+
   /// The renderer for this widget's editor descendant.
   ///
   /// This property is typically used to notify the renderer of input gestures.
@@ -1732,6 +1748,7 @@ class RawEditorState extends EditorState
             padding: widget.padding,
             maxContentWidth: widget.maxContentWidth,
             cursorController: _cursorController,
+            textWidthBasis: _textWidthBasis,
             children: _buildChildren(context),
           ),
         ),
@@ -1753,6 +1770,7 @@ class RawEditorState extends EditorState
             onSelectionChanged: _handleSelectionChanged,
             padding: widget.padding,
             maxContentWidth: widget.maxContentWidth,
+            textWidthBasis: _textWidthBasis,
             children: _buildChildren(context),
           ),
         ),
@@ -1808,6 +1826,7 @@ class RawEditorState extends EditorState
               embedBuilder: widget.embedBuilder,
               linkActionPicker: _linkActionPicker,
               onLaunchUrl: widget.onLaunchUrl,
+              textWidthBasis: widget.textWidthBasis,
             ),
             hasFocus: _hasFocus,
             devicePixelRatio: MediaQuery.of(context).devicePixelRatio,
@@ -1825,6 +1844,7 @@ class RawEditorState extends EditorState
             cursorController: _cursorController,
             selection: widget.controller.selection,
             selectionColor: widget.selectionColor,
+            textWidthBasis: _textWidthBasis,
             enableInteractiveSelection: widget.enableInteractiveSelection,
             hasFocus: _hasFocus,
             contentPadding: (block == ParchmentAttribute.block.code)
@@ -2182,6 +2202,7 @@ class _Editor extends MultiChildRenderObjectWidget {
     required this.endHandleLayerLink,
     required this.onSelectionChanged,
     required this.cursorController,
+    required this.textWidthBasis,
     this.padding = EdgeInsets.zero,
     this.maxContentWidth,
   });
@@ -2196,6 +2217,7 @@ class _Editor extends MultiChildRenderObjectWidget {
   final TextSelectionChangedHandler onSelectionChanged;
   final EdgeInsetsGeometry padding;
   final double? maxContentWidth;
+  final TextWidthBasis textWidthBasis;
   final CursorController cursorController;
 
   @override
@@ -2212,6 +2234,7 @@ class _Editor extends MultiChildRenderObjectWidget {
       cursorController: cursorController,
       padding: padding,
       maxContentWidth: maxContentWidth,
+      textWidthBasis: textWidthBasis,
     );
   }
 
@@ -2229,6 +2252,7 @@ class _Editor extends MultiChildRenderObjectWidget {
     renderObject.onSelectionChanged = onSelectionChanged;
     renderObject.padding = padding;
     renderObject.maxContentWidth = maxContentWidth;
+    renderObject.textWidthBasis = textWidthBasis;
   }
 }
 

packages/fleather/lib/src/widgets/field.dart

@@ -91,6 +91,13 @@ class FleatherField extends StatefulWidget {
   /// the text field from the clipboard.
   final bool enableInteractiveSelection;
 
+  /// Defines how to measure the width of the rendered text when [readOnly] is
+  /// `true`. Otherwise the value is ignored and forced to
+  /// [TextWidthBasis.parent]
+  ///
+  /// Defaults to [TextWidthBasis.parent].
+  final TextWidthBasis textWidthBasis;
+
   /// The minimum height to be occupied by this editor.
   ///
   /// This only has effect if [scrollable] is set to `true` and [expands] is
@@ -192,6 +199,7 @@ class FleatherField extends StatefulWidget {
     this.autocorrect = true,
     this.enableSuggestions = true,
     this.enableInteractiveSelection = true,
+    this.textWidthBasis = TextWidthBasis.parent,
     this.minHeight,
     this.maxHeight,
     this.expands = false,
@@ -264,6 +272,7 @@ class _FleatherFieldState extends State<FleatherField> {
       autocorrect: widget.autocorrect,
       enableSuggestions: widget.enableSuggestions,
       enableInteractiveSelection: widget.enableInteractiveSelection,
+      textWidthBasis: widget.textWidthBasis,
       minHeight: widget.minHeight,
       maxHeight: widget.maxHeight,
       expands: widget.expands,

packages/fleather/lib/src/widgets/text_line.dart

@@ -26,6 +26,7 @@ class TextLine extends StatefulWidget {
   final FleatherEmbedBuilder embedBuilder;
   final ValueChanged<String?>? onLaunchUrl;
   final LinkActionPicker linkActionPicker;
+  final TextWidthBasis textWidthBasis;
 
   const TextLine({
     super.key,
@@ -35,6 +36,7 @@ class TextLine extends StatefulWidget {
     required this.embedBuilder,
     required this.onLaunchUrl,
     required this.linkActionPicker,
+    required this.textWidthBasis,
   });
 
   @override
@@ -136,6 +138,7 @@ class _TextLineState extends State<TextLine> {
         text: text,
         textAlign: textAlign,
         strutStyle: strutStyle,
+        textWidthBasis: widget.textWidthBasis,
         textScaler: MediaQuery.textScalerOf(context),
       ),
     );