Markdown issues with 5.0

[djetelina]

Hello, I'm trying to update textual (from 3.3.0) to 5.0 and I'm having strange issues with Markdown (4.0 behaves as expected).

MarkdownViewer

It's likely that my approach to MarkdownViewer is 'hacky' but it's what I figured out.

Existing logic

I'm subclassing MarkdownViewer, but without too many extras, mostly proxying scroll behavior, actions and update to self.document. The action_toggle_toc is the most advanced part.

class ContentWindow(MarkdownViewer):
    ALLOW_MAXIMIZE = True
    BINDINGS = [...]

    def __init__(self, content=None, **kwargs):
        self.content = content if content is not None else welcome_content
        super().__init__(
            self.content,
            classes="content",
            show_table_of_contents=False,
            id="content",
            **kwargs,
        )

    def action_up(self) -> None:
        self.document.scroll_up()

    def action_down(self) -> None:
        self.document.scroll_down()

    def action_page_down(self) -> None:
        self.document.action_page_down()

    def action_page_up(self) -> None:
        self.document.action_page_up()

    def action_scroll_home(self) -> None:
        self.document.scroll_home()

    def action_scroll_end(self) -> None:
        self.document.scroll_end()

    def update(self, markdown: str) -> None:
        self.content = markdown
        self.document.update(markdown)

    def action_toggle_toc(self):
        self.show_table_of_contents = not self.show_table_of_contents
        if not self.table_of_contents.border_title:
            self.table_of_contents.border_title = "Table of Contents"
        if self.show_table_of_contents:
            toc = self.table_of_contents.query_one(Tree)
            toc.focus()
            toc.action_cursor_down()
        else:
            self.document.focus()

    def action_yank(self):
        code_blocks = re.findall(CODEBLOCK_REGEX, self.content, re.MULTILINE | re.DOTALL)
        if self.app.code_block_selector.has_parent:
            self.app.code_block_selector.parent.remove_children([self.app.code_block_selector])
        if not code_blocks:
            return
        self.screen.mount(self.app.code_block_selector)
        self.app.code_block_selector.set_new_options(code_blocks)
        self.screen.maximize(self.app.code_block_selector)

    def action_open_browser(self):
        provider = self.app.active_provider.display_name
        resource_type = self.app.active_resource.type.value
        resource_name = self.app.active_resource.name
        url = f"https://search.opentofu.org/provider/{provider}/latest/docs/{resource_type}s/{resource_name}"
        self.app.open_url(url)

    # Without this, the Markdown viewer would try to open a file on a disk, while the Markdown itself will open a browser link (desired)
    async def go(self, location):
        return None

The focusable throughout my app is always the document (or toc), not the Viewer.

Error

The problem is, I'm unable to navigate the document at all. None of my custom actions work, basic arrows don't work. Even if I try to focus the MarkdownViewer or scroll that. Additionally even Table of Contents doesn't move the content. The other actions all work as expected.

I went through the Changelog and I don't see how any of those could've had this impact.

Syntax highlighting

Another thing I have a problem with is probably more of a feedback. I understand the appeal of using CSS in the Markdown code blocks, but in practice, the code blocks are MUCH harder to customize and don't produce the expected colors (e.g. with builtin dracula theme). I even allowed my users to configure code block highlighting separately from the application, because pygments offer more options and they actually end up looking as they should. Re-adding Markdown.code_dark_theme would be awesome.

[willmcgugan]

Some of the internals have changed. We would need an MRE to understand what is impacting you. Does "markdown.py" in the examples directory work for you?

As for syntax highlighting, you will have to elaborate on what you are expecting in terms of colors.

[djetelina]

Yes, the example markdown.py works for me. The easiest way to reproduce would be to checkout my app's repo, change textual version in pyproject.toml dependencies to ==5.0.1, remove line 104 in main.py (code_dark_theme) and then uv run tofuref. The content window is the one impacted there.

Syntax, here is what the syntax highlighting looks like right now with dracula theme:

Here is what proper dracula themed syntax should look like

I think that relying on theme's CSS is fine as a default, but having the option to override it through some kind of theme property would be really nice.

[willmcgugan]

Sorry, you are asking a bit much. Happy to run an MRE, but not to check out a repo and make edits. Additionally building the MRE can often help you identify what the issue is.

It would be possible to expose the HighlightTheme instance on the Markdown interface. Although if you were to replace that, it might not look great with all our themes. Still, happy to accept a PR. Or you could post a feature request issue for that.

[djetelina]

Good call.

I found two breaking changes that applied to my code.

First, I was stealing the key actions, then calling them on document. In 5.0, they shouldn't be on document. Solution = rely on builtin actions for navigation, so keep the additional bindings (in my case VIM-like), but no additional functions needed.

Second, which was less obvious - previously the way to edit css of MarkdownViewer, as well as border titles and subtitles, was again through the document. This is no longer the case and classes, border_title and border_subtitle should be changed on the viewer level. For some reason when set on the document, the scrolling functions just break completely 🤷

Overall the changes are positive, as the Viewer now behaves more as expected and there's lower need for 'hacking'.

Thank you for your quick responses!

[TomJGooding]

Are you sure your bindings worked in Textual v3.3.0? I haven't really dived into this yet, but pretty sure you'd want to scroll the MarkdownViewer rather than its Markdownwidget.

[TomJGooding]

You don't even need to define your own actions for the scrolling. Here's a quick example where you can use j/k to navigate:

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.widgets import MarkdownViewer


class CustomMarkdownViewer(MarkdownViewer):
    BINDINGS = [
        Binding("up,k", "scroll_up", "Scroll Up", show=False),
        Binding("down,j", "scroll_down", "Scroll Down", show=False),
    ]


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield CustomMarkdownViewer(
            "This is some long markdown.\n\n" * 100,
        )


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[djetelina]

It's been a while since I initially wrote the app, but I think I wouldn't write the logic if there was no reason to. Maybe something else, such as the focus confused me. Either way it did work in 3.3.0 and 4.0.0 with the code in the OP. Scrolling the document moved the actual content.