@yannelli/live-markdown-vue 1.0.0

package/README.md

@@ -0,0 +1,299 @@
+# 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.
+
+## Installation
+
+```bash
+npm install live-markdown-vue
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { MarkdownEditor } from 'live-markdown-vue'
+import 'live-markdown-vue/style.css'
+
+const content = ref('')
+</script>
+
+<template>
+  <MarkdownEditor v-model="content" placeholder="Start writing..." />
+</template>
+```
+
+### With All Options
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { MarkdownEditor } from 'live-markdown-vue'
+import '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)
+
+```vue
+<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 |
+
+### Default Toolbar Buttons
+
+```javascript
+[
+  ['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:
+
+```vue
+<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
+
+```vue
+<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'
+  }"
+/>
+```
+
+### Dark Mode
+
+The editor supports dark mode through multiple methods:
+
+**1. Parent `.dark` class (Tailwind CSS compatible):**
+
+```vue
+<template>
+  <div class="dark">
+    <MarkdownEditor v-model="content" />
+  </div>
+</template>
+```
+
+**2. Direct class on container:**
+
+```vue
+<template>
+  <MarkdownEditor class="dark" v-model="content" />
+</template>
+```
+
+**3. Automatic system detection:**
+
+The editor automatically detects `prefers-color-scheme: dark` and applies dark mode styles.
+
+**Force light mode:**
+
+To force light mode when the system prefers dark, add the `.light` class:
+
+```vue
+<template>
+  <MarkdownEditor class="light" v-model="content" />
+</template>
+```
+
+### CSS Customization
+
+The component uses CSS custom properties for theming. Override these variables to customize colors:
+
+```css
+.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:
+
+```css
+/* 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
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Run tests
+npm test
+
+# Build for production
+npm run build
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@yannelli/live-markdown-vue",
+  "author": "Ryan Yannelli <ryanyannelli@gmail.com> (https://ryanyannelli.com)",
+  "homepage": "https://github.com/yannelli/live-markdown-vue",
+  "version": "1.0.0",
+  "description": "A Vue 3 markdown editor component with live preview, built as a drop-in replacement for textarea",
+  "type": "module",
+  "main": "./dist/live-markdown-vue.umd.cjs",
+  "module": "./dist/live-markdown-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/live-markdown-vue.js",
+      "require": "./dist/live-markdown-vue.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .vue,.js,.ts,.tsx --fix",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "dompurify": "^3.2.3",
+    "easymde": "^2.18.0",
+    "marked": "^15.0.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/node": "^22.10.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.0.11",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^4.0.16",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "markdown",
+    "editor",
+    "textarea",
+    "codemirror",
+    "easymde"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yannelli/live-markdown-vue.git"
+  },
+  "directories": {
+    "test": "tests"
+  },
+  "bugs": {
+    "url": "https://github.com/yannelli/live-markdown-vue/issues"
+  }
+}