Build a Simple Next.js Interactive Web-Based Markdown Editor

Written by

javascriptdebugged

in

In the world of web development, the ability to create and edit content dynamically is a highly sought-after skill. Imagine building a tool that allows users to write in Markdown, a simple markup language, and see the formatted output instantly. This is precisely what we’ll achieve in this comprehensive tutorial. We’ll build a simple, yet functional, Markdown editor using Next.js, a powerful React framework known for its server-side rendering and excellent developer experience. This project is perfect for beginners and intermediate developers looking to deepen their understanding of Next.js, React, and Markdown parsing.

Why Build a Markdown Editor?

Markdown is a lightweight markup language with plain text formatting syntax. It’s widely used for writing documentation, README files, and creating content for blogs and websites. Building a Markdown editor is a great learning exercise because it involves several key concepts:

  • Understanding Markdown: You’ll learn the basics of Markdown syntax, including headings, lists, links, and more.
  • React Components: You’ll practice creating reusable UI components using React.
  • State Management: You’ll learn how to manage user input and update the UI accordingly.
  • Third-Party Libraries: You’ll explore how to integrate external libraries to handle Markdown parsing.
  • Next.js Features: You’ll get hands-on experience with Next.js features like server-side rendering (SSR) and client-side rendering (CSR).

Furthermore, a Markdown editor is a practical tool. It can be used for note-taking, writing blog posts, or even as a simple content management system.

Prerequisites

Before we dive in, 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.
  • A Code Editor: A code editor like Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will be helpful.

Step-by-Step Guide

Let’s get started! We’ll break down the process into several manageable steps.

1. Setting Up the Next.js Project

First, we’ll create a new Next.js project. Open your terminal and run the following command:

npx create-next-app markdown-editor
cd markdown-editor

This command creates a new Next.js project named “markdown-editor” and navigates you into the project directory.

2. Installing Dependencies

We’ll need a library to parse Markdown. We’ll use `marked`, a popular Markdown parser. Install it using npm or yarn:

npm install marked
# or
yarn add marked

3. Creating the UI Components

We’ll create two main components: a text area for Markdown input and a preview area to display the formatted output.

Create a new file named `components/MarkdownEditor.js` in your `components` directory. If the directory doesn’t exist, create it.

// components/MarkdownEditor.js
import React, { useState } from 'react';
import marked from 'marked';

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

  const handleInputChange = (event) => {
    setMarkdown(event.target.value);
  };

  const renderedHTML = marked.parse(markdown);

  return (
    <div>
      <textarea />
      <div />
    </div>
  );
}

export default MarkdownEditor;

Let’s break down this code:

  • Import Statements: We import `React`, `useState` (for managing state), and `marked` (our Markdown parser).
  • State: We use the `useState` hook to manage the `markdown` state. This state holds the text entered in the textarea.
  • `handleInputChange` Function: This function updates the `markdown` state whenever the user types in the textarea.
  • `marked.parse()`: This line uses the `marked` library to parse the Markdown text into HTML.
  • JSX: We return JSX (JavaScript XML) that defines the structure of our editor.
    • Textarea: This is where the user enters their Markdown. The `value` is bound to the `markdown` state, and `onChange` calls `handleInputChange` to update the state.
    • Preview Div: This div displays the formatted HTML. The `dangerouslySetInnerHTML` prop is used to render the HTML generated by `marked.parse()`. Important: Using `dangerouslySetInnerHTML` is generally safe in this context because the content is generated from user input, but it’s crucial to trust the source of this input. In a real-world scenario, consider sanitizing the HTML to prevent potential security vulnerabilities.

4. Styling the Components

Create a file named `styles/MarkdownEditor.module.css` (or any name you prefer) in the `styles` directory. If the directory doesn’t exist, create it.

/* styles/MarkdownEditor.module.css */
.markdown-editor {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
}

.markdown-input {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.markdown-preview {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
}

/* Basic Markdown Styling */
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.markdown-preview p {
  margin-bottom: 1em;
}

.markdown-preview a {
  color: blue;
  text-decoration: none;
}

.markdown-preview a:hover {
  text-decoration: underline;
}

.markdown-preview ul, .markdown-preview ol {
  margin-left: 20px;
  margin-bottom: 1em;
}

.markdown-preview li {
  margin-bottom: 0.5em;
}

.markdown-preview code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.markdown-preview pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.markdown-preview pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

This CSS provides basic styling for the input textarea and the preview area. It also includes some basic styling for Markdown elements like headings, paragraphs, links, and code blocks. Feel free to customize this to match your desired look and feel.

5. Integrating the Component into the Page

Now, let’s integrate our `MarkdownEditor` component into the main page of our Next.js application. Open `pages/index.js` and modify it as follows:

// pages/index.js
import React from 'react';
import MarkdownEditor from '../components/MarkdownEditor';
import styles from '../styles/MarkdownEditor.module.css';

function Home() {
  return (
    <div>
      
    </div>
  );
}

export default Home;

Here’s what we’ve done:

  • Imported the Component: We imported the `MarkdownEditor` component.
  • Imported Styles: We import the CSS module so that we can use the defined classes.
  • Rendered the Component: We render the `MarkdownEditor` component within a container div.

6. Running the Application

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

npm run dev
# or
yarn dev

This will start the development server. Open your browser and go to `http://localhost:3000`. You should see the Markdown editor with the text area and the preview area. Start typing in Markdown in the text area, and you’ll see the formatted output in the preview area.

Advanced Features and Enhancements

Now that you have the basic Markdown editor working, let’s explore some advanced features and enhancements that can make it even more useful.

1. Adding Toolbar Buttons

You can add toolbar buttons to help users format their text. For example, you could add buttons for bold, italic, lists, and links. This improves the user experience, especially for users not familiar with Markdown syntax. Let’s add a button for bold text.

First, modify `components/MarkdownEditor.js`:

// components/MarkdownEditor.js
import React, { useState } from 'react';
import marked from 'marked';
import styles from '../styles/MarkdownEditor.module.css';

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('');
  const handleInputChange = (event) => {
    setMarkdown(event.target.value);
  };

  const handleBoldClick = () => {
    setMarkdown(prevMarkdown => {
      const selectionStart = document.querySelector('.markdown-input').selectionStart;
      const selectionEnd = document.querySelector('.markdown-input').selectionEnd;
      const selectedText = markdown.substring(selectionStart, selectionEnd);
      const newText = `**${selectedText}**`;
      return markdown.substring(0, selectionStart) + newText + markdown.substring(selectionEnd);
    });
  };

  const renderedHTML = marked.parse(markdown);

  return (
    <div>
      <div>
        <button>Bold</button>
      </div>
      <textarea />
      <div />
    </div>
  );
}

export default MarkdownEditor;

Next, add some styles to `styles/MarkdownEditor.module.css`:

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.toolbar button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.toolbar button:hover {
  background-color: #ddd;
}

In this example, we add a “Bold” button. When the button is clicked, the `handleBoldClick` function is executed. This function gets the currently selected text in the textarea and wraps it with `**` to make it bold Markdown. This is a basic implementation; more robust solutions might use a library for text selection and manipulation.

2. Implementing Live Preview

Our current preview updates every time the user types, but we can make this more efficient by debouncing the update. This means delaying the update until the user has stopped typing for a short period. This prevents unnecessary re-renders.

First, install the `lodash.debounce` package:

npm install lodash.debounce
# or
yarn add lodash.debounce

Then, modify `components/MarkdownEditor.js`:

// components/MarkdownEditor.js
import React, { useState, useEffect } from 'react';
import marked from 'marked';
import { debounce } from 'lodash';
import styles from '../styles/MarkdownEditor.module.css';

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('');
  const [renderedHTML, setRenderedHTML] = useState('');

  const handleInputChange = (event) => {
    setMarkdown(event.target.value);
    debouncedUpdate(event.target.value);
  };

  const debouncedUpdate = debounce((md) => {
    setRenderedHTML(marked.parse(md));
  }, 300);

  useEffect(() => {
    debouncedUpdate(markdown);
    return () => debouncedUpdate.cancel(); // Cleanup on unmount
  }, [markdown]);

  const handleBoldClick = () => {
    setMarkdown(prevMarkdown => {
      const selectionStart = document.querySelector('.markdown-input').selectionStart;
      const selectionEnd = document.querySelector('.markdown-input').selectionEnd;
      const selectedText = markdown.substring(selectionStart, selectionEnd);
      const newText = `**${selectedText}**`;
      return markdown.substring(0, selectionStart) + newText + markdown.substring(selectionEnd);
    });
  };

  return (
    <div>
      <div>
        <button>Bold</button>
      </div>
      <textarea />
      <div />
    </div>
  );
}

export default MarkdownEditor;

Here’s what changed:

  • Import `debounce`: We import the `debounce` function from `lodash`.
  • `renderedHTML` State: We now manage the rendered HTML in a separate state variable.
  • `handleInputChange` Calls `debouncedUpdate`: Instead of directly parsing the markdown, we call `debouncedUpdate` and pass the new markdown value.
  • `debouncedUpdate` Function: This function uses `debounce` to delay the execution of the `marked.parse()` function by 300 milliseconds. This function will only execute after the user has stopped typing for 300ms.
  • `useEffect` Hook: We use the `useEffect` hook to call `debouncedUpdate` whenever the `markdown` state changes. The `return () => debouncedUpdate.cancel()` line ensures that if the component unmounts or the markdown changes rapidly, any pending debounced calls are cancelled.

3. Adding Syntax Highlighting

Syntax highlighting makes the code blocks in your Markdown look more appealing and readable. You can integrate a library like Prism.js or highlight.js for this purpose.

Let’s use Prism.js. First, install it:

npm install prismjs
# or
yarn add prismjs

Then, import and initialize Prism.js in `components/MarkdownEditor.js`:

// components/MarkdownEditor.js
import React, { useState, useEffect } from 'react';
import marked from 'marked';
import { debounce } from 'lodash';
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css'; // Choose a theme
import styles from '../styles/MarkdownEditor.module.css';

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('');
  const [renderedHTML, setRenderedHTML] = useState('');

  const handleInputChange = (event) => {
    setMarkdown(event.target.value);
    debouncedUpdate(event.target.value);
  };

  const debouncedUpdate = debounce((md) => {
    const html = marked.parse(md);
    setRenderedHTML(html);
    Prism.highlightAll(); // Highlight code blocks
  }, 300);

  useEffect(() => {
    Prism.highlightAll(); // Initial highlight
    return () => debouncedUpdate.cancel(); // Cleanup on unmount
  }, [renderedHTML]);

  useEffect(() => {
    debouncedUpdate(markdown);
    return () => debouncedUpdate.cancel(); // Cleanup on unmount
  }, [markdown]);

  const handleBoldClick = () => {
    setMarkdown(prevMarkdown => {
      const selectionStart = document.querySelector('.markdown-input').selectionStart;
      const selectionEnd = document.querySelector('.markdown-input').selectionEnd;
      const selectedText = markdown.substring(selectionStart, selectionEnd);
      const newText = `**${selectedText}**`;
      return markdown.substring(0, selectionStart) + newText + markdown.substring(selectionEnd);
    });
  };

  return (
    <div>
      <div>
        <button>Bold</button>
      </div>
      <textarea />
      <div />
    </div>
  );
}

export default MarkdownEditor;

Here, we import Prism.js and a theme (Okaidia in this example). Inside `debouncedUpdate`, after parsing the Markdown to HTML, we call `Prism.highlightAll()` to highlight all code blocks. We also call `Prism.highlightAll()` in a `useEffect` hook to ensure the initial content is highlighted. Be sure to include the Prism CSS in your project.

To use code highlighting in your Markdown, use the standard Markdown syntax for code blocks:

```javascript
console.log('Hello, world!');
```

Prism.js will automatically detect the language (in this case, JavaScript) and apply the appropriate syntax highlighting.

4. Adding Image Upload Support

Allowing users to upload images and embed them in their Markdown is a valuable feature. This involves:

  • A file input element.
  • Handling the file upload (e.g., to a cloud storage service like Cloudinary or AWS S3).
  • Generating the Markdown code for the image.

This is a more complex feature that requires server-side components for handling the upload. For simplicity, we’ll focus on the client-side part – adding the file input and generating the Markdown.

Modify `components/MarkdownEditor.js`:

// components/MarkdownEditor.js
import React, { useState, useEffect } from 'react';
import marked from 'marked';
import { debounce } from 'lodash';
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css'; // Choose a theme
import styles from '../styles/MarkdownEditor.module.css';

function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('');
  const [renderedHTML, setRenderedHTML] = useState('');

  const handleInputChange = (event) => {
    setMarkdown(event.target.value);
    debouncedUpdate(event.target.value);
  };

  const debouncedUpdate = debounce((md) => {
    const html = marked.parse(md);
    setRenderedHTML(html);
    Prism.highlightAll(); // Highlight code blocks
  }, 300);

  useEffect(() => {
    Prism.highlightAll(); // Initial highlight
    return () => debouncedUpdate.cancel(); // Cleanup on unmount
  }, [renderedHTML]);

  useEffect(() => {
    debouncedUpdate(markdown);
    return () => debouncedUpdate.cancel(); // Cleanup on unmount
  }, [markdown]);

  const handleBoldClick = () => {
    setMarkdown(prevMarkdown => {
      const selectionStart = document.querySelector('.markdown-input').selectionStart;
      const selectionEnd = document.querySelector('.markdown-input').selectionEnd;
      const selectedText = markdown.substring(selectionStart, selectionEnd);
      const newText = `**${selectedText}**`;
      return markdown.substring(0, selectionStart) + newText + markdown.substring(selectionEnd);
    });
  };

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      // In a real application, you'd upload the file to a server here.
      // For this example, we'll assume the image is hosted at a URL.
      const imageUrl = URL.createObjectURL(file); // Create a temporary URL
      const imageMarkdown = `![${file.name}](${imageUrl})`;

      setMarkdown(prevMarkdown => prevMarkdown + 'n' + imageMarkdown);
    }
  };

  return (
    <div>
      <div>
        <button>Bold</button>
        
      </div>
      <textarea />
      <div />
    </div>
  );
}

export default MarkdownEditor;

We’ve added an `input` element of type “file” and an `handleImageUpload` function. When a user selects a file:

  • The function gets the file.
  • It creates a temporary URL using `URL.createObjectURL(file)`. This is a browser feature that creates a temporary URL that can be used to display the image.
  • It generates the Markdown code for the image: `![alt text](imageUrl)`.
  • It appends the image Markdown to the existing content.

In a real application, you would replace the `URL.createObjectURL(file)` with the URL of the uploaded image after it has been uploaded to a server.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them when building a Markdown editor:

  • Incorrect Markdown Parsing: Make sure you are using a reliable Markdown parser like `marked`. Double-check your Markdown syntax and the parser’s documentation.
  • XSS Vulnerabilities: When using `dangerouslySetInnerHTML`, always sanitize the HTML to prevent cross-site scripting (XSS) attacks. Consider using a library like `dompurify` to clean the HTML before rendering it.
  • Performance Issues: Avoid unnecessary re-renders. Use `debounce` to limit the frequency of updates. Optimize your components using `React.memo` or `useMemo` where appropriate.
  • Ignoring Accessibility: Ensure your editor is accessible. Use semantic HTML, provide alt text for images, and make sure your editor is keyboard-navigable.
  • Incomplete Feature Set: Start with a minimal viable product (MVP) and add features incrementally. Plan your features and prioritize them based on user needs.

Summary / Key Takeaways

Building a Markdown editor in Next.js is an excellent project for learning and practicing web development skills. We’ve covered the basics of setting up a Next.js project, integrating a Markdown parser, creating UI components, and adding styling. We then explored more advanced features like toolbar buttons, live preview with debouncing, syntax highlighting, and image upload support. Remember that security is paramount, especially when rendering user-generated content. Always sanitize the HTML or use a library that handles sanitization for you. This tutorial provides a solid foundation for building a robust and feature-rich Markdown editor. You can expand upon this project by adding more features and customizing the styling to create a tool that meets your specific needs. This project offers a fantastic opportunity to deepen your understanding of Next.js, React, and web development in general. Experiment with different Markdown features, explore different styling options, and consider how you can further enhance the user experience. This project’s possibilities are extensive, limited only by your imagination and the time you dedicate to it.

FAQ

Q: How do I handle XSS vulnerabilities?

A: When using `dangerouslySetInnerHTML`, sanitize the HTML before rendering it. Use a library like `dompurify` to clean the HTML and prevent malicious scripts from running.

Q: How can I improve performance?

A: Use `debounce` to limit the frequency of updates. Consider using `React.memo` or `useMemo` to optimize your components and prevent unnecessary re-renders.

Q: How do I add more Markdown features?

A: Consult the documentation for the `marked` library or the Markdown syntax. Extend the toolbar with buttons for more Markdown elements. Modify the `handleInputChange` function to include new formatting options.

Q: Where can I host my Markdown editor?

A: You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. These platforms offer easy deployment and scaling options.

Building a Markdown editor provides a unique opportunity to combine your coding skills with your creativity. Embrace the challenges and enjoy the process of learning and building. The ability to create dynamic content editors is a valuable skill in today’s web development landscape, and with this project, you’re well on your way to mastering it.

More posts