Dlaczego symbole Markdown pokazujemy tylko w słowie, którego dotyka kursor

W trybie live położenie kursora bezpośrednio decyduje o tym, co widać na ekranie. Symbole Markdown powinny być zwykle ukryte i pojawiać się tylko podczas edycji.

Jak jednak rozpoznać, kiedy trwa „edycja”?

Początkowo mote brał pod uwagę cały akapit. Gdy kursor znajdował się wewnątrz akapitu, pokazywał wszystkie jego symbole.

Implementacja była prosta, ale na ekranie robiło się chaotycznie. Wystarczyło umieścić kursor, aby poprawić jedno pogrubione słowo, a nawet link i kod trzy wiersze dalej zmieniały się w tekst źródłowy. Wzrok pozostawał skupiony w jednym miejscu, ale poruszał się cały akapit.

Patrzymy na składnię, nie na akapit

Teraz mote pokazuje tylko składnię, której dotyka kursor.

Tekst źródłowy pojawia się wyłącznie wtedy, gdy kursor znajduje się między symbolem otwierającym a zamykającym. Zakres obejmuje również miejsce bezpośrednio przed symbolem i za nim. Umieszczenie tam kursora także jest przecież działaniem zmierzającym do edycji składni.

Gdy kursor przesunie się choćby o jedną pozycję poza ten zakres, wszystko wraca do wyrenderowanej postaci. Przy pojawianiu się i znikaniu stosowane jest przejście krycia trwające 120 ms. Ponieważ przejście ma początek i koniec, po jego zakończeniu nic nie pozostaje.

Nawet jeśli akapit zawiera jednocześnie pogrubienie, link i kod inline, pozostałe elementy się nie poruszają. Zmienia się tylko składnia dotykana przez kursor, a ponownie rysowany jest wyłącznie ten jeden wiersz. Cały dokument nie jest ponownie interpretowany.

Ta sama zasada obowiązuje w przypadku kursywy, pogrubienia, przekreślenia, wyróżnienia, indeksu dolnego, indeksu górnego, kodu, wzorów, linków, obrazów i odwołań do przypisów.

Symbole na początku wiersza działają nieco inaczej. # i > określają charakter całego wiersza, dlatego wyglądają tak samo niezależnie od tego, gdzie w wierszu znajduje się kursor. Natomiast znak - listy jest odsłaniany tylko wtedy, gdy kursor znajduje się na symbolu. Po przejściu przez spację do treści natychmiast zmienia się z powrotem w punktor.

Również po zaznaczeniu tekstu w postać źródłową zmienia się wyłącznie składnia przecinająca się z zaznaczeniem. Gdyby po zaznaczeniu trzech liter cały wiersz zmieniał się w źródło, trudniej byłoby rozpoznać, co właściwie zostało zaznaczone.

Symbole przejmują wygląd tekstu

Odsłonięte symbole zachowują styl danej składni.

Znaki ** pogrubionego tekstu są pogrubione, a znak * kursywy pojawia się pochylony. Znaki ~~ przekreślenia również są przekreślone.

Wcześniej wszystkie symbole były wyświetlane na szaro. W rezultacie po umieszczeniu kursora w pogrubionym tekście słowo wyglądało, jakby zostało zamknięte w szarych nawiasach. Na chwilę znikała również informacja, że edytowany tekst jest pogrubiony.

Gdy symbole otrzymały styl tekstu, ich znaczenie stało się jasne. Słowo nadal wygląda na pogrubione, a gwiazdki pozostają jedynie oznaczeniem wskazującym jego zakres.

Szarość jest używana tylko dla symboli blokowych, takich jak #, > i punktory. Symbole te opisują bowiem charakter wiersza, a nie tekstu.

Zasada jest prosta. Symbole dołączone do tekstu pokazujemy jak część tekstu, a symbole określające wiersz — jak tło.

Automatycznie parowane są tylko gwiazdki

Po wpisaniu jednej gwiazdki pojawia się razem z nią gwiazdka zamykająca. Po wpisaniu jeszcze jednej para rozrasta się w parę służącą do pogrubienia.

Jeśli po wpisaniu treści zostanie wprowadzona gwiazdka zamykająca, kursor przechodzi nad istniejącym symbolem zamiast tworzyć nowy. Ta reguła rozwiązała również problem polegający na pojawianiu się czterech gwiazdek naraz.

Gwiazdka wpisana bezpośrednio po literze lub innej gwiazdce jest jednak traktowana jako próba samodzielnego zamknięcia składni przez użytkownika. W takim przypadku para nie jest tworzona.

Podkreślniki i tyldy nie są automatycznie parowane. Mogłoby to przeszkadzać we wpisywaniu często używanych ciągów, takich jak snake_case, __init__ czy ~/ścieżka. Działają jako para tylko podczas obejmowania zaznaczonego tekstu.

Karetka powinna być mniej widoczna niż tekst

Początkowo karetka była niebieska, czyli miała kolor wyróżnienia. Teraz używa tego samego koloru atramentu co tekst główny.

Niebieski pasek dobrze pasuje do krótkiego pola wprowadzania. Jednak w dokumencie główną rolę odgrywa tekst. Wystarczy, że karetka pokazuje, dokąd sięga wpisany tekst. Kolor wyróżnienia pozostawiliśmy wyłącznie dla zaznaczeń i wyników wyszukiwania.

Szerokość jest ustalana przez podzielenie wysokości karetki przez wysokość atramentu tekstu głównego i zaokrąglenie wyniku do liczby całkowitej. W tekście głównym daje to 1 px, a jedynie w dużych nagłówkach wartość rośnie do 2 px. Użycie szerokości ułamkowej rozdzielałoby ją bowiem między dwie kolumny pikseli, przez co zamiast wyglądać cienko, stawałaby się gruba i rozmyta.

Wysokość odpowiada wysokości znaków, a nie interlinii. Tekst główny ma 18 px, h3 ma 24 px, h2 ma 29 px, a h1 ma 36 px. Już po samej karetce można rozpoznać, czy kursor znajduje się w tekście głównym, czy w nagłówku.

Miganie jest opisane jako jedyny wyjątek od reguły, zgodnie z którą w stanie bezczynności nie pozostawia się powtarzających się źródeł. Gdy okno traci fokus, miganie ustaje, a zaznaczenie wycofuje się do alfy 45 %.

Przesunięcie pozostało

Gdy pojawiają się symbole, tekst znajdujący się za nimi lekko się przesuwa. Postanowiliśmy nie usuwać tego ruchu.

Testowaliśmy również metodę polegającą na ciągłym wyświetlaniu ukrytych symboli w jasnoszarym kolorze, aby zachować dla nich miejsce. Na pogrubionym tekście pozostawała jednak szara poświata, a przekreślenie wystawało poza słowo. Powstawał niezręczny stan, który nie był ani widokiem wyrenderowanym, ani tekstem źródłowym.

W przypadku symboli na początku wiersza, które mają rysowane elementy, takich jak punktory i pola zadań, przesuwamy natomiast wiersz o różnicę szerokości między źródłem a renderem. Dzięki temu po odsłonięciu symbolu tekst główny się nie porusza. W przypadku # nagłówka i > cytatu pozostawiliśmy przesuwanie tekstu głównego. Była to decyzja wynikająca z przyzwyczajeń wykształconych przez edytory działające w ten sposób.

Adres linku może być długi, więc zmiana na ekranie bywa większa. Dlatego zwykle pokazujemy tylko tekst linku i dodajemy na końcu małą strzałkę. Widać, że jest to link, ale jego adres pojawia się dopiero podczas edycji.

Jeśli trzeba dokładnie sprawdzić tekst źródłowy, można użyć trybu źródłowego. Tryb live nie służy do pokazywania wszystkich symboli, lecz do odsłaniania wyłącznie miejsca, które jest właśnie edytowane.

mote nie próbuje odgadywać intencji użytkownika. Jeśli kursor znajduje się wewnątrz składni, pokazuje symbole, a jeśli jest na zewnątrz, ukrywa je. Zgadywanie jest wygodne, kiedy okazuje się trafne, ale gdy zawodzi, trudno zrozumieć dlaczego. Użycie jednego kryterium — położenia — sprawia, że rezultat jest zawsze przewidywalny.

Decyzja o tym, kiedy pokazywać symbole, jest ostatecznie decyzją o tym, gdzie ma spocząć wzrok użytkownika.