@eritaakash/react-markdown-editor

React Markdown Editor

React Component to render markdown preview directly into text field.

``bash
npm i @eritaakash/react-markdown-editor
`

$3

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.

$3

1. In a page file,

`jsx
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 (
text={text}
setText={setText}
/>
);
};
`

2. It results in:

!React Markdown Editor Preview

$3

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

`css
.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
`css
/ global css file (Next.js) /
/ Or, linked css file (React) /

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

result:

!React Markdown Editor textarea styling example

> ⚠ 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

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

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

result:

!React Markdown Editor text and background color styling example

#### Font Size & Adding Custom Font
apply the font to both div and textarea.

`css
/ 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:

!React Markdown Editor custom text font example

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

> !an issue with React Markdown Editor


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

$3

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

$3

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