Textual markup

.github/workflows/pythonpackage.yml

@@ -49,7 +49,7 @@ jobs:
         if: ${{ matrix.python-version == '3.8' }}
       - name: Upload snapshot report
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: snapshot-report-textual
           path: snapshot_report.html

CHANGELOG.md

@@ -24,6 +24,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Added App.ALLOW_SELECT for a global switch to disable text selection https://github.com/Textualize/textual/pull/5409
 - Added `DOMNode.query_ancestor` https://github.com/Textualize/textual/pull/5409
 - Added selection to Log widget https://github.com/Textualize/textual/pull/5467
+- Added `text-wrap` and `text-overflow` CSS values https://github.com/Textualize/textual/pull/5485
+- Added Textual markup to replace Rich markup https://github.com/Textualize/textual/pull/5485
+- Added `Content.from_markup` https://github.com/Textualize/textual/pull/5485
 
 ### Fixed
 

docs/api/content.md

@@ -0,0 +1,5 @@
+---
+title: "textual.content"
+---
+
+::: textual.content

docs/api/style.md

@@ -0,0 +1,5 @@
+---
+title: "textual.style"
+---
+
+::: textual.style

docs/examples/guide/content/content01.py

@@ -0,0 +1,36 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+TEXT1 = """\
+Hello, [bold $text on $primary]World[/]!
+
+[@click=app.notify('Hello, World!')]Click me[/]
+"""
+
+TEXT2 = """\
+Markup will [bold]not[/bold] be displayed.
+
+Tags will be left in the output.
+
+"""
+
+
+class ContentApp(App):
+    CSS = """
+    Screen {
+        Static {
+            height: 1fr;
+        }
+        #text1 { background: $primary-muted; }
+        #text2 { background: $error-muted; }
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Static(TEXT1, id="text1")
+        yield Static(TEXT2, id="text2", markup=False)  # (1)!
+
+
+if __name__ == "__main__":
+    app = ContentApp()
+    app.run()

docs/examples/guide/content/playground.py

@@ -0,0 +1,5 @@
+from textual._markup_playground import MarkupPlayground
+
+if __name__ == "__main__":
+    app = MarkupPlayground()
+    app.run()

docs/examples/guide/content/renderables.py

@@ -0,0 +1,36 @@
+from rich.syntax import Syntax
+
+from textual.app import App, ComposeResult, RenderResult
+from textual.reactive import reactive
+from textual.widget import Widget
+
+
+class CodeView(Widget):
+    """Widget to display Python code."""
+
+    DEFAULT_CSS = """
+    CodeView { height: auto; }
+    """
+
+    code = reactive("")
+
+    def render(self) -> RenderResult:
+        # Syntax is a Rich renderable that displays syntax highlighted code
+        syntax = Syntax(self.code, "python", line_numbers=True, indent_guides=True)
+        return syntax
+
+
+class CodeApp(App):
+    """App to demonstrate Rich renderables in Textual."""
+
+    def compose(self) -> ComposeResult:
+        with open(__file__) as self_file:
+            code = self_file.read()
+        code_view = CodeView()
+        code_view.code = code
+        yield code_view
+
+
+if __name__ == "__main__":
+    app = CodeApp()
+    app.run()

docs/examples/styles/border_sub_title_align_all.py

@@ -39,7 +39,7 @@ def compose(self):
                 "had to fill up",
                 "lbl4",
                 "",  # (4)!
-                "[link=https://textual.textualize.io]Left[/]",  # (5)!
+                "[link='https://textual.textualize.io']Left[/]",  # (5)!
             )
             yield make_label_container(  # (6)!
                 "nine labels", "lbl5", "Title", "Subtitle"

docs/examples/styles/link_background.py

@@ -7,7 +7,7 @@ class LinkBackgroundApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/link_background_hover.py

@@ -7,7 +7,7 @@ class LinkHoverBackgroundApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/link_color.py

@@ -7,7 +7,7 @@ class LinkColorApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/link_color_hover.py

@@ -7,7 +7,7 @@ class LinkHoverColorApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/link_style.py

@@ -7,7 +7,7 @@ class LinkStyleApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/link_style_hover.py

@@ -7,7 +7,7 @@ class LinkHoverStyleApp(App):
 
     def compose(self):
         yield Label(
-            "Visit the [link=https://textualize.io]Textualize[/link] website.",
+            "Visit the [link='https://textualize.io']Textualize[/link] website.",
             id="lbl1",  # (1)!
         )
         yield Label(

docs/examples/styles/text_overflow.py

@@ -0,0 +1,18 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+TEXT = """I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear."""
+
+
+class WrapApp(App):
+    CSS_PATH = "text_overflow.tcss"
+
+    def compose(self) -> ComposeResult:
+        yield Static(TEXT, id="static1")
+        yield Static(TEXT, id="static2")
+        yield Static(TEXT, id="static3")
+
+
+if __name__ == "__main__":
+    app = WrapApp()
+    app.run()

docs/examples/styles/text_overflow.tcss

@@ -0,0 +1,17 @@
+Static {
+    height: 1fr;
+    text-wrap: nowrap;
+}
+
+#static1 {
+    text-overflow: clip;  # Overflowing text is clipped  
+    background: red 20%;
+}
+#static2 {
+    text-overflow: fold;  # Overflowing text is folded on to the next line
+    background: green 20%;
+}
+#static3 {
+    text-overflow: ellipsis;  # Overflowing text is truncated with an ellipsis
+    background: blue 20%;
+}

docs/examples/styles/text_wrap.py

@@ -0,0 +1,17 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+TEXT = """I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear."""
+
+
+class WrapApp(App):
+    CSS_PATH = "text_wrap.tcss"
+
+    def compose(self) -> ComposeResult:
+        yield Static(TEXT, id="static1")
+        yield Static(TEXT, id="static2")
+
+
+if __name__ == "__main__":
+    app = WrapApp()
+    app.run()

docs/examples/styles/text_wrap.tcss

@@ -0,0 +1,12 @@
+Static {
+    height: 1fr;
+}
+
+#static1 {
+    text-wrap: wrap; /* this is the default */
+    background: blue 20%;
+}
+#static2 {
+    text-wrap: nowrap; /* disable wrapping */
+    background: green 20%;
+}

docs/guide/actions.md

@@ -56,9 +56,9 @@ Consequently `"set_background('blue')"` is a valid action string, but `"set_back
 
 ## Links
 
-Actions may be embedded as links within console markup. You can create such links with a `@click` tag.
+Actions may be embedded in [markup](./content.md#actions) with the `@click` tag.
 
-The following example mounts simple static text with embedded action links.
+The following example mounts simple static text with embedded action links:
 
 === "actions03.py"