Regex Input

[dor-schreiber]

Hi, I love the repo!
I'm working on a TUI for regex testing and I want to make an input that highlights each letter based on the char type (letter, number, brackets, etc.) I'm having trouble creating this widget and using it as an input.
I want it to have the same style as the input (cursor, copy and paste).
Inherit the Input widget didn't make much sense (Maybe I'm wrong).
My solution was to use labels in a widget that listen to key presses when in focus but I couldn't make it (The key press isn't being detected).
Code:

from textual.containers import Horizontal
from textual.widgets import Label
from textual.reactive import reactive


class RegexPattern(Horizontal):
    DEFAULT_CSS = """
    RegexPattern {
        border: white;
    }
    
    .Blue {
        color: blue;
    }
    
    .Pink {
        color: pink;
    }
    
    .Brown {
        color: brown;
    }
    
    .Yellow {
        color: yellow;
    }
    
    .Purple {
        color: purple;
    }
    
    .Orange {
        color: orange;
    }
    
    .Green {
        color: green;
    }
    """

    REGEX_COLORS = {
        "^": "Blue",
        "[": "Pink",
        "]": "Pink",
        "-": "Brown",
        ".": "Yellow",
        "*": "Purple",
        "+": "Purple",
        "?": "Purple",
        "(": "Orange",
        ")": "Orange",
        "|": "Orange",
        "{": "Orange",
        "}": "Orange",
        ",": "Orange",
    }

    value = reactive("^[a-z|1|2]?{1,4}", recompose=True) # sample

    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    # def compose(self):
    #     """Compose the child widgets for the input."""
    #     for char in self.value:
    #         yield Label(char, classes=f"{self.get_color(char)}")

    def get_color(self, char: str) -> str:
        if char.isdigit():
            return "Blue"
        if char.isalpha():
            return "Green"
        return self.REGEX_COLORS.get(char, "White")

    def watch_value(self, new_value: str):
        """Update the input value and re-render the children."""
        self.value = new_value
        self.remove_children()  # Clear existing labels
        self.mount_all(Label(char, classes=f"{self.get_color(char)}") for char in self.value)

    async def focus(self, scroll_visible: bool = True):
        """Handle when the widget gains focus."""
        self.border_title = "Focused"
        self.refresh()

    async def blur(self):
        """Handle when the widget loses focus."""
        self.border_title = ""
        self.refresh()

    # async def on_event(self, key):
    #     """Handle key presses to update the input."""
    #     if event.character:
    #         # Append the character to the value
    #         self.update_value(self.value + event.character)
    #     elif event.key == "backspace":
    #         # Remove the last character
    #         self.update_value(self.value[:-1])
    #     raise Exception("Unhandled event")

Another issue is TextArea for test strings that can be multi-lines.
I want to have the ability to color a certain char by the index of the char or a range of indexes. To show matches

Any ideas on how I can make it work?

[TomJGooding]

Rather than try to implement your own input widget from scratch, perhaps worth investigating the highlighter parameter for the built-in Input.

You can learn more about creating custom highlighters in the Rich docs: https://rich.readthedocs.io/en/stable/highlighting.html

[dor-schreiber]

@TomJGooding
Hi, thank you for the comment!
The highlighter is a good option for the Input widget.
What about TextArea case? there is no highlighter option, only language and I don't think I can make it dynamic to a changing regex from the input.
Thanks

[TomJGooding]

This would definitely be more challenging for the TextArea - perhaps this related discussion provides some inspiration?

• Can I programmatically style text in a TextArea widget #5336