Vue 3 Markdown Editor

A Vue 3 markdown editor component built as a drop-in replacement for textarea. Based on EasyMDE with full TypeScript support.

Features

• Full markdown editing with live preview
• Customizable toolbar with Lucide icons
• Multiple color schemes (slate, zinc, blue, indigo, purple, green)
• Dark mode support (class-based or system preference)
• File attachment support
• RTL support
• Full TypeScript support
• Accessible and keyboard-friendly

Installation

npm install @yannelli/live-markdown-vue

Usage

Basic Usage

<script setup>
import { ref } from 'vue'
import { MarkdownEditor } from '@yannelli/live-markdown-vue'
import '@yannelli/live-markdown-vue/style.css'

const content = ref('')
</script>

<template>
  <MarkdownEditor v-model="content" placeholder="Start writing..." />
</template>

With All Options

<script setup>
import { ref } from 'vue'
import { MarkdownEditor } from '@yannelli/live-markdown-vue'
import '@yannelli/live-markdown-vue/style.css'

const content = ref('# Hello World')

function handleUpload(file, onSuccess, onError) {
  // Upload to your server
  uploadToServer(file)
    .then(url => onSuccess(url))
    .catch(err => onError(err.message))
}
</script>

<template>
  <MarkdownEditor
    v-model="content"
    placeholder="Start writing markdown..."
    min-height="300px"
    max-height="600px"
    :autofocus="true"
    :spellcheck="false"
    :can-attach-files="true"
    :file-attachments-max-size="5120"
    :file-attachments-accepted-types="['image/png', 'image/jpeg', 'image/gif']"
    :toolbar-buttons="[
      ['bold', 'italic', 'strike'],
      ['heading', 'blockquote', 'codeBlock'],
      ['bulletList', 'orderedList'],
      ['link', 'table'],
      ['undo', 'redo']
    ]"
    direction="ltr"
    @change="handleChange"
    @blur="handleBlur"
    @focus="handleFocus"
    @upload="handleUpload"
  />
</template>

Disabled State (Read-only HTML Preview)

<template>
  <MarkdownEditor
    v-model="content"
    :disabled="true"
  />
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | string | '' | The markdown content (v-model) | | disabled | boolean | false | Renders as HTML when true | | placeholder | string | '' | Placeholder text | | minHeight | string | '200px' | Minimum editor height | | maxHeight | string | undefined | Maximum editor height | | autofocus | boolean | false | Focus on mount | | spellcheck | boolean | false | Enable browser spellcheck | | toolbarButtons | string[][] | See below | Toolbar button groups | | canAttachFiles | boolean | false | Enable file attachments | | fileAttachmentsMaxSize | number | undefined | Max file size in KB | | fileAttachmentsAcceptedTypes | string[] | undefined | Accepted MIME types | | debounceMs | number | 300 | Debounce delay for changes | | translations | object | English | Button translations | | direction | 'ltr' \| 'rtl' | 'ltr' | Text direction | | colorScheme | string | 'default' | Color scheme (see below) |

Default Toolbar Buttons

[
  ['bold', 'italic', 'strike'],
  ['heading', 'blockquote', 'codeBlock'],
  ['bulletList', 'orderedList'],
  ['link', 'table'],
  ['undo', 'redo']
]

Available Toolbar Buttons

• bold - Bold text
• italic - Italic text
• strike - Strikethrough text
• heading - Cycle through heading levels
• blockquote - Block quote
• codeBlock - Code block
• bulletList - Unordered list
• orderedList - Ordered list
• link - Insert link
• table - Insert table
• attachFiles - Attach files (requires canAttachFiles)
• undo - Undo
• redo - Redo
• preview - Toggle preview
• sideBySide - Side-by-side edit/preview
• fullscreen - Fullscreen mode

Events

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | string | Emitted when content changes | | change | string | Debounced content change | | blur | - | Editor lost focus | | focus | - | Editor gained focus | | upload | (file, onSuccess, onError) | File upload requested |

Exposed Methods

Access via template ref:

<script setup>
import { ref } from 'vue'

const editorRef = ref()

function focusEditor() {
  editorRef.value?.focus()
}

function getContent() {
  return editorRef.value?.getValue()
}
</script>

<template>
  <MarkdownEditor ref="editorRef" v-model="content" />
</template>

| Method | Returns | Description | |--------|---------|-------------| | focus() | - | Focus the editor | | blur() | - | Blur the editor | | getValue() | string | Get current content | | setValue(value) | - | Set content | | getEditor() | EasyMDE \| null | Get EasyMDE instance |

Customization

Custom Translations

<MarkdownEditor
  v-model="content"
  :translations="{
    bold: 'Fett',
    italic: 'Kursiv',
    strike: 'Durchgestrichen',
    link: 'Link',
    heading: 'Überschrift',
    blockquote: 'Zitat',
    codeBlock: 'Code',
    bulletList: 'Liste',
    orderedList: 'Nummerierte Liste',
    table: 'Tabelle',
    attachFiles: 'Dateien',
    undo: 'Rückgängig',
    redo: 'Wiederholen',
    preview: 'Vorschau',
    sideBySide: 'Nebeneinander',
    fullscreen: 'Vollbild'
  }"
/>

Color Schemes

The editor supports multiple color schemes via the colorScheme prop:

| Scheme | Description | |--------|-------------| | default | Neutral gray theme | | slate | Slate gray tones | | zinc | Cool gray/zinc tones | | blue | Blue accent theme | | indigo | Indigo/purple accent theme | | purple | Purple accent theme | | green | Green accent theme |

<template>
  <MarkdownEditor v-model="content" color-scheme="indigo" />
</template>

Dark Mode

The editor defaults to light mode. Dark mode can be enabled through multiple methods:

1. Parent .dark class (Tailwind CSS compatible):

<template>
  <div class="dark">
    <MarkdownEditor v-model="content" />
  </div>
</template>

2. Direct .dark class on component:

<template>
  <MarkdownEditor class="dark" v-model="content" />
</template>

3. Automatic system detection (opt-in):

Add the .auto-dark class to automatically detect prefers-color-scheme: dark:

<template>
  <MarkdownEditor class="auto-dark" v-model="content" />
</template>

Force light mode with auto-detection:

When using .auto-dark, you can force light mode with the .light class:

<template>
  <MarkdownEditor class="auto-dark light" v-model="content" />
</template>

Dark mode with color schemes:

Color schemes fully support dark mode:

<template>
  <div class="dark">
    <MarkdownEditor v-model="content" color-scheme="blue" />
  </div>
</template>

CSS Customization

The component uses CSS custom properties for theming. Override these variables to customize colors:

.markdown-editor-container {
  --mde-bg: #ffffff;
  --mde-bg-secondary: #f8fafc;
  --mde-bg-tertiary: #f3f4f6;
  --mde-bg-code: #1f2937;
  --mde-border: #e2e8f0;
  --mde-border-light: #e5e7eb;
  --mde-text: #374151;
  --mde-text-muted: #6b7280;
  --mde-text-toolbar: #64748b;
  --mde-text-code: #f9fafb;
  --mde-link: #2563eb;
  --mde-link-hover: #1d4ed8;
  --mde-hover: #e2e8f0;
  --mde-cursor: #000000;
}

You can also override specific styles:

/* Override editor styles */
.markdown-editor-container .EasyMDEContainer {
  border-color: #your-color;
}

.markdown-editor-container .editor-toolbar {
  background-color: #your-bg;
}

.markdown-editor-container .CodeMirror {
  font-family: 'Your Font', monospace;
}

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm test

# Build for production
npm run build

License

MIT