TypeScript Tutorial: Building a Simple Interactive Markdown Editor

Written by

learnmodernjavascript

in

In the world of web development, the ability to create, edit, and preview formatted text is a fundamental skill. Markdown, a lightweight markup language, simplifies this process, allowing you to format text using simple, readable syntax. Imagine being able to quickly jot down notes, write blog posts, or even create documentation without wrestling with complex HTML tags. That’s the power of Markdown.

This tutorial will guide you through building a simple, interactive Markdown editor using TypeScript. We’ll cover everything from setting up your development environment to implementing the core features of the editor, including a live preview. By the end of this tutorial, you’ll have a functional Markdown editor and a solid understanding of how TypeScript can be used to create interactive web applications.

Why Build a Markdown Editor?

There are several compelling reasons to build a Markdown editor:

  • Learning TypeScript: This project provides a practical way to learn and practice TypeScript concepts. You’ll gain hands-on experience with types, interfaces, classes, and event handling.
  • Understanding Markdown: Building an editor will deepen your understanding of Markdown syntax and how it’s processed.
  • Creating a Useful Tool: You’ll have a functional tool that you can use for your own writing and note-taking.
  • Improving Web Development Skills: You’ll learn how to build interactive web applications, a valuable skill for any web developer.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn): You’ll need Node.js and npm (Node Package Manager) or yarn installed on your system. These are essential for managing project dependencies.
  • A Text Editor or IDE: Choose your favorite text editor or IDE (e.g., VS Code, Sublime Text, Atom) for writing code.
  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with HTML, CSS, and JavaScript is helpful, as we’ll be using these technologies to build the user interface.
  • A Web Browser: You’ll need a modern web browser (e.g., Chrome, Firefox, Safari) to view your Markdown editor.

Setting Up the Project

Let’s start by setting up our project. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project: 
    mkdir markdown-editor
cd markdown-editor
  2. Initialize npm: Initialize a new npm project: 
    npm init -y

    This command creates a package.json file, which will store information about your project and its dependencies.

  3. Install TypeScript: Install TypeScript as a development dependency: 
    npm install --save-dev typescript
  4. Create a TypeScript Configuration File: Create a tsconfig.json file in your project directory. This file configures the TypeScript compiler. You can generate a basic one using: 
    npx tsc --init

    This command creates a tsconfig.json file with default settings. You can customize these settings to fit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files (e.g., "outDir": "./dist").

  5. Create Project Folders and Files: Create a directory named src and inside it, create two files: index.html, style.css, and main.ts. These files will hold your HTML structure, CSS styles, and TypeScript code, respectively. Your project structure should now look like this: 
    
 markdown-editor/
  ├── package.json
  ├── tsconfig.json
  ├── src/
  │   ├── index.html
  │   ├── style.css
  │   └── main.ts

Writing the HTML

Let’s start by creating the basic HTML structure for our Markdown editor. Open src/index.html and add the following code:

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

This HTML creates the following elements:

  • A textarea with the id “editor” where the user will enter Markdown.
  • A div with the id “preview” where the rendered Markdown will be displayed.
  • Basic styling is linked through the style.css file.
  • The main.js file (which we’ll generate from our TypeScript code) is linked at the end of the body.

Styling with CSS

Now, let’s add some basic styling to our editor. Open src/style.css and add the following CSS:


body {
 font-family: sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f0f0f0;
}

.container {
 display: flex;
 height: 100vh;
}

.editor-container {
 flex: 1;
 padding: 20px;
}

.preview-container {
 flex: 1;
 padding: 20px;
 border-left: 1px solid #ccc;
 overflow-y: scroll; /* Add scroll if content overflows */
}

#editor {
 width: 100%;
 height: 100%;
 padding: 10px;
 border: 1px solid #ccc;
 font-family: monospace;
 resize: none; /* Prevent resizing of the textarea */
}

#preview {
 padding: 10px;
 line-height: 1.6;
}

This CSS provides a basic layout and styling for the editor and preview areas. It also adds a border between the editor and preview. The overflow-y: scroll; property in the preview container allows the preview area to scroll if the content is too long.

Writing TypeScript Code

Now, let’s write the TypeScript code that will make our editor interactive. Open src/main.ts and add the following code:


import { marked } from 'marked'; // Import the marked library

// Get references to the editor and preview elements
const editor = document.getElementById('editor') as HTMLTextAreaElement;
const preview = document.getElementById('preview') as HTMLDivElement;

// Function to update the preview
function updatePreview() {
 const markdown = editor.value;
 const html = marked.parse(markdown);
 preview.innerHTML = html;
}

// Add an event listener to the editor to update the preview on input
editor.addEventListener('input', updatePreview);

// Initial preview update (in case there's content on page load)
updatePreview();

Let’s break down the code:

  1. Import Marked: We import the `marked` library, which is used to parse the Markdown and convert it into HTML. Make sure you install it using `npm install marked`.
  2. Get Element References: We get references to the `textarea` (editor) and the `div` (preview) elements using their IDs. The `as HTMLTextAreaElement` and `as HTMLDivElement` are type assertions, which tell TypeScript the expected type of the elements.
  3. `updatePreview()` Function: This function does the following:
    • Gets the Markdown text from the editor.
    • Uses `marked.parse()` to convert the Markdown to HTML.
    • Sets the `innerHTML` of the preview element to the generated HTML.
  4. Event Listener: We add an event listener to the editor. The ‘input’ event is triggered whenever the content of the textarea changes. The `updatePreview` function is called each time the input changes, updating the preview in real-time.
  5. Initial Update: We call `updatePreview()` once when the page loads to ensure that any initial content in the editor is rendered in the preview.

Compiling and Running the Application

Now that we have our HTML, CSS, and TypeScript code, let’s compile and run the application:

  1. Compile TypeScript: Open your terminal or command prompt in your project directory and run the following command: 
    tsc

    This command compiles your TypeScript code (main.ts) into JavaScript (main.js) and places it in the output directory specified in your tsconfig.json file (usually the same directory as the source file if you haven’t changed the default settings).

  2. Open the HTML file: Open src/index.html in your web browser. You should now see your Markdown editor.
  3. Test the Editor: Type some Markdown in the editor, and you should see the rendered HTML in the preview area.

Adding Markdown Features

Let’s look at how to implement common Markdown features in your editor.

Headings

Markdown headings are created using the `#` symbol. For example:


# Heading 1
## Heading 2
### Heading 3

The `marked` library will automatically convert these to HTML headings (<h1>, <h2>, <h3>, etc.).

Emphasis

You can use asterisks or underscores for emphasis (italics and bold):

  • Italics: Use single asterisks or underscores: *italics* or _italics_
  • Bold: Use double asterisks or underscores: **bold** or __bold__

Lists

Unordered lists use asterisks, plus signs, or hyphens:


* Item 1
* Item 2
* Item 3

Ordered lists use numbers:


1. Item 1
2. Item 2
3. Item 3

Links

Links are created using square brackets for the text and parentheses for the URL:


[Link text](https://www.example.com)

Images

Images are created similarly to links, but with an exclamation mark at the beginning:


![Alt text](https://www.example.com/image.jpg)

Code

You can format code using backticks:


`code`

For code blocks, use three backticks:


```
function myFunction() {
 console.log('Hello, world!');
}
```

Blockquotes

Blockquotes are created using the `>` symbol:


> This is a blockquote.

Advanced Features

Let’s enhance our editor with some advanced features.

Syntax Highlighting

To add syntax highlighting to code blocks, we can use a library like Prism.js. First, install Prism.js:

npm install prismjs

Then, include the Prism.js CSS and JavaScript files in your index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

Next, configure Prism to autoload languages. You can do this by adding the following to your main.ts file, after the `marked.parse` call:


marked.use({
  renderer: {
    code(code: string, language: string | undefined) {
      if (language) {
        return `<pre class="language-${language}"><code class="language-${language}">${code}</code></pre>`;
      } else {
        return `<pre><code>${code}</code></pre>`;
      }
    },
  },
});

This code tells Prism to highlight the code blocks using the specified language. The `autoloader` plugin will automatically load the necessary language grammars. Now, when you write a code block with a language specified (e.g., “`javascript), Prism.js will highlight it.

Toolbar

Let’s add a toolbar to our editor to make it easier to format text. We’ll add buttons for bold, italics, links, and images.

First, add a toolbar container in your index.html, above the editor:

<div class="toolbar">
 <button id="bold"><b>B</b></button>
 <button id="italic"><i>I</i></button>
 <button id="link">Link</button>
 <button id="image">Image</button>
</div>

Then, add some styling for the toolbar in style.css:


.toolbar {
 padding: 10px;
 background-color: #eee;
 border-bottom: 1px solid #ccc;
}

.toolbar button {
 margin-right: 5px;
 padding: 5px 10px;
 border: 1px solid #ccc;
 background-color: #fff;
 cursor: pointer;
}

Now, add event listeners to the buttons in your main.ts:


const boldButton = document.getElementById('bold') as HTMLButtonElement;
const italicButton = document.getElementById('italic') as HTMLButtonElement;
const linkButton = document.getElementById('link') as HTMLButtonElement;
const imageButton = document.getElementById('image') as HTMLButtonElement;

function insertText(text: string) {
 const start = editor.selectionStart;
 const end = editor.selectionEnd;
 const value = editor.value;
 editor.value = value.substring(0, start) + text + value.substring(end);
 editor.focus();
 editor.selectionStart = start + text.length;
 editor.selectionEnd = start + text.length;
 updatePreview();
}

boldButton.addEventListener('click', () => {
 insertText('**' + (editor.value.substring(editor.selectionStart, editor.selectionEnd) || 'Bold Text') + '**');
});

italicButton.addEventListener('click', () => {
 insertText('*' + (editor.value.substring(editor.selectionStart, editor.selectionEnd) || 'Italic Text') + '*');
});

linkButton.addEventListener('click', () => {
 const linkText = prompt('Enter link text:');
 const linkURL = prompt('Enter link URL:');
 if (linkText && linkURL) {
  insertText(`[${linkText}](${linkURL})`);
 }
});

imageButton.addEventListener('click', () => {
 const imageAltText = prompt('Enter image alt text:');
 const imageURL = prompt('Enter image URL:');
 if (imageAltText && imageURL) {
  insertText(`![${imageAltText}](${imageURL})`);
 }
});

This code adds event listeners to the toolbar buttons. When a button is clicked, it inserts the corresponding Markdown formatting into the editor. It also provides a basic implementation for inserting links and images, using prompt boxes to collect the necessary information. The `insertText` function helps to insert the text at the current cursor position, while preserving the selection.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check that your file paths in index.html (e.g., for style.css and main.js) are correct.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies (e.g., marked, prismjs). Run npm install in your project directory to install all dependencies listed in your package.json file.
  • TypeScript Compilation Errors: If you encounter TypeScript compilation errors, carefully review the error messages. They often point to type mismatches or syntax errors in your code. Make sure your code is well-typed and follows TypeScript syntax.
  • Incorrect Markdown Syntax: If the Markdown isn’t rendering correctly, check your Markdown syntax. Make sure you’re using the correct characters and formatting.
  • Browser Caching: Sometimes, your browser might cache the old version of your JavaScript or CSS files. To fix this, try clearing your browser’s cache or hard-refreshing the page (Ctrl+Shift+R or Cmd+Shift+R).
  • Prism.js Not Highlighting: If Prism.js isn’t highlighting your code blocks, ensure that you have included the Prism.js CSS and JavaScript files correctly in your index.html. Verify that you have specified the language correctly in your code block (e.g., “`javascript). Also, check the browser’s developer console for any errors related to Prism.js.

Key Takeaways

  • You’ve learned how to build a basic Markdown editor using TypeScript.
  • You’ve gained practical experience with TypeScript, including types, event handling, and DOM manipulation.
  • You’ve learned how to use the marked library to convert Markdown to HTML.
  • You’ve explored how to add advanced features, such as syntax highlighting and a toolbar.
  • You have a functional tool that you can use for your own writing and note-taking.

FAQ

Here are some frequently asked questions:

  1. Can I use a different Markdown parser? Yes, you can. While this tutorial uses marked, there are other Markdown parsers available, such as markdown-it. You would need to adjust the import and the parsing logic in your main.ts file.
  2. How can I add more features to my editor? You can add features such as image upload, spell checking, autosave, and more. Consider using a more advanced text editor component library for more complex features.
  3. How do I deploy my editor? You can deploy your editor to a web server. You’ll need to build your project (using tsc), and then upload the HTML, CSS, JavaScript, and any other assets to your server.
  4. How can I improve the user interface? You can improve the user interface by adding more styling, using a more modern UI framework (e.g., React, Vue, Angular), and adding features like a live character counter or a word count.

Building a Markdown editor provides an excellent opportunity to solidify your understanding of TypeScript and web development principles. It’s a project that combines practical application with the joy of creating something useful. As you continue to experiment and expand upon this foundation, you will undoubtedly discover more advanced techniques and libraries that further enhance your skills. The journey of building a Markdown editor is not just about the final product, but about the knowledge and experience gained along the way. Embrace the learning process, experiment with different features, and enjoy the satisfaction of creating your own custom tool.

More posts