[flutter_markdown] Selecting text works only paragraph by paragraph in markdown widget when text is not indented

[ThiemoImgraben]

Use case

Selecting text works only paragraph by paragraph in the markdown widget in web.

flutter_markdown: ^0.6.9

Code Example

          import 'package:flutter/material.dart';
          import 'package:flutter_markdown/flutter_markdown.dart';
          
          void main() {
            runApp(const MyApp());
          }
          
          class MyApp extends StatelessWidget {
            const MyApp({Key? key}) : super(key: key);
          
            @override
            Widget build(BuildContext context) {
              return const MaterialApp(
                home: MyHomePage(),
              );
            }
          }
          
          class MyHomePage extends StatefulWidget {
            const MyHomePage({Key? key}) : super(key: key);
          
            @override
            State<MyHomePage> createState() => _MyHomePageState();
          }
          
          class _MyHomePageState extends State<MyHomePage> {
            @override
            Widget build(BuildContext context) {
              var text = '''
            Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt 
            ut labore et dolore magna aliqua. 
            
            
            Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea 
            commodo consequat.
            ''';
          
              return Scaffold(
                body: Center(
                    child: MarkdownBody(
                  data: text,
                  selectable: true,
                )),
              );
            }
          }

Flutter Doctor

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale de-DE)
    • Flutter version 2.10.3 at /Volumes/Workspace/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (7 days ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/thiemo/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] VS Code (version 1.65.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.51

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Proposal

I want to be able to select all text in the markdown widget, no matter if there are several paragraphs.

[danagbemava-nc]

Hi @ThiemoImgraben, please provide a complete minimal reproducible code sample so that we can verify this.

Please also provide your flutter doctor -v as well as the version of flutter_markdown you're using.

Thank you

[ThiemoImgraben]

@danagbemava-nc - I added the required content.

[danagbemava-nc]

Hi @ThiemoImgraben, I seem to be able to select both paragraphs at once, with the sample you provided, although the text selection overlay doesn't look good. See video below

Simulator.Screen.Recording.-.iPhone.13.-.2022-03-15.at.07.20.31.mp4

[ThiemoImgraben]

Hi @danagbemava-nc , sorry for not describing my problem in detail. The bug occurs only on the web.

[danagbemava-nc]

Hi @ThiemoImgraben, it seems to work just fine on web for me as well, weird text selection overlay and all

Screen.Recording.2022-03-16.at.06.42.48.mov

[Curvel]

@danagbemava-nc @ThiemoImgraben I was able to reproduce the behavior from both of you. It seems that the error only occurs when the lines are not indented! And when they are indented, it looks like in your recording @danagbemava-nc, which looks completely different than without indentations.

Just replace the text with this code and the original bug appears:

    var text = '''
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
            
Ut enim ad minim veniam, 
quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat.
            ''';

paragraph-only-selection	weird styling
original.bug.mov	selecting.works.but.wierd.formatting.mov

[ThiemoImgraben]

Hey @danagbemava-nc , please take a look again.