Panels Not Rendering Rich Text Formatting

[PoshoDev]

Hey there, 🙂

First of all, let me thank you for all the work you're doing at Textualize. You guys literally changed the way I develop my small projects. Please do keep it up!

Well, I was in the midst of porting a project I did with Textual 0.1.x to the newer 0.2.0 version, in which I rendered Textualize Widgets using Rich Panels. I noticed that the usual Rich text formatting isn't being recognized at all with the Panels, but does work for a regular text render as seen below.

No idea what I could be doing wrong or if this is a bug, since it worked fine with 0.1.x. Here's my code:

from textual.app import App, ComposeResult, RenderResult
from textual.widget import Widget
from rich.panel import Panel

class DoesntWork(Widget):
    def render(self) -> RenderResult:
        return Panel("Hello, [red]World[/]!")

class Works(Widget):
    def render(self) -> RenderResult:
        return "Hello, [red]World[/]!"

class Test(App):
    CSS_PATH = "style.css"
    def compose(self) -> ComposeResult:
        yield DoesntWork()
        yield Works()

app = Test()
app.run()

I also tried doing using Panel instead of RenderResult for type hinting in the render() method since that was the way I was doing it in the previous version, but the result is the same.

Here is my requirements/pip freeze if that is useful somehow, even though I did a fresh reinstall of my virtual environment minutes ago just to check:

requirements.txt

aiohttp==3.8.3
aiosignal==1.3.1
async-timeout==4.0.2
attrs==22.1.0
charset-normalizer==2.1.1
click==8.1.3
colorama==0.4.6
commonmark==0.9.1
frozenlist==1.3.3
idna==3.4
importlib-metadata==4.13.0
msgpack==1.0.4
multidict==6.0.2
nanoid==2.0.0
Pygments==2.13.0
rich==12.6.0
textual==0.5.0
textualize==0.1
typing_extensions==4.4.0
yarl==1.8.1
zipp==3.11.0

Thanks you for reading this!

Cheers,
Posho ✌

[davep]

Hey Posho, glad you're enjoying Textual. As you've probably guessed much has changed from 0.1.0 to 0.2.0 (and beyond) and while Rich renderables will still work (with I believe (I've only really come on board with 0.2.0) some differences to how you use them) much of what you're wanting to do here is likely better done now using the full features of CSS.

So, for example, as I understand it, you want some red text inside a box? Now you could do this:

from textual.app import App, RenderResult, ComposeResult
from textual.widgets import Label

class Hello( Label ):

    DEFAULT_CSS = """
    Hello {
        border: round white;
        height: 100%;
    }
    """

    def render(self) -> RenderResult:
        return "Hello, [red]World[/]!"

class Test(App):

    def compose(self) -> ComposeResult:
        yield Hello()

app = Test()
app.run()

Playing some more, and I don't know if this is intentional or not, it looks like you can still use a Panel but you need to render the inner text from markup first; for example:

from textual.app import App, RenderResult, ComposeResult
from textual.widgets import Label
from rich.panel import Panel
from rich.text import Text

class Hello( Label ):

    def render(self) -> RenderResult:
        return Panel( Text.from_markup( "Hello, [red]World[/]!" ) )

class Test(App):

    def compose(self) -> ComposeResult:
        yield Hello()

app = Test()
app.run()

I'm not so familiar with Rich and parts of Rich within Textual yet so I might be missing something here, but that seems to work.

However, I think I'd be inclined to go with something more like the former as there's a lot of power to be had from using the new CSS approach.

[PoshoDev]

Thank you! And yes, I'm definitely looking into the new CSS stuff. I'm having tons of fun discovering the new Textual improvements. 😁

[davep]

Now I think about it, this was sort of ringing a bell; I think this is what #1023 is all about.

[PoshoDev]

Seems completely plausible. Is there a way to switch the markup back on yet? 🤔

[davep]

Looking back through my notes, I see that #1002 is related too.

Is there a way to switch the markup back on yet?

Now that I'm aware of. If/when that gets sorted I suspect #1023 will be what tracks it and will be closed once completed.

[PoshoDev]

Yep, that's exactly the same as my issue. I guess I'll just wait it out. In the meantime I'll just stick to your Text.from_markup() solution. 👍

Thank you for everything so far!