Markdown toggle focus between can_focus_children and normal mode

[villekr]

I'm looking for a preferred way to implement focus travelsal in Markdown widget so that:

• "focus mode" can be toggled between markdown itself and it's children
  • when hitting "enter" focus mode is "children". By pressing "tab" focus cycles between markdown widget's children (and not out of this selected markdown widget)
  • when hitting "escape" normal focus mode is restored. By pressing "tab" focus cycles between markdown widget and any other focusable widgets

In my code below I accomplished kind of the desired behaviour, but there are two questions:

• Is there a more simpler way to achieve this?
• How to prevent focus jumping out of markdown's children when focus mode is "children"

markdown.py

from textual.app import App, ComposeResult
from textual.widgets import Markdown
from textual.containers import Horizontal
from textual import events

EXAMPLE_MARKDOWN = """\
# Markdown Document

This is an example of Textual's `Markdown` widget.

## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!
"""


class MyMarkdown(Markdown):
    can_focus = True

    def on_key(self, event: events.Key) -> None:
        if event.key == "enter":
            # Enable "children" focus mode
            self.can_focus_children = True
            for child in self.children:
                child.can_focus = True
            self.children[0].focus()
        elif event.key == "escape":
            # Restore "normal" focus mode
            self.can_focus_children = False
            for child in self.children:
                child.can_focus = False
            self.focus()


class MarkdownExampleApp(App):
    CSS_PATH = "markdown.tcss"

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield MyMarkdown(EXAMPLE_MARKDOWN)
            yield MyMarkdown(EXAMPLE_MARKDOWN)


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

markdown.tcss

Markdown {
    width: 50%;
    margin: 1 1 1 1;
}

Markdown:focus {
    background: $accent;
}

MarkdownH1:focus {
    background: $accent;
}

MarkdownParagraph:focus {
    background: $accent;
}

MarkdownH2:focus {
    background: $accent;
}

MarkdownBulletList:focus {
    background: $accent;
}

[TomJGooding]

I'd suggest using Bindings rather than handling the key events.

The problem is that Tab is a priority binding in Textual to focus the next widget on the screen. You would need to override this by adding a new priority binding in your custom widget.

Perhaps something like this:

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Horizontal
from textual.widgets import Markdown

EXAMPLE_MARKDOWN = """\
# Markdown Document

This is an example of Textual's `Markdown` widget.

## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!
"""


class MyMarkdown(Markdown, can_focus=True, can_focus_children=False):
    BINDINGS = [
        Binding("enter", "enable_focus_children"),
        Binding("escape", "disable_focus_children"),
        Binding("tab", "focus_next", priority=True),
    ]

    def action_enable_focus_children(self) -> None:
        self.can_focus_children = True
        for child in self.children:
            child.can_focus = True
        self.children[0].focus()

    def action_disable_focus_children(self) -> None:
        self.can_focus_children = False
        for child in self.children:
            child.can_focus = False
        self.focus()

    def action_focus_next(self) -> None:
        if self.can_focus_children:
            self.screen.focus_next("MyMarkdown *")
        else:
            self.screen.focus_next()


class MarkdownExampleApp(App):
    CSS_PATH = "markdown.tcss"

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield MyMarkdown(EXAMPLE_MARKDOWN)
            yield MyMarkdown(EXAMPLE_MARKDOWN)


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

[villekr]

Excellent! Works like a charm. Thank for your fast reply.

What would be the preferred way to define 'focused'-style to Markdown and all it's children? Currently (see my original question's code) I have defined :focus pseudo classes for all Markdown* classes but even though this works it feels a bit extra work and if new Subclasses are added to Markdown then styles need to be defined for each of them.

What I'm looking for is a way for children to inherit :focus pseudo classes but that doesn't seem to work. 'focusable_markdown' is inherited by children.

In markdown.py

yield MyMarkdown(EXAMPLE_MARKDOWN, classes="focusable_markdown")

In markdown.tcss

.focusable_markdown {
    background: green;
}

.focusable_markdown > Widget {
    background: green;
}

.focusable_markdown:focus {
    background: $accent;
}

/* This one doesn't work */
.focusable_markdown:focus > Widget:focus {
    background: $accent;
}

[TomJGooding]

Something like this?

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Horizontal
from textual.widgets import Markdown

EXAMPLE_MARKDOWN = """\
# Markdown Document

This is an example of Textual's `Markdown` widget.

## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!
"""


class FocusableMarkdown(Markdown, can_focus=True, can_focus_children=False):
    BINDINGS = [
        Binding("enter", "enable_focus_children"),
        Binding("escape", "disable_focus_children"),
        Binding("tab", "focus_next", priority=True),
    ]

    DEFAULT_CSS = """
    FocusableMarkdown {
        border: tall transparent;
    }

    FocusableMarkdown:focus {
        border: tall $accent;
    }

    FocusableMarkdown > MarkdownBlock:focus {
        background: $accent;
    }
    """

    def action_enable_focus_children(self) -> None:
        self.can_focus_children = True
        for child in self.children:
            child.can_focus = True
        self.children[0].focus()

    def action_disable_focus_children(self) -> None:
        self.can_focus_children = False
        for child in self.children:
            child.can_focus = False
        self.focus()

    def action_focus_next(self) -> None:
        if self.can_focus_children:
            self.screen.focus_next("FocusableMarkdown *")
        else:
            self.screen.focus_next()


class MarkdownExampleApp(App):
    CSS = """
    FocusableMarkdown {
        width: 50%;
        margin: 1 1 1 1;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)


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

[villekr]

Yes, that's neat!

When having also code block in markdown content focus-metaclass doesn't hightlight MarkdownFence widget. If I change focus-metaclass to use some sort of border then focus effect is visible but that makes markdown child widgets jump around a bit once focused. Any idea how to apply $accent background also to widget that displays the code part so that focus travelsal within markdown widget is consisten?
focusable_markdown.md

(Code attach as a file and renamed to .md as I couldn't figure out how to post markdown in markdown in github issue)

[TomJGooding]

I've opened an issue for this possible Syntax bug here:

• [BUG] Overriding background_color of Syntax doesn't include padding rich#3295

[villekr]

Ok great! I didn't know that using ~~~ is a thing. Thanks for being super helpful.

There are still two issues with how 'shift+tab' is handled when can_focus_children is True:

• Focus highlight is left on MarkdownFence
• Focus 'escapes' out of FocusableMarkdown

I added bindings for arrow keys and duplicated the logic for 'action_focus_previous'-method. So focus travelsal now works with arrow keys as I would expect. But what would be the best approach to handle above issues with 'shift+tab' case?

from rich.syntax import Syntax
from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Horizontal
from textual.widgets import Markdown, Static
from textual.widgets._markdown import MarkdownFence

EXAMPLE_MARKDOWN = """\
# Markdown Document

This is an example of Textual's `Markdown` widget.

## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!

Some code:
~~~python
def do_something():
    pass
~~~
"""


class FocusableMarkdown(Markdown, can_focus=True, can_focus_children=False):
    BINDINGS = [
        Binding("enter", "enable_focus_children"),
        Binding("escape", "disable_focus_children"),
        Binding("tab,down,right", "focus_next", priority=True),
        Binding("up,left", "focus_previous", priority=True),
    ]

    DEFAULT_CSS = """
    FocusableMarkdown {
        border: tall transparent;
    }

    FocusableMarkdown:focus {
        border: tall $accent;
    }

    FocusableMarkdown > MarkdownBlock:focus {
        background: $accent;
    }
    """

    def action_enable_focus_children(self) -> None:
        self.can_focus_children = True
        for child in self.children:
            child.can_focus = True
        self.children[0].focus()

    def action_disable_focus_children(self) -> None:
        # If a MarkdownFence currently has focus, remove the highlighting
        if isinstance(self.screen.focused, MarkdownFence):
            self.update_fence_highlighting(
                fence=self.screen.focused,
                highlight=False,
            )

        self.can_focus_children = False
        for child in self.children:
            child.can_focus = False
        self.focus()

    def action_focus_next(self) -> None:
        if self.can_focus_children:
            # If a MarkdownFence currently has focus, remove the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused,
                    highlight=False,
                )

            self.screen.focus_next("FocusableMarkdown *")
            # Now if the focused widget is a MarkdownFence, add the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused, highlight=True
                )
        else:
            self.screen.focus_next()

    def action_focus_previous(self) -> None:
        if self.can_focus_children:
            # If a MarkdownFence currently has focus, remove the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused,
                    highlight=False,
                )

            self.screen.focus_previous("FocusableMarkdown *")
            # Now if the focused widget is a MarkdownFence, add the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused, highlight=True
                )
        else:
            self.screen.focus_previous()

    def update_fence_highlighting(
        self,
        fence: MarkdownFence,
        highlight: bool,
    ) -> None:
        if highlight:
            accent_color = "#0178D4"
            block = Syntax(
                fence.code,
                lexer=fence.lexer,
                word_wrap=False,
                indent_guides=True,
                padding=(1, 2),
                theme=fence.theme,
                background_color=accent_color,
            )
        else:
            block = Syntax(
                fence.code,
                lexer=fence.lexer,
                word_wrap=False,
                indent_guides=True,
                padding=(1, 2),
                theme=fence.theme,
            )

        fence.get_child_by_type(Static).update(block)


class FocusableMarkdownApp(App):
    CSS = """
    FocusableMarkdown {
        width: 50%;
        margin: 1 1 1 1;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)


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

[TomJGooding]

There are still two issues with how 'shift+tab' is handled when can_focus_children is True...

I don't see you've added a binding for tnis in the code above?

Going back to my original reply... the same applies here for Shift+Tab.

The problem is that Tab is a priority binding in Textual to focus the next widget on the screen. You would need to override this by adding a new priority binding in your custom widget.

[villekr]

Yes, you're totally right. That was my mistake missing that binding. So for now the code is the following.

How would the final iteration look like utilizing the fix for Textualize/rich#3295?

from rich.syntax import Syntax
from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Horizontal
from textual.widgets import Markdown, Static
from textual.widgets._markdown import MarkdownFence

EXAMPLE_MARKDOWN = """\
# Markdown Document

This is an example of Textual's `Markdown` widget.

## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!

Some code:
~~~python
def do_something():
    pass
~~~
"""


class FocusableMarkdown(Markdown, can_focus=True, can_focus_children=False):
    BINDINGS = [
        Binding("enter", "enable_focus_children"),
        Binding("escape", "disable_focus_children"),
        Binding("tab,down,right", "focus_next", priority=True),
        Binding("shift+tab,up,left", "focus_previous", priority=True),
    ]

    DEFAULT_CSS = """
    FocusableMarkdown {
        border: tall transparent;
    }

    FocusableMarkdown:focus {
        border: tall $accent;
    }

    FocusableMarkdown > MarkdownBlock:focus {
        background: $accent;
    }
    """

    def action_enable_focus_children(self) -> None:
        self.can_focus_children = True
        for child in self.children:
            child.can_focus = True
        self.children[0].focus()

    def action_disable_focus_children(self) -> None:
        # If a MarkdownFence currently has focus, remove the highlighting
        if isinstance(self.screen.focused, MarkdownFence):
            self.update_fence_highlighting(
                fence=self.screen.focused,
                highlight=False,
            )

        self.can_focus_children = False
        for child in self.children:
            child.can_focus = False
        self.focus()

    def action_focus_next(self) -> None:
        if self.can_focus_children:
            # If a MarkdownFence currently has focus, remove the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused,
                    highlight=False,
                )

            self.screen.focus_next("FocusableMarkdown *")
            # Now if the focused widget is a MarkdownFence, add the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused, highlight=True
                )
        else:
            self.screen.focus_next()

    def action_focus_previous(self) -> None:
        if self.can_focus_children:
            # If a MarkdownFence currently has focus, remove the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused,
                    highlight=False,
                )

            self.screen.focus_previous("FocusableMarkdown *")
            # Now if the focused widget is a MarkdownFence, add the highlighting
            if isinstance(self.screen.focused, MarkdownFence):
                self.update_fence_highlighting(
                    fence=self.screen.focused, highlight=True
                )
        else:
            self.screen.focus_previous()

    def update_fence_highlighting(
        self,
        fence: MarkdownFence,
        highlight: bool,
    ) -> None:
        if highlight:
            accent_color = "#0178D4"
            block = Syntax(
                fence.code,
                lexer=fence.lexer,
                word_wrap=False,
                indent_guides=True,
                padding=(1, 2),
                theme=fence.theme,
                background_color=accent_color,
            )
        else:
            block = Syntax(
                fence.code,
                lexer=fence.lexer,
                word_wrap=False,
                indent_guides=True,
                padding=(1, 2),
                theme=fence.theme,
            )

        fence.get_child_by_type(Static).update(block)


class FocusableMarkdownApp(App):
    CSS = """
    FocusableMarkdown {
        width: 50%;
        margin: 1 1 1 1;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)
            yield FocusableMarkdown(EXAMPLE_MARKDOWN)


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

[TomJGooding]

How would the final iteration look like utilizing the fix for Textualize/rich#3295?

Sorry I'm not sure what you mean? The code I added to update the Syntax background of the MarkdownFence won't change, the issue currently is that this background_color override doesn't include the padding.