[ update ] Site de anotações simples no formato Markdown (melhorias)
Introdução:
Há uns dias atrás, eu apresentei meu novo projetinho: Site de anotações simples no formato Markdown, onde eu falei um pouco sobre ele e mencionei algumas melhorias que iria fazer.
Hoje eu trago justamente algumas (não todas) melhorias que trabalhei nesses últimos dias. Antes de mais nada, quero dizer que eu não alterei muita coisa, até porque eu mencionei que o projeto tinha que ser simples, para não perder sua essência. Algumas dessas novidades são qualidade de vida e correções.
Novidades:
Melhorias no bloco de código:
O bloco de código anterior era apenas um:
'```javascript'
...
'```'
onde não havia nenhum estilo para destacar sua área. Agora o bloco de código conta com alguns estilos aplicados com css
para tornar, bom, mais como um código de bloco.
Nova versão:
Além de resolver problemas com quebra de linha. Agora, de você apertar o enter
no último texto dentro do bloco, irá criar uma <div>
abaixo do bloco de código para continuar escrevendo seu documento. Antes, a linha quebra sempre, desde que apertasse enter
.
Ao invés de embrulhar tudo dentro de uma <div>
, eu resolve embralhar dentro de um <pre>
, pois é algo mais semântico e lida melhor com quebras.
Uma observação: É interessante clicar no botão para adicionar um bloco de código e não criar manualmente com as crases, pois somente clicando no botão que adicioanr os estilos e exporta corretamente. Irei analisar possibilidades com regex
para consertar isso.
Problemas com quebra de linha resolvido:
Ainda não está 100% como eu quero, entretanto melhorou muito. É realmente difícil resolver está questão sem um evento acabar dando conflito com outro. Bom, indo para as novidades: Antes ocorria anormalidades na hora da quebra como: não adicionar uma nova <div
, adicionar multiplas <div>
, adicionar uma <div>
não contentEdibale
, dentro outros problemas como quebrar sempre que apertar enter
, independemente de estar ou não no final do texto
.
Esses problemas foram resolvidos e agora, sempre que estiver no último node
, ou seja, na última palavra, irá quebrar uma linha. As vezes tem comportamentes estranhos com caracteres especiais como |
, mas se você apagar a linha gerada e apertar de novo, funciona normalmente. Em breve, resolverei isto.
Tabelas (beta)
Foi adicionado um botão para tabelas que não funciona 100% bem ainda. Alguns caracteres ficam desalinhados ou a quebra de linha atrapalha. No entanto, ainda da para utilizar com um jeitinho certo. Ao clicar no botão, irá adicionar uma <div>
onde você pode criar a tabela no formato .md
. Em breve, estarei trazendo uma versão completa de tabelas.
Adicionando melhorias aos botões de formatações:
Antes, ao clicar no botão, o elemento era desfocalizado. Isso foi consertado. Outro problema surgiu a partir disso que foi encontrado ao clicar no botão: Quando o método focus()
o cursor
era movido para o incio da linha. Isso foi consertado também.
Além disso, não precisa mais se prender aos botões, podem digitar a formatação manualmente. Onde **text**
para bold
e __text__
para itálico.
Atalhos:
Para o pessoal do pc, eu adicionei atralhos para bold
e itálico
. Se você apertar crtl + i
irá adicionar a formatação itálico: __text__
e crtl + b
para adicionar **text**
.
Outros
Bom outros pequenos problemas foram corrigidos que não valem a pena mencionar. Ainda pretendo mexer muito neste projeto e falar sobre a experiência. Em breve, mais novidades.