Create a Markdown Editor using React Hooks and CodeMirror
Last Updated :
27 Mar, 2024
Creating a Markdown Editor with React Hooks and CodeMirror is a great way to build a simple yet powerful text editing tool. CodeMirror is a versatile text editor component that can be easily integrated into React applications. Here's a basic example of how you can create a Markdown editor using React Hooks and CodeMirror:
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
Approach to create a Markdown Editor:
- The MarkdownEditor component is a React component used for editing and previewing Markdown content.
- It utilizes the CodeMirror library for the text editor portion.
- State is managed using the useState hook, with markdown content stored in the state.
- The width of the text editor and preview sections is adjustable via a resizer element.
- Event listeners are used to track mouse movements for resizing.
- The marked library is employed to render Markdown content as HTML for the preview section.
- The App component imports and renders the MarkdownEditor component within its structure.
- Overall, the MarkdownEditor provides a user-friendly interface for editing and previewing Markdown content.
Steps to Create a React App and Installing Module:
Step 1: Create a new React application using Create React App:
npx create-react-app editor
Step 2: Navigate to the project directory:
cd editor
Step 3: Install CodeMirror and its dependencies using npm:
npm install codemirror react-codemirror2 marked
If you encountered a dependency resolution issue:
npm install codemirror react-codemirror2 --force
npm install marked --force
OR
npm install codemirror react-codemirror2 --legacy-peer-deps
npm install marked --legacy-peer-deps
Project Structure:
The Updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"codemirror": "^5.65.16",
"marked": "^12.0.1",
"react": "^18.2.0",
"react-codemirror2": "^7.3.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},Step 4: Create the necessary files
- Insider src folder create MarkdownEditor.js files
- Replace the code of index.js , App.js and App.css with the given code below
Example: Below is an example of Creating a Markdown Editor with React Hooks and CodeMirror.
CSS
/* App.css */
.App {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
header h1 {
margin: 0;
}
.main-container {
background-color: #f6f1f1;
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
border: 2px solid black;
}
.text-editor {
flex: 1;
min-width: 0;
/* Allow text editor to shrink beyond its content width */
}
.preview {
/* background-color: #ccc; */
flex: 1;
min-width: 0;
/* Allow preview to shrink beyond its content width */
margin-left: 20px;
/* Add space between text editor and preview */
}
.CodeMirror {
height: 300px;
border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
.main-container {
flex-direction: column;
align-items: center;
}
.preview {
margin-left: 0;
margin-top: 20px;
/* Add space between text editor and preview in mobile view */
}
}
// MarkdownEditor.js
import React, {
useState
} from 'react';
import {
Controlled as CodeMirror
} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/markdown/markdown';
import {
marked
} from 'marked';
const MarkdownEditor = () => {
const [markdown, setMarkdown] = useState('');
const [editorWidth, setEditorWidth] = useState('50%');
const handleChange = (editor, data, value) => {
setMarkdown(value);
};
const handleMouseMove = (e) => {
setEditorWidth(`
${100 * (e.clientX / window.innerWidth)}%`);
};
const handleMouseUp = () => {
document.removeEventListener('mousemove',
handleMouseMove);
document.removeEventListener('mouseup',
handleMouseUp);
};
const handleMouseDown = () => {
document.addEventListener('mousemove',
handleMouseMove);
document.addEventListener('mouseup',
handleMouseUp);
};
return (
<div className="markdown-editor">
<div className="main-container">
<div className="text-editor" style={{
width: editorWidth
}}>
<CodeMirror
value={markdown}
onBeforeChange={handleChange}
options={{
mode: 'markdown',
theme: 'material',
lineNumbers: true
}}
/>
</div>
<div
className="resizer"
onMouseDown={handleMouseDown}
></div>
<div className="preview" style={{
width: `calc(100% - ${editorWidth})`
}}>
<h2>Preview</h2>
<div dangerouslySetInnerHTML={{
__html: marked(markdown)
}} />
</div>
</div>
</div>
);
};
export default MarkdownEditor;
// App.js
import React from 'react';
import MarkdownEditor from './MarkdownEditor.js';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Markdown Editor</h1>
</header>
<main>
<MarkdownEditor />
</main>
</div>
);
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
Start your application using the following command:
npm start
Output:
Similar Reads
Create a Markdown Editor with live preview using React
In this article, we will be creating a Markdown Editor with a live preview using React. I have used easy-to-understand concepts like functional components and hooks, such as useState, to manage our app's data. Plus, we'll use the handy react-markdown npm package to show Markdown content in our edito
3 min read
Create a Context Provider for Theming using React Hooks
In this article, we are going to build a context provider for managing the theme of a React app using React hooks. This will allow the user to switch between dark and light themes throughout the application. Centralizing the theme will give us an edge as the application will be able to efficiently p
4 min read
Create a Text Editor App using React-Native
In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor."Preview of final output: Let us have a look at h
3 min read
How to Create Form Builder using React and Dynamic State Management ?
In web development building forms is a common task. However, creating dynamic forms with varying fields and configurations can be a challenge. This is where a form builder tool comes in handy. In this article, we'll learn how to build a form builder tool using React Hooks for state management, allow
3 min read
Create a Video Editor using React
Video Editor is one of the useful apps in day-to-day life. In this article, we’ll walk you through the process of building a basic video editing app using React Native. The application enables users to upload, trim, and convert specific scenes to GIFs and then download the final edited file directly
6 min read
Online Markdown Editor using Django
In this article, we will guide you through the process of creating an Online Markdown Editor using Django. This powerful tool allows users to seamlessly convert HTML code into a polished web output. By simply entering your HTML code into the input field, our Online Markdown Editor will instantly gen
4 min read
How To Create a Custom Hook in React?
In web application development, developers often need to reuse logic multiple times, which can become difficult to manage manually. So, the custom hook can be used to solve the problem of reusing complex stateful logic across multiple components.What are Custom Hooks?Custom Hooks are special functio
4 min read
How to make Live Coding Editor using HTML CSS and JavaScript ?
In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr
3 min read
How to create an R Markdown document?
R Markdown is a file format for making dynamic and static documents with R. You can create an R Markdown file to save, organize and document your analysis using code chunks and comments. It is important to create an R Markdown file to have good communication between your team about analysis, you can
5 min read
How to Create a Basic Notes App using ReactJS ?
Creating a basic notes app using React JS is a better way to learn how to manage state, handle user input, and render components dynamically. In this article, we are going to learn how to create a basic notes app using React JS. A notes app is a digital application that allows users to create, manag
4 min read