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?