Mawy
Um editor de Markdown que também faz a leitura, publicado como biblioteca React e como pacote Flutter. Escreve-se sobre o documento já composto ou sobre o código-fonte, passa-se de um para o outro com um clique, e o texto acabado segue para um visualizador só de leitura que o apresenta exatamente igual.
Sobre este projeto
O Mawy é um editor de Markdown e um visualizador de Markdown construídos como uma só biblioteca, para React e para Flutter. Um editor e um renderizador mantido à parte acabam por discordar nalguma coisa — uma tabela, uma lista encaixada, um bloco de código — e nesse momento o documento que o autor aprovou deixa de ser o documento que o leitor recebe. Aqui as duas metades partilham o mesmo analisador e o mesmo renderizador, por isso o que foi escrito é o que é lido.
O editor são duas vistas de um mesmo documento e não dois editores. O código Markdown com a sintaxe colorida e a página composta estão a um clique um do outro, cada comando da barra de formatação é também um atalho de teclado, e mudar de vista não perde nada que a outra não soubesse exprimir. Por baixo da coloração está um textarea a sério, que é o que mantém de pé o histórico de anulação do navegador, a composição dos métodos de entrada e o teclado do telemóvel. O visualizador é um leitor acabado: tipo de letra, corpo, entrelinha, espacejamento, largura da coluna, claro ou escuro e um índice dos títulos — nada disso toca no documento. Sem documento para mostrar, é um seletor de ficheiros: largar-lhe um .md em cima é para isso que serve o seu estado vazio.
A instalação é o pacote e uma linha de CSS. Tudo o que a biblioteca desenha passa por propriedades personalizadas --mawy-*, de modo que mudar o tema é voltar a declarar um token num elemento que envolve, em vez de vencer uma regra pela especificidade, e o modo escuro é um desses tokens. Nada é descarregado de fora: o menu de tipos de letra oferece os que já estão na máquina do leitor, e as treze famílias de licença livre que vêm incluídas só são usadas se a aplicação as passar. O Markdown torna-se elementos e não uma cadeia de HTML, por isso não há innerHTML entre o documento e a página. O pacote React é apenas ESM, traz declarações de TypeScript e tem uma única dependência de execução, a dos ícones da barra.
Funcionalidades
Site de documentação
Tipos de TypeScript
Vários idiomas
Verificado por testes
Multiplataforma
Acessível de origem
Modo escuro
Permite tree shaking