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 https://vuetifyjs.com/en/getting-started/quick-start.

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:

<template>
  <v-app>
    <Editor
      mode="preview"
      ref="editor"
      hint="Hint"
      :outline="false"
      :render-config="renderConfig"
      v-model="text"
    />
  </v-app>
</template>

<script>
import { Editor } from "vuetify-markdown-editor";
import { VApp } from 'vuetify/lib';

export default {
  name: "app",
  components: {
    Editor,
    VApp
  },
  data() {
    return {
      text: "",
      renderConfig: {
        // Mermaid config
        mermaid: {
          theme: "dark"
        }
      }
    };
  },
  mounted() {
    // Access properties or methods using $refs
    // this.$refs.editor.focus();
    // this.$refs.editor.upload();

    // Dark theme
    this.$vuetify.theme.dark = true;
  }
};
</script>

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

{
  // 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 http://localhost:8080 in browser to test.

Screenshots

Solo mode: <Editor v-model="text" />

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

Outline mode: <Editor outline v-model="text" />

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