TypeScript Tutorial: Creating a Simple Web-Based Code Editor with Undo/Redo

Written by

learnmodernjavascript

in

In the world of web development, code editors are indispensable tools. They’re where we write, edit, and debug our code. While complex IDEs offer a plethora of features, sometimes all you need is a simple, focused editor. In this tutorial, we’ll build a basic web-based code editor using TypeScript that includes a crucial feature: undo and redo functionality. This seemingly simple addition dramatically improves the developer experience, allowing for easy correction of mistakes and exploration of different coding approaches. We’ll explore the core concepts, from setting up our TypeScript environment to implementing the undo/redo logic, all while keeping the code clean and easy to understand. This tutorial is designed for beginners to intermediate developers who want to deepen their understanding of TypeScript and front-end development principles.

Setting Up the Project

Before we dive into the code, let’s set up our project. We’ll use npm (Node Package Manager) to initialize our project and install necessary dependencies. If you don’t have Node.js and npm installed, you can download them from the official Node.js website. Open your terminal or command prompt and follow these steps:

  1. Create a new project directory: mkdir typescript-code-editor
  2. Navigate into the directory: cd typescript-code-editor
  3. Initialize a new npm project: npm init -y (This will create a package.json file with default settings.)
  4. Install TypeScript: npm install typescript --save-dev
  5. Create a tsconfig.json file: npx tsc --init (This will generate a default configuration file.)
  6. Create an index.html file: This will be the main HTML file for our editor.

Your directory structure should now look something like this:

typescript-code-editor/
├── index.html
├── node_modules/
├── package.json
├── tsconfig.json
└──

Next, let’s configure the tsconfig.json file. Open it in your code editor and modify the following settings. These configurations are important for how TypeScript compiles the code. We’ll set the target to ES2015 for modern JavaScript compatibility, and the module to ‘esnext’ to allow for modern module syntax.

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "esnext",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Now, create a src directory and a file named index.ts inside it. This is where we’ll write our TypeScript code. Before we start coding, let’s add a basic HTML structure to our index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Code Editor</title>
    <style>
        #editor {
            width: 80%;
            height: 400px;
            border: 1px solid #ccc;
            padding: 10px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <textarea id="editor"></textarea>
    <button id="undoButton">Undo</button>
    <button id="redoButton">Redo</button>
    <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides a textarea element for our code editor, and two buttons for undo and redo functionality. We’ve also included basic styling for the editor area. Finally, the script tag at the bottom includes the compiled JavaScript file generated from our TypeScript code.

Implementing the Code Editor in TypeScript

Now, let’s start writing the TypeScript code to make our code editor functional. Open src/index.ts and add the following code. We’ll start with the basic editor functionality and then add undo/redo.

// Get references to the editor and buttons
const editor = document.getElementById('editor') as HTMLTextAreaElement;
const undoButton = document.getElementById('undoButton') as HTMLButtonElement;
const redoButton = document.getElementById('redoButton') as HTMLButtonElement;

// Initialize an array to store the history of code changes
let history: string[] = [];
let historyIndex = -1; // -1 means no changes yet

// Function to update the history
function updateHistory(code: string) {
    // Remove any redo history if we are making a new change
    history = history.slice(0, historyIndex + 1);
    history.push(code);
    historyIndex++;
    updateButtonStates();
}

// Function to handle undo
function undo() {
    if (historyIndex > 0) {
        historyIndex--;
        editor.value = history[historyIndex];
        updateButtonStates();
    }
}

// Function to handle redo
function redo() {
    if (historyIndex < history.length - 1) {
        historyIndex++;
        editor.value = history[historyIndex];
        updateButtonStates();
    }
}

// Function to update button states (enable/disable)
function updateButtonStates() {
    undoButton.disabled = historyIndex <= 0;
    redoButton.disabled = historyIndex >= history.length - 1;
}

// Event listener for input changes in the editor
editor.addEventListener('input', () => {
    updateHistory(editor.value);
});

// Event listeners for undo and redo buttons
undoButton.addEventListener('click', undo);
redoButton.addEventListener('click', redo);

// Initial state: update history with the initial editor content
updateHistory(editor.value);
updateButtonStates();

Let’s break down this code:

  • Element Selection: We grab references to the editor (the textarea) and the undo/redo buttons using their IDs. The as HTMLTextAreaElement and as HTMLButtonElement assertions tell TypeScript that we expect these elements to be of those specific types, helping with type safety.
  • History Management: We use an array called history to store the code content at each change. historyIndex keeps track of the current position in the history. -1 indicates that there are no changes yet.
  • updateHistory Function: This is the core function for managing the history. It’s called whenever the user types something in the editor. Crucially, it removes any “redo” history if the user makes a new change (e.g., types after undoing). This ensures that the undo/redo functionality works as expected.
  • undo and redo Functions: These functions handle the undo and redo actions. They update the editor.value to the code at the corresponding history index and update the button states.
  • updateButtonStates Function: This function enables or disables the undo and redo buttons based on the current historyIndex. For example, the undo button is disabled if we are at the beginning of the history (index 0).
  • Event Listeners: We attach event listeners to the editor for the input event (when the user types) and to the undo/redo buttons for the click events. The input event triggers the updateHistory function, saving the current content to the history.
  • Initial State: The last two lines of code initialize the history with the initial content of the editor and set the initial button states.

To compile the TypeScript code, run the following command in your terminal:

tsc

This will create a dist directory with the compiled JavaScript file (index.js). Now, open index.html in your browser. You should see a text area and the undo/redo buttons. Type something in the text area, then try the undo and redo buttons.

Adding More Features (Optional)

While the basic undo/redo functionality is working, you can enhance the code editor with more features. Here are a few ideas:

  • Syntax Highlighting: Implement syntax highlighting to make the code easier to read. This involves parsing the code and applying different styles (colors, fonts) to different elements (keywords, strings, comments).
  • Autocompletion: Add autocompletion to suggest code snippets or variable names as the user types. This can significantly speed up the coding process.
  • Line Numbers: Display line numbers to help the user navigate the code.
  • Code Formatting: Integrate a code formatter (like Prettier) to automatically format the code.
  • Keybindings: Add keyboard shortcuts (e.g., Ctrl+Z for undo, Ctrl+Y or Ctrl+Shift+Z for redo) for a better user experience.

Implementing these features will require more advanced JavaScript and potentially external libraries. However, the core structure of the code editor we’ve built will remain the same. For example, adding syntax highlighting might involve using a library like Prism.js, and integrating it with the text area’s content.

Common Mistakes and How to Fix Them

Let’s address some common issues you might encounter while building this type of application:

  • Incorrect Type Assertions: When selecting elements with document.getElementById(), make sure to use type assertions (e.g., as HTMLTextAreaElement). Without these, TypeScript won’t know the type of the element, and you might encounter type-related errors.
  • History Management Bugs: The undo/redo logic can be tricky to get right. Make sure the updateHistory function correctly handles new changes after undoing, and that the button states are updated appropriately. Testing various scenarios is crucial.
  • Performance Issues: For very large codebases, constantly updating the history with every keystroke can impact performance. Consider implementing debouncing (delaying the update after a short period of inactivity) or throttling (limiting the frequency of updates) to improve performance.
  • Event Listener Conflicts: Be careful when adding multiple event listeners to the same element, as they might interfere with each other.
  • Browser Compatibility: While the code we’ve written should work in most modern browsers, always test your editor in different browsers to ensure compatibility.

Here’s an example of how to implement debouncing to improve performance:

let timeoutId: number | undefined;

const debouncedUpdateHistory = (code: string) => {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
        updateHistory(code);
        timeoutId = undefined;
    }, 250); // Adjust the delay (in milliseconds) as needed
};

// Replace the editor.addEventListener('input', ...) line with:
editor.addEventListener('input', () => {
    debouncedUpdateHistory(editor.value);
});

Key Takeaways

  • TypeScript Fundamentals: This tutorial reinforces basic TypeScript concepts such as variables, functions, event listeners, and type annotations.
  • DOM Manipulation: You’ve learned how to interact with the Document Object Model (DOM) to select elements, read their values, and update their content.
  • Event Handling: You’ve gained experience working with event listeners to respond to user interactions (typing, clicking).
  • State Management: The history array and index are examples of simple state management, crucial for building interactive applications.
  • Undo/Redo Implementation: You now understand the core logic behind implementing undo and redo functionality, a valuable feature for any text editor.

FAQ

Here are some frequently asked questions about building a web-based code editor:

  1. Why use TypeScript for a code editor? TypeScript provides type safety, which helps catch errors early in the development process. It also makes the code more maintainable and easier to understand, especially as the project grows.
  2. What are the benefits of undo/redo? Undo/redo allows users to correct mistakes easily, experiment with different code variations, and quickly revert to previous states.
  3. How can I add syntax highlighting? You can integrate a syntax highlighting library like Prism.js or highlight.js. This typically involves parsing the code and applying CSS classes to different code elements.
  4. How do I handle very large code files? For large files, consider techniques like virtual scrolling (only rendering the visible portion of the code) and debouncing/throttling to improve performance.
  5. Can I use this editor in a real-world project? While this is a basic editor, the core concepts can be extended to build a more feature-rich editor suitable for real-world projects. You can add features like syntax highlighting, autocompletion, and more.

This tutorial has walked you through the process of creating a simple yet functional code editor with undo and redo capabilities using TypeScript. You’ve learned how to set up the project, implement the core functionality, and address potential challenges. Remember, this is just the beginning. The world of web development is vast, and there’s always something new to learn. Feel free to experiment with the code, add new features, and tailor it to your needs. The skills you’ve gained here will serve as a solid foundation for your future projects. Building upon this foundation, you can create even more sophisticated and useful web applications.

More posts