[🐛 BUG] Stylekit is not applied for text with mode="md"

[FlorianJacta]

What went wrong? 🤔

Some styles in the Stylekit (through the class_name) are not applied when mode="md" is set for text visual element. This prevents the user from changing the text element like he wants.

The issue comes from a user: https://github.com/Avaiga/taipy/discussions/1547

Expected Behavior

The class_name/stylekit should be applied for all styles even with mode="md".

Steps to Reproduce Issue

Style don't work:

import taipy.gui.builder as tgb 
from taipy import Gui 

x = {"a": {"b": {"": 1}}}

with tgb.Page() as page:
    with tgb.layout('5*1', gap='2.0rem'):
        card_style = 'card pb0 m0'
        heading_style = 'text-right h5 color-primary pb0'
        number_style = 'text-right h1 pb0'
        with tgb.part(card_style):
            tgb.text("**Headline**", class_name=heading_style, mode="md")
            tgb.text("{x['a']['b']['']}", format='%.0f', class_name=number_style, "mode="md")

Gui(page).run()

Works (but without the Markdown format:

import taipy.gui.builder as tgb 
from taipy import Gui 

x = {"a": {"b": {"": 1}}}

with tgb.Page() as page:
    with tgb.layout('5*1', gap='2.0rem'):
        card_style = 'card pb0 m0'
        heading_style = 'text-right h5 color-primary pb0'
        number_style = 'text-right h1 pb0'
        with tgb.part(card_style):
            tgb.text("**Headline**", class_name=heading_style)
            tgb.text("{x['a']['b']['']}", format='%.0f', class_name=number_style)

Gui(page).run()

Solution Proposed

This seems to come from a

tag surrounding the text and not being a span like the normal visual element.

Version of Taipy

3.1.1 / Develop

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%.
• [ ] Create related issue in taipy-doc for documentation and Release Notes.

Code of Conduct

• [X] I have checked the existing issues.
• [ ] I am willing to work on this issue (optional)

[FredLL-Avaiga]

It seems legit that HTML elements are added when in markdown mode (that's the point of markdown: generate HTML tags) and that one would have to set styles differently ...

[Satoshi-Sh]

Can I take this issue?

[jrobinAV]

Sure

[Satoshi-Sh]

I have a question. tgb.text with md mode is related to the Field.tsx component using reac-markdown?

I updated this code but the behavior doesn't change. Let me know if I'm missing something. Thanks.

@FredLL-Avaiga

[FredLL-Avaiga]

Yes it is Did you rebuild the frontend bundle?

[Satoshi-Sh]

Yes, I rebuilt it. I will try again.

UPDATE I found an eslint error. That's why I couldn't see the change.

[Satoshi-Sh]

I tried to fix this issue but there seems no reasonable solution after talking with Fred. I closed my PR. You may change the state of the issue. @jrobinAV Thanks

[FredLL-Avaiga]

won't fix: Stylekit classes usually cannot be applied to text in mode "md" because the markdown creates new tags inside the div that receives the stylekit classes.for example any simple text in md mode will be rendered as <div data-comment="from text comp" class="taipy-text stylekit classes"><p>{text value}</p></div> Some stylekit classes might have an effect but I would recommend to not use them and use direct styling of the component via CSS.