updated code to use newer widgets

Author: learnbyexample

CLI-Exercises/README.md

@@ -13,7 +13,7 @@ You'll need to install `textual` first. See [Textual documentation](https://text
 $ python3 -m venv textual_apps
 $ cd textual_apps
 $ source bin/activate
-$ pip install textual==0.5.0
+$ pip install textual==0.14.0
 
 $ git clone --depth 1 https://github.com/learnbyexample/TUI-apps.git
 $ cd TUI-apps/CLI-Exercises
@@ -27,31 +27,33 @@ After pressing **Ctrl+n** twice, you should get a screen similar to the one show
 # Guide
 
 * Press **Ctrl+p** and **Ctrl+n** to navigate the questions list.
-    * **Ctrl+←** and **Ctrl+→** can be used instead.
     * You can also click them using mouse from the footer.
 * Type the command in the box below the question. Cursor focus is meant to be always within this box.
 * Press **Enter** to execute the command.
     * `/bin/sh` is the shell used. So, features like `echo {1..3}` (brace expansion) won't work.
     * Output would be displayed below the command box.
     * If the output matches the expected results, the command box will turn *green* and a reference solution will also be shown.
     * Issues due to errors and timeout (about `2` seconds) will be displayed in *red*.
-* Contents of the input file and expected output are shown at the bottom of the screen. You might have to scroll down to view longer files.
+* Contents of the input file and expected output are shown at the bottom of the screen.
+    * You might have to scroll (using mouse or the scrollbar) for longer files.
 * Press **Ctrl+s** to show the reference solution if you are unable to solve an exercise.
 * Press **Ctrl+t** to toggle between light and dark themes.
 * Press **Ctrl+q** or **Ctrl+c** to quit the app.
 * Navigating and editing in the command box:
     * Use mouse click to position the cursor anywhere you like
     * **←** move left by one character
     * **→** move right by one character
-    * **Ctrl+a** move to the start of the line
-    * **Ctrl+e** move to the end of the line
-    * **Ctrl+w** delete backwards till whitespace boundary or start of the line
-    * **Ctrl+f** delete forwards till whitespace boundary or end of the line
-    * **Ctrl+u** delete backwards till start of the line
-    * **Ctrl+k** delete forwards till end of the line
-    * **Backspace** delete character to the left of the cursor
-    * **Ctrl+d** delete character to the right of the cursor
-* Use **Page Up** and **Page Down** (or mouse) to scroll.
+    * **Home** or **Ctrl+a** move to the start of the line
+    * **End** or **Ctrl+e** move to the end of the line
+    * **Ctrl+←** move to the start of the current/previous word
+    * **Ctrl+→** move to the start of the next word
+    * **Ctrl+w** delete till the start of the current/previous word
+    * **Ctrl+f** delete till the start of the next word
+    * **Ctrl+u** delete till the start of the line
+    * **Ctrl+k** delete till the end of the line
+    * **Backspace** or **Ctrl+h** delete character to the left of the cursor
+    * **Delete** or **Ctrl+d** delete character under the cursor
+    * **Enter** submit the code for execution
 
 > **Note**  
 > Commands you have typed are automatically saved in `user_progress.json` (only when you press **Enter** to execute a command — navigating to another question and closing the app won't trigger the save logic). Theme choice is also saved. If you close the application and open it again, the first unsolved question will be displayed (i.e. already solved questions are skipped). If you use **Ctrl+s**, the solution *won't* be saved in `user_progress.json` — you'll have to navigate to another question and back (or close and open the app) to be considered for saving the changes. Once you have solved a question, only a different correct solution can override the previously saved command.

CLI-Exercises/cli_exercises.css

@@ -1,29 +1,28 @@
 #header {
     dock: top;
     text-align: center;
+    color: black;
     background: orange;
+    width: 100%;
 }
 
 #question {
     border: blank;
     padding: 0 1 0 1;
+    width: 100%;
 }
 
 #user_cmd_output {
     min-height: 3;
     margin-bottom: 1;
+    width: 100%;
 }
 
-#ip_op {
+.container {
     height: auto;
+    align: center middle;
 }
 
-#sample_input {
-    dock: left;
+.ip_op {
     width: 50%;
 }
-
-#expected_output {
-    dock: right;
-    width: 49%;
-}

CLI-Exercises/cli_exercises.png

@@ -1,36 +1,23 @@
 from textual.app import App
 from textual.binding import Binding
-from textual.containers import Container
+from textual.containers import Horizontal, Vertical
 from textual.widgets import Footer, Label, Input
 from rich.panel import Panel
 from rich.markup import escape
+from rich.markdown import Markdown
 
 import json
-import os
 import subprocess
-import re
 from functools import partial
 
 class CLIExercisesApp(App):
     CSS_PATH = 'cli_exercises.css'
     BINDINGS = [
         Binding('ctrl+s', 'show_answer', 'Solution', show=True),
-        Binding('ctrl+p,ctrl+left', 'previous', 'Prev', show=True),
-        Binding('ctrl+n,ctrl+right', 'next', 'Next', show=True),
+        Binding('ctrl+p', 'previous', 'Prev', show=True),
+        Binding('ctrl+n', 'next', 'Next', show=True),
         ('ctrl+t', 'toggle_theme', 'Theme'),
         ('ctrl+q', 'app.quit', 'Quit'),
-        Binding('ctrl+u', 'clear_till_start',
-                'Clear till start of line', show=False),
-        Binding('ctrl+k', 'clear_till_end',
-                'Clear till end of line', show=False),
-        Binding('ctrl+w', 'clear_till_prev_space',
-                'Clear till previous space or start of line', show=False),
-        Binding('ctrl+f', 'clear_till_next_space',
-                'Clear till next space or end of line', show=False),
-        Binding('ctrl+a', 'move_to_start',
-                'Move cursor to start of line', show=False),
-        Binding('ctrl+e', 'move_to_end',
-                'Move cursor to end of line', show=False),
     ]
 
     def __init__(self):
@@ -42,31 +29,35 @@ def __init__(self):
         self.q_max_idx = len(self.questions) - 1
 
         self.question = Label(id='question')
-        self.sample_input = Label(id='sample_input')
-        self.expected_output = Label(id='expected_output')
+        self.sample_input = Label(classes='ip_op')
+        self.expected_output = Label(classes='ip_op')
 
         placeholder = 'Type your command here. Press Enter to execute the command.'
-        self.user_cmd_input = Input(placeholder=placeholder, id='user_cmd_input')
+        self.user_cmd_input = Input(placeholder=placeholder)
         self.user_cmd_output = Label(id='user_cmd_output')
         self.op_panel = partial(Panel, title='Output', title_align='left')
 
         self.progress_file = 'user_progress.json'
-        if os.path.isfile(self.progress_file):
+        try:
             with open(self.progress_file) as f:
                 self.user_progress = {int(k): v for k,v in json.load(f).items()}
+        except FileNotFoundError:
+            self.user_progress = {}
+        else:
             for idx in range(self.q_max_idx + 1):
                 if not self.user_progress.get(idx, ('', False))[1]:
                     break
             self.q_idx = idx
-        else:
-            self.user_progress = {}
 
     def compose(self):
         yield Label('[b]Linux CLI Text Processing Exercises', id='header')
-        yield self.question
-        yield self.user_cmd_input
-        yield self.user_cmd_output
-        yield Container(self.sample_input, self.expected_output, id='ip_op')
+        with Vertical(classes='container'):
+            yield self.question
+            yield self.user_cmd_input
+            yield self.user_cmd_output
+            with Horizontal(classes='container'):
+                yield self.sample_input
+                yield self.expected_output
         yield Footer()
 
     def on_mount(self):
@@ -119,8 +110,8 @@ def process_user_cmd(self):
     def set_quest_ip_op(self):
         self.answered_correctly = False
         self.show_answer_clicked = False
-        quest = f"Q{self.q_idx + 1}) {self.questions[self.q_idx]['question']}"
-        self.question.update(quest)
+        self.question.update(Markdown(f'Q{self.q_idx+1}) ' +
+                             self.questions[self.q_idx]['question']))
 
         ip_file = self.questions[self.q_idx]['ip_file']
         with open(ip_file) as f:
@@ -184,36 +175,6 @@ def action_toggle_theme(self):
         self.user_progress[-1] = self.dark
         self.write_progress_file()
 
-    def action_clear_till_start(self):
-        cmd = self.user_cmd_input.value[self.user_cmd_input.cursor_position:]
-        self.user_cmd_input.value = cmd
-        self.user_cmd_input.cursor_position = 0
-
-    def action_clear_till_end(self):
-        cmd = self.user_cmd_input.value[:self.user_cmd_input.cursor_position]
-        self.user_cmd_input.value = cmd
-        self.user_cmd_input.cursor_position = len(cmd)
-
-    def action_clear_till_prev_space(self):
-        cmd = self.user_cmd_input.value
-        pos = self.user_cmd_input.cursor_position
-        s = re.sub(r'\S*\s*$', '', cmd[:pos])
-        self.user_cmd_input.value = s + cmd[pos:]
-        self.user_cmd_input.cursor_position = len(s)
-
-    def action_clear_till_next_space(self):
-        cmd = self.user_cmd_input.value
-        pos = self.user_cmd_input.cursor_position
-        s = re.sub(r'^\s*\S*', '', cmd[pos:])
-        self.user_cmd_input.value = cmd[:pos] + s
-        self.user_cmd_input.cursor_position = pos
-
-    def action_move_to_start(self):
-        self.user_cmd_input.cursor_position = 0
-
-    def action_move_to_end(self):
-        self.user_cmd_input.cursor_position = len(self.user_cmd_input.value)
-
 
 if __name__ == '__main__':
     app = CLIExercisesApp()