Capture Character Input in Rust TUI Editor

Mục tiêu: Modify the main event loop to capture any character keystroke using the crossterm KeyCode::Char(c) pattern. This prepares the editor to handle text insertion in a subsequent step.

An enormous congratulations on building a complete and robust cursor movement system! In the last step, you brought your editor to life, allowing the user to navigate an (as yet empty) document with precision. Your move_cursor method handles boundaries, line wrapping, and the tricky edge case of moving between lines of different lengths. This is a massive achievement and a testament to the clean, state-driven architecture you’ve established.

With a fully mobile cursor, the user’s focus naturally shifts from “Where am I?” to “What can I do here?”. The most fundamental action in any text editor is, of course, editing text. Our next major step is to give the user the power to type, and it all begins by teaching our event loop to recognize character input.

Capturing Keystrokes: The `KeyCode::Char(c)` Pattern

So far, our event loop’s match statement has handled very specific, named keys: KeyCode::Up, KeyCode::Down, and a KeyCode::Char('q') combined with a modifier check. Now, we need a way to handle any printable character the user might type—letters, numbers, punctuation, symbols, and so on.

The crossterm KeyCode enum provides a perfect tool for this: the KeyCode::Char(c) variant. This is more than just a name; it’s a pattern that contains data. When you press the ‘H’ key, crossterm generates an event with KeyCode::Char('H'). When you press ‘5’, it’s KeyCode::Char('5').

Rust’s powerful match statement allows us to not only match this variant but also to extract the character data from within it. The syntax KeyCode::Char(c) does two things:

It checks if the KeyCode is the Char variant.
If it is, it takes the character value that’s inside the parentheses and binds it to a new variable, which we’ll call c.

This gives us direct access to the exact character the user typed, which we can then pass on to our editor’s state management logic.

Updating the Event Loop

Let’s modify the match key_event.code block in your main function to include this new case. We will use the todo!() macro as a placeholder, just as we did when we started implementing cursor movement. This signals that we have successfully captured the character, and the next step is to build the logic to handle it.

Here are the changes for src/main.rs. Notice we are just adding one new arm to our match statement.

// src/main.rs -> inside the main function's loop

// ... inside match event { Event::Key(key_event) => { ...
match key_event.code {
    KeyCode::Char('q') if key_event.modifiers == KeyModifiers::CONTROL => {
        break;
    }

    KeyCode::Up => editor.move_cursor(Direction::Up),
    KeyCode::Down => editor.move_cursor(Direction::Down),
    KeyCode::Left => editor.move_cursor(Direction::Left),
    KeyCode::Right => editor.move_cursor(Direction::Right),

    // --- NEW CODE FOR THIS TASK ---
    // This pattern matches any character key press.
    // The `c` is a variable that binds to the character value itself.
    KeyCode::Char(c) => {
        // We will implement the character insertion logic in the next task.
        // For now, `todo!()` is a placeholder that will remind us this
        // is not yet fully implemented.
        todo!();
    }
    // ----------------------------

    // The catch-all now only handles special keys we haven't implemented yet
    // (like PageUp, PageDown, Home, End, etc.).
    _ => {}
}
// ...

Code and Concept Breakdown

KeyCode::Char(c) => { ... }: This is the new match arm.
- It will match any key press that represents a printable character.
- The (c) is the powerful part. Inside the {...} block, a new variable named c of type char is now available to us. If the user pressed the ‘$’ key, c would hold the value '$'.
todo!();: We are again using this invaluable macro. When you run the editor and press any character key (like ‘a’), the program will panic with the message “not yet implemented”. This is a fantastic development tool. It confirms that our event loop is correctly capturing the character and tells us exactly where we need to add the next piece of logic.

You have now successfully extended your editor’s “vocabulary.” It no longer just understands movement and quitting; it now recognizes the user’s intent to add content. This is the essential first step toward making your application a true text editor.

Next Steps

The todo!() is our guide. We have the character c captured in our event loop, but the loop’s job isn’t to know how to insert it into the text buffer. That responsibility belongs to our Editor struct (our “model”). In the very next task, you will create a new method, insert_char(&mut self, c: char), on the Editor struct. This method will contain the logic for modifying the rows vector to add the new character at the cursor’s current position.

Implement Character Insertion in Rust Text Editor

Mục tiêu: Create the insert\_char method on the Editor struct. This method will insert a character into the text buffer at the current cursor position, correctly handle adding new lines, and update the cursor’s position accordingly.

Of course, let’s get this done. Here is the detailed solution to help you complete your task.

You’ve made excellent progress! In the last task, you successfully taught your event loop to recognize and capture any character the user types, using the powerful KeyCode::Char(c) pattern. That todo!() you left in the match arm is the perfect starting point for our current task. We have captured the user’s intent to type; now we must build the logic that makes typing a reality.

Following the clean architecture you’ve established, this logic doesn’t belong in the event loop (the “controller”). Instead, it belongs in our Editor struct (the “model”), which is the single source of truth for the application’s state. We will now create a dedicated method, insert_char, whose sole responsibility is to correctly insert a character into our text buffer.

Designing the `insert_char` Method

This method needs to perform two crucial actions:

Modify the String in our rows vector at the current cursor position.
Update the cursor’s x position to move it forward, right after the newly inserted character.

Because this method will change the Editor’s internal data, it must be defined with a mutable reference to self: &mut self. This is Rust’s way of ensuring that data mutation is always explicit and controlled.

We also need to handle a very important edge case: what if the editor is completely empty, or the cursor is on the line immediately following the last line of text? In these cases, the row we want to insert into doesn’t exist yet in our self.rows vector. Our method must be robust enough to create a new line when necessary.

Implementing the Method

Let’s add the new insert_char method to your impl Editor block in src/main.rs.

// src/main.rs -> inside the `impl Editor` block

// ... (other methods like new, refresh_screen, move_cursor are unchanged) ...

// This method is responsible for inserting a single character into the text buffer.
// It takes a mutable reference to self because it modifies the `rows` vector and cursor position.
fn insert_char(&mut self, c: char) {
    // Edge Case: Handle inserting into a new line.
    // If the cursor's `y` position is equal to the number of rows, it means the cursor
    // is on the line *after* the last line of the file (or the file is empty).
    // In this case, we need to append a new, empty String to our `rows` vector.
    if self.cursor_y == self.rows.len() {
        self.rows.push(String::new());
    }

    // Now that we are sure a row exists at `self.cursor_y`, we can modify it.
    // The `insert()` method on a `String` takes an index and a character,
    // and inserts the character at that byte index, shifting all subsequent characters to the right.
    // Thanks to our robust `move_cursor` logic, `self.cursor_x` is guaranteed to be a valid
    // insertion point (from 0 to the line's length).
    self.rows[self.cursor_y].insert(self.cursor_x, c);

    // After inserting the character, we must advance the cursor's horizontal position.
    self.cursor_x += 1;
}

Code and Concept Deep Dive

Let’s break down this crucial new method piece by piece:

fn insert_char(&mut self, c: char): This is the method signature. The &mut self is the key that grants us permission to change the Editor’s state. The c: char parameter is the character we captured in our event loop.
if self.cursor_y == self.rows.len(): This is our robust check for the edge case.
- If the file is empty, self.rows.len() is 0 and self.cursor_y is 0. The condition is true, and we correctly add the first line.
- If the file has 3 lines (indices 0, 1, 2) and the cursor is on the line after the last one, self.rows.len() is 3 and self.cursor_y would be 3. The condition is true, and we add a new line.
- self.rows.push(String::new());: This appends a new, empty String to the end of our rows vector, creating the line we need to type on.
self.rows[self.cursor_y].insert(self.cursor_x, c);: This is the core logic.
- We access the String for the current line. We can use the direct index [self.cursor_y] with confidence because our if statement above guarantees this line now exists.
- String::insert(): This is a standard library method that inserts a char into a String at a given byte index. It’s exactly what we need for text insertion. All characters at or after the index are shifted to the right.
- The move_cursor method you built previously, with its “snapping” logic, ensures that self.cursor_x will never be an invalid index for insertion (i.e., it will never be greater than the line’s length), preventing a panic. This is a great example of how good design in one area makes another area easier to implement.
self.cursor_x += 1;: This is the final, essential step. After inserting a character, the cursor must move one position to the right, ready for the next character. This updates our editor’s logical state. The refresh_screen method will then automatically place the physical cursor in this new position on the next frame.

You have now created a self-contained and robust piece of logic for a core editor feature. The insert_char method correctly handles edge cases and safely modifies the editor’s state.

Next Steps

Our powerful insert_char method is ready, but it’s not being used yet. The todo!() in your main function is waiting. In the very next task, you will connect the dots by replacing that todo!() with a call to editor.insert_char(c), officially enabling typing in your editor.

Enable Typing by Implementing Character Insertion

Mục tiêu: Implement the core logic of the insert\_char method using String::insert to place characters into the text buffer and update the event loop to call this method, enabling typing in the Rust text editor.

You’ve made a fantastic decision to create the insert_char method in the previous task. By building this self-contained piece of logic, you’ve kept your Editor struct organized and your event loop clean. Now, we will bring that method to life by implementing its core responsibility: taking a character and placing it correctly into the text buffer.

This task is where your application transforms from a passive viewer into a true, interactive editor. We’ll focus on two critical lines of code that form the heart of the insertion mechanism.

The Core of Insertion: Modifying the String

Once we’ve handled the edge case of creating a new line (which you’ve already done!), we are guaranteed to have a String at self.rows[self.cursor_y] that we can modify. Our goal is to insert the new character c at the horizontal position of the cursor, self.cursor_x.

The Rust standard library provides the perfect tool for this: the insert() method on String. This method takes two arguments:

An index: This is the byte position where the new character should be inserted.
A char: This is the character to insert.

When you call my_string.insert(index, char), the string is modified in place. The new character is inserted, and all existing characters from that index onward are shifted one position to the right. This is exactly the behavior we need. For example, if the line is "hello" and the cursor is at index 2 (after the ‘e’), inserting ‘X’ would result in "heXllo".

Thanks to the robust “snapping” logic you built into move_cursor, we have a powerful guarantee: self.cursor_x will always be a valid index for insertion (from 0 up to the line’s length). This prevents our program from panicking and makes our insertion logic clean and simple.

Updating State: Advancing the Cursor

After successfully inserting the character into the string, our work isn’t quite done. We’ve changed the text buffer, but the editor’s logical state for the cursor is now out of date. The cursor should move one position to the right to be positioned after the character that was just typed.

This is a simple but crucial step: we must increment self.cursor_x by one. By updating the state within our “model” (Editor), we trust our “view” (refresh_screen) to handle the rest. On the very next iteration of the main loop, refresh_screen will be called, and it will read this new, updated cursor_x value, automatically placing the physical terminal cursor in the correct new position. This is the power of the state-driven architecture you’ve built.

Let’s look at the insert_char method again, this time with a deep focus on these two core lines of logic.

// src/main.rs -> inside the impl Editor block

fn insert_char(&mut self, c: char) {
    // This `if` block handles the edge case of creating a new line.
    if self.cursor_y == self.rows.len() {
        self.rows.push(String::new());
    }

    // --- FOCUS OF THIS TASK: THE CORE LOGIC ---

    // 1. Insert the character.
    // We access the string for the current line (`self.rows[self.cursor_y]`).
    // We then call the `insert` method on it, passing the cursor's horizontal
    // position and the character to insert. This modifies the string in place.
    self.rows[self.cursor_y].insert(self.cursor_x, c);

    // 2. Advance the cursor.
    // We update the editor's state to reflect that the cursor should now
    // be one position to the right of the inserted character.
    self.cursor_x += 1;
}

Connecting the Wires: Enabling Typing

Our insert_char method is now complete and correct, but it’s not yet being called from our event loop. The final step is to replace the todo!() placeholder you added in the KeyCode::Char(c) match arm with a call to our new method.

This is the moment that connects the user’s key press to the editor’s state-changing logic, finally enabling typing.

// src/main.rs -> inside the main function's loop

// ... inside match event { Event::Key(key_event) => { ...
match key_event.code {
    KeyCode::Char('q') if key_event.modifiers == KeyModifiers::CONTROL => {
        break;
    }

    KeyCode::Up => editor.move_cursor(Direction::Up),
    KeyCode::Down => editor.move_cursor(Direction::Down),
    KeyCode::Left => editor.move_cursor(Direction::Left),
    KeyCode::Right => editor.move_cursor(Direction::Right),

    // --- THIS IS THE CHANGE FOR OUR TASK ---
    // We replace the placeholder with a call to our new method.
    // The character `c` captured by the match pattern is passed directly
    // to the `insert_char` method.
    KeyCode::Char(c) => editor.insert_char(c),
    // ----------------------------------------

    _ => {}
}
// ...

The Payoff

Go ahead and run your application now with cargo run. What you have is no longer just a viewer; it’s an editor. You can type characters, and they will appear on the screen. You can use the arrow keys to move the cursor and insert text anywhere. You have implemented the single most important feature of a text editor.

Next Steps

With the ability to add text, the user will immediately want the ability to remove it. Our next task will be to handle the Backspace key. This will involve creating a new delete_char method that handles the logic for removing the character to the left of the cursor, including the complex case of merging two lines together.

Implement Backspace Key Recognition in Event Loop

Mục tiêu: Modify the Rust text editor’s event loop to recognize the Backspace key press. This involves adding a new match arm for crossterm::event::KeyCode::Backspace and using the todo!() macro as a placeholder for the future character deletion logic.

Fantastic work! You have successfully implemented character insertion, which is a monumental step. Your editor is no longer a read-only viewer; it’s a dynamic canvas where the user can create content. The insert_char method you built is a robust piece of logic that handles edge cases and correctly updates the editor’s state.

Now that users can add text, the very next feature they will demand is a way to correct their mistakes. It’s time to introduce the indispensable Backspace key. This task follows the exact same successful pattern you’ve used for every other key press: first, we teach the event loop to recognize the key, and then we prepare to delegate the complex logic to a dedicated method on our Editor model.

Recognizing the `Backspace` Key

Just as crossterm provides specific KeyCode variants for arrow keys and a pattern for character keys (KeyCode::Char(c)), it also has a dedicated variant for the backspace key: KeyCode::Backspace. Our job is to add a new arm to our match key_event.code statement to handle this specific variant.

We will once again employ our trusted todo!() macro. This serves two purposes:

It allows us to confirm that our event loop is correctly capturing the Backspace key press. When you run the editor and press backspace, the program will panic with a “not yet implemented” message, which is exactly the feedback we want right now.
It acts as a clear placeholder, reminding us that the next step is to build the state-modification logic that will actually delete the character. This continues our clean separation of concerns: the main loop is the controller that detects intent, and the Editor struct is the model that executes it.

Let’s modify the event loop in src/main.rs to recognize this new key.

// src/main.rs -> inside the main function's loop

// ... inside match event { Event::Key(key_event) => { ...
match key_event.code {
    KeyCode::Char('q') if key_event.modifiers == KeyModifiers::CONTROL => {
        break;
    }

    KeyCode::Up => editor.move_cursor(Direction::Up),
    KeyCode::Down => editor.move_cursor(Direction::Down),
    KeyCode::Left => editor.move_cursor(Direction::Left),
    KeyCode::Right => editor.move_cursor(Direction::Right),

    KeyCode::Char(c) => editor.insert_char(c),

    // --- NEW CODE FOR THIS TASK ---
    // This new match arm specifically handles the Backspace key.
    KeyCode::Backspace => {
        // We use the todo!() macro as a placeholder. This signals that we have
        // recognized the key press, but the logic to handle it will be
        // implemented in the upcoming `delete_char` method.
        todo!();
    }
    // ----------------------------

    _ => {}
}
// ...

Code Breakdown

KeyCode::Backspace => { ... }: This is the new match arm. It is a simple, direct pattern that matches only when the user presses the Backspace key. Unlike KeyCode::Char(c), it doesn’t carry any extra data, so there are no parentheses or variables to bind.
todo!();: This is our development placeholder. It makes our code’s intention explicit. We are acknowledging that a backspace action needs to occur, but we are deferring the implementation to a more appropriate place—a method on the Editor struct.

You have now successfully prepared your editor to handle deletion. The event loop is aware of the user’s intent, and the structure is ready to be connected to the state management logic. This incremental, structured approach is the key to building complex applications without getting overwhelmed.

Next Steps

The todo!() macro is our guide, pointing directly to our next task. We need to create the delete_char(&mut self) method on our Editor struct. This method will be more complex than insert_char, as it needs to handle two distinct scenarios: deleting a character from the middle of a line and merging a line with the one above it when backspace is pressed at the very beginning of a line.

Implement Backspace Logic for Text Editor

Mục tiêu: Create the delete\_char method in the Rust text editor model. This method must handle two scenarios: deleting a character mid-line and merging a line with the previous one when the cursor is at the beginning of the line.

Excellent! You’ve successfully prepared your event loop to listen for the Backspace key. That todo!() you added is the perfect signal that while the editor knows the user wants to delete something, it doesn’t yet have the instructions for how to do it. Our current task is to build those instructions.

Following our clean architectural pattern, this complex state-modification logic belongs inside a dedicated method on our Editor model. We will now create the delete_char method, which will become the engine that powers the backspace functionality.

Designing for Deletion: Two Core Scenarios

The Backspace key has two distinct behaviors depending on the cursor’s position, and our method must handle both with precision:

Deleting a Character: If the cursor is anywhere on a line except the very beginning (cursor_x > 0), backspace should remove the single character to the immediate left of the cursor. This involves modifying the current line’s String and moving the cursor one position to the left.
Merging Lines: If the cursor is at the beginning of a line (cursor_x == 0) but not the very first line of the file (cursor_y > 0), backspace should merge the current line with the previous one. This is a more complex operation involving:
- Appending the content of the current line to the end of the previous line.
- Removing the now-empty current line from our rows vector.
- Moving the cursor to the correct position at the “join point.”

If the cursor is at the very beginning of the file ((0, 0)), nothing should happen. Our logic must naturally handle this boundary condition.

Implementing the `delete_char` Method

Let’s add this new method to your impl Editor block in src/main.rs. It needs to be mutable (&mut self) because it will be making significant changes to the editor’s state.

// src/main.rs -> inside the `impl Editor` block

// ... (other methods like new, refresh_screen, move_cursor, insert_char are unchanged) ...

// This method handles the logic for the Backspace key.
// It takes a mutable reference to self because it modifies the `rows` vector
// and the cursor's position.
fn delete_char(&mut self) {
    // We can't delete if the cursor is past the end of the file (on the tilde line).
    // Or if the cursor is at the very beginning of the file.
    if self.cursor_y == self.rows.len() || (self.cursor_x == 0 && self.cursor_y == 0) {
        return; // Do nothing.
    }

    // Scenario 1: The cursor is somewhere on a line, not at the beginning.
    if self.cursor_x > 0 {
        // The character to remove is at the index `cursor_x - 1`.
        // `String::remove()` removes the character at a given byte index and returns it.
        self.rows[self.cursor_y].remove(self.cursor_x - 1);
        // We then move the cursor one position to the left.
        self.cursor_x -= 1;

    // Scenario 2: The cursor is at the beginning of a line, so we merge lines.
    } else {
        // We use `self.rows.remove(self.cursor_y)` which does two things:
        // 1. It removes the line at the cursor's y-position from the `rows` vector.
        // 2. It returns the content of that removed line.
        let current_line = self.rows.remove(self.cursor_y);

        // Before we merge, we get the length of the previous line. This will be the new x-position.
        let previous_line_len = self.rows[self.cursor_y - 1].len();

        // We append the content of the line we just removed to the end of the previous line.
        self.rows[self.cursor_y - 1].push_str(&current_line);

        // Move the cursor up one line.
        self.cursor_y -= 1;
        // Move the cursor's horizontal position to the end of the line it was just moved to.
        self.cursor_x = previous_line_len;
    }
}

Code and Concept Deep Dive

Let’s dissect this crucial method:

Boundary Checks:
- if self.cursor_y == self.rows.len(): This checks if the cursor is on the empty line after the file content. There’s nothing to delete, so we do nothing.
- || (self.cursor_x == 0 && self.cursor_y == 0): This handles the case where the cursor is at the very start of the file. Again, nothing to delete.
- return;: This keyword immediately exits the function.
Scenario 1: Mid-line Deletion
- if self.cursor_x > 0: This is our condition for this scenario.
- String::remove(): This is a standard library method that modifies a String by removing a character at a specific byte index. Since the cursor is after the character we want to delete, the correct index is self.cursor_x - 1.
- self.cursor_x -= 1;: We update our state to move the cursor left, tracking the change.
Scenario 2: Line Merging
- else: This block only executes if self.cursor_x was 0 (and we passed the initial boundary checks, meaning self.cursor_y must be greater than 0).
- Vec::remove(): This is a powerful method on Vec that removes an element at a given index and returns it. This is perfect for our needs, as we get the line’s content and remove it from the buffer in a single, atomic operation.
- let previous_line_len = ...: We must capture the length of the previous line before we append to it. This value becomes our new cursor_x.
- String::push_str(): This appends a string slice (&str) to the end of a String. This is how we perform the merge.
- self.cursor_y -= 1; self.cursor_x = previous_line_len;: We update the cursor’s state to place it at the exact point where the two lines were joined.

You have now built a robust, self-contained method for handling all the complexities of the backspace key.

Next Steps

Your delete_char method is complete and ready for action, but it’s currently an engine waiting to be started. The todo!() in your main function’s event loop is still there. In the next task, you will replace that placeholder with a call to editor.delete_char(), finally connecting the user’s key press to this powerful logic and enabling deletion in your editor.

Implement Backspace Functionality in a Rust Text Editor

Mục tiêu: Implement the delete\_char method to handle Backspace key presses. This involves two main scenarios: deleting a character mid-line and merging a line with the previous one when the cursor is at the beginning, while also handling boundary conditions.

Excellent! In the previous task, you set the stage by creating the empty delete_char method and wiring up the event loop to recognize the Backspace key. That todo!() placeholder you added was a promise to yourself that you would build the necessary logic, and now it’s time to fulfill that promise.

This task is where we implement the sophisticated logic that makes backspace a powerful and intuitive tool. Unlike inserting a character, which is a relatively straightforward “add and advance” operation, deleting involves two very different scenarios that our code must handle with precision.

The Two Faces of Backspace

A well-behaved text editor’s backspace key has two distinct functions depending on the cursor’s location:

Mid-Line Deletion: If the cursor is anywhere on a line except at the very beginning (cursor_x > 0), its job is simple: remove the character to its immediate left and move the cursor one step back.
Line Merging: If the cursor is at the very beginning of a line (cursor_x == 0) but not on the first line of the file, its job is more complex: it must append the current line to the end of the previous one, effectively merging them. This requires modifying two lines, removing one from our rows vector, and carefully repositioning the cursor at the “join point.”

Furthermore, we must handle the boundary conditions gracefully. If the cursor is at the very start of the file ((0,0)) or on the empty “tilde line” after the file content, nothing should happen. A robust method must check these conditions first to prevent any panics.

Let’s implement this logic inside our delete_char method.

Filling in the `delete_char` Method

We will now replace the empty body of your delete_char method with the complete implementation. This code carefully checks the boundary conditions first, then uses an if/else block to handle the two primary scenarios.

Here are the changes for your impl Editor block in src/main.rs.

// src/main.rs -> inside the `impl Editor` block

// ... (other methods like new, refresh_screen, move_cursor, insert_char are unchanged) ...

// This method handles the logic for the Backspace key.
// It takes a mutable reference to self because it modifies the `rows` vector
// and the cursor's position.
fn delete_char(&mut self) {
    // Boundary Check 1: Is the cursor on the "tilde" line past the end of the file?
    // If so, there's nothing to delete. `self.rows.len()` gives the number of lines,
    // so if `cursor_y` is equal to it, we're on the line *after* the last one.
    if self.cursor_y == self.rows.len() {
        return;
    }
    // Boundary Check 2: Is the cursor at the very beginning of the document?
    if self.cursor_x == 0 && self.cursor_y == 0 {
        return; // Nothing to delete here either.
    }

    // Scenario 1: The cursor is somewhere on a line, not at the beginning.
    if self.cursor_x > 0 {
        // The character to be removed is at the index `cursor_x - 1`.
        // The `remove()` method on a String removes the character at a given
        // byte index and shifts all subsequent characters to the left.
        self.rows[self.cursor_y].remove(self.cursor_x - 1);
        // After removing, we must update our state by moving the cursor left.
        self.cursor_x -= 1;

    // Scenario 2: The cursor is at the beginning of a line, so we merge with the previous one.
    // This `else` block only runs if `cursor_x` is 0 (and we passed the boundary checks).
    } else {
        // We use `self.rows.remove(self.cursor_y)`. This powerful method does two things:
        // 1. It removes the line at the cursor's y-position from the `rows` vector.
        // 2. It returns the content of that removed line, which we store in `current_line`.
        let current_line = self.rows.remove(self.cursor_y);

        // We must get the length of the previous line *before* we modify it.
        // This will be the new horizontal position for our cursor.
        let previous_line_len = self.rows[self.cursor_y - 1].len();

        // We append the content of the line we just removed to the end of the previous line.
        // `push_str` is the efficient way to append a string slice.
        self.rows[self.cursor_y - 1].push_str(&current_line);

        // Finally, we update our state to position the cursor correctly at the join point.
        self.cursor_y -= 1;
        self.cursor_x = previous_line_len;
    }
}

Connecting the Logic to the Key Press

Our method is now a complete, self-contained engine for deletion. The final step is to connect this engine to the ignition—the Backspace key press in our event loop. We’ll replace the todo!() with a call to our new method.

// src/main.rs -> inside the main function's loop

// ... inside match event { Event::Key(key_event) => { ...
match key_event.code {
    KeyCode::Char('q') if key_event.modifiers == KeyModifiers::CONTROL => {
        break;
    }

    KeyCode::Up => editor.move_cursor(Direction::Up),
    KeyCode::Down => editor.move_cursor(Direction::Down),
    KeyCode::Left => editor.move_cursor(Direction::Left),
    KeyCode::Right => editor.move_cursor(Direction::Right),

    KeyCode::Char(c) => editor.insert_char(c),

    // --- THIS IS THE CHANGE FOR OUR TASK ---
    // We replace the placeholder with a call to our powerful new method.
    KeyCode::Backspace => editor.delete_char(),
    // ----------------------------------------

    _ => {}
}
// ...

The Payoff: A Fully Functional Backspace

Congratulations! You have now implemented one of the most complex pieces of logic for a basic text editor. Go ahead and run your application with cargo run.

You can now: * Type text. * Move the cursor. * Delete characters from the middle of a line. * Place the cursor at the beginning of a line and press backspace to merge it with the line above.

Notice how your state-driven architecture makes this seamless. You simply modify the state in delete_char, and the refresh_screen method you built earlier takes care of redrawing the screen correctly on the very next frame, with no extra effort on your part. This is the mark of a clean and maintainable design.

Next Steps

You’ve implemented insertion (Char) and backward deletion (Backspace). The natural counterpart to backspace is the Delete key, which removes the character at the cursor’s current position (or to its right). In the next task, you will add a case for KeyCode::Delete and implement the logic to handle this forward deletion.

Implement Forward Deletion with the Delete Key

Mục tiêu: Implement the ‘Delete’ key functionality in a Rust text editor. This is achieved by reusing existing methods, move\_cursor and delete\_char, to perform a forward deletion, demonstrating the DRY (Don’t Repeat Yourself) principle. The logic will handle both mid-line character removal and merging lines.

Absolutely! You have done a phenomenal job implementing backward deletion with the Backspace key. The delete_char method you built is a sophisticated piece of logic that correctly handles both mid-line character removal and the more complex line-merging scenario. This is a huge step.

Now, we will complete the core deletion functionality by implementing the Delete key, the logical counterpart to Backspace. While Backspace deletes backward, the Delete key deletes forward, removing the character currently under the cursor.

The “Aha!” Moment: Reusing Our Powerful Tools

At first glance, this seems like it might require another complex method with its own set of if/else branches for mid-line deletion and line merging. However, we can be much more clever by leveraging the powerful, well-tested tools we have already built.

Think about the action of the Delete key. Deleting the character at the cursor’s current position is logically equivalent to two separate actions:

Move the cursor one position to the right.
Press Backspace.

This is a profound insight. It means we don’t need to write a new, complex deletion method. We can implement the entire functionality of the Delete key by simply calling move_cursor followed by delete_char! This is a perfect example of the DRY (Don’t Repeat Yourself) principle and showcases the power of the clean, reusable methods you have already written.

Implementing `Delete` in the Event Loop

Our logic will live entirely within the event loop in main.rs. We just need to add a new arm to our match statement to handle KeyCode::Delete and orchestrate the calls to our existing methods.

Here is the change for your main function’s event loop.

// src/main.rs -> inside the main function's loop

// ... inside match event { Event::Key(key_event) => { ...
match key_event.code {
    KeyCode::Char('q') if key_event.modifiers == KeyModifiers::CONTROL => {
        break;
    }

    KeyCode::Up => editor.move_cursor(Direction::Up),
    KeyCode::Down => editor.move_cursor(Direction::Down),
    KeyCode::Left => editor.move_cursor(Direction::Left),
    KeyCode::Right => editor.move_cursor(Direction::Right),

    KeyCode::Char(c) => editor.insert_char(c),

    KeyCode::Backspace => editor.delete_char(),

    // --- NEW CODE FOR THIS TASK ---
    // This new match arm specifically handles the Delete key.
    KeyCode::Delete => {
        // We can cleverly implement Delete by reusing our existing methods.
        // Deleting the character at the cursor is equivalent to moving the
        // cursor one step to the right and then performing a backspace.
        // This is a great example of the DRY (Don't Repeat Yourself) principle.
        // The existing logic in both methods is robust enough to handle all edge cases.
        editor.move_cursor(Direction::Right);
        editor.delete_char();
    }
    // ----------------------------

    _ => {}
}
// ...

Code Walkthrough: Why This Works So Well

Let’s trace the logic for the two main scenarios to see how beautifully this works:

Scenario 1: Deleting a Character Mid-Line

Initial State: The line is "hello", and the cursor is at index 2 (on top of the first ‘l’). cursor_x = 2.
Action 1: editor.move_cursor(Direction::Right);
- The move_cursor method executes. cursor_x is incremented to 3. The cursor is now between the two ‘l’s.
Action 2: editor.delete_char();
- The delete_char method executes.
- It sees cursor_x > 0 (it’s 3).
- It removes the character at cursor_x - 1 (index 2), which is the first ‘l’. The string becomes "hllo".
- It then decrements cursor_x by 1. cursor_x is now 2.
Final State: The line is "hllo", and the cursor is at index 2, exactly where it started. The character under the cursor has been deleted. Perfect.

Scenario 2: Merging Lines

Initial State: You have two lines, "abc" and "def". The cursor is at the end of the first line, cursor_x = 3, cursor_y = 0.
Action 1: editor.move_cursor(Direction::Right);
- move_cursor sees the cursor is at the end of the line. It wraps to the next line.
- The state becomes cursor_x = 0, cursor_y = 1. The cursor is now at the beginning of "def".
Action 2: editor.delete_char();
- delete_char sees cursor_x == 0 and cursor_y > 0. It triggers the line-merging logic.
- It appends "def" to "abc", resulting in "abcdef".
- It removes the second line from the rows vector.
- It updates the cursor position to the join point: cursor_y = 0, cursor_x = 3 (the length of the old "abc").
Final State: There is one line, "abcdef", and the cursor is at index 3, right where it started. The next line has been merged into the current one. Perfect.

The Payoff: A Complete Editing Experience

Congratulations! You have now implemented the three fundamental pillars of text editing: insertion (Char), backward deletion (Backspace), and forward deletion (Delete). By cleverly reusing your existing code, you not only saved time but also wrote more robust and maintainable software.

Go ahead and run your editor now with cargo run. Test all the scenarios: * Type some text across multiple lines. * Use Backspace to delete characters and merge lines. * Use Delete to delete characters and merge lines.

You have a genuinely functional text editing core.

Next Steps

With the ability to insert and delete characters, the user will now want to structure their text by creating new lines. Our next major step is to implement line editing, which starts by handling the Enter key to create new lines and split existing ones.

Ensure Correct Cursor Position Update

Mục tiêu: A conceptual task to review and understand how the cursor’s state (cursor_x, cursor_y) is correctly managed within the insert_char and delete_char methods, ensuring the render loop always places the cursor accurately.

You have accomplished something truly significant. Over the last few tasks, you have methodically built the core engine of any text editor: the ability to insert and delete text. Your editor is no longer just a passive viewer; it’s an interactive canvas. The insert_char and delete_char methods you wrote are robust, handling edge cases like creating new lines and merging existing ones with precision.

Our final task in this step is not about writing new code, but about something just as important: stepping back to appreciate why the code you’ve already written works so perfectly. The task is to “ensure the cursor position is updated correctly,” and the beautiful truth is, you’ve already done it. Let’s take a closer look at the specific lines of code that make this possible and understand the elegant architecture you’ve built.

The Principle: The State is the Single Source of Truth

Every time you type a character or press backspace, the cursor lands in the exact right spot. This doesn’t happen by accident. It happens because you have consistently followed a critical design principle: every user action must result in a correct update to the Editor’s state. The rendering loop’s only job is to make the screen a mirror of that state.

Let’s review the code you wrote with a focus on how the cursor’s state (cursor_x and cursor_y) is meticulously managed.

Cursor Management During Insertion

In your insert_char method, you perform two key state changes in sequence:

// In `fn insert_char(&mut self, c: char)`

// 1. The text buffer state is modified.
self.rows[self.cursor_y].insert(self.cursor_x, c);

// 2. The cursor state is immediately updated to match.
self.cursor_x += 1;

This is the essential dance of state management. After modifying the text buffer, you immediately update self.cursor_x. You are telling your editor’s “brain” that the logical position of the cursor is now one step to the right.

Cursor Management During Deletion

Your delete_char method is more complex, but it follows the exact same principle across both of its scenarios.

Scenario 1: Mid-line Deletion

// In `fn delete_char(&mut self)` inside `if self.cursor_x > 0`

// 1. The text buffer state is modified.
self.rows[self.cursor_y].remove(self.cursor_x - 1);

// 2. The cursor state is updated.
self.cursor_x -= 1;

Here, after removing the character to the left, you correctly move the logical cursor one step to the left, keeping the state perfectly consistent.

Scenario 2: Line Merging

// In `fn delete_char(&mut self)` inside the `else` block

// ... logic to remove the current line and append it to the previous one ...

// 2. The cursor state is updated. This is a more complex update,
//    but it precisely positions the cursor at the join point.
self.cursor_y -= 1;
self.cursor_x = previous_line_len;

This is the most sophisticated cursor update you’ve written so far. It modifies both the y and x coordinates to place the cursor exactly where the two lines were joined.

The Payoff: The Magic of the Render Loop

So, you’ve updated the state variables. How does that translate to the physical cursor moving on the screen? The answer lies in the elegant render loop you built earlier. On every single iteration of your main loop, this line executes:

// In `fn main()`
editor.refresh_screen()?;

And inside refresh_screen, the crucial command is called after all the text has been drawn:

// In `fn refresh_screen(&self)`
execute!(
    stdout(),
    cursor::MoveTo(self.cursor_x as u16, self.cursor_y as u16)
)?;

This is the bridge between your logical state and the physical reality of the terminal. The refresh_screen method doesn’t know or care why cursor_x or cursor_y changed. It doesn’t know if the user pressed an arrow key, typed a character, or backspaced. Its only job is to read the current values from the Editor state and command the terminal: “Place your cursor at these coordinates.”

Because you were so diligent in updating the state correctly within insert_char and delete_char, the render loop automatically does the right thing every single time. This decoupling is the hallmark of a robust, maintainable application.

Milestone Achieved!

An enormous congratulations! You have successfully completed the entire “Implement basic text editing features” step. Your application has evolved from a simple viewer into a genuine text editor. You can type, navigate, and correct mistakes. The architectural foundation you have laid is proving its worth at every turn.

Next Steps

With the ability to add and remove characters, the next logical step is to structure that content. Users will want to create paragraphs, write lists, and organize their thoughts. This all starts with the Enter key. In the next major step, you will implement line editing, which involves creating an insert_newline method to handle creating new lines and splitting existing ones.