Mawy
Un editor de Markdown que además hace de lector, publicado como biblioteca de React y como paquete de Flutter. Se escribe sobre el documento ya compuesto o sobre el código fuente, se pasa de uno al otro con un clic, y el texto terminado se entrega a un visor de solo lectura que lo representa exactamente igual.
Sobre este proyecto
Mawy es un editor de Markdown y un visor de Markdown construidos como una sola biblioteca, para React y para Flutter. Un editor y un renderizador mantenido aparte acaban discrepando en algo — una tabla, una lista anidada, un bloque de código — y en ese momento el documento que el autor aprobó deja de ser el documento que recibe el lector. Aquí las dos mitades comparten el mismo analizador y el mismo renderizador, así que lo que se escribió es lo que se lee.
El editor son dos vistas de un mismo documento y no dos editores. El código Markdown con su sintaxis coloreada y la página compuesta están a un clic de distancia, cada comando de la barra de formato es también un atajo de teclado, y cambiar de vista no pierde nada que la otra no supiera expresar. Bajo el coloreado hay un textarea de verdad, que es lo que mantiene en pie el historial de deshacer del navegador, la composición de los métodos de entrada y el teclado del móvil. El visor es un lector terminado: tipografía, tamaño de letra, interlineado, espaciado, ancho de columna, claro u oscuro y un índice de los títulos, y nada de eso toca el documento. Si no se le da ningún documento, es un selector de archivos: soltarle un .md encima es para lo que sirve su estado vacío.
La instalación es el paquete y una línea de CSS. Todo lo que la biblioteca dibuja pasa por propiedades personalizadas --mawy-*, de modo que cambiar el tema es volver a declarar un token en un elemento que envuelve, en lugar de ganarle en especificidad a una regla, y el modo oscuro es uno de esos tokens. No se descarga nada de fuera: el menú de tipografías ofrece las que ya están en la máquina del lector, y las trece familias de licencia libre que vienen incluidas solo se usan si la aplicación las pasa. El Markdown se convierte en elementos y no en una cadena de HTML, así que no hay innerHTML entre el documento y la página. El paquete de React es solo ESM, incluye declaraciones de TypeScript y tiene una única dependencia en tiempo de ejecución, la de los iconos de la barra.
Características
Sitio de documentación
Tipos de TypeScript
Varios idiomas
Verificado con pruebas
Multiplataforma
Accesible de fábrica
Modo oscuro
Admite tree shaking