Dodanie ficzera wyszukiwarki w bloczku z kodem

[ScriptyChris]

Wymaga #278.

Czasem potrzeba wyszukać czegoś w bloczku z kodem, a wbudowana w przeglądarkę wyszukiwarka szuka w kontekście całej strony internetowej - co bywa niewygodne, gdy w temacie jest wiele bloczków z podobnym kodem lub fragmenty kodu (albo nazwy zmiennych) przewijają się w trakcie wypowiedzi.

Cechy dodanej wyszukiwarki:

• działa w kontekście bloczka
• otwiera się po kliknięciu w przycisk "Szukaj" z rozwijanych opcji bloczka lub po użyciu skrótu klawiszowego Ctrl + F (jeśli wcześniej kliknięto w bloczek celem zfocusowania go)
• wyświetla liczbę znalezionych wystąpień
• umożliwia podświetlanie poszczególnych wystąpień szukanej frazy przyciskami nawigacyjnymi lub za pomocą klawiszy:
  • następny: strzałka w dół lub Enter,
  • poprzedni: strzałka do góry lub Shift + Enter

Demo:

https://user-images.githubusercontent.com/18393526/126853004-d19e9e55-17db-44b5-aee6-253d198b21e0.mp4

[ScriptyChris]

Do poprawy są następujące problemy:

1. poprawione przejście do znalezionego wystąpienia, które jest zasłonięte przez nieprzewinięty fragment bloczka, nie jest widoczne. Trzeba automatycznie przewinąć bloczek w razie potrzeby;
2. poprawione jeśli fraza znajduje się pod rozwiniętą listą opcji, to jest przez nią zasłonięta. Można listę opcji - poza używaną wyszukiwarką - tymczasowo zrobić przezroczystą. To jednak nie rozwiąże problemu, gdy fraza znajdzie się pod samą wyszukiwarką - w takim przypadku można by dodatkowo przewijać bloczek, gdy wybrane frazy znajdują się przy prawym górnym rogu bloczka.

[ScriptyChris]

Poprawiłem mechanikę wyszukiwarki. Nie działało szukanie fragmentów, które były podzielone na osobne znaczniki <code>, a także nie działało szukanie znaku & (ampersand w HTML-u). Po przebudowaniu mechanizmu wyszukiwania jest ok. Zrobiłem też jego refactoring.

Pozostało poprawić problemy wspomniane w poprzednim komentarzu. O ile pkt. 1, to kwestia techniczna, o tyle nie bardzo mam pomysł jak rozwiązać problem nr 2. Jakieś pomysły UX-owe? Ukrywać pozostałą część listy opcji, czy przewijać zasłonięty fragment znalezionej frazy?

[awaluk]

Ogólnie wrażenie pozytywne, fajnie sprawnie działa, kawał dobrej roboty.

• Zauważyłem, że wyszukiwarka ma jakiś problem z szukaniem/zaznaczaniem - szukam np. "tit" i zaznaczone rzeczy zupełnie nie pasują, jakby zaznaczało coś, co jest obok.
• Jakoś inaczej sygnalizowałbym sytuację, gdy nic nie zostało jeszcze wpisane, a inaczej gdy nic nie zostało znalezione. Chodzi mi o to, że jak wpisałem na początku jakąś frazę, która nie występuje to nie wiedziałem w sumie czy wyszukiwarka nie zadziałała czy po prostu nic nie znalazła. Może pokazać tam początkowo -/-, a gdy nic nie znajdzie to 0/0? Może coś na czerwono podświetlić jako brak wyników?
• Gdy przeklikałem się przez wystąpienia dla wyszukiwania literki "a" to coś było nie tak. Niby znalazł 32 przypadki, przy czym gdy byłem na 1 i klikałem strzałkę w górę, to liczba nie zmieniała się na 32, 31, tylko wskoczyło od razu 30 pomimo kliknięć.
• Gdy klikam przycisk "opcje" to ja bym oczekiwał, że otworzy się menu, niezależnie czy wyszukiwarka jest otwarta czy nie - w końcu to przycisk "opcje", a nie "zamknij wyszukiwarkę". Więc ja bym dał tak, że jeśli wyszukiwarka jest otwarta to ją zamykamy i otwieramy menu po tym jednym kliknięciu.

Opisane rzeczy w takiej kolejności pokazane na filmie, aby to było dobrze widać:

https://user-images.githubusercontent.com/13801608/127528047-a6787164-9ee0-4ae8-89b7-cc67f45e0c14.mp4

Tak już trochę czepiając się rzeczy wizualnych - czy przestrzeń pod polem szukania, ta z liczbą wystąpień i strzałkami nie jest za duża? Jakby się dało to ja bym ją dał w takiej samej wysokości jak input szukania (na żółto na screenie różnice wysokości). No i nad inputem jest odstęp, pod inputem i między sterowaniem jest, a już pod sterowaniem nie ma, tak trochę dziwnie chyba (na czerwono).

Zastanowiłbym się też czy aktualnie zaznaczone wystąpienie szukania jest dobrze widoczne. Jak wszystkie inne myślę że tak, ten pomarańczowy ładnie widać, tak to aktualne zaznaczone przerywanymi liniami dla mnie prawdę mówiąc nie było wcale widoczne, musiałem się przyjrzeć. Może aktualne powinno być zaznaczone takim pomarańczowym tłem, a pozostałe jakimś jaśniejszym?

[ScriptyChris]

Wprowadziłem poprawki do sugestii stąd.

[ScriptyChris]

Wprowadziłem poprawki w kontekście komentarza wyżej.

Co do nieprawidłowego wyszukiwania i oznaczani kolejnych wystąpień, to generalnie był problem z oznaczaniem fragmentów kodu, gdzie występowały znaki zarezerwowane w HTML-u, jak np. < oraz >. One docelowo były umieszczane jako odpowiadające im encje (które składają się z większej liczby znaków niż wyjściowo prezentowany znak), co powodowało nieprawidłowe przeliczanie znaków, a w konsekwencji oznaczanie innych niż szukane. Problemem było też to, że nie wszystkie znaki/fragmenty w bloczku są umieszczane w znaczniku <code>. Część z nich (np. spacje) są umieszczane bez znacznika (jako zwykły węzeł tekstowy), przez co nie można było w nich umieścić kodu HTML, co przekładało się na niemożność ich dekorowania.

Kolorystykę zaznaczania znalezionych oraz wybranych fragmentów dostosowałem inspirując się działaniem wyszukiwarki w przeglądarce Chrome i wydaje mi się, że widoczność poprawiła się.

Usunąłem opcję płynnego przewijania bloczka przy przechodzeniu między wystąpieniami, ponieważ wystąpiły problemy z synchronizacją danych (tj. odczyt obecnej pozycja scroll'a i jej przełożenie na umiejscowienie wybranego fragmentu szukanej frazy) w niektórych przypadkach, z uwagi na asynchroniczny charakter działania scroll'a z opcją smooth. Dodatkowo, dopasowanie pozycji wyszukiwarki względem znalezionego fragmentu (aby uniknąć jego zasłonięcia), w zależności od rozłożenia zawartości bloczka względem linii, czasem wymaga przewinięcia bloczka a czasem nie - wobec czego kod raz był wykonywany synchronicznie a raz asynchronicznie. Co prawda, ten problem udało mi się rozwiązać, lecz kod wydał mi się na tyle skomplikowany i skłonny do błędów, że zdecydowałem się na rezygnację z płynnego przewijania. Na usprawiedliwienie powiem, że Safari ma problem z tą opcją i wyszukiwarka Chrome (na której się trochę wzorowałem) nie przewija płynnie strony (przynajmniej domyślnie) przy przechodzeniu między wystąpieniami.

Usprawniłem też zapamiętywanie ostatnio szukanej i wybranej frazy - dopiero wyczyszczenie pola szukania resetuje wyszukiwarkę. Jest to przydatne, gdy ktoś niechcący zamknie wyszukiwarkę i, albo zapomniał czego konkretnie szuka, albo była to długa lub skomplikowana fraza.

Mam nadzieję, że całość już działa jak powinna.

[ScriptyChris]

Rozwiązałem konflikty blokujące merge.