Modifier un tableau sans altérer sa mise en forme saisie à la main

Les tableaux Markdown portent les traces des ajustements effectués à la main. On aligne soigneusement les barres verticales, on ajuste la largeur des cellules avec des espaces et, parfois, on désaligne même volontairement certains éléments. Cette forme elle-même constitue le texte source du fichier.

Mais un éditeur qui affiche les tableaux sous forme de grille doit interpréter le texte source. S’il réaligne automatiquement le tableau lors de l’enregistrement, la mise en forme créée par la personne change elle aussi.

L’alignement automatique des tableaux de Typora est connu pour cela. Pour harmoniser la largeur des colonnes, il remplit d’espaces les intervalles entre les barres verticales, et ce résultat est répercuté dans le fichier lors de l’enregistrement. Le problème est consigné dans une issue publique, et une demande distincte a également été déposée pour pouvoir le désactiver dans les options.

mote a choisi de ne pas faire cela. Il affiche le tableau sous forme de grille à l’écran, tout en conservant dans le fichier le texte source tel qu’il a été écrit à la main.

Seule la cellule en cours de modification apparaît sous sa forme source

En mode Live, la grille reste affichée même lorsque vous cliquez sur le tableau. Seule la cellule où se trouve le curseur repasse sous sa forme source, et les barres verticales apparaissent en grisé.

Vous pouvez passer à une autre cellule avec Tab ou les touches fléchées. Si vous appuyez sur Enter dans la dernière ligne, une nouvelle ligne est créée.

La sélection est elle aussi naturelle. Si vous faites glisser le pointeur à l’intérieur d’une cellule, seul le texte est sélectionné. Si vous le faites glisser au-delà de la cellule, plusieurs cellules sont sélectionnées en rectangle et, lorsque vous les copiez, seules les cellules sélectionnées sont transformées en tableau. La première ligne devient l’en-tête et l’alignement est conservé.

Lorsqu’une sélection commencée hors du tableau atteint celui-ci, le tableau entier est sélectionné. Vous ne vous retrouvez pas avec une moitié de tableau maladroitement sélectionnée.

Vous pouvez également déplacer des lignes et des colonnes entières. Lorsque vous passez la souris sur le tableau, des poignées apparaissent à gauche des lignes et au-dessus des colonnes. Il suffit de les faire glisser jusqu’à l’emplacement souhaité.

Le menu contextuel permet d’ajouter ou de supprimer des lignes et des colonnes. Chaque action est traitée comme une seule modification et peut donc être annulée en une seule fois. Le texte source des cellules auxquelles vous n’avez pas touché ne change pas. Les mêmes fonctions sont également disponibles dans la palette de commandes.

Une seule barre verticale a fait s’effondrer le tableau

Au début, chaque barre verticale saisie dans un tableau était systématiquement précédée d’une barre oblique inverse. Nous n’avions envisagé que le cas où l’on voulait insérer le caractère de barre verticale à l’intérieur d’une cellule.

Mais pour les personnes qui écrivent directement leurs tableaux Markdown, la barre verticale est le symbole qui sépare les cellules. Lorsqu’elles saisissaient une nouvelle ligne, même les séparateurs étaient transformés en caractères, et le tableau s’effondrait.

Nous avons donc modifié le comportement pour tenir compte de l’emplacement de la saisie.

Si vous saisissez une barre verticale au début d’une ligne, elle est ignorée. Si un séparateur se trouve déjà derrière, le curseur passe à la cellule suivante. La barre verticale n’est échappée que lorsqu’elle est saisie dans une phrase à l’intérieur d’une cellule. Et si vous écrivez juste sous le tableau une ligne commençant par une barre verticale, elle devient une nouvelle ligne du tableau existant.

Ce genre de problème est difficile à déceler en ne regardant que le code. Nous avons donc créé des tests qui cliquent sur le tableau et font glisser les poignées dans une véritable fenêtre. Ils vérifient que le tableau est correctement affiché, que les lignes et les colonnes se déplacent dans la direction souhaitée et que l’application ne plante pas pendant l’opération.

Le résultat devient encore plus clair après l’enregistrement. Si vous ne changez qu’un mot dans une cellule, seule cette ligne apparaît également dans le git diff.

Les espaces utilisés pour aligner les colonnes, les astérisques des puces et les deux espaces en fin de ligne restent eux aussi intacts. Si le fichier ne comportait pas de saut de ligne final, cet état est également conservé. La barre d’état permet de voir immédiatement combien d’octets ont été modifiés lors de l’enregistrement.

Certaines fonctions ont aussi été créées, puis retirées

Pendant un temps, il était possible de régler la largeur des colonnes à la souris. Cette fonction n’existe plus aujourd’hui.

Markdown ne possède aucune syntaxe permettant d’enregistrer la largeur des colonnes. Pour mémoriser cette largeur, il faudrait créer un fichier séparé à côté du document. Le dossier ne serait alors complet qu’en présence de mote. Si vous le déplaciez avec git, l’ouvriez sur un autre appareil ou utilisiez un autre éditeur, cette information serait perdue.

Pour les bordures du tableau, nous avons réglé la question dans les paramètres de l’application. Vous pouvez choisir d’afficher toutes les bordures sous forme de grille ou de tracer une ligne uniquement sous l’en-tête. Le même réglage s’applique à l’affichage à l’écran ainsi qu’aux exportations PDF et HTML.

Le principe est simple. Une valeur qui ne peut pas être écrite en Markdown doit être placée dans les paramètres de l’application, ou ne pas devenir une fonctionnalité.

C’est pourquoi nous avons retiré la fonction de réglage de la largeur des colonnes. Celle-ci est déterminée automatiquement en fonction du contenu. Et le document reste, jusqu’au bout, un unique fichier .md.

Un éditeur qui réécrit joliment vos tableaux, ou un éditeur qui conserve exactement le tableau que vous avez écrit.

mote a choisi le second.