@edward-dev/editor-markdown-vue

Editor Markdown

Librería Vue 3 + CodeMirror 6 para editar Markdown.

Paquete npm: @edward-dev/editor-markdown-vue

editor-markdown/
├── ui/                 ← lo que consumes
│   ├── index.js
│   ├── editor.css      ← estilos seguros para el host
│   ├── style.css       ← SOLO demo (reset global) → demo.css
│   ├── document/
│   ├── MarkdownEditor/
│   ├── MarkdownPreview/
│   ├── EditingToolbar/
│   └── presets/
└── examples/vite-host/

Integrar en tu proyecto (Vite + pnpm)

1. Instalar

pnpm add vue@^3.5.0
pnpm add @edward-dev/editor-markdown-vue

vue es peerDependency (debe existir una sola instancia en el host).
CodeMirror y highlight.js vienen como dependencies del paquete; no hace falta declararlas en la raíz ni meterlas en optimizeDeps.include.

En vite.config.js del host:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ["vue"], // evita Vue duplicado con pnpm
  },
});

Alternativa: zip / file:

Si no usas npm:

pnpm run pack:share   # en este repo → release/*.zip
# descomprime en vendor/editor-markdown
pnpm add file:./vendor/editor-markdown

Los imports serían editor-markdown en lugar de @edward-dev/editor-markdown-vue.

2. Estilos

import "@edward-dev/editor-markdown-vue/editor.css";

No importes demo.css / style.css en un host con Tailwind: resetean html/body/#app.

3. Uso (Preview + Toolbar)

<script setup>
import { ref } from "vue";
import {
  MarkdownPreview,
  EditingToolbar,
  createDocument,
} from "@edward-dev/editor-markdown-vue";
// Subpaths (menos arrastre):
// import MarkdownPreview from "@edward-dev/editor-markdown-vue/preview"
// import EditingToolbar from "@edward-dev/editor-markdown-vue/toolbar"
// import { createDocument } from "@edward-dev/editor-markdown-vue/document"

const doc = createDocument({
  async load(path) {
    const text = await fetch(path).then((r) => r.text());
    return { content: text, filePath: path };
  },
  async save({ path, content }) {
    await fetch(path, { method: "PUT", body: content });
    return { filePath: path };
  },
});

const content = ref("");
const filePath = ref(null);
const previewRef = ref(null);

function onChange() {
  doc.setContent(content.value);
}

function onCommand(name, arg) {
  // El host implementa pickAsset para "image"; el resto va al preview.
  if (name === "image" && !arg) {
    /* tu picker → previewRef.runCommand("image", relativePath) */
    return;
  }
  previewRef.value?.runCommand(name, arg);
}
</script>

<template>
  <EditingToolbar @command="onCommand" />
  <MarkdownPreview
    ref="previewRef"
    v-model="content"
    :document-path="filePath"
    @change="onChange"
  />
</template>

Preset listo (toolbar + preview):

import { MarkdownPreviewKit } from "@edward-dev/editor-markdown-vue";
// o: import MarkdownPreviewKit from "@edward-dev/editor-markdown-vue/preview-kit"

4. API pública

createDocument({ load, save })

await doc.load(path);
doc.getContent();
doc.setContent(md);
doc.getPath();
doc.isDirty();
await doc.save();
await doc.saveAs();

• load(path?) → { content, filePath } o null
• save({ path, content }) → { filePath } o null

I/O e imágenes no vienen en la librería. El host implementa load / save / picker de assets (como window.api en la demo Electron).

5. Checklist post-integración

1. pnpm add @edward-dev/editor-markdown-vue
2. import "@edward-dev/editor-markdown-vue/editor.css" (no demo.css)
3. resolve.dedupe: ['vue'] en Vite
4. Importar Preview + Toolbar (o MarkdownPreviewKit)
5. pnpm exec vite build sin pantalla negra / errores de highlight.js

El resaltado usa la dependencia highlight.js del paquete (Vite la prebundlea). No hace falta optimizeDeps extra en el host.

Smoke de referencia en este repo:

pnpm run test:integrate

Empaquetar para enviar (zip opcional)

pnpm run pack:share

Genera release/editor-markdown-1.3.2-YYYYMMDD.zip con ui/ + README + example (sin electron/, sin node_modules).

Publicar una nueva versión a npm (mantenedores):

pnpm publish --access public

Demo Electron (desarrollo local)

Package manager: pnpm. Vite de la demo en el puerto 5174.

pnpm install
pnpm run dev

• pnpm run build — UI
• pnpm start — build + Electron

La demo usa ui/style.css (demo.css) y window.api para abrir/guardar/imágenes.