Zauważyłem to już jakiś czas temu ale dzisiaj znalazłem chwilkę żeby opisać.
Obecnie lista z użytkownikami która się pojawia po wpisaniu @ wyświetla się na dole pola z wprowadzaniem tekstu a powinna chyba pod samym polem, bo kiedy nam się pole rozciągnie, to może nam lista wyjechać poza ekran:
Chyba chodzi o to, że lista ma się wyświetlać pod kursorem pola tekstowego, zamiast pod <textarea>, prawda? Zostało to tak wykonane gdyż był problem z obliczeniem wysokości listy w px, na podstawie kursora w <textarea>. Ale jeżeli ktoś chciałby do tego tematu "przysiąść" to podsyłam linki do kodów:
Tutaj komponent do generowania i obsługi listy podpowiedzi: https://github.com/adam-boduch/coyote/blob/master/resources/js/components/forms/prompt.vue
Tutaj natomiast prezentacja samej listy: https://github.com/adam-boduch/coyote/blob/master/resources/js/components/forms/dropdown.vue
tzn temat wygląda na łatwy - wystarczy dołożyć element o tych samych stylach co textarea, ustalić font, max-width i white-space
temp1 = textarea
temp2 = div
temp2.style.maxWidth = temp1.clientWidth;
temp2.style.font = document.defaultView.getComputedStyle(temp1).font;
temp2.style.whiteSpace = 'pre';
temp2.style.opacity = 0;
temp2.style.position = 'absolute';
temp2.innerHTML = temp1.value.subtring(0, temp1.selectionEnd);
w momencie wyświetlania popupu wystarczy dać display na chwilę na block żeby wymiary się policzyły i w temp2.clientHeight mamy pozycję kursora w pionie. Gorzej by było z obliczeniem w poziomie, ale chyba nie potrzeba.
Pytanie czy w ogóle ta zmiana teraz ma sens bo @TomRiddle pracuje nad zmianą całego edytora
obscurity napisał(a):
Pytanie czy w ogóle ta zmiana teraz ma sens bo @TomRiddle pracuje nad zmianą całego edytora
Jeszcze nie podjąłem decyzji czy użyjemy istniejącego podpowiadania, czy napiszę nowe.
Nie twórzmy nowego komponentu dopóki jest to absolutnie konieczne! Lepiej zmodyfikować/rozwinąć już istniejący zamiast dublować funkcjonalność i kod.
Tylko należy pamiętać że komponent podpowiadający użytkowników używany jest w wielu miejscach, takich jak forum, mikroblogi, wiadomości prywatne, komentarze. Nie tylko przypisujemy go do <textarea> ale również do <input>.
w przypadku input nie trzeba liczyć, można zawsze wyświetlać pod spodem więc to nie problem
Poprawka została naniesiona. Testowane na Chrome oraz Firefox.
no i git, fajny pomysł z tym spanem dodanym na koniec
jedynie wizualnie moim zdaniem lepiej by wyglądało gdyby się pojawiało bliżej znaku "@", a nie za kursorem i trochę za nisko
Jak coś to załączam link do źródła: https://github.com/adam-boduch/coyote/blob/master/resources/js/libs/textarea.ts#L51
Może ktoś będzie chciał/miał pomysł jak ulepszyć ;)