vuetify-markdown-editor


A Vue.js Component for editing and previewing markdown using Vuetify.js and markdown-it.

Install

``
npm install vuetify-markdown-editor
`

Since this component is based on Vuetify,
it is required to install and configure Vuetify.
For installing Vuetify, please visit .

Features

- TypeScript support
- Solo and inline mode
- Editor-only and Editor-Preview mode
- Code highlighting
- Emoji picking
- Math formula (See markdown-it-texmath)
- Image uploading and previewing (to use uploaded image in markdown, use the filename as the link)
- Mermaid diagram rendering (use code block with language mermaid)

TODO

* [x] Fix SSR
* [x] Allow to change sets of emoji
* [x] Add typescript support
* [x] Add copy icon
* [x] Add viewer mode
* [ ] Fix large image
* [ ] Add self-hosted emoji images
* [ ] Add emoji rendering in rendered text
* [ ] Add more WYSIWYG functions
* [ ] Add plantuml support

Usage

This package can be used in Node.js module:

`html



`

To show the rendered html only, use viewer mode.

To use the markdown-it renderer directly,
use createRenderer to create it.

Exported modules

* Editor: a vue component to edit markdown
* createRenderer: a function to create a markdown-it render

Props

| Prop | Default | Description |
| ------------- | --------------------------------------- | ---------------------------------------------------------------- |
| value | '' | String that binds to the textarea |
| mode | 'preview' | Possible value 'editor', 'preview' or 'viewer'. When set to 'editor' or 'viewer', only the editor or viewer is displayed, while 'preview' mode displays both. |
| renderConfig | undefined | Override default configurations |
| outline | false | The border will be outlined instead of card style |
| color | undefined | The outline and icon's color |
| nativeEmoji | false | Use native emoji instead of pictures |
| emoji | true | Enable emoji input |
| emojiSet | "apple" | Supported emoji sets: 'apple', 'google', 'twitter', 'facebook' |
| image | true | Enable image upload |
| fileTarget | '/' | Image upload target uri |
| fileFilter | file => file.type.startsWith('image') | Allow only specific files. Return true to allow, false to reject |
| baseUrl | '/' | The baseUrl for uploaded images. Must end with a slash (mainly used in viewer mode) |

Other props that are not listed in the above table will be directly passed to v-textarea,
which enables you to set the native props in v-textarea.

Default Renderer Configurations

`js
{
// markdown-it-texmath config
texmath: undefined,
// markdown-it-highlightjs config
hightlightjs: undefined,
// markdown-it-code-copy config
codeCopy: {
buttonClass: 'v-icon theme--dark'
},
// The native mermaid config
mermaid: undefined,
// Markdown-it config
markdownIt: undefined
}
`

Methods

| Method | Description |
| -------- | ------------------------------------------- |
| upload() | Start or resume uploading all files in list |
| pause() | Pause uploading |
| resume() | Resume uploading |
| focus() | Focus on the editor |

Properties

| Property | Description |
| -------- | -------------------------------------------------------------------------------------- |
| files | Get all files in list in FlowFile format |

Test

Clone this repository,
and then run:

`
npm install
npm run serve
`

Then open in browser to test.

Screenshots

Solo mode:

!Solo

Dark mode: this.$vuetify.theme.dark = true;

!Dark

Outline mode: `

!Outline

Dependencies

- mermaid
- KaTeX
- markdown-it
- markdown-it-highlightjs
- markdown-it-texmath
- markdown-it-code-copy
- markdown-it-mermaid-plugin
- Vuetify
- emoji-mart-vue
- v-click-outside
- Flow.js

License

MIT License