React Markdown Editor

React Component to render markdown preview directly into text field.

npm i @eritaakash/react-markdown-editor

Features

It's currently very basic, and all it does is:

• Provide a live preview within the text field. The user won't have to switch between "editor" and "preview" section.
• Format Bold, Italic and Underline texts as of now.
• Provide option for customizable styling of the text editor container.
• Provide option to customize the css of the preview container and markdown textarea.

Usage

1. In a page file,

import MarkdownEditor from "@eritaakash/react-markdown-editor";
import { useState } from 'react';

export default function Home() {
  /* text is the state that will be used to store the markdown text of the editor */
  const [text, setText] = useState('');

  return (
    <MarkdownEditor 
        text={text} 
        setText={setText} 
    />
  );
};

2. It results in:

Customization

You can customie the styling of the component through the linked css file, using the .r-md_customStyle selector. The default style is:

.r-md_customStyle {
    height: 30rem;
    width: 30rem;
    padding: 10px;
}

It is only useful to change dimension-related properties such as width, height, padding. For a deeper styling, markdown-editor class should be used in your globals.css file.

Custom caret-color

/* global css file (Next.js) */
/* Or, linked css file (React) */

textarea.markdown-editor {
    caret-color: red;
}

result:

⚠ Do not change text or background color through textarea, as its kept transparent.

Text or Background Color

use div.markdown-editor to change the color of background or text

/* global css file (Next.js) */
/* Or, linked css file (React) */

div.markdown-editor {
    color: crimson;
    background-color: black;
}

result:

Font Size & Adding Custom Font

apply the font to both div and textarea.

/* global css file (Next.js) */
/* Or, linked css file (React) */

textarea.markdown-editor {
    caret-color: grey;

    /* Custom font size */
    font-size: 20px;

    /* Add font family */
    font-family: Poppins, sans-serif;
}

div.markdown-editor {
    color: white;
    background-color: black;

    /* Custom font size */
    font-size: 20px;

    /* Add font family */
    font-family: Poppins, sans-serif;
}

result:

⚠ Using a font other than monospace leads to a slight misposition of caret in some cases, like:

I will try to figure out how would I solve this issue.

Todo

• Add support for various other markdown formatting methods such as List Item, Link & Image.

Contributing

Reporting of issues and pull requests for bug fixes or new suggestions are welcomed.