keys and playground

Author: willmcgugan

docs/guide/content.md

@@ -1,7 +1,7 @@
 # Content
 
-Custom widgets will typically implement a [`render()`][textual.widget.Widget.render] method which returns the *content* of the widget.
-In other words, the output that will be displayed within the widget's borders.
+The *content* of widget (displayed within the widget's borders) is typically specified in a call to [`Static.update`][textual.widgets.static.Static.update] or returned from [`render()`][textual.widget.Widget.render] in the case of [custom widgets](./widgets.md#custom-widgets).
+
 There are a few ways for you to specify this content.
 
 - Text — either plain text, or [markup](#markup).
@@ -13,6 +13,7 @@ In this chapter, we will cover all these methods.
 ## Markup
 
 When building a custom widget you can embed color and style information in the string returned from the Widget's [`render()`][textual.widget.Widget.render] method.
+Markup is specified as a string which contains 
 Text enclosed in square brackets (`[]`) won't appear in the output, but will modify the style of the text that follows.
 This is known as *Textual markup*.
 
@@ -380,7 +381,7 @@ class WelcomeWidget(Widget):
 
 While this is straightforward and intuitive, it can potentially break in subtle ways.
 If the 'name' variable contains square brackets, these may be interpreted as markup.
-For instance if the user entered their name at some point as "[magenta italic underline]Will is Cool!" then your app will display those styles where you didn't intend them to be.
+For instance if the user entered their name at some point as "[magenta italic]Will" then your app will display those styles where you didn't intend them to be.
 
 We can avoid this problem by relying on the [Content.from_markup][textual.content.Content.from_markup] method to insert the variables for us.
 If you supply variables as keyword arguments, these will be substituted in the markup using the same syntax as [string.Template](https://docs.python.org/3/library/string.html#template-strings).
@@ -396,7 +397,7 @@ You can experiment with this feature by entering a dictionary of variables in th
 
 Here's what that looks like:
 
-```{.textual path="docs/examples/guide/content/playground.py" lines=16 type="hello [bold]$name[/bold]!\t{'name': '[magenta italic underline]Will is Cool!'}"]}
+```{.textual path="docs/examples/guide/content/playground.py" lines=20 columns=100 type='hello [bold]$name[/bold]!\t{"name": "[magenta italic]Will"}\t']}
 ```
 
 ## Rich renderables

src/textual/_markup_playground.py

@@ -1,6 +1,6 @@
 import json
 
-from textual import containers, on
+from textual import containers, events, on
 from textual.app import App, ComposeResult
 from textual.content import Content
 from textual.reactive import reactive
@@ -14,22 +14,29 @@ class MarkupPlayground(App):
     Screen {
         & > * {
             margin: 0 1;
+            height: 1fr;
         }
         layout: vertical;
         #editor {            
             width: 2fr;
             height: 1fr;
-            border: tab $primary;  
+            border: tab $foreground 50%;  
             padding: 1;
             margin: 1 1 0 0;
+            &:focus {
+                border: tab $primary;  
+            }
             
         }
         #variables {
             width: 1fr;
             height: 1fr;
-            border: tab $primary;  
+            border: tab $foreground 50%;  
             padding: 1;
             margin: 1 0 0 1;
+            &:focus {
+                border: tab $primary;  
+            }
         }
         #variables.-bad-json {
             border: tab $error;
@@ -52,13 +59,15 @@ class MarkupPlayground(App):
     variables: reactive[dict[str, object]] = reactive({})
 
     def compose(self) -> ComposeResult:
-        with containers.HorizontalScroll():
+        with containers.HorizontalGroup():
             yield (editor := TextArea(id="editor"))
             yield (variables := TextArea("", id="variables", language="json"))
         editor.border_title = "Markup"
         variables.border_title = "Variables (JSON)"
 
-        with containers.VerticalScroll(id="results-container") as container:
+        with containers.VerticalScroll(
+            id="results-container", can_focus=False
+        ) as container:
             yield Static(id="results")
         container.border_title = "Output"
 
@@ -88,6 +97,18 @@ def watch_variables(self, variables: dict[str, object]) -> None:
 
     @on(TextArea.Changed, "#variables")
     def on_variables_change(self, event: TextArea.Changed) -> None:
+        variables_text_area = self.query_one("#variables", TextArea)
+        try:
+            variables = json.loads(variables_text_area.text)
+        except Exception as error:
+            variables_text_area.add_class("-bad-json")
+            self.variables = {}
+        else:
+            variables_text_area.remove_class("-bad-json")
+            self.variables = variables
+
+    @on(events.DescendantBlur, "#variables")
+    def on_variables_blur(self) -> None:
         variables_text_area = self.query_one("#variables", TextArea)
         try:
             variables = json.loads(variables_text_area.text)
@@ -97,4 +118,5 @@ def on_variables_change(self, event: TextArea.Changed) -> None:
                 variables_text_area.add_class("-bad-json")
         else:
             variables_text_area.remove_class("-bad-json")
+            variables_text_area.text = json.dumps(variables, indent=4)
             self.variables = variables

src/textual/keys.py

@@ -270,6 +270,9 @@ def value(self) -> str:
 }
 
 
+ASCII_KEY_NAMES = {"\t": "tab"}
+
+
 def _get_unicode_name_from_key(key: str) -> str:
     """Get the best guess for the Unicode name of the char corresponding to the key.
 
@@ -341,7 +344,12 @@ def _character_to_key(character: str) -> str:
     This transformation can be undone by the function `_get_unicode_name_from_key`.
     """
     if not character.isalnum():
-        key = unicodedata.name(character).lower().replace("-", "_").replace(" ", "_")
+        try:
+            key = (
+                unicodedata.name(character).lower().replace("-", "_").replace(" ", "_")
+            )
+        except ValueError:
+            key = ASCII_KEY_NAMES.get(character, character)
     else:
         key = character
     key = KEY_NAME_REPLACEMENTS.get(key, key)