Markdown code block is not selectable

[duqcyxwd]

[MacOS Native App] The code block is not selectable

I am currently playing with Flet sample code and I have noticed that the code block generated from markdown is not selectable. This is quite frustrating as the code block is the most crucial area where people usually want to copy things from.

Code example to reproduce the issue:
The sample code can be found at https://github.com/flet-dev/examples/blob/main/python/controls/markdown/markdown-code-highlight.py

I just ran it as py markdown-code-highlight.py

Describe the results you received:

A new app window has been generated, but I am unable to select the code block, which means I cannot copy the content.

Describe the results you expected:

code block is selectable.

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

❯ pip show flet
Name: flet
Version: 0.9.0
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: /usr/local/lib/python3.11/site-packages
Requires: copier, flet-runtime, packaging, pydantic, qrcode, watchdog, websocket-client, websockets
Required-by:

Operating system:

macOS Monterey 12.6.7

Additional environment details:
I have also noticed that I am unable to select multiple pieces of content across different sections. For instance, I cannot select multiple paragraphs or select something that includes a heading unit.

[LeandroLimaPRO]

I'm using Windows 11 and flt in the command:

flet app.py -d

and I also can't select with the mouse pointer and the copy button doesn't display

[ndonkoHenri]

Please try using the SelectionArea control.

[torablien]

This issue seems to persist even if SelectionArea is used.

In this example, the last two Hello Worlds are the only ones displayed in a code block and they are both not selectable.

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Column(
            controls=[
                ft.Markdown(
                    value="Hello world!",
                    selectable=True,
                    extension_set=ft.MarkdownExtensionSet.COMMON_MARK,
                ),
                ft.Markdown(
                    value="`Hello world!`",
                    selectable=True,
                    extension_set=ft.MarkdownExtensionSet.COMMON_MARK,
                ),
                ft.Markdown(
                    value="```\nHello world!\n```",
                    selectable=True,
                ),
                ft.Markdown(
                    value="```\nHello world!\n```",
                    selectable=True,
                    extension_set=ft.MarkdownExtensionSet.COMMON_MARK,
                ),
                ft.SelectionArea(
                    ft.Markdown(
                        value="```\nHello world!\n```",
                        selectable=True,
                        extension_set=ft.MarkdownExtensionSet.COMMON_MARK,
                    ),
                ),
            ],
        )
    )


ft.app(main)

[FeodorFitsner]

The code inside Markdown is rendered slightly differently. We could look into that some day.

[torablien]

The code inside Markdown is rendered slightly differently. We could look into that some day.

Thanks! By chance, do you have any suggested workarounds? As the original reporter noted:

This is quite frustrating as the code block is the most crucial area where people usually want to copy things from

If you were approaching this situation, how would you handle it?

[FeodorFitsner]

Alright, seems like I just fixed that issue: #3236
It was partially similar to #3035

Works with SelectionArea and selectable=True, but the behaviour is different.

When you set markdown.selectable=True code blocks and surrounding text are selectable, but "separately", meaning you can't select entire document.

But we you leave markdown.selectable=False, but wrap it with SelectionArea then you can select everything in one selection.

[torablien]

Amazingly quick - thank you. I appreciate how quickly you triage issues, not mention address them. Much appreciated and gives me confidence in the framework as a whole.