Build a Simple React JS Interactive Web-Based Markdown Editor: A Beginner’s Guide

Written by

javascriptdebugged

in

In the world of web development, the ability to create and edit content dynamically is a highly valuable skill. Markdown, a lightweight markup language, simplifies text formatting, making it ideal for blogs, documentation, and note-taking apps. This tutorial guides you through building a simple, yet functional, interactive Markdown editor using React JS. You’ll learn how to take user input, convert it to HTML, and display the formatted output in real-time. This project is perfect for beginner to intermediate developers looking to deepen their React knowledge and understand how to handle user input and DOM manipulation.

Why Build a Markdown Editor?

Markdown editors are incredibly useful for several reasons:

  • Ease of Use: Markdown’s simple syntax makes it easier to write and format text compared to HTML.
  • Portability: Markdown files are plain text, making them compatible with various platforms and applications.
  • Real-time Preview: An interactive editor provides immediate feedback, allowing users to see how their Markdown will look when rendered.
  • Learning React: Building this project allows you to practice key React concepts like state management, event handling, and component composition.

Prerequisites

Before starting, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies is crucial for understanding the code.
  • A code editor: Choose your preferred editor (VS Code, Sublime Text, etc.).

Setting Up the Project

Let’s begin by creating a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app markdown-editor
cd markdown-editor

This command creates a new React project named “markdown-editor” and navigates you into the project directory. Next, install a library to convert Markdown to HTML. We’ll use “marked” for this purpose:

npm install marked

Now, open the project in your code editor and navigate to the `src` directory. You’ll find a file named `App.js`. This is where we’ll build our Markdown editor.

Building the React Markdown Editor

Replace the contents of `src/App.js` with the following code:

import React, { useState } from 'react';
import { marked } from 'marked';
import './App.css';

function App() {
  const [markdown, setMarkdown] = useState('');

  const handleChange = (e) => {
    setMarkdown(e.target.value);
  };

  return (
    <div className="container">
      <div className="editor-container">
        <textarea
          id="editor"
          value={markdown}
          onChange={handleChange}
        />
      </div>
      <div className="preview-container">
        <div
          id="preview"
          dangerouslySetInnerHTML={{ __html: marked(markdown) }}
        />
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` from React for state management, `marked` from the “marked” library to convert Markdown to HTML, and `App.css` for styling.
  • State: We initialize a state variable `markdown` using `useState`, which holds the Markdown text entered by the user. Initially, it’s set to an empty string.
  • handleChange Function: This function is triggered whenever the user types in the textarea. It updates the `markdown` state with the current value of the textarea using `setMarkdown`.
  • JSX Structure: The code returns JSX (JavaScript XML) that defines the structure of our editor.
    • Container: The main `<div className=”container”>` holds both the editor and preview sections.
    • Editor Container: The `<div className=”editor-container”>` contains the `<textarea>` element.
    • Textarea: The `<textarea>` is where the user types the Markdown text. Its `value` is bound to the `markdown` state, and `onChange` is set to the `handleChange` function.
    • Preview Container: The `<div className=”preview-container”>` displays the rendered HTML.
    • Preview Div: The `<div id=”preview”>` uses `dangerouslySetInnerHTML` to render the HTML generated from the Markdown. `marked(markdown)` converts the Markdown text into HTML.

Styling the Markdown Editor (App.css)

Now, let’s add some basic styling to `src/App.css` to make the editor visually appealing. Replace the existing content of `App.css` with the following:

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  padding: 20px;
  background-color: #f0f0f0;
}

.editor-container {
  flex: 1;
  padding: 10px;
  border-right: 1px solid #ccc;
}

textarea {
  width: 100%;
  height: 90%;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  resize: none;
}

.preview-container {
  flex: 1;
  padding: 10px;
}

#preview {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: white;
  height: 90%;
  overflow-y: auto;
}

/* Optional: Basic Markdown styling */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

pre {
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}


blockquote {
  border-left: 5px solid #ccc;
  padding-left: 10px;
  margin-left: 0;
}


ul, ol {
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

This CSS provides a basic layout with two columns (editor and preview) and styles the textarea and preview area. It also includes some basic styles for Markdown elements like headings, paragraphs, links, and code blocks. Feel free to customize the styles to your liking.

Running the Application

To run the application, execute the following command in your terminal within the project directory:

npm start

This command starts the development server, and the application will open automatically in your browser (usually at `http://localhost:3000`). You should see the Markdown editor with the textarea on the left and the rendered preview on the right. Start typing Markdown in the left textarea, and you’ll see the formatted output in real-time on the right.

Understanding the Code in Detail

Let’s dive deeper into some key concepts:

  • State Management with `useState`: The `useState` hook is crucial for managing the Markdown text. When the user types in the textarea, the `handleChange` function updates the `markdown` state using `setMarkdown`. This triggers a re-render of the component, updating the textarea’s value and the preview.
  • Event Handling: The `onChange` event listener on the textarea calls the `handleChange` function whenever the user types. This is how the application captures user input.
  • Markdown Conversion with `marked`: The `marked(markdown)` function takes the Markdown text as input and returns the corresponding HTML. This is where the magic of Markdown rendering happens.
  • Rendering HTML with `dangerouslySetInnerHTML`: `dangerouslySetInnerHTML` is used to inject the HTML generated by `marked` into the preview area. It’s called “dangerous” because it can potentially open your application to cross-site scripting (XSS) attacks if you’re not careful about the source of the HTML. In this case, since the HTML is generated from user-provided Markdown, it’s generally safe, but always be aware of the security implications. For more complex applications, consider sanitizing user input before rendering.
  • Component Structure: The application consists of a single functional component, `App`. This component handles all the logic and rendering. For more complex applications, you might break down the editor into smaller, reusable components.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Not Importing `marked`: Make sure you’ve installed “marked” and imported it correctly at the top of your `App.js` file: `import { marked } from ‘marked’;`.
  • Incorrect State Updates: When updating the state, ensure you’re using the correct `setMarkdown` function and passing the new value.
  • Missing `onChange` Handler: The `onChange` event handler on the textarea is essential for capturing user input. Without it, the textarea won’t update.
  • Incorrect CSS Styling: Double-check your CSS to ensure the editor and preview containers are properly styled and positioned. Use your browser’s developer tools to inspect the elements and identify any styling issues.
  • Security Considerations: While this example is relatively safe, be mindful of using `dangerouslySetInnerHTML`. For production applications, always sanitize user input to prevent XSS vulnerabilities. Consider using a library like `dompurify` for sanitization.

Enhancements and Next Steps

Once you’ve built the basic Markdown editor, you can enhance it in several ways:

  • Toolbar: Add a toolbar with buttons for common Markdown formatting options (bold, italic, headings, etc.).
  • Syntax Highlighting: Implement syntax highlighting for code blocks using a library like Prism.js or highlight.js.
  • Live Preview for Links and Images: Enhance the preview to render links and images correctly.
  • Save and Load Functionality: Add features to save the Markdown content to local storage or a server and load it later.
  • Themes: Allow users to choose different themes for the editor and preview.
  • Error Handling: Implement error handling to gracefully handle any unexpected errors.
  • Keyboard Shortcuts: Implement keyboard shortcuts for common Markdown formatting options.

Key Takeaways

In this tutorial, you’ve learned how to build a basic Markdown editor using React. You’ve gained experience with state management, event handling, working with external libraries, and rendering HTML dynamically. This project provides a solid foundation for building more complex text editing applications. Remember to experiment, explore the “marked” library’s options, and customize the editor to your liking.

FAQ

Q: How do I install the “marked” library?

A: You install it using npm or yarn in your terminal: `npm install marked` or `yarn add marked`.

Q: Why is `dangerouslySetInnerHTML` used?

A: `dangerouslySetInnerHTML` is used because the `marked` library converts Markdown to HTML, and we need a way to inject that HTML into the DOM. React typically escapes HTML to prevent XSS attacks, but `dangerouslySetInnerHTML` allows you to bypass this protection (use with caution).

Q: How can I add a toolbar for formatting?

A: You can add buttons that, when clicked, insert the appropriate Markdown syntax into the textarea. For example, a bold button would insert `**` before and after the selected text.

Q: Can I save the Markdown content?

A: Yes, you can use local storage or a server-side API to save the content. You’d typically store the `markdown` state in local storage or send it to a server on a save action.

Q: How do I handle code blocks in Markdown?

A: Markdown uses triple backticks (“`) to denote code blocks. The `marked` library automatically handles the conversion to HTML. You can then style the `<pre>` and `<code>` elements in your CSS to customize the appearance of code blocks.

By following this guide, you’ve created a functional Markdown editor. This project not only enhances your React skills but also equips you with a useful tool for writing and formatting text efficiently. The ability to build interactive web applications is a valuable asset in today’s tech landscape, and this tutorial is a great step in that direction.

More posts