Acum cateva zile a apărut știrea că Facebook a deschis biblioteca Lexical JavaScript, care furnizează componente pentru crearea de formulare web de editare de text avansată și editori de text pentru site-uri web și aplicații web.
În esență, Lexical este un motor de editare a textului, o platformă pentru a crea editori web bogati în funcții. În același timp, credem că utilizatorii nu ar trebui să rescrie aceeași funcționalitate de text îmbogățit din nou și din nou cu fiecare implementare. Lexical expune un set de pachete modulare individuale care pot fi folosite pentru a adăuga caracteristici comune precum liste, link-uri și tabele.
Calitățile distinctive ale bibliotecii sunt ușurință de integrare în site-uri, design compact, modularitate și suport pentru instrumente pentru persoanele cu dizabilități, cum ar fi cititoarele de ecran.
Lexical este un cadru de editor de text web JavaScript extensibil, cu accent pe fiabilitate, accesibilitate și performanță. Lexical își propune să ofere o experiență de dezvoltator de cea mai bună calitate, astfel încât să puteți prototipa cu ușurință și să construiți funcții cu încredere. Combinat cu o arhitectură extrem de extensibilă, Lexical le permite dezvoltatorilor să creeze experiențe unice de editare a textului, care cresc în dimensiune și funcționalitate.
Despre Lexical
Biblioteca este conceput pentru a fi ușor de conectat și nu depinde de cadre web externe, dar oferă legături ieșite din cutie pentru o integrare ușoară cu cadrul React.
Pentru a utiliza Lexical, pur și simplu legați o instanță a editorului de elementul care este editat, după care, în timpul procesului de editare, puteți controla starea editorului prin procesarea comenzilor și a evenimentelor. Biblioteca permite utilizatorului să poată ține evidența stărilor editorului în orice moment și să reflecte modificările din DOM pe baza calculului diferențelor dintre stări.
Puteți crea formulare pentru introducerea de text simplu fără marcare, precum și să creați interfețe pentru editarea vizuală a documentelor care seamănă cu procesoarele de text și oferă caracteristici precum inserarea de tabele, imagini și liste, manipularea fonturilor și controlul alinierii textului.
Dezvoltatorul are capacitatea de a suprascrie comportamentul editorului sau conectați controlere pentru a implementa funcționalități atipice.
Dintre caracteristici care ies în evidență de Lexical, sunt menționate următoarele:
- Lexical este alcătuit din instanțe de editor care sunt atașate unui singur element de conținut editabil. Un set de stări ale editorului reprezintă stările curente și în așteptare ale editorului la un moment dat.
- Lexical este conceput pentru toată lumea. Urmează cele mai bune practici stabilite în WCAG și este compatibil cu cititoarele de ecran și alte tehnologii de asistență.
- Lexical este minim. Nu se adresează în mod direct componentelor interfeței cu utilizatorul, barelor de instrumente sau caracteristicilor text îmbogățit și reducerilor. Logica pentru aceste funcții poate fi inclusă printr-o interfață de plugin
Cadrul de bază al bibliotecii conține setul minim necesar de componente, a căror funcționalitate este extinsă prin conectarea pluginurilor. De exemplu, prin pluginuri, puteți conecta elemente suplimentare de interfață, panouri, instrumente pentru editare vizuală în modul WYSIWYG, suport pentru formatul Markdown sau componente pentru lucrul cu anumite tipuri de conținut, precum liste și tabele.
Sub formă de pluginuri, sunt disponibile și funcții precum introducerea de completare automată, limitarea dimensiunii maxime a datelor de intrare, deschiderea și salvarea fișierelor, atașarea notelor/comentariilor, introducerea vocală etc.
În sfârșit, merită menționat că în prezent, Lexical este în curs de dezvoltare devreme și este posibil ca API-urile și pachetele să se schimbe destul de des. Codul este scris în JavaScript și este distribuit sub licența MIT.
Au fost pregătite mai multe demonstrații interactiv pentru a vă familiariza cu posibilitățile bibliotecii și puteți consulta una dintre eles în linkul următor.
Dacă doriți să aflați mai multe despre aceasta, puteți consulta detalii în următorul link.