@evtray/email-editor

Editor de correos electrónicos para aplicaciones Vue 3 con soporte para formato enriquecido y adjuntos.

Características

• Editor WYSIWYG basado en Quill
• Soporte para adjuntos con vista previa
• Diseño responsive
• Compatibilidad con Vue 3
• Escrito en TypeScript
• Estilizado con TailwindCSS
• Validación de formularios con VeeValidate y Zod

Instalación

# npm
npm install @evtray/email-editor

# yarn
yarn add @evtray/email-editor

# pnpm
pnpm add @evtray/email-editor

Uso básico

Registrar el plugin (opcional)

// main.js / main.ts
import { createApp } from 'vue'
import App from './App.vue'
import EmailEditor from '@evtray/email-editor'
import '@evtray/email-editor/dist/style.css'

const app = createApp(App)
app.use(EmailEditor)
app.mount('#app')

Importar componentes individualmente

<template>
  <div>
    <EmailCreator 
      :emailData="emailData" 
      :acceptedFileTypes="acceptedFileTypes"
      :maxFileSize="maxFileSize"
      :imageUploadUrl="imageUploadUrl"
      :imageUploadHeaders="imageUploadHeaders"
      @image-uploaded="onImageUploaded"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { EmailCreator } from '@evtray/email-editor'
import '@evtray/email-editor/dist/style.css'

const emailData = ref({
  title: '',
  subject: '',
  content: '',
  attachments: []
})

const acceptedFileTypes = [
  'application/pdf',
  'image/jpeg',
  'image/png'
]

const maxFileSize = 5 * 1024 * 1024 // 5MB

const imageUploadUrl = 'https://api.example.com/upload'
const imageUploadHeaders = {
  'Authorization': 'Bearer your-token'
}

const onImageUploaded = (imageUrl) => {
  console.log('Imagen subida:', imageUrl)
}
</script>

Componentes disponibles

EmailCreator

El componente principal para crear/editar correos.

Props

• emailData: Objeto con los datos del correo (título, asunto, contenido, adjuntos)
• acceptedFileTypes: Array de tipos MIME aceptados para adjuntos
• maxFileSize: Tamaño máximo de archivo en bytes
• imageUploadUrl: URL para subir imágenes
• imageUploadHeaders: Headers para la petición de carga de imágenes

Eventos

• update:attachments: Emitido cuando cambia la lista de adjuntos
• image-uploaded: Emitido cuando se sube una imagen correctamente

MailDisplay

Componente para mostrar un correo electrónico.

Props

• mail: Objeto con los datos del correo
• showAttachments: Booleano para mostrar/ocultar adjuntos

AttachmentList

Componente para mostrar una lista de adjuntos.

Props

• attachments: Array de objetos de tipo Attachment

Tipos

// Mail
interface Mail {
  id: string;
  subject: string;
  from: Recipient;
  to: Recipient[];
  cc?: Recipient[];
  bcc?: Recipient[];
  body: string;
  date: Date | string;
  read: boolean;
  flagged: boolean;
  attachments?: Attachment[];
}

// Attachment
interface Attachment {
  id: string;
  name: string;
  size: number;
  type: string;
  url: string;
  modifiedAt?: Date | string;
}

// Recipient
interface Recipient {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

Licencia

MIT