Build a Dynamic React Component: Interactive Markdown Editor

Written by

javascriptfundamentals

in

In the world of web development, we often need to provide users with a way to format their text. Whether it’s for writing blog posts, creating documentation, or composing messages, the ability to use rich text formatting is crucial. While traditional WYSIWYG (What You See Is What You Get) editors are available, they can sometimes feel clunky and add unnecessary complexity. Markdown offers a cleaner, more intuitive alternative. Markdown allows users to format text using simple syntax that’s easy to learn and use. The text is then converted into HTML, which can be displayed in a web browser. In this tutorial, we’ll dive into building a dynamic React component that functions as an interactive Markdown editor. This will empower your users to format text with ease, providing a seamless and efficient writing experience.

Why Build a Markdown Editor?

Creating a Markdown editor is a practical project for several reasons:

  • User Experience: Markdown is simple and efficient, offering a better user experience for writers compared to complex WYSIWYG editors.
  • Flexibility: Markdown is a versatile format that can be easily converted to HTML and styled to fit your website’s design.
  • Learning Opportunity: Building a Markdown editor is a great way to learn about React component composition, state management, and event handling.
  • Real-World Application: Markdown editors are used in various applications, from note-taking apps to blogging platforms, making this skill highly valuable.

Prerequisites

Before we start, make sure 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 React: Familiarity with components, JSX, and state management will be helpful.
  • A code editor: Choose your favorite code editor (VS Code, Sublime Text, etc.).

Setting Up the Project

Let’s create a new React project using Create React App:

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

This command creates a new React application named “markdown-editor” and navigates into the project directory.

Installing Dependencies

We’ll need a library to convert Markdown text into HTML. One of the most popular is “marked”. Install it using npm or yarn:

npm install marked

or

yarn add marked

Building the Markdown Editor Component

Now, let’s create the Markdown editor component. Open `src/App.js` and replace the default content 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);
  };

  const html = marked.parse(markdown);

  return (
    <div className="container">
      <div className="editor-container">
        <textarea
          className="editor"
          value={markdown}
          onChange={handleChange}
          placeholder="Enter Markdown here..."
        />
      </div>
      <div className="preview-container">
        <div className="preview" dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` from React to manage the component’s state, `marked` from the `marked` library to convert Markdown to HTML, and the stylesheet `App.css`.
  • State: We initialize a state variable `markdown` using `useState`. This variable stores the user’s input, and `setMarkdown` is the function to update it.
  • handleChange Function: This function updates the `markdown` state whenever the user types in the textarea. The `e.target.value` contains the current text entered by the user.
  • marked.parse(): This function from the `marked` library converts the Markdown text into HTML.
  • JSX Structure: The component renders a `div` with class “container”. Inside, there are two main `div`s:
  • editor-container: This contains a `textarea` where the user enters Markdown. The `value` prop is bound to the `markdown` state, and the `onChange` prop calls the `handleChange` function whenever the text changes.
  • preview-container: This displays the rendered HTML. We use a `div` with class “preview” and the `dangerouslySetInnerHTML` prop to inject the HTML generated by `marked.parse()`. Using `dangerouslySetInnerHTML` is necessary because React normally escapes HTML to prevent XSS (Cross-Site Scripting) attacks. In this case, we know the content is safe because it comes from the `marked` library, which sanitizes the Markdown.

Styling the Component

To make the editor look better, add some CSS to `src/App.css`. Here’s a basic example:

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

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

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

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

.preview {
  width: 100%;
  height: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-y: scroll;
  font-family: sans-serif;
  font-size: 14px;
}

This CSS provides a basic layout with two columns (editor and preview), styles for the textarea, and styling for the rendered HTML preview. You can customize the CSS to match your desired design.

Running the Application

Start the development server using the following command:

npm start

or

yarn start

This will open your application in your default web browser (usually at `http://localhost:3000`). You should see a two-column layout: an editor on the left and a live preview on the right. As you type Markdown in the editor, the preview will update automatically.

Adding Markdown Syntax Highlighting

To make the Markdown editor more user-friendly, let’s add syntax highlighting to the preview. We can use a library like Prism.js or highlight.js for this. Let’s install highlight.js:

npm install highlight.js

or

yarn add highlight.js

Next, import and configure highlight.js in `src/App.js`:

import React, { useState, useEffect } from 'react';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // Import a theme (you can change the theme)
import './App.css';

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

  useEffect(() => {
    const parsedHtml = marked.parse(markdown);
    const highlightedHtml = hljs.highlightAll(parsedHtml);
    setHtml(highlightedHtml.value);
  }, [markdown]);

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

  return (
    <div className="container">
      <div className="editor-container">
        <textarea
          className="editor"
          value={markdown}
          onChange={handleChange}
          placeholder="Enter Markdown here..."
        />
      </div>
      <div className="preview-container">
        <div className="preview" dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </div>
  );
}

export default App;

Here’s what changed:

  • Import Statements: We import `useEffect` from React and `hljs` from ‘highlight.js’. We also import a CSS theme for highlighting.
  • useEffect Hook: We use the `useEffect` hook to apply syntax highlighting whenever the `markdown` state changes.
  • highlightAll(): Inside the `useEffect` hook, we use `hljs.highlightAll()` to highlight all the code blocks in the HTML. Note that `highlightAll` expects a DOM node or a string containing HTML.
  • setHtml(): We update the `html` state with the highlighted HTML.
  • HTML Rendering: The `dangerouslySetInnerHTML` prop now renders the `html` state.

Now, any code blocks in your Markdown will be highlighted in the preview.

Adding Toolbar Buttons (Optional)

To enhance the user experience, you can add toolbar buttons for common Markdown formatting options (bold, italic, headings, links, etc.). This makes the editor more accessible, especially for users unfamiliar with Markdown syntax. Here’s a basic example. First, add the following imports and state in `App.js`:

import React, { useState, useEffect } from 'react';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';
import './App.css';

function App() {
  const [markdown, setMarkdown] = useState('');
  const [html, setHtml] = useState('');
  const [selection, setSelection] = useState({ start: 0, end: 0 }); // Track text selection

  useEffect(() => {
    const parsedHtml = marked.parse(markdown);
    const highlightedHtml = hljs.highlightAll(parsedHtml);
    setHtml(highlightedHtml.value);
  }, [markdown]);

  const handleChange = (e) => {
    setMarkdown(e.target.value);
    setSelection({
      start: e.target.selectionStart,
      end: e.target.selectionEnd,
    });
  };

  const handleBold = () => {
    const newMarkdown = (
      markdown.substring(0, selection.start) +
      '**' +
      markdown.substring(selection.start, selection.end) +
      '**' +
      markdown.substring(selection.end)
    );
    setMarkdown(newMarkdown);
  };

  const handleItalic = () => {
    const newMarkdown = (
      markdown.substring(0, selection.start) +
      '*' +
      markdown.substring(selection.start, selection.end) +
      '*' +
      markdown.substring(selection.end)
    );
    setMarkdown(newMarkdown);
  };

  const handleHeading = () => {
    const newMarkdown = (
        markdown.substring(0, selection.start) +
        '# ' +
        markdown.substring(selection.start, selection.end) +
        markdown.substring(selection.end)
    );
    setMarkdown(newMarkdown);
  }

  return (
    <div className="container">
      <div className="toolbar">
        <button onClick={handleBold}>Bold</button>
        <button onClick={handleItalic}>Italic</button>
        <button onClick={handleHeading}>Heading</button>
        {/* Add more buttons for other formatting options */}
      </div>
      <div className="editor-container">
        <textarea
          className="editor"
          value={markdown}
          onChange={handleChange}
          onSelect={handleChange} // Track text selection
          placeholder="Enter Markdown here..."
        />
      </div>
      <div className="preview-container">
        <div className="preview" dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </div>
  );
}

export default App;

In this code, we’ve added:

  • selection State: A `selection` state variable to store the start and end positions of the selected text in the textarea.
  • Toolbar Buttons: A `div` with class “toolbar” containing buttons for bold and italic formatting.
  • handleBold and handleItalic Functions: Functions that insert the appropriate Markdown syntax around the selected text.
  • onChange and onSelect Handlers: The `handleChange` function now updates the `selection` state whenever the text changes or the user selects text in the textarea.

Add some CSS for the toolbar in `App.css`:

.toolbar {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

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

Now, you’ll have a basic toolbar with buttons to apply bold and italic formatting to the selected text.

Common Mistakes and How to Fix Them

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

  • Incorrect Markdown Syntax: Double-check your Markdown syntax to ensure it’s correctly formatted. Mistakes in syntax can lead to unexpected rendering in the preview. Use online Markdown editors to test syntax.
  • Escaping HTML: Remember that React escapes HTML by default. Use the `dangerouslySetInnerHTML` prop with caution, and only when you’re sure the HTML is safe (e.g., from a trusted Markdown parser like `marked`).
  • State Management: Make sure your state updates correctly. For example, when adding toolbar functionality, ensure the text selection and new Markdown are updated properly.
  • Performance: For large documents, consider optimizing the rendering of the preview. Techniques include memoization and virtualizing the preview area. Also, be mindful of how often you re-render the preview.
  • Missing Dependencies: Ensure you have installed all the necessary dependencies (e.g., `marked`, `highlight.js`).
  • CSS Issues: Ensure your CSS is correctly linked and that there are no style conflicts with other components. Use your browser’s developer tools to inspect the styles.

SEO Best Practices

To optimize your React Markdown editor for search engines, consider the following:

  • Use Semantic HTML: Use semantic HTML elements (e.g., `
    `, `

  • Optimize Title and Meta Description: Make sure your `<title>` and `<meta name=”description”>` tags in the `index.html` file are descriptive and include relevant keywords.
  • Use Keywords Naturally: Incorporate relevant keywords (e.g., “Markdown editor,” “React component,” “Markdown syntax”) naturally throughout your content, including headings, paragraphs, and alt text for images.
  • Provide Alt Text for Images: If you include images, always provide descriptive `alt` text.
  • Optimize for Mobile: Ensure your component is responsive and works well on all devices.
  • Use Heading Tags: Use heading tags (H1-H6) to structure your content logically and improve readability.
  • Create a Sitemap: Create a sitemap and submit it to search engines to help them crawl and index your content.
  • Build Internal Links: Link to other relevant pages on your website to improve SEO.

Summary / Key Takeaways

In this tutorial, we’ve built a dynamic React Markdown editor component. We covered the following key concepts:

  • Setting up a React project: Using Create React App to scaffold the project.
  • Installing dependencies: Using `marked` for Markdown parsing and `highlight.js` for syntax highlighting.
  • Creating a component: Building the basic structure with a textarea and a preview area.
  • Handling state: Managing the input text and the rendered HTML.
  • Adding syntax highlighting: Integrating highlight.js to improve readability.
  • Adding toolbar buttons (optional): Enhancing the user experience by adding formatting controls.
  • SEO considerations: Implementing best practices for search engine optimization.

FAQ

  1. Can I customize the Markdown rendering? Yes, the `marked` library offers options for customization. You can pass configuration options to `marked.parse()` to change the way Markdown is converted to HTML. For example, you can add custom renderers for specific Markdown elements.
  2. How can I add support for different Markdown features? You can extend the `marked` library or use other Markdown parsers that support more features. Some common extensions include support for tables, task lists, and footnotes.
  3. How do I handle user input in real-time? Use the `onChange` event of the textarea to capture user input and update the component’s state. Then, use the updated state to re-render the preview.
  4. How can I save the user’s content? You can use local storage, session storage, or a database to save the user’s content. For local storage, you can use the `useEffect` hook to save the content whenever the `markdown` state changes.
  5. How do I deploy this application? You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes.

Building a Markdown editor provides a solid foundation for more complex text-based applications. From simple note-taking tools to full-fledged blogging platforms, the skills you’ve learned here will be invaluable. Remember to keep experimenting, exploring different Markdown features, and refining your editor to meet your specific needs. With each new feature and improvement, you’ll be one step closer to mastering React and building powerful web applications that empower users with the tools they need to express themselves effectively.

More posts