Edição de tabelas que preserva exatamente a tabela digitada à mão

As tabelas em Markdown guardam os vestígios dos ajustes feitos à mão. Alinhamos os pipes cuidadosamente, ajustamos a largura das células com espaços e, às vezes, até desalinhamos de propósito. Esse formato em si é o texto original do arquivo.

Mas um editor que exibe tabelas como grades precisa interpretar o texto original. Se ele alinhar a tabela automaticamente ao salvá-la novamente, o formato criado pela pessoa também muda.

O alinhamento automático de tabelas do Typora é conhecido por fazer isso. Para igualar a largura das colunas, ele preenche com espaços o trecho entre os pipes, e o resultado é gravado ao salvar. Isso está registrado em uma issue pública, e também há uma solicitação separada para que seja possível desativar o recurso nas opções.

O mote decidiu não fazer isso. Na tela, ele mostra a tabela como uma grade, mas, no arquivo, mantém exatamente o texto original escrito à mão.

Apenas a célula que está sendo editada aparece como texto original

Mesmo quando você clica em uma tabela no modo ao vivo, a grade permanece como está. Apenas a célula em que o cursor está se transforma no texto original, e os símbolos de pipe aparecem esmaecidos.

Você pode ir para outra célula usando Tab ou as teclas de seta. Se pressionar Enter na última linha, uma nova linha será criada.

A seleção também funciona de maneira natural. Se você arrastar dentro de uma célula, apenas os caracteres serão selecionados. Se arrastar para fora da célula, várias células serão selecionadas em forma de retângulo e, ao copiar, somente as células selecionadas serão transformadas em uma tabela. A primeira linha se torna o cabeçalho, e o alinhamento também é preservado.

Quando uma seleção iniciada fora da tabela chega até ela, a tabela inteira é selecionada. Você não acaba com apenas metade da tabela selecionada de forma estranha.

Também é possível mover linhas e colunas inteiras. Ao passar o mouse sobre a tabela, aparecem alças à esquerda das linhas e acima das colunas. Basta arrastá-las para a posição desejada.

No menu do botão direito, você pode adicionar ou excluir linhas e colunas. Cada ação é tratada como uma única edição, então pode ser desfeita de uma só vez. E o texto original das células que não foram tocadas não muda. Os mesmos recursos também podem ser encontrados na paleta de comandos.

A tabela desmoronou por causa de um único pipe

No início, sempre adicionávamos uma barra invertida ao digitar um pipe dentro de uma tabela. Isso aconteceu porque só tínhamos pensado no caso em que alguém queria inserir o caractere pipe dentro de uma célula.

Mas, para quem escreve tabelas em Markdown diretamente, o pipe é o símbolo que separa as células. Ao inserir uma nova linha, até os separadores eram transformados em caracteres, e a tabela desmoronava.

Por isso, corrigimos o comportamento para levar em conta a posição em que o caractere é digitado.

Se você digitar um pipe no início de uma linha, ele será ignorado. Se já houver um separador depois dele, o cursor será levado para a próxima célula. O pipe só será escapado quando for digitado em uma frase dentro da célula. E, se você escrever uma linha começando com um pipe logo abaixo da tabela, ela continuará como uma nova linha da tabela existente.

É difícil encontrar problemas assim olhando apenas para o código. Por isso, criamos testes que clicam na tabela e arrastam as alças em uma janela real. Eles verificam se a tabela é desenhada corretamente, se as linhas e colunas se movem na direção desejada e se o aplicativo não fecha inesperadamente durante o processo.

O resultado fica ainda mais evidente depois de salvar. Se você alterar apenas uma palavra em uma célula, somente aquela linha aparecerá no git diff.

Os espaços usados para alinhar as colunas, os asteriscos dos marcadores e os dois espaços no fim da linha também permanecem exatamente como estavam. Se o arquivo não tinha uma quebra de linha no final, até esse estado é preservado. Na barra de status, você pode ver imediatamente quantos bytes foram alterados ao salvar.

Também há um recurso que foi criado e depois removido

Durante algum tempo, era possível ajustar a largura das colunas com o mouse. Agora, não é mais.

O Markdown não tem uma sintaxe para armazenar a largura das colunas. Para lembrar essa largura, seria necessário criar um arquivo separado ao lado do documento. Nesse caso, a pasta só permaneceria completa se o mote estivesse presente. Ao movê-la com o git, abri-la em outro dispositivo ou usar outro editor, essa informação se perderia.

As bordas da tabela foram resolvidas por meio das configurações do aplicativo. Você pode escolher entre exibi-la como uma grade ou desenhar uma linha apenas abaixo do cabeçalho. A mesma configuração também é aplicada à tela e às exportações para PDF e HTML.

O critério é simples. Valores que não podem ser escritos em Markdown ficam nas configurações do aplicativo ou não são transformados em recurso.

Por isso, removemos o recurso de ajuste da largura das colunas. A largura é definida automaticamente de acordo com o conteúdo. E o documento continua sendo um único arquivo .md até o fim.

Um editor que reescreve sua tabela para deixá-la bonita e um editor que preserva exatamente a tabela que você escreveu.

O mote escolheu o segundo.