[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

https://user-images.githubusercontent.com/88313112/158326512-1c26f16c-aae9-4e88-9cc0-01f9500fa5e0.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

https://user-images.githubusercontent.com/88313112/158532209-4d882e36-5746-427e-93d4-e41ca2e5ea4e.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

[ThiemoImgraben]

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

[danagbemava-nc]

Thanks @Curvel, I can now reproduce the issue. This issue is not specific to the web as it does reproduce on mobile as well. The behavior on android is the same as the behavior on iOS.

videos

ios	web

complete sample

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 -v

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-arm, locale en-GB)
    • Flutter version 2.10.3 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (3 weeks 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 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • 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-7772763)

[☠] IntelliJ IDEA Community Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
    • #0      _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7)
      #1      Utf8Decoder.convert (dart:convert/utf.dart:351:42)
      #2      InputStream.readString (package:archive/src/util/input_stream.dart:207:30)
      #3      new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30)
      #4      ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30)
      #5      ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12)
      #6      IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44)
      #7      IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40)
      #8      IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35)
      #9      IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15)
      #10     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:32)
      #11     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:109:18)
      #12     _rootRun (dart:async/zone.dart:1426:13)
      #13     _CustomZone.run (dart:async/zone.dart:1328:19)
      #14     _runZoned (dart:async/zone.dart:1861:10)
      #15     runZonedGuarded (dart:async/zone.dart:1849:12)
      #16     runZoned (dart:async/zone.dart:1780:12)
      #17     asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3)
      #18     Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:205:9)
      #19     Doctor.diagnose (package:flutter_tools/src/doctor.dart:309:47)
      #20     DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:50:48)
      #21     FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1320:12)
      <asynchronous suspension>
      #22     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1161:27)
      <asynchronous suspension>
      #23     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #24     CommandRunner.runCommand (package:args/command_runner.dart:209:13)
      <asynchronous suspension>
      #25     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9)
      <asynchronous suspension>
      #26     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #27     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5)
      <asynchronous suspension>
      #28     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
      <asynchronous suspension>
      #29     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #30     main (package:flutter_tools/executable.dart:94:3)
      <asynchronous suspension>


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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 99.0.4844.74

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

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.13.0-0.0.pre.166, on macOS 12.2.1 21D62 darwin-arm, locale en-GB)
    • Flutter version 2.13.0-0.0.pre.166 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6af40a7004 (35 hours ago), 2022-03-19 19:15:23 -0400
    • Engine revision 900e3c0917
    • Dart version 2.17.0 (build 2.17.0-222.0.dev)
    • DevTools version 2.11.4

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • 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-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 213.5744.122

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 99.0.4844.74

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

• No issues found!

[idealclover]

Any updates here~?

[idealclover]

flutter 3.3 supports SelectionArea, which maybe can fix this issue

but when I tried to wrap markdown into SelectionArea, it didn't work.

[ArthurREGNARD]

Any updates ?

[abid-hasan]

Any updates?

[lff5]

Any updates?

[muthuspark]

Any updates?

[kokihoon]

Any updates?

[wl1395182472]

flutter_markdown uses many single widget to draw this markdown , maybe it causes this solve this maybe change its underlying logic , so it upgrades so slow?

also , i found that selection is sense of cleavage one by one on whole widget

[adrianjagielak]

As a workaround I've created a flutter_markdown package fork with necessary changes allowing markdown widgets to be wrapped in SelectionArea: https://pub.dev/packages/flutter_markdown_selectionarea

To use it just replace flutter_markdown dependency in your pubspec.yaml with

flutter_markdown_selectionarea: ^0.6.17+1

and then change all imports from

import 'package:flutter_markdown/flutter_markdown.dart';

to

import 'package:flutter_markdown_selectionarea/flutter_markdown.dart';

and then you will be able to make multiple paragraphs selectable by using SelectionArea widget:

SelectionArea(
  child: MarkdownBody(data: text),
)

Related issue: Support selecting text using SelectionArea #107073

[evannorstrand-mp]

@adrianjagielak - have you submitted an MR/PR to fix the issue in the original package?

[wjkoh]

It can be quite challenging to select text on iOS Safari. As shown in the screenshot below, when attempting to select text, two selections appear - one attributed to Flutter and the other to iOS. This interruption can make it difficult for users to accurately select the desired text.

[MonolithFoundation]

The markdown widget are so basic, but I can really hardly make flutter's markdown to work. It's not smooth, as a human in 2024 I don't know how to get along with it out of box, the text can not be select, the code can not be hightlighted, the code can not be copied....

@flutter can flutter team please watch this issue and make it higher priority?

Markdown is so foundamental before you spread flutter you need at least beat reactjs

[Justus-M]

Same issue here on web and desktop. within hours of releasing an update that uses flutter_markdown, I received a customer complaint that they cannot select all the text at once.