{"_id":"@arcmantle/mirage-mde","_rev":"3-511ae4b667b8cbb1346adeb609644d21","name":"@arcmantle/mirage-mde","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@arcmantle/mirage-mde","version":"1.0.0","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/mirage-mde@1.0.0","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"4756fa9f7a1ebdb052fe98cd226a60e9c64d6c93","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde/-/mirage-mde-1.0.0.tgz","fileCount":64,"integrity":"sha512-Bxw/iLj2yJHy2H6+XG47+GuM4JHxSAOe0Ec/5narQl2wClC//NuqDKFkmfN8pDSphQ/mKMdDxVkAR6PFaEJ68g==","signatures":[{"sig":"MEUCID/A6EGHSXbrN80R7KfketU2AhFOdkIr/NtXCI2lH3yEAiEAi+oAQdcbfJooWDqYt3wX9LqZWZpLmUIuOCJe31YUvTk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":127388},"main":"./dist/lib/main.js","type":"module","_from":"file:arcmantle-mirage-mde-1.0.0.tgz","types":"./dist/lib/main.d.ts","exports":{".":"./dist/lib/main.js"},"scripts":{"dev":"vite --config ./demo/vite.config.ts","build":"tsc --project ./src/tsconfig.json && vite build","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/ff3dee83b32a31337783eb2f2e9d2ef5/arcmantle-mirage-mde-1.0.0.tgz","_integrity":"sha512-Bxw/iLj2yJHy2H6+XG47+GuM4JHxSAOe0Ec/5narQl2wClC//NuqDKFkmfN8pDSphQ/mKMdDxVkAR6PFaEJ68g==","_npmVersion":"11.4.2","description":"A modern, feature-rich Markdown editor built on top of CodeMirror 6 and Lit Element. Mirage-MDE provides a complete markdown editing experience with live preview, syntax highlighting, and extensive customization options.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1","marked":"^16.0.0","highlight.js":"^11.11.1","marked-mangle":"^1.1.10","@lezer/markdown":"^1.4.2","@codemirror/lint":"^6.8.5","@codemirror/view":"^6.36.5","@lezer/highlight":"^1.2.1","marked-highlight":"^2.2.1","@codemirror/state":"^6.5.2","@arcmantle/library":"^1.0.0","@codemirror/search":"^6.5.10","@codemirror/commands":"^6.8.1","@codemirror/language":"^6.11.0","cm6-theme-basic-dark":"^0.2.0","marked-gfm-heading-id":"^4.1.1","marked-extended-tables":"^2.0.1","@codemirror/autocomplete":"^6.18.6","@codemirror/lang-markdown":"^6.3.2","@codemirror/language-data":"^6.5.1","@arcmantle/mirage-mde-display":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.4","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mirage-mde_1.0.0_1752708477438_0.08768706579372454","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arcmantle/mirage-mde","version":"1.0.1","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/mirage-mde@1.0.1","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"b413f82563b532d5805c37973b6768d128048a6b","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde/-/mirage-mde-1.0.1.tgz","fileCount":294,"integrity":"sha512-SLaJyuPaB+MEMZ1/uWsa03mLHDC5pJjCf+Fqd0WALFk0OhXZ3KkMDqeuKUMMikoCV+t5Ka6EmQg8U4wumJiz3w==","signatures":[{"sig":"MEUCIQDlAR8RYWnxKskoaXnd6eGSGfh6eAL/U61hSaQrR8wmpAIgLFyCIwvJqpqAubhEktRyLlY3TzZj39HbzHqKYNldPKA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":463738},"main":"./dist/lib/main.js","type":"module","_from":"file:arcmantle-mirage-mde-1.0.1.tgz","types":"./dist/lib/main.d.ts","exports":{".":"./dist/lib/main.js"},"scripts":{"dev":"vite --config ./demo/vite.config.ts","build":"tsc --project ./src/tsconfig.json && vite build","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/3f767bb9339af3d241e44c01be29f2d9/arcmantle-mirage-mde-1.0.1.tgz","_integrity":"sha512-SLaJyuPaB+MEMZ1/uWsa03mLHDC5pJjCf+Fqd0WALFk0OhXZ3KkMDqeuKUMMikoCV+t5Ka6EmQg8U4wumJiz3w==","_npmVersion":"11.4.2","description":"A modern, feature-rich Markdown editor built on top of CodeMirror 6 and Lit Element. Mirage-MDE provides a complete markdown editing experience with live preview, syntax highlighting, and extensive customization options.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1","marked":"^16.0.0","highlight.js":"^11.11.1","marked-mangle":"^1.1.10","@lezer/markdown":"^1.4.2","@codemirror/lint":"^6.8.5","@codemirror/view":"^6.36.5","@lezer/highlight":"^1.2.1","marked-highlight":"^2.2.1","@codemirror/state":"^6.5.2","@arcmantle/library":"^1.0.0","@codemirror/search":"^6.5.10","@codemirror/commands":"^6.8.1","@codemirror/language":"^6.11.0","cm6-theme-basic-dark":"^0.2.0","marked-gfm-heading-id":"^4.1.1","marked-extended-tables":"^2.0.1","@codemirror/autocomplete":"^6.18.6","@codemirror/lang-markdown":"^6.3.2","@codemirror/language-data":"^6.5.1","@arcmantle/mirage-mde-display":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.4","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mirage-mde_1.0.1_1752708858017_0.7406167429219646","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arcmantle/mirage-mde","version":"1.0.2","description":"A modern, feature-rich Markdown editor built on top of CodeMirror 6 and Lit Element. Mirage-MDE provides a complete markdown editing experience with live preview, syntax highlighting, and extensive customization options.","license":"Apache-2.0","author":{"name":"Kristoffer Roen-Lie"},"type":"module","exports":{".":"./dist/lib/main.js"},"main":"./dist/lib/main.js","types":"./dist/lib/main.d.ts","dependencies":{"@arcmantle/library":"^1.0.0","@arcmantle/mirage-mde-display":"^1.0.0","@codemirror/autocomplete":"^6.18.6","@codemirror/commands":"^6.8.1","@codemirror/lang-markdown":"^6.3.2","@codemirror/language":"^6.11.0","@codemirror/language-data":"^6.5.1","@codemirror/lint":"^6.8.5","@codemirror/search":"^6.5.10","@codemirror/state":"^6.5.2","@codemirror/view":"^6.36.5","@lezer/highlight":"^1.2.1","@lezer/markdown":"^1.4.2","cm6-theme-basic-dark":"^0.2.0","highlight.js":"^11.11.1","lit":"^3.3.0","marked":"^16.0.0","marked-extended-tables":"^2.0.1","marked-gfm-heading-id":"^4.1.1","marked-highlight":"^2.2.1","marked-mangle":"^1.1.10","tslib":"^2.8.1"},"devDependencies":{"@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1","@types/node":"^24.0.14","rimraf":"^6.0.1","typescript":"^5.8.3","vite":"^7.0.4"},"scripts":{"build":"tsc --project ./src/tsconfig.json && vite build","dev":"vite --config ./demo/vite.config.ts","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_id":"@arcmantle/mirage-mde@1.0.2","_integrity":"sha512-hlfhAGz4ncHsLPk17rINmIXFZtP6U2S8OzYTYftcTz5S2V6Erge4FXXwkL8PnZE4cShPMDzeDSnvoLEgmDbeiA==","_resolved":"/tmp/8894ee907507aced4644ea28355dd2fa/arcmantle-mirage-mde-1.0.2.tgz","_from":"file:arcmantle-mirage-mde-1.0.2.tgz","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-hlfhAGz4ncHsLPk17rINmIXFZtP6U2S8OzYTYftcTz5S2V6Erge4FXXwkL8PnZE4cShPMDzeDSnvoLEgmDbeiA==","shasum":"d5344515304aa7fdbee8265af99b8847ee8bd687","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde/-/mirage-mde-1.0.2.tgz","fileCount":294,"unpackedSize":463738,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCng/jMpQCkNgP9SD6eBv0C87upyr0TI62C2Yu69WtY3AIgbruAjigmZO9c6ZCaT9eQrPzDT5sseMplzdwxhHQspDw="}]},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"directories":{},"maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mirage-mde_1.0.2_1752757865445_0.954981498117889"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-16T23:27:57.332Z","modified":"2025-07-17T13:11:05.854Z","1.0.0":"2025-07-16T23:27:57.614Z","1.0.1":"2025-07-16T23:34:18.286Z","1.0.2":"2025-07-17T13:11:05.639Z"},"author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","description":"A modern, feature-rich Markdown editor built on top of CodeMirror 6 and Lit Element. Mirage-MDE provides a complete markdown editing experience with live preview, syntax highlighting, and extensive customization options.","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"readme":"# Mirage-MDE\n\nA modern, feature-rich Markdown editor built on top of CodeMirror 6 and Lit Element. Mirage-MDE provides a complete markdown editing experience with live preview, syntax highlighting, and extensive customization options.\n\n## Features\n\n### Editor Features\n\n- **CodeMirror 6** based editing with syntax highlighting\n- **Live Preview** with side-by-side or fullscreen modes\n- **Toolbar** with common markdown formatting actions\n- **Status Bar** with cursor position, word count, and line count\n- **Keyboard Shortcuts** for all major operations\n- **Autosave** functionality with configurable intervals\n- **Image Upload** support with drag & drop\n- **Fullscreen Mode** for distraction-free editing\n\n### Markdown Support\n\n- **GitHub Flavored Markdown** (GFM)\n- **Extended Tables** with advanced formatting\n- **Syntax Highlighting** for code blocks\n- **Task Lists** with checkboxes\n- **Heading IDs** for anchor links\n- **Link Mangling** for security\n- **Custom Preprocessors** for content transformation\n\n### Customization\n\n- **Theming** with CSS custom properties\n- **Custom Toolbar** actions and buttons\n- **Custom Status Bar** items\n- **Plugin System** for extensions\n- **Configurable Options** for all behaviors\n\n## Installation\n\n```bash\nnpm install @arcmantle/mirage-mde\n\npnpm add @arcmantle/mirage-mde\n\nyarn add @arcmantle/mirage-mde\n```\n\n## Basic Usage\n\n### HTML\n\n```html\n<mirage-mde value=\"# Hello World\"></mirage-mde>\n```\n\n### TypeScript\n\n```typescript\nimport '@arcmantle/mirage-mde';\n\nconst editor = document.querySelector('mirage-mde');\neditor.value = '# Hello World\\n\\nThis is **bold** text.';\n```\n\n### With Options\n\n```typescript\nconst editor = document.querySelector('mirage-mde');\neditor.options = {\n  lineNumbers: true,\n  lineWrapping: true,\n  autosave: {\n    enabled: true,\n    uniqueId: 'my-editor',\n    delay: 1000\n  },\n  uploadImage: true,\n  toolbar: ['bold', 'italic', 'heading', '|', 'quote', 'code', 'link']\n};\n```\n\n## Configuration Options\n\n### Basic Options\n\n- `lineNumbers` (boolean): Show line numbers in editor\n- `lineWrapping` (boolean): Enable line wrapping\n- `tabSize` (number): Tab size in spaces (default: 3)\n- `placeholder` (string): Placeholder text for empty editor\n- `autofocus` (boolean): Focus editor on load\n- `direction` ('ltr' | 'rtl'): Text direction\n\n### Rendering Options\n\n- `singleLineBreaks` (boolean): Convert single line breaks to `<br>`\n- `codeSyntaxHighlighting` (boolean): Enable syntax highlighting in code blocks\n- `sanitizerFunction` (function): Custom HTML sanitizer\n- `previewRender` (function): Custom preview renderer\n\n### Toolbar Configuration\n\n```typescript\ntoolbar: [\n  'bold', 'italic', 'strikethrough', '|',\n  'heading', 'heading-smaller', 'heading-bigger', '|',\n  'code', 'quote', 'unordered-list', 'ordered-list', '|',\n  'link', 'image', 'table', 'horizontal-rule', '|',\n  'preview', 'side-by-side', 'fullscreen', '|',\n  'guide'\n]\n```\n\n### Status Bar Configuration\n\n```typescript\nstatusbar: [\n  'autosave', 'lines', 'words', 'cursor'\n]\n```\n\n### Image Upload\n\n```typescript\nuploadImage: true,\nimageMaxSize: 2097152, // 2MB\nimageAccept: 'image/png, image/jpeg, image/gif, image/avif',\nimageUploadFunction: (file, onSuccess, onError) => {\n  // Custom upload logic\n  uploadToServer(file)\n    .then(url => onSuccess(url))\n    .catch(error => onError(error.message));\n}\n```\n\n### Autosave\n\n```typescript\nautosave: {\n  enabled: true,\n  uniqueId: 'my-editor-content',\n  delay: 1000,\n  submit_delay: 5000,\n  text: 'Autosaved: ',\n  timeFormat: {\n    locale: 'en-US',\n    format: {\n      hour: '2-digit',\n      minute: '2-digit'\n    }\n  }\n}\n```\n\n## API Reference\n\n### MirageMDEElement\n\n#### Properties\n\n- `value: string` - The markdown content\n- `options: Options` - Editor configuration\n\n#### Methods\n\n- `editor.value()` - Get current content\n- `editor.value(content)` - Set content\n- `editor.action(actionName)` - Execute toolbar action\n\n### Events\n\n- `change` - Fired when content changes\n\n## Keyboard Shortcuts\n\n| Action | Shortcut |\n|--------|----------|\n| Bold | `Ctrl+B` |\n| Italic | `Ctrl+I` |\n| Link | `Ctrl+K` |\n| Image | `Ctrl+Alt+I` |\n| Code Block | `Ctrl+Alt+C` |\n| Quote | `Ctrl+'` |\n| Unordered List | `Ctrl+L` |\n| Ordered List | `Ctrl+Alt+L` |\n| Heading | `Ctrl+H` |\n| Horizontal Rule | `Ctrl+R` |\n| Preview | `Ctrl+P` |\n| Side by Side | `F9` |\n| Fullscreen | `F11` |\n| Table | `Ctrl+Alt+T` |\n| Toggle Checkbox | `Ctrl+D` |\n| Undo | `Ctrl+Z` |\n| Redo | `Ctrl+Y` |\n\n## Theming\n\nMirage-MDE supports extensive theming through CSS custom properties:\n\n```css\nmirage-mde {\n  --mmde-border: 2px solid #333;\n  --mmde-color: #fff;\n  --mmde-background-color: #1a1a1a;\n  --mmde-toolbar-bg: #2d2d2d;\n  --mmde-editor-bg: #1e1e1e;\n  --mmde-editor-family: 'Fira Code', monospace;\n  --mmde-preview-family: 'Georgia', serif;\n}\n```\n\n## Advanced Usage\n\n### Custom Toolbar Actions\n\n```typescript\nconst customAction = {\n  name: 'my-action',\n  type: 'button',\n  title: 'My Custom Action',\n  iconUrl: 'path/to/icon.svg',\n  action: (view, scope) => {\n    // Custom action logic\n    const selection = view.state.selection.main;\n    const text = view.state.doc.sliceString(selection.from, selection.to);\n    // Transform text and update editor\n  }\n};\n\neditor.options = {\n  toolbar: ['bold', 'italic', 'my-action'],\n  toolbarActions: [customAction]\n};\n```\n\n### Custom Status Bar Items\n\n```typescript\nconst customStatus = {\n  name: 'my-status',\n  template: (item) => `<div>Custom: ${item.value}</div>`,\n  onUpdate: (item, update) => {\n    item.value = 'some value';\n  }\n};\n\neditor.options = {\n  statusbar: ['lines', 'words', 'my-status'],\n  statusbarStatuses: [customStatus]\n};\n```\n\n### Custom Preprocessors\n\n```typescript\neditor.options = {\n  renderingConfig: {\n    preprocessor: [\n      {\n        regexp: /\\{\\{([^}]+)\\}\\}/g,\n        replacer: (match, content) => {\n          // Transform template syntax\n          return `<span class=\"template\">${content}</span>`;\n        }\n      }\n    ]\n  }\n};\n```\n\n## Dependencies\n\n- **@codemirror/\\*** - Core editing functionality\n- **marked** - Markdown parsing and rendering\n- **highlight.js** - Code syntax highlighting\n- **lit** - Web components framework\n\n## Browser Support\n\n- Chrome/Edge 88+\n- Firefox 84+\n- Safari 14+\n\n## License\n\nApache-2.0\n\n## Contributing\n\nThis is part of the Arcmantle Weave component library. Please refer to the main repository for contribution guidelines.\n","readmeFilename":"README.md"}