Korzystanie z Internetu to nie tylko scrollowanie, ale też w dużej mierze wprowadzanie tekstu do różnych pól. Dzisiejsze aplikacje webowe często idą jeszcze dalej i pozwalają edytować całe dokumenty, arkusze lub prezentacje. Inne pozwalają pisać kod, rozmawiać na czacie czy pisać e-maile. A dzięki nowoczesnym technologiom możemy pisać – albo wprowadzać tekst – na wiele sposobów wykraczających poza zwykłe klepanie w klawiaturę.
Mimo zaistnienia wielu nowoczesnych aplikacji webowych leżąca u podstaw technologia nie zmieniła się specjalnie od czasów początków WWW. Elementy HTML, takie jak input i textarea to nadal główne sposoby wprowadzania tekstu i działają one świetnie. Dla bardziej zaawansowanych przypadków użycia deweloperzy mogą wykorzystać atrybut contenteditable, który obsługuje wprowadzanie sformatowanego (bogatego) tekstu. Te podstawowe narzędzia do edycji tekstu są potężne, ale tworzenie zaawansowanych doświadczeń nadal wiąże się z wieloma wyzwaniami i nieraz wymaga niezbyt idealnych obejść.
Twórcy przeglądarki Microsoft Edge zdają sobie sprawę z tych wyzwań i pracują z partnerami, aby uczynić edytowanie tekstu w przeglądarce lepszym doświadczeniem dla każdego. Zespół podzielił się szczegółami na temat ostatnich udoskonaleń wprowadzonych do Edge oraz platformy webowej, takich jak:
- Przepisywanie tekstu z AI.
- Pisanie piórem cyfrowym bezpośrednio na stronie internetowej.
- Budowanie edytorów tekstu obsługujących zaawansowane powierzchnie edycji tekstu.
- Kopiowanie i wklejanie HTML.
- Wykrywanie wspieranych formatów schowka.
- Kontrolowanie funkcji przewidywania tekstu.
Przepisywanie tekstu z Microsoft Copilot
Począwszy od wersji 124, oparta na AI funkcja "Redagowanie" stała się dostępna na stronach, w obszarach edycji tekstu wewnątrz dokumentu. Zaznacz sekcję tekstu w polu edycji i kliknij ikonę Copilota, aby przeredagować tę sekcję z wykorzystaniem różnych propozycji wygenerowanych przez AI. U nas jeszcze ta funkcjonalność nie jest dostępna.
Możesz zmienić ton, format i długość tekstu w zależności od potrzeb. Dostęp do Copilota wewnątrz pól edycji tekstu pomoże zaoszczędzić czas, dotychczas potrzebny na kopiowanie i wklejanie tekstu z pól do Copilota na pasku bocznym i w drugą stronę. Nie wszystkie powierzchnie edycji tekstu potrzebują tej funkcji, dlatego zespół Microsoft Edge wprowadził też atrybut writingsuggestions, który pozwala ją wyłączyć.
Pisanie w dowolnym polu tekstowym za pomocą cyfrowego pióra
Windows Ink pozwala wprowadzać odręcznie tekst do pól tekstowych na stronach na urządzeniach z systemem Windows i ekranem dotykowym. Microsoft Edge obsługuje teraz Windows Ink w miejscach, takich jak elementy textarea, elementy input, elementy z atrybutem contenteditable oraz pasek adresu przeglądarki. Możesz dzięki temu:
- Wprowadzać tekst, pisząc piórem dotykowym w lub obok pola wprowadzania.
- Usuwać tekst, przekreślając słowa.
- Dodawać i usuwać spacje, rysując pionowe linie w tekście.
- Dodawać podział wiersza, rysując poziome linie.
Możesz włączać/wyłączać tę funkcję w ustawieniach edge://settings/content/HandwritingToText.
Budowanie edytorów tekstu obsługujących zaawansowane powierzchnie edycji tekstu
Dzisiejsze techniki edycji tekstu w sieci web utrudniają rzeczywiste oddzielenie logiki wprowadzania tekstu od logiki renderowania tekstu. Niestandardowe edytory tekstu zwykle muszą używać ukrytego elementu, który używa atrybutu contenteditable, aby rejestrować zdarzenia wprowadzania tekstu, a następnie oddzielnie od tego renderować tekst, co często prowadzi do problemów z dostępnością.
Aby temu zaradzić, Microsoft wprowadził EditContext API do Chromium, by umożliwić tworzenie niestandardowych edytorów tekstu z obsługą zaawansowanych metod wprowadzania i uniknąć pokrętnych rozwiązań. API jest dostępny w Edge, począwszy od wersji 121, oraz w innych przeglądarkach opartych na Chromium.
Przy pomocy EditContext API deweloperzy mogą otrzymywać zdarzenia wprowadzania tekstu bezpośrednio z powierzchni API, co usuwa niepotrzebną złożoność kodu, zwiększa dostępność i pozwala deweloperom tworzyć własne, niestandardowe widoki edytowanego tekstu. Przykładowo możesz użyć tego API, aby renderować edytowany tekst w elemencie <canvas>. API wspiera powierzchnie UI edycji tekstu, za pomocą których użytkownik może tworzyć tekst na poziomie systemu operacyjnego, np. okna dialogowe edytora IME. Obsługuje nawet Windows Ink.
Kopiowanie i wklejanie HTML
Aplikacje webowe z edycją tekstu zwykle trafiają na problemy ze schowkiem podczas kopiowania zawartości sformatowanej w HTML. Czasami formatowanie jest tracone, a innym razem payload schowka jest bardziej skomplikowany, niż powinien. Aby temu zaradzić, Microsoft wprowadza opcję unsanitized do metody navigator.clipboard.read(), pozwalającą aplikacjom webowym wybrać, kiedy chcą otrzymywać pełną zawartość HTML, a kiedy zawartość oczyszczoną przez przeglądarkę.
API ten pomógł już Microsoftowi ulepszyć Excel Online, rozwiązując poważne problemy z kopiowaniem i wklejaniem, jakie występowały w tej aplikacji. Gigant dostarczył to API do Chromium, udostępniając je wszystkim opartym na nim przeglądarkom, w tym Microsoft Edge, począwszy od wersji 122.
Wykrywanie wspieranych formatów schowka
Przy zapisywaniu danych do systemowego schowka przy pomocy Clipboard API deweloperzy webowi nie mają sposobu, by sprawdzić, czy dane, które próbują zapisać, są obsługiwane. Oznacza to, że muszą najpierw zapisać dane do schowka i następnie sprawdzić, czy operacja zapisu zakończyła się niepowodzeniem z powodu nieobsługiwanego formatu danych.
Prowadzi to do większej złożoności kodu i niepotrzebnego kosztu w cyklach CPU. Aby temu zaradzić, Microsoft dodał nową metodę statyczną do interfejsu ClipboardItem o nazwie supports(), która umożliwia wykrycie obsługiwanych formatów schowka przed próbą zapisu danych. Przykładowo, aby sprawdzić, czy mime-type text/html jest wspierany, użyj ClipboardItem.supports("text/html"). Ta nowa metoda pojawiła się w Edge 121 i jest też dostępna w innych przeglądarkach Chromium.
Kontrolowanie funkcji przewidywania tekstu
Jak wspomnieliśmy wcześniej, Edge pozwala Ci sparafrazować tekst za pomocą wewnętrznej funkcji "Redagowanie". Edge może też przewidywać tekst w trakcie Twojego pisania za pomocą funkcji przewidywania tekstu. Pozwala to pisać szybciej dzięki sugestiom dopełniającym zdania.
Twórcy przeglądarki zdają sobie sprawę, że nie wszystkie powierzchnie edycji tekstu w sieci chcą dostępności przewidywania i redagowania tekstu przez cały czas. Dlatego, począwszy od Edge 124, dostępny jest nowy atrybut HTML o nazwie writingsuggestions. Za jego pomocą możesz wyłączyć prognozowanie i redagowanie tekstu w dowolnym elemencie edytora.
Atrybut writingsuggestions jest teraz częścią bazy kodu Chromium, przez co jest dostępny dla wszystkich opartych na nim przeglądarek. Ponieważ jednak Microsoft Edge jest teraz jedyną przeglądarką z dostępem do tych funkcji prognozowania i redagowania tekstu, atrybut nie ma praktycznego zastosowania w innych przeglądarkach.
Źródło: https://blogs.windows.com/msedgedev/2024/04/23/improving-text-editing-on-the-web/
341f31d.png)