Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markpluslabs/react-markplus
A React markdown editor and previewer.
https://github.com/markpluslabs/react-markplus
markdown markdown-editor markdown-editor-react markplus react react-editor
Last synced: 2 days ago
JSON representation
A React markdown editor and previewer.
- Host: GitHub
- URL: https://github.com/markpluslabs/react-markplus
- Owner: markpluslabs
- License: mit
- Created: 2015-03-11T02:20:06.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2025-01-12T08:15:17.000Z (12 days ago)
- Last Synced: 2025-01-15T19:02:50.035Z (9 days ago)
- Topics: markdown, markdown-editor, markdown-editor-react, markplus, react, react-editor
- Language: SCSS
- Homepage: https://markpluslabs.github.io/react-markplus/
- Size: 51.8 MB
- Stars: 2,125
- Watchers: 86
- Forks: 390
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MarkPlus
A React markdown editor and previewer.
## Demos
- [Demo for Markdown authors](https://markpluslabs.github.io/react-markplus/)
- [Demo for React developers](https://markpluslabs.github.io/react-markplus-demo/)
- [source code](https://github.com/markpluslabs/react-markplus-demo/blob/main/src/app.tsx)
## Installation
```
yarn add react-markplus
```
## Usage
```tsx
import MarkPlus from "react-markplus";
;
```
## CSS
You will need to import the following CSS:
- "katex/dist/katex.css";
- "@fortawesome/fontawesome-free/css/all.css";
- "react-markplus/src/css/index.scss";
## markdown
Initial markdown text to load into the editor.
```tsx
;
```
Default value is `''`.
## onChange
A callback function to be invoked automatically when markdown text changes.
```tsx
{
console.log("markdown text changed to:", markdown);
}}
/>;
```
Default value is `() => {}`.
## ❌ onPreviewChange
A callback function to be invoked automatidally when preview html changes.
This has been **removed** from the library. Because you are supposed to generate
preview using
[markplus-engine](https://github.com/markpluslabs/markplus-engine).
## toolbar
Show, hide or remove toolbar.
```tsx
;
```
3 possible values:
- `show`: show toolbar, show a gutter below toolbar. Click the gutter to hide
toolbar.
- `hide`: hide toolbar, show a gutter on top. Click the gutter to show toolbar.
- `none`: no toolbar, no gutter.
Default value: `show`.
## mode
Display editor, preview or both.
```tsx
;
```
3 possible values:
- `both`: show both editor and preview
- there is a vertical gutter between editor and preview, you may drag the
gutter to adjust sizes of them.
- `editor`: show editor only
- `preview`: show preview only
- Use this mode if you don't need any editing feature.
- in this mode this library is a markdown renderer.
Default value: `both`.
## theme
Overall theme: light, dark or auto:
```tsx
;
```
3 possible values:
- `light`: light theme
- `dark`: dark theme
- `auto`: same as system theme
Default value: `auto`.
## toolbarItems
You may configure the toolbar freely.
```tsx
;
```
A toolbar item could be either a string or a `ReactElement`. For toolbar items
included with library, you may just specify a string. For your own custom
toolbar items, please specify a `ReactElement`.
## Included toolbar Items
- `'about'`
- show a modal about MarkPlus
- `'|'`
- a vertical separator
- `'bold'`
- make text bold
- `'italic'`
- make text italic
- `'strikethrough'`
- make text strokethrough
- `'underline'`
- make text underlined
- `'mark'`
- make text marked
- `'emoji'`
- show a modal to insert emojis
- `'fontawesome'`
- show a modal to insert fontawesome icons
- `'quote'`
- quote text
- `'unordered-list'`
- create unordered list item
- `'ordered-list'`
- create ordered list item
- `'unchecked-list'`
- create unchecked task list item
- `'checked-list'`
- create checked task list item
- `'link'`
- insert a link
- `'image'`
- insert a image
- `'code'`
- insert a code snippet
- `'table'`
- insert a table
- `'math'`
- insert some math formulas
- `flowchart`
- insert some flowcharts
## Default toolbar items
```tsx
import { defaultToolbarItems } from "react-markplus";
```
Its value is:
```tsx
[
"about",
"|",
"bold",
"italic",
"strikethrough",
"underline",
"mark",
"|",
"emoji",
"fontawesome",
"|",
"quote",
"unordered-list",
"ordered-list",
"unchecked-list",
"checked-list",
"|",
"link",
"image",
"code",
"table",
"|",
"math",
"flowchart",
];
```
You may add or remote items from it to customize your own toolbar.
## Custom toolbar item
Here is a sample to create and insert a custom toolbar item:
```tsx
{
console.log("Todo: display a preferences modal");
}}
>
,
]}
/>;
```
### Known issue
Custom toolbar item will freeze in React 19 dev mode.
It works in production mode though. It also works with React 18.