TypeScript Tutorial: Creating a Simple Web-Based Code Editor

Written by

learnmodernjavascript

in

In the world of web development, the ability to write, test, and debug code directly within a web browser can be incredibly valuable. Imagine being able to quickly prototype ideas, collaborate with others, or even learn to code without needing to install any software. This is where a web-based code editor comes in handy. This tutorial will guide you through building a simple, yet functional, code editor using TypeScript, a superset of JavaScript that adds static typing and other features to enhance code quality and maintainability. We’ll explore the core concepts, from setting up the project to implementing features like syntax highlighting and code completion. By the end of this tutorial, you’ll have a solid understanding of how to create your own web-based code editor and the benefits of using TypeScript for such projects.

Why Build a Web-Based Code Editor?

Web-based code editors offer several advantages over traditional desktop editors:

  • Accessibility: Accessible from any device with a web browser and an internet connection.
  • Collaboration: Facilitates real-time collaboration with other developers.
  • Ease of Use: No installation required, making it ideal for quick prototyping and learning.
  • Cross-Platform Compatibility: Works seamlessly across different operating systems.

Furthermore, building a project like this provides a practical way to learn and apply TypeScript concepts, including:

  • Types and Interfaces
  • Classes and Objects
  • Modules and Imports
  • Event Handling
  • DOM Manipulation

Setting Up Your Project

Before diving into the code, let’s set up the project structure and install the necessary dependencies. We will use a simple HTML file to host our editor, TypeScript to write our code, and a build process to convert our TypeScript code into JavaScript that the browser can understand.

1. Create Project Directory:

First, create a new directory for your project. You can name it something like “web-code-editor”.

mkdir web-code-editor
cd web-code-editor

2. Initialize npm:

Initialize a new npm project in your project directory. This will create a `package.json` file to manage your project’s dependencies.

npm init -y

3. Install TypeScript:

Install TypeScript as a development dependency. This allows us to use the `tsc` command to compile TypeScript code.

npm install --save-dev typescript

4. Create `tsconfig.json`:

Create a `tsconfig.json` file in your project root. This file configures the TypeScript compiler. You can generate a basic configuration by running the following command:

npx tsc --init

This command creates a `tsconfig.json` file with default settings. You might want to adjust these settings based on your project needs. For example, you can specify the output directory for compiled JavaScript files (e.g., “dist”), the target JavaScript version (e.g., “es5”), and the module system (e.g., “es6”). A simple `tsconfig.json` might look like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

5. Create Project Files:

Create the following files in your project directory:

  • `index.html`: The main HTML file for your editor.
  • `src/index.ts`: The main TypeScript file where you’ll write the editor’s logic.

6. Create `index.html`:

Create a simple HTML structure for your editor. This will include a `textarea` element for the code input and a container to display the editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Code Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="editor-container">
        <textarea id="code-editor"></textarea>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

7. Create `src/index.ts`:

This is where your TypeScript code will go. Initially, you can add a simple console log to verify that the setup is working.

console.log("Web Code Editor is running!");

8. Create `style.css`:

Create a basic CSS file for styling the editor.

.editor-container {
    width: 80%;
    margin: 20px auto;
}

#code-editor {
    width: 100%;
    height: 500px;
    font-family: monospace;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
}

9. Build the Project:

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

npx tsc

This command uses the TypeScript compiler (`tsc`) to transpile your `.ts` files into `.js` files, which will be placed in the `dist` directory (as configured in `tsconfig.json`).

10. Open in Browser:

Open `index.html` in your web browser. You should see the `textarea` element. If you open the browser’s developer console (usually by pressing F12), you should see the “Web Code Editor is running!” message, confirming that your TypeScript code is being executed.

Implementing Core Features

Now that the basic setup is complete, let’s add some core features to your web-based code editor. We’ll start with syntax highlighting, which significantly improves readability.

Syntax Highlighting

Syntax highlighting involves applying different colors and styles to different parts of the code based on their syntax. For this, we’ll use a regular expression-based approach. We’ll identify keywords, comments, strings, and other code elements and wrap them in `<span>` tags with appropriate CSS classes to apply the desired styling.

1. Add CSS for Syntax Highlighting:

Update your `style.css` file to include CSS rules for different code elements. Here’s a basic example:

.keyword {
    color: blue;
    font-weight: bold;
}

.string {
    color: green;
}

.comment {
    color: gray;
}

2. Create a `highlightCode` Function:

In `src/index.ts`, create a function called `highlightCode` that takes the code as a string and returns the highlighted HTML. This function will use regular expressions to identify and style different code elements.


function highlightCode(code: string): string {
    // Keywords
    code = code.replace(/b(function|if|else|return|var|let|const)b/g, '<span class="keyword">$1</span>');
    // Strings
    code = code.replace(/"([^"\nr]*)"/g, '<span class="string">"$1"</span>');
    // Comments
    code = code.replace(///.*|/*[sS]*?*//g, '<span class="comment">$0</span>');
    return code;
}

3. Integrate Highlighting into the Editor:

Get the `textarea` element, highlight the code, and update the editor’s content. We will use the `innerHTML` property to update the editor. This approach is simple, but it has some limitations we’ll address later.


const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement;

codeEditor.addEventListener('input', () => {
    const code = codeEditor.value;
    const highlightedCode = highlightCode(code);
    codeEditor.innerHTML = highlightedCode;
});

4. Initial Highlighting:

Call the `highlightCode` function initially to highlight any existing code in the `textarea` when the page loads.


// Initial highlighting
codeEditor.innerHTML = highlightCode(codeEditor.value);

Important Note: This simple implementation has a significant limitation. The `innerHTML` property replaces the entire content of the `textarea`, which means that the cursor position is lost every time the code is highlighted. We’ll address this and other potential issues later.

Code Completion (Autocompletion)

Code completion, or autocompletion, is a feature that suggests code snippets, variable names, and function names as the user types. This can significantly speed up coding and reduce errors. Here’s how to implement a basic code completion feature:

1. Create a `suggestions` Array:

Define an array of code snippets that you want to suggest. This can be as simple as an array of keywords or a more complex data structure that includes function names, parameters, and more.


const suggestions = [
    'function', 'if', 'else', 'return', 'var', 'let', 'const', 'console.log'
];

2. Create a `showSuggestions` Function:

This function will display the suggestions below the text area. It takes the current text in the textarea and filters the suggestions based on the user’s input.


function showSuggestions(text: string) {
    // Implementation will go here
}

3. Create a `suggestionContainer` and `suggestionList` elements

We’ll need a container to hold the suggestions and a list to display them. Add this to your HTML file.


<div class="editor-container">
    <textarea id="code-editor"></textarea>
    <ul id="suggestion-list" class="suggestion-list"></ul>
</div>

Add some basic styling to the `style.css` file.


.suggestion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    position: absolute;
    background-color: #fff;
    z-index: 1;
    width: 200px; /* Adjust width as needed */
    max-height: 150px; /* Adjust max-height as needed */
    overflow-y: auto;
}

.suggestion-list li {
    padding: 5px 10px;
    cursor: pointer;
}

.suggestion-list li:hover {
    background-color: #f0f0f0;
}

4. Implement the `showSuggestions` function

This function will take the text from the `textarea`, filter the suggestions, and display them in the `suggestion-list` element.


function showSuggestions(text: string) {
    const suggestionList = document.getElementById('suggestion-list') as HTMLUListElement;
    suggestionList.innerHTML = ''; // Clear previous suggestions

    const filteredSuggestions = suggestions.filter(suggestion =>
        suggestion.startsWith(text.toLowerCase()));

    filteredSuggestions.forEach(suggestion => {
        const listItem = document.createElement('li');
        listItem.textContent = suggestion;
        listItem.addEventListener('click', () => {
            // Handle suggestion selection
            codeEditor.value = codeEditor.value.substring(0, codeEditor.selectionStart) + suggestion + ' '; // or whatever is appropriate
            hideSuggestions();
            codeEditor.focus();
        });
        suggestionList.appendChild(listItem);
    });
    // Position the suggestion box
    positionSuggestionBox();
    if (filteredSuggestions.length > 0) {
        suggestionList.style.display = 'block';
    }
    else {
        suggestionList.style.display = 'none';
    }
}

function hideSuggestions() {
    const suggestionList = document.getElementById('suggestion-list') as HTMLUListElement;
    suggestionList.style.display = 'none';
}

function positionSuggestionBox() {
    const suggestionList = document.getElementById('suggestion-list') as HTMLUListElement;
    const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement;
    const rect = codeEditor.getBoundingClientRect();

    suggestionList.style.position = 'absolute';
    suggestionList.style.left = rect.left + 'px';
    suggestionList.style.top = rect.bottom + 'px';
}

5. Integrate Code Completion into the Editor:

Modify the `input` event listener to call `showSuggestions` when the user types in the code editor, and `hideSuggestions` when they move the cursor.


codeEditor.addEventListener('input', () => {
    const code = codeEditor.value;
    const highlightedCode = highlightCode(code);
    codeEditor.innerHTML = highlightedCode;
    showSuggestions(codeEditor.value.substring(0, codeEditor.selectionStart));
});

codeEditor.addEventListener('blur', () => {
    // Hide suggestions when the editor loses focus
    hideSuggestions();
});

codeEditor.addEventListener('keydown', (event) => {
    // Hide suggestions when Esc is pressed
    if (event.key === 'Escape') {
        hideSuggestions();
        codeEditor.focus();
    }
});

With these changes, the editor will now suggest code completion options as the user types. This is a basic implementation, and more advanced features such as context-aware suggestions (based on the current scope, etc.) would require more complex logic.

Code Formatting and Other Features

Beyond syntax highlighting and code completion, you might want to add other features to enhance the editor’s functionality. These could include:

  • Code Formatting: Automatically format the code to improve readability (e.g., using a library like Prettier).
  • Error Checking: Integrate a linter (e.g., ESLint) to identify and highlight errors and warnings in the code.
  • Line Numbers: Display line numbers to help with navigation and debugging.
  • Theme Customization: Allow users to choose different themes (e.g., dark mode, light mode).
  • Saving and Loading: Implement features to save and load code from local storage or a server.
  • Undo/Redo: Implement undo and redo functionalities.

Each of these features would involve additional code and potentially the use of external libraries. For example, to implement code formatting, you might integrate a library like Prettier and call its formatting function when the user presses a specific key combination (e.g., Ctrl+S).

Addressing Common Mistakes and Improving Performance

As you build your web-based code editor, you might encounter some common mistakes and performance issues. Here’s how to address them:

1. Cursor Position Loss

As mentioned earlier, using `innerHTML` to update the `textarea` content causes the cursor position to be lost. This is because replacing the entire content of the `textarea` resets the cursor. To fix this, you can:

  • Use `innerText` or `textContent` (with care): Instead of replacing `innerHTML`, you can attempt to use `innerText` or `textContent`. However, these properties don’t support HTML elements directly, so you’d need to convert highlighted code back to text.
  • Use a different approach for syntax highlighting: Instead of a `textarea`, you could use a `div` element with `contenteditable=”true”`. This allows you to insert HTML elements directly, preserving the cursor position. You might also consider using a third-party code editor component (such as CodeMirror or Monaco Editor).

Here’s how you can attempt to preserve the cursor position using a `div` with `contenteditable=”true”`:


<div class="editor-container">
    <div id="code-editor" contenteditable="true"></div>
    <ul id="suggestion-list" class="suggestion-list"></ul>
</div>

And change your TypeScript to:


const codeEditor = document.getElementById('code-editor') as HTMLDivElement;

codeEditor.addEventListener('input', () => {
    const code = codeEditor.textContent || ''; // Use textContent instead of value
    const highlightedCode = highlightCode(code);
    codeEditor.innerHTML = highlightedCode;
});

Note that this approach requires careful handling of events and selection ranges to maintain the cursor position correctly.

2. Performance Issues

Syntax highlighting and code completion can become slow, especially for large code files. To improve performance:

  • Optimize Regular Expressions: Ensure that your regular expressions are efficient and don’t cause excessive backtracking.
  • Debounce Input Events: Use a debounce function to limit the frequency of highlighting and code completion updates. This will prevent excessive processing when the user is typing quickly.
  • Use Web Workers: Move the syntax highlighting and code completion logic to a web worker to prevent blocking the main thread.
  • Consider a Third-Party Editor Component: Libraries like CodeMirror and Monaco Editor are highly optimized for performance and offer advanced features like syntax highlighting, code completion, and more.

Here’s an example of implementing a debounce function:


function debounce(func: () => void, delay: number) {
    let timeoutId: number | undefined;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(context, args), delay);
    };
}

const debouncedHighlight = debounce(() => {
    const code = codeEditor.value;
    const highlightedCode = highlightCode(code);
    codeEditor.innerHTML = highlightedCode;
}, 200); // Adjust delay as needed

codeEditor.addEventListener('input', debouncedHighlight);

3. Cross-Site Scripting (XSS) Vulnerabilities

If you allow users to input code that is then rendered in the browser, you must be careful to prevent XSS attacks. Ensure that any user-provided code is properly sanitized before rendering it in the browser. Consider using a library like DOMPurify to sanitize HTML and remove potentially malicious code.

Key Takeaways and Summary

In this tutorial, we’ve covered the basics of building a web-based code editor using TypeScript. You’ve learned how to set up the project, implement syntax highlighting and code completion, and address common challenges. You now possess the foundation to create a more sophisticated code editor with additional features.

Key takeaways:

  • TypeScript enhances code quality and maintainability.
  • Web-based code editors offer accessibility and collaboration benefits.
  • Syntax highlighting and code completion improve the coding experience.
  • Performance optimization is crucial for large code files.
  • Security considerations, such as preventing XSS attacks, are essential.

Frequently Asked Questions (FAQ)

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

1. What are the advantages of using TypeScript for this project?

TypeScript provides static typing, which helps catch errors early, improves code readability, and makes it easier to refactor and maintain the codebase. It also provides features like interfaces and classes, which allow you to structure your code more effectively.

2. How can I improve the performance of my code editor?

Optimize your regular expressions, debounce input events, use web workers to offload CPU-intensive tasks, and consider using a third-party code editor component (e.g., CodeMirror, Monaco Editor) that is designed for performance.

3. How can I prevent cross-site scripting (XSS) vulnerabilities?

Sanitize any user-provided code before rendering it in the browser. Use a library like DOMPurify to remove potentially malicious code.

4. What are some other features I can add to my code editor?

You can add features like code formatting (using Prettier), error checking (using ESLint), line numbers, theme customization, saving and loading code, and undo/redo functionality.

5. Should I use a third-party code editor component?

Using a third-party component like CodeMirror or Monaco Editor can save you a lot of time and effort. These components provide advanced features like syntax highlighting, code completion, and more, and are highly optimized for performance. If you want a fully-featured code editor, using a third-party component is often the best choice.

Building a web-based code editor is a rewarding project that allows you to learn and apply various web development concepts. While the basic implementation can be relatively straightforward, building a feature-rich, high-performance editor requires careful consideration of performance, user experience, and security. By following this tutorial and experimenting with different features and optimizations, you can create a powerful and useful tool for yourself and others. The journey of building such a tool is as much about understanding the underlying principles as it is about the final product itself, providing valuable insights into the world of web development and the intricacies of code editing. The principles applied here, from handling user input to managing the display of complex code, are transferable to a wide range of web applications, solidifying your understanding of the fundamentals.

More posts