TypeScript: Building a Simple Web-Based Code Editor with Syntax Highlighting

Written by

learnmodernjavascript

in

In the world of web development, code editors are indispensable tools. They’re where developers spend a significant portion of their time, crafting, debugging, and refining code. While sophisticated IDEs (Integrated Development Environments) offer a wealth of features, sometimes you need something simpler, more focused, or perhaps integrated directly into a web application. This is where building a basic, web-based code editor with TypeScript comes into play. This tutorial will guide you through creating such an editor, complete with syntax highlighting, offering a practical and educational experience for beginners to intermediate developers.

Why Build a Web-Based Code Editor?

There are several compelling reasons to embark on this project:

  • Educational Value: Building a code editor provides hands-on experience with fundamental web technologies like HTML, CSS, JavaScript, and, in this case, TypeScript. You’ll gain a deeper understanding of how these technologies interact.
  • Customization: You can tailor the editor to your specific needs, adding features or styling it to match your preferences.
  • Integration: A web-based editor can be seamlessly integrated into other web applications, such as online learning platforms, collaborative coding environments, or documentation tools.
  • Learning TypeScript: This project offers a practical way to learn and apply TypeScript, reinforcing your understanding of types, interfaces, and classes.

Setting Up Your Development Environment

Before diving into the code, let’s set up the environment:

  1. Node.js and npm (or yarn): Ensure you have Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies and running the development server.
  2. TypeScript Compiler: Install the TypeScript compiler globally by running `npm install -g typescript` or `yarn global add typescript`.
  3. Code Editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).
  4. Project Directory: Create a new directory for your project (e.g., `code-editor`) and navigate into it using your terminal.

Once your environment is set up, initialize a new npm project in your project directory:

npm init -y

This command creates a `package.json` file, which will store your project’s metadata and dependencies.

Project Structure

Let’s define a basic project structure:


code-editor/
├── src/
│   ├── index.ts
│   └── style.css
├── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js
  • `src/index.ts`: The main TypeScript file, where we’ll write our code editor logic.
  • `src/style.css`: CSS file for styling the editor.
  • `index.html`: The HTML file, which will contain the editor’s UI.
  • `tsconfig.json`: TypeScript compiler configuration file.
  • `webpack.config.js`: Webpack configuration file for bundling the project.

Configuring TypeScript

Create a `tsconfig.json` file in the root directory. This file configures the TypeScript compiler. Here’s a basic configuration:


{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src/**/*"]
}

Explanation:

  • `target`: Specifies the JavaScript version to compile to (ES5 for wider browser compatibility).
  • `module`: Specifies the module system to use (CommonJS for Node.js).
  • `outDir`: Specifies the output directory for the compiled JavaScript files.
  • `sourceMap`: Generates source map files for debugging.
  • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
  • `strict`: Enables strict type checking.
  • `include`: Specifies which files to include in the compilation.

Setting Up Webpack

Webpack is a module bundler that will bundle our TypeScript, CSS, and other assets into a single file that can be used in the browser. Install Webpack and its CLI as dev dependencies:

npm install --save-dev webpack webpack-cli ts-loader css-loader style-loader html-webpack-plugin

Create a `webpack.config.js` file in the root directory:


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  devtool: 'source-map',
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    open: true,
  },
};

Explanation:

  • `entry`: Specifies the entry point of your application.
  • `output`: Specifies the output directory and filename of the bundled file.
  • `module.rules`: Defines how different file types should be handled.
    • `ts-loader`: Handles TypeScript files.
    • `css-loader`: Handles CSS files.
    • `style-loader`: Injects CSS into the DOM.
  • `resolve.extensions`: Specifies the file extensions that Webpack should resolve.
  • `plugins`: Configures plugins to use.
    • `HtmlWebpackPlugin`: Generates an HTML file from a template.
  • `devtool`: Enables source maps for debugging.
  • `devServer`: Configures the development server.

Creating the HTML Structure

Create an `index.html` file in the root directory:





  
  
  <title>Simple Code Editor</title>
  


  <div id="editor-container">
    <textarea id="code-editor"></textarea>
  </div>

This HTML provides a basic structure with a text area for the code editor. It also includes the compiled `bundle.js` and a link to `style.css` which we’ll create later.

Styling the Editor with CSS

Create a `style.css` file in the `src` directory:


#editor-container {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

#code-editor {
  width: 100%;
  height: 400px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  resize: none;
  border: none;
  outline: none;
}

This CSS provides basic styling for the editor container and text area.

Implementing the Code Editor with TypeScript

Now, let’s write the TypeScript code for the code editor in `src/index.ts`. This will include features like:

  • Getting the textarea element.
  • Adding syntax highlighting (basic implementation).

// src/index.ts

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

if (codeEditor) {
  codeEditor.addEventListener('input', () => {
    highlightSyntax(codeEditor);
  });

  // Initial highlighting on page load
  highlightSyntax(codeEditor);
}

// Basic Syntax Highlighting Function
function highlightSyntax(editor: HTMLTextAreaElement) {
  const code = editor.value;
  const highlightedCode = code.replace(/b(const|let|var|function|class|if|else|return)b/g, '<span class="keyword">$1</span>')
                             .replace(/b([0-9]+)b/g, '<span class="number">$1</span>')
                             .replace(/"([^"]*)"/g, '<span class="string">"$1"</span>')
                             .replace(///.*|(/*[sS]*?*/)/g, '<span class="comment">$0</span>');

  // Very important to prevent XSS attacks. We can't use innerHTML directly because it is unsafe.
  // Instead we will construct a new DOM element and then replace the old one.
  const pre = document.createElement('pre');
  pre.innerHTML = highlightedCode;
  pre.style.padding = '10px';
  pre.style.fontFamily = 'monospace';
  pre.style.fontSize = '14px';
  // Replace the textarea with the pre element.
  editor.parentNode?.replaceChild(pre, editor);
  // Make sure the editor is still focused.
  if (document.activeElement !== pre) {
    pre.focus();
  }
}

Explanation:

  • We get a reference to the textarea element using `document.getElementById()`. The `as HTMLTextAreaElement | null` is a type assertion and handles the possibility that the element might not exist.
  • An event listener is attached to the `input` event of the textarea. This ensures that the syntax highlighting is updated every time the user types something.
  • The `highlightSyntax` function takes the code from the textarea, performs basic syntax highlighting using regular expressions, and replaces the textarea with a `pre` element that contains the highlighted code. This method is used to mitigate against potential XSS attacks, since using `innerHTML` directly is unsafe.
  • The regular expressions are used to match keywords, numbers, strings, and comments.
  • The `pre` element is styled to match the appearance of the original textarea.
  • The `focus()` method makes sure the editor is still focused after the highlighting.

Add some basic CSS to `style.css` for the syntax highlighting:


.keyword {
  color: blue;
}

.number {
  color: darkorange;
}

.string {
  color: green;
}

.comment {
  color: gray;
}

Building and Running the Application

To build the application, run the following command in your terminal:

npx webpack

This will bundle your TypeScript, CSS, and HTML into the `dist` directory. Then run the development server by using the following command:

npx webpack serve

This will start the webpack development server and open your application in your default browser at `http://localhost:8080/`.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check that all file paths in your HTML, TypeScript, and Webpack configuration are correct.
  • Typo Errors: Carefully check your code for typos, especially in variable names and CSS class names.
  • Webpack Configuration Errors: Make sure your Webpack configuration is set up correctly. Errors in the configuration can prevent the application from building.
  • Syntax Highlighting Issues: The regular expressions used for syntax highlighting might not be perfect and might not cover all the syntax of the language you’re using. You can refine the regular expressions to improve syntax highlighting.
  • XSS Vulnerabilities: The original implementation of syntax highlighting using `innerHTML` is vulnerable to XSS attacks. The updated code uses the `pre` element for a safer implementation.
  • Browser Compatibility: Ensure that your code is compatible with the target browsers. If you are targeting older browsers, you might need to adjust your `tsconfig.json` to transpile to ES5.
  • Missing Dependencies: Make sure you have installed all the necessary dependencies using npm or yarn.

Enhancements and Next Steps

This is a basic code editor. Here are some ideas for enhancements:

  • More Sophisticated Syntax Highlighting: Use a library like Prism.js or highlight.js for more accurate and comprehensive syntax highlighting.
  • Code Completion: Implement code completion features to suggest code snippets or function names as the user types.
  • Error Detection: Integrate a linter (e.g., ESLint) to detect and highlight errors in the code.
  • Themes: Allow users to choose different themes (light, dark, etc.) for the editor.
  • Multiple Languages: Support syntax highlighting for multiple programming languages.
  • Line Numbers: Add line numbers to the editor.
  • Auto-indentation: Automatically indent code to improve readability.
  • Saving and Loading: Implement features to save and load code from local storage or a server.
  • Keybindings: Add keyboard shortcuts for common actions like saving, formatting, or commenting code.

Key Takeaways

In this tutorial, we’ve built a fundamental web-based code editor using TypeScript. You’ve learned how to set up a development environment, structure a project, configure TypeScript, use Webpack for bundling, and implement basic syntax highlighting. You’ve also gained practical experience with HTML, CSS, and the DOM. This project is a solid foundation for further exploration in web development and TypeScript. Keep in mind that while this example provides a starting point, a production-ready code editor would require more advanced features and optimizations.

FAQ

Q: Why use TypeScript for a code editor?
A: TypeScript provides static typing, which helps catch errors early in development, improves code maintainability, and provides better code completion and refactoring capabilities.

Q: What are the benefits of using Webpack?
A: Webpack bundles your JavaScript, CSS, and other assets, optimizes them for the browser, and allows you to use modules and other modern features.

Q: How can I add line numbers to the editor?
A: You can add line numbers by creating a separate `div` element next to the textarea and dynamically updating the content of the `div` based on the number of lines in the textarea.

Q: How can I improve the syntax highlighting?
A: You can use a dedicated syntax highlighting library like Prism.js or highlight.js. These libraries provide more accurate and comprehensive highlighting.

Q: How do I handle different programming languages?
A: You can extend the syntax highlighting function to include regular expressions for different programming languages. You could also use a library like Prism.js, which supports multiple languages out-of-the-box.

This project is a great starting point for anyone looking to understand the fundamentals of web-based code editors. By building this simple editor, you’ve gained practical experience with essential web technologies and the power of TypeScript. The flexibility of this basic editor allows you to shape it into a more powerful and feature-rich tool that meets your specific needs. From here, the possibilities for customization and expansion are nearly endless.

More posts