📝 EditorMD

Un editor Markdown moderno y potente que vive en tu navegador

🌟 ¿Qué es EditorMD?

EditorMD es un editor Markdown de última generación desarrollado con Angular 20, diseñado para ofrecer una experiencia de escritura fluida, intuitiva y profesional. Funciona completamente en el navegador sin necesidad de servidor backend, utilizando las últimas tecnologías web para convertir tus ideas en documentos con formato impecable.

💡 La filosofía detrás del proyecto

En un mundo donde la documentación clara y accesible es fundamental, EditorMD surge como una solución moderna para:

Desarrolladores que necesitan crear documentación técnica rápidamente
Escritores que buscan un entorno minimalista sin distracciones
Estudiantes que quieren tomar notas con formato profesional
Creadores de contenido que requieren exportar a múltiples formatos

✨ Características Principales

📱 Vista Previa en Tiempo Real

Observa cómo tu Markdown cobra vida instantáneamente. Mientras escribes, el panel de vista previa se actualiza en tiempo real mostrando el resultado final con formato HTML renderizado.

# Escribes esto...        →        Y ves esto renderizado ✨

🎨 Soporte Completo de Markdown

✅ Encabezados (H1 - H6) con jerarquía visual
✅ Formato de texto: negritas, cursivas, tachado
✅ Listas: ordenadas, desordenadas y anidadas
✅ Código: bloques con sintaxis y código inline
✅ Enlaces e imágenes con soporte completo
✅ Citas y tablas para documentación profesional

💾 Gestión Inteligente de Archivos

📂 Abrir Archivos

Abre archivos .md y .txt locales con un simple clic. El contenido se carga instantáneamente en el editor, listo para ser modificado.

💿 Guardar y Guardar Como

Guardar Como: Define el nombre y ubicación de tu archivo
Guardar: Actualiza el archivo actual sin preguntar
Protección contra pérdida de datos no guardados
Soporte para múltiples formatos (.md, .txt)

📄 Exportación a PDF Profesional

Convierte tus documentos Markdown a PDF con un solo clic. El motor de exportación utiliza pdfmake para generar PDFs con:

Formato limpio y profesional
Preservación de estilos y jerarquía
Fuentes personalizables
Márgenes optimizados para impresión

🎯 Interfaz de Usuario Moderna

Una interfaz diseñada con TailwindCSS y DaisyUI que combina:

🌈 Diseño colorido y llamativo en la página de inicio
🎭 Animaciones suaves y transiciones elegantes
📐 Layout responsive que se adapta a cualquier pantalla
🌓 Componentes accesibles y fáciles de usar

🏗️ Arquitectura del Proyecto

🧩 Estructura Modular

EditorMD/
├── 🎨 UI Components
│   ├── Navbar → Navegación principal con menús desplegables
│   ├── Subnavbar → Acciones contextuales
│   └── HomePage → Pantalla de bienvenida animada
│
├── 📝 Páginas de Edición
│   ├── NewFilePage → Crear nuevo documento
│   └── OpenFilePage → Abrir archivos existentes
│
├── ⚙️ Servicios Core
│   ├── SaveAs → Lógica de guardado inteligente
│   ├── ExportarPdf → Conversión a PDF con pdfmake
│   ├── Font → Gestión de fuentes personalizadas
│   └── Look → Tematización y estilos
│
└── 🛠️ Utilidades
    └── WriteUtils → Helpers para manejo de archivos

🔧 Stack Tecnológico

Tecnología	Propósito	Versión
Angular	Framework principal con Signals	20.3.0
TypeScript	Lenguaje con tipado estático	5.9.2
TailwindCSS	Framework de estilos utility-first	4.1.17
DaisyUI	Componentes UI prediseñados	5.5.5
pdfmake	Generación de PDFs	3.0.3
html2canvas	Captura de contenido HTML	1.4.1
FontAwesome	Iconografía profesional	7.0.0
ng-milkdown	Editor Markdown avanzado	0.0.3

🎯 Patrones de Diseño Implementados

Signals: Estado reactivo con Angular Signals para máximo rendimiento
Dependency Injection: Servicios modulares e inyectables
Standalone Components: Arquitectura moderna sin módulos NgModule
Router Guards: Protección de rutas y navegación inteligente
Service-based Architecture: Separación de lógica de negocio

🚀 Despliegue en Local

📋 Prerequisitos

Antes de comenzar, asegúrate de tener instalado:

Node.js (v18.0 o superior) - Descargar aquí
npm (v9.0 o superior) - Incluido con Node.js
Git - Descargar aquí

Verifica las instalaciones:

node --version   # Debería mostrar v18.0 o superior
npm --version    # Debería mostrar v9.0 o superior

📥 Paso 1: Clonar el Repositorio

# Clona el proyecto
git clone <url-del-repositorio>

# Navega al directorio del proyecto
cd EditorMD

📦 Paso 2: Instalar Dependencias

# Instala todas las dependencias del proyecto
npm install

Este comando instalará:

Angular y sus dependencias core
TailwindCSS y DaisyUI para estilos
pdfmake para exportación PDF
FontAwesome para iconos
Y todas las demás dependencias necesarias

⏱️ Tiempo estimado: 2-5 minutos dependiendo de tu conexión

▶️ Paso 3: Iniciar el Servidor de Desarrollo

# Inicia el servidor de desarrollo
npm start

O alternativamente:

ng serve

El servidor se iniciará y verás algo como:

✔ Browser application bundle generation complete.
✔ Server application bundle generation complete.

Initial Chunk Files | Names         |  Raw Size
main.js             | main          |   XXX kB

Application bundle generation complete. [X.XXX seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜  Local:   http://localhost:4200/

🌐 Paso 4: Abrir en el Navegador

Abre tu navegador favorito y navega a:

http://localhost:4200

🎉 ¡Listo! EditorMD está corriendo en tu máquina local.

🎮 Uso de la Aplicación

🆕 Crear un Nuevo Documento

Haz clic en el menú "Archivo"
Selecciona "Nuevo"
Comienza a escribir en el panel izquierdo
Observa la vista previa en tiempo real a la derecha

📂 Abrir un Archivo Existente

Menú "Archivo" → "Abrir"
Selecciona un archivo .md o .txt de tu computadora
El contenido se cargará automáticamente

💾 Guardar tu Trabajo

Guardar Como: Ctrl + Shift + S - Elige nombre y ubicación
Guardar: Ctrl + S - Guarda rápidamente el archivo actual

📄 Exportar a PDF

Haz clic en el menú "Archivo"
Selecciona "Exportar a PDF"
El PDF se descargará automáticamente

🏃‍♂️ Scripts Disponibles

Script	Comando	Descripción
Desarrollo	`npm start`	Inicia servidor de desarrollo en puerto 4200
Build	`npm run build`	Genera build de producción optimizado
Watch	`npm run watch`	Build continuo en modo desarrollo
Tests	`npm test`	Ejecuta pruebas unitarias con Karma

🎨 Personalización

Cambiar Tema

Los temas se pueden personalizar editando las configuraciones de DaisyUI en el archivo de configuración de Tailwind.

Agregar Fuentes Personalizadas

Utiliza el servicio FontService para registrar nuevas fuentes personalizadas para la exportación PDF.

🤝 Contribuciones

Las contribuciones son bienvenidas. Si tienes ideas para mejorar EditorMD:

Haz fork del proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

📝 Licencia

🙏 Agradecimientos

Desarrollado con ❤️ utilizando:

Angular Team por el increíble framework
La comunidad de código abierto
Todos los colaboradores de las librerías utilizadas

⭐ Si este proyecto te resulta útil, considera darle una estrella

⬆ Volver arriba

Name		Name	Last commit message	Last commit date
.vscode		.vscode
public		public
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.postcssrc.json		.postcssrc.json
angular.json		angular.json
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Latest commit

History

Folders and files

Repository files navigation