Por qué mostramos los símbolos de Markdown solo en la palabra donde está el cursor

En el modo en vivo, la posición del cursor determina lo que se muestra en pantalla. Los símbolos de Markdown deben permanecer ocultos normalmente y aparecer solo al corregirlos.

Entonces, ¿cómo se puede saber cuándo se está «corrigiendo» algo?

Al principio, mote tomaba como referencia el párrafo entero. Cuando el cursor entraba en un párrafo, mostraba todos los símbolos de ese párrafo.

La implementación era sencilla, pero la pantalla se volvía ruidosa. Bastaba con colocar el cursor para corregir una palabra en negrita y hasta el enlace y el código de tres líneas más abajo se convertían en texto fuente. Los ojos miraban un punto, pero todo el párrafo se movía.

Miramos la expresión, no el párrafo

Ahora mote solo muestra la expresión que está en contacto con el cursor.

El texto fuente aparece únicamente cuando el cursor está entre el símbolo de apertura y el de cierre. El alcance también incluye las posiciones inmediatamente anterior y posterior a los símbolos. Al fin y al cabo, colocar el cursor ahí también es una acción destinada a corregir la expresión.

En cuanto el cursor se aleja un solo carácter, vuelve a mostrarse la versión renderizada. Para aparecer y desaparecer se utiliza una transición de opacidad de 120 ms. Como es una transición con principio y fin, cuando termina no queda nada.

Aunque un párrafo contenga negrita, enlaces y código en línea, el resto no se mueve. Solo cambia la expresión que toca el cursor y el área que se vuelve a dibujar se limita a esa única línea. No se vuelve a interpretar el documento completo.

El mismo principio se aplica a cursivas, negritas, tachados, resaltados, subíndices, superíndices, código, fórmulas, enlaces, imágenes y referencias a notas al pie.

Los símbolos al principio de una línea son un poco diferentes. Como # y > determinan la naturaleza de toda la línea, siempre se muestran del mismo modo sin importar en qué parte de ella esté el cursor. En cambio, el - de una lista solo aparece cuando el cursor está sobre el símbolo. En cuanto atraviesa el espacio y pasa al texto, vuelve inmediatamente a convertirse en una viñeta.

Cuando se selecciona texto, solo se convierten en texto fuente las expresiones que se superponen con la selección. Si al seleccionar tres caracteres toda la línea se transformara en código fuente, resultaría aún más difícil saber qué se ha seleccionado.

Los símbolos también adoptan el aspecto de las letras

Los símbolos revelados conservan el estilo de la expresión.

Los ** del texto en negrita aparecen en negrita y los * de la cursiva aparecen inclinados. Los ~~ del tachado también se muestran atravesados por una línea.

Antes, todos los símbolos se mostraban en gris. Como resultado, al colocar el cursor sobre una palabra en negrita, parecía que la palabra quedaba encerrada entre paréntesis grises. También desaparecía momentáneamente la información de que el texto que se estaba corrigiendo estaba en negrita.

Al aplicar a los símbolos el estilo de las letras, el significado se volvió claro. La palabra sigue viéndose en negrita y los asteriscos quedan únicamente como marcas que indican su alcance.

El gris solo se utiliza para símbolos de bloque como #, > y las viñetas. Esto se debe a que esos símbolos describen la naturaleza de la línea más que la de las letras.

El principio es sencillo. Los símbolos unidos a las letras se muestran como parte de ellas; los símbolos que definen la línea, como parte del fondo.

Solo los asteriscos crean automáticamente su pareja

Al introducir un asterisco, se crea también el asterisco de cierre. Si se introduce otro asterisco, ambos crecen hasta formar una pareja para la negrita.

Después de escribir el contenido, al introducir el asterisco de cierre no se crea uno nuevo, sino que el cursor salta por encima del existente. Esta regla también resolvió el problema por el que aparecían cuatro asteriscos.

Sin embargo, si se introduce un asterisco justo después de una letra o de otro asterisco, se considera que el usuario está cerrando directamente la expresión. En ese caso no se crea una pareja.

Los guiones bajos y las virgulillas no crean parejas automáticamente. Esto se debe a que podrían interferir con texto de uso habitual como snake_case, __init__ y ~/경로. Solo funcionan como pareja al envolver texto seleccionado.

El cursor debe llamar menos la atención que las letras

Al principio, el cursor era azul, el color de énfasis. Ahora utiliza el mismo color de tinta que el texto principal.

Una barra azul encaja bien en un campo de entrada corto. Sin embargo, en un documento las letras son las protagonistas. Basta con que el cursor indique hasta dónde se ha escrito. El color de énfasis se ha reservado únicamente para las selecciones y los resultados de búsqueda.

El ancho se calcula dividiendo la altura del cursor por la altura de la tinta del texto principal y redondeando el resultado a un número entero. En el texto principal da como resultado 1 px y solo aumenta a 2 px en los títulos grandes. Si se usa directamente un ancho fraccionario, se reparte entre dos columnas de píxeles y, en vez de verse fino, parece grueso y borroso.

La altura sigue la altura de las letras, no el interlineado. Es de 18 px en el texto principal, 24 px en h3, 29 px en h2 y 36 px en h1. Con solo mirar el cursor se puede saber si está en el cuerpo del texto o en un título.

El parpadeo está documentado como la única excepción a la regla de no mantener fuentes repetitivas en estado de inactividad. Cuando la ventana pierde el foco, el parpadeo se detiene y la selección también retrocede hasta un alfa del 45 %.

Hemos conservado el desplazamiento

Cuando aparecen los símbolos, el texto posterior se desplaza ligeramente. Decidimos no eliminar este movimiento.

También probamos un método que reservaba espacio mostrando continuamente los símbolos ocultos en un gris tenue. Sin embargo, el texto en negrita conservaba un residuo gris y el tachado sobresalía de la palabra. El resultado era un estado extraño que no era ni la vista renderizada ni el texto fuente.

En cambio, en los símbolos al principio de una línea que contienen elementos dibujados, como viñetas y casillas de tareas, desplazamos la línea según la diferencia de ancho entre el texto fuente y la versión renderizada. De ese modo, las letras del cuerpo no se mueven cuando aparece el símbolo. En el caso del # de los títulos y el > de las citas, permitimos que empujen el texto. Fue una decisión basada en que estamos acostumbrados a editores que se comportan así.

Con los enlaces, el cambio en pantalla puede ser mayor porque la dirección puede ser larga. Por eso normalmente solo se muestra el texto del enlace, acompañado de una pequeña flecha al final. Se puede saber que es un enlace, pero la dirección solo aparece al corregirla.

Si necesitas comprobar el texto fuente con exactitud, puedes utilizar el modo fuente. El modo en vivo no es un lugar que muestre todos los símbolos, sino uno que abre únicamente el punto que estás corrigiendo.

mote no intenta adivinar la intención del usuario. Si el cursor está dentro de una expresión, muestra sus símbolos; si está fuera, los oculta. Las suposiciones son cómodas cuando aciertan, pero cuando fallan resulta difícil saber por qué. Si solo se utiliza un criterio, la posición, el resultado siempre es predecible.

Decidir cuándo mostrar los símbolos consiste, en última instancia, en decidir dónde debe permanecer la mirada del usuario.