How to visualize formatted text without removing empty space?

Question

I want to visualize a pre-formatted text (with YAML format and indent). It seems that the <|{text}|> markdown pattern and the state representation removes intents from the text, i.e. all becomes a long mashed text. Here is an example output.

version: '3.1' stories: - story: 06a6e2c5e8bd4058b304b4f23d57aa80 steps: - intent: bot_capabilities user: What can you do

Correct is this:

version: '3.1'
stories:
-   story: 06a6e2c5e8bd4058b304b4f23d57aa80
    steps:
    -   intent: bot_capabilities
        user: What can you do

Is there a way to keep preformatted text especially with indents?

I could not yet find a fitting property for the "text" control. Raw does not seem to solve the issue. If I print the string before assigning it to a state variable, the output format is correct. Therefore, I assume the stripping of empty space happens automatically afterwards.

Answer 1

The most straightforward way is to use an input visual element with multiline property turned on.

main.py:

from taipy.gui import Gui 

#with open("file.yaml", "r") as f:
#    yaml_text = f.read()

yaml_text = """
version: '3.1'
stories:
-   story: loferum ipsi
    steps:
    -   intent: bot_capabilities
        user: What can you do
"""

page = """
<|{yaml_text}|input|multiline|label=Input|>

<|{yaml_text}|input|multiline|not active|label=Inactive input|>

<|{yaml_text}|input|multiline|not active|label=Inactive white input|id=yaml|>
"""

Gui(page).run()

Here is the result:

• The first input is editable
• The second is not editable and grey
• The third is not editable and white

For the last element, I added a bit of CSS to make the inactive input white:

main.css:

#yaml.Mui-disabled{
    color: white !important;
    -webkit-text-fill-color: white !important;
}

An issue has been created on GitHub to improve text visual elements directly.