A react markdown editor based on codemirror5
npm install react-markdown-editor-cm5bash
npm i react-markdown-editor-cm5
or
yarn add react-markdown-editor-cm5
`
Usage
$3
`tsx
import MdEditor from 'react-markdown-editor-cm5';
import 'react-markdown-editor-cm5/lib/style.css';
function App() {
return (
<>
);
}
export default App;
`
$3
Use codemirror mode, just need import codemirror mode plugins, like:
`js
import 'codemirror/mode/gfm/gfm';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/css/css';
import 'codemirror/mode/go/go';
`
set scroll bar style
`js
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// editor config
`
react-markdown-editor-cm5 preset some hint, you need import codemirror addon
`js
// hint
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/show-hint.css';
`
Search and replace, need import searchcursor.js
`js
import 'codemirror/addon/search/searchcursor.js';
`
Scroll bar display matching markers, need import some addon and css
`js
import 'codemirror/addon/scroll/annotatescrollbar.js';
import 'codemirror/addon/search/matchesonscrollbar.js';
import 'codemirror/addon/search/matchesonscrollbar.css';
`
Some other addons
`js
import 'codemirror/addon/edit/matchbrackets'; // match brackets
import 'codemirror/addon/edit/matchtags'; // match html tags
import 'codemirror/addon/display/placeholder'; // placeholder, if you set options.placeholder, need import this addon
import 'codemirror/addon/selection/active-line'; // line light current line
import 'codemirror/addon/search/match-highlighter';
`
Code fold, if you need fold others mode, just import their addon from codemirror/addon/fold/...
`js
// code fold
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/foldgutter.css';
`
More usage visit codemirror.net
API
$3
> type toolbar = 'bold' | 'checkList'| 'clear'| 'codeBlock'| 'dateTime'| 'dividing'| 'emoji'| 'fullScreen'| 'header'| | 'htmlEntities'| 'humpCase'| 'image' | 'inlineCode'| 'italic'| 'link'| 'lowerCase'| 'orderedList'| 'quote'| 'redo'| 'undo'| 'sub'| 'super'| 'table'| 'theme'| 'through'| 'toggleEditor'| 'unOrderedList'| 'upperCase'
Options interface:
`ts
interface Options extends EditorConfiguration {
singleCursorHeightPerLine?: boolean;
languages?: string[];
}
`
| name | type | default | description |
| :---------------- | :----------------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------- |
| initialValue | string | | initial value of editor |
| width | number \| string | '100%' | width of editor |
| height | number | 800 | height of editor, |
| toolbars | Array\ | all of toolbar | custom toollbar item, if it's a empty array, editor will hide toolbar |
| toolBarHeight | number | 34 | height editor toolbar |
| onSave | (markdown?: string, toc?: string): void | | callback when editor save |
| onChange | (markdown?: string, toc?: string): void | | callback when editor content change |
| uploadImageMethod | (file: string \| Blob, insertImageCallback: (fileName: string, imageUrl: string) => void): void; | | method of upload image |
| options | Options | | codsmirror options |
$3
No matter what your upload method is, you just need call insertImageCallback after your upload method, filename param is the title of image, the imageUrl is the image url after upload
`javascript
function App() {
const uploadImageMethod: uploadImageMethod = (file, insertImageCallback) => {
const uploadApi = 'http://localhost:8080/upload';
const formData = new FormData();
formData.append('file', file);
fetch(uploadApi, {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
const { imgName, imageUrl } = data;
insertImageCallback(imgName, imageUrl);
})
.catch((error) => {
console.error(error);
});
};
return (
);
}
export default App;
`
Features
headers
h1 Heading
h2 Heading
$3
#### h4 Heading
##### h5 Heading
###### h6 Heading
Footnotes
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
Tables
| Option | Description |
| ------ | ------------------------------------------------------------------------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
| -----: | ------------------------------------------------------------------------: |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Left aligned columns
| Option | Description |
| :----- | :------------------------------------------------------------------------ |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Center aligned columns
| Option | Description |
| :----: | :-----------------------------------------------------------------------: |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Emoji
You can type any emoji like this :smile: :smiley: :cry: :wink:
> See full emoji list here.
Links
link text
link with title
Autoconverted link https://github.com/nodeca/pica
Images
!Minion
ToDo List:
- [ ] ToDos
- [x] Buy some salad
- [ ] Brush teeth
- [x] Drink some water
Alert Area
:::success
Yes :tada:
:::
:::info
This is a message :mega:
:::
:::warning
Watch out :zap:
:::
:::danger
Oh No! :fire:
:::
Emphasis
This is bold text
_This is italic text_
~~Deleted text~~
lu~lala~
Superscript: 19^th^
Subscript: H~2~O
++Inserted text++
==Marked text==
Syntax highlighting
`js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
`
Blockquotes
> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.
Lists
$3
- Create a list by starting a line with +, -, or *`