Texy Editor

Weby postavené na Nette často ukládají články, komentáře a popisy ve značkování Texy. Redaktor do formuláře píše text s hvězdičkami a uvozovkami a potřebuje lištu s tlačítky, náhled a dialog pro vložení obrázku. Texy Editor tohle dodá k obyčejnému poli textarea jedním řádkem JavaScriptu.

Nástupce Texyly bez jQuery

Texy je značkovací jazyk Davida Grudla, autora Nette. Proti Markdownu umí navíc modifikátory, podtržené nadpisy, obrázky s rozměry a českou typografii. Dosud se k němu používal editor Texyla Jana Marka, jenže stojí na jQuery a roky se nevyvíjí. Texy Editor je napsaný znovu v TypeScriptu a jádro nemá žádnou závislost za běhu. Do projektu tak nepřibude jQuery ani nic jiného, co by se muselo udržovat kvůli jednomu poli formuláře.

Co redaktor a vývojář dostanou

• Lišta, kterou jde poskládat. Tlačítka vkládají tučné písmo, kurzívu, nadpisy, seznamy, odkazy, obrázky, tabulky, kód, barvu textu, speciální znaky nebo zarovnání. Skupiny tlačítek i vlastní tlačítka se nastaví v konfiguraci.
• Náhled bez dotazu na server. Parser běží v prohlížeči, takže náhled se překreslí s nastavitelným zpožděním (výchozí 300 ms) a server se nezatěžuje. Kdo chce výstup přesně ze serverového Texy, nastaví adresu v previewPath.
• Tři pohledy. Úprava, náhled a rozdělený pohled vedle sebe, k tomu celá obrazovka na F11.
• Obrázky jako v textovém editoru. Dialog obrázku nastaví šířku, výšku, zarovnání, odkaz a popisek. Od verze 0.6.0 jde obrázek vložit ze schránky nebo přetáhnout myší; nahrání na server obstará vlastní funkce uploadHandler.
• Klávesnice. Ctrl+B, Ctrl+I, odsazení tabulátorem a historie kroků zpět s nastavitelným počtem kroků. Všechny zkratky jdou přemapovat.
• Vzhled webu. Světlý a tmavý motiv, barvy se mění přes proměnné CSS, takže editor převezme barvy webu bez přepisování stylů.
• Čeština v rozhraní. Rozhraní je česky a anglicky, další jazyk se doplní slovníkem.

Parser, typografie a pluginy

Parser TexyParser jde použít i bez editoru, třeba pro náhled komentáře jinde na stránce. Zvládá řádkové i blokové prvky Texy včetně tabulek, bloků kódu, citací, zkratek a modifikátorů tříd, stylů a identifikátorů. Z typografie převádí dvě pomlčky na půlovou, šipky typu --> na znak šipky, „10 x 20“ na „10×20“, „(c)“ na ©, tři tečky na výpustku a za jednopísmenné předložky vkládá nezlomitelnou mezeru.

Pět pluginů je přibaleno: vložení videa z YouTube, číslované smajlíky, značky BBCode, obrázek s odkazem a přesměrování odkazů ven přes vlastní adresu. Vlastní plugin se zapojí do tří fází zpracování: před parsováním, během řádkového průchodu a nad hotovým HTML. Vložené HTML chrání zástupnými značkami, aby ho další průchod nerozbil; README jako příklad ukazuje plugin, který ze zmínky @jméno udělá odkaz na profil.

Od verze 0.5.0 umí editor přepnout i na Markdown. Ten je v samostatném vstupu @nks-hub/texy-editor/markdown postaveném na knihovně markdown-it, která je jen volitelnou závislostí. Kdo Markdown nepotřebuje, nenese ho v balíku.

Kde se hodí

• Administrace webu na Nette, kde se obsah ukládá v Texy a dosud se psal přes Texylu.
• Diskuse a komentáře s náhledem příspěvku před odesláním, případně s BBCode a smajlíky přes pluginy.
• Formulář, kde si autor volí mezi Texy a Markdownem.

Bezpečnost výstupu

Parser escapuje text a odkazy s adresou javascript: zahodí, testy to hlídají zvlášť. Blok /--html ale podle syntaxe Texy propouští HTML beze změny. Kdo vykresluje text od cizích uživatelů, má výstup na serveru ještě vyčistit, nebo převod nechat serverovému Texy.

Stav a velikost

Poslední vydání je 0.6.1 z 9. srpna 2026. Balík obsahuje sestavení pro ES moduly i CommonJS a typové deklarace. Soubor texy-editor.js v něm má 95 kB, po kompresi gzip 22 kB, styly 10 kB. Samostatný vstup s Markdownem má 153 kB. Testů je podle README 677 a běží ve Vitestu. Číslo verze pod jedničkou znamená, že se nastavení může ještě měnit.

Jak začít

npm install @nks-hub/texy-editor

import { TexyEditor } from '@nks-hub/texy-editor';
import '@nks-hub/texy-editor/css';

const editor = new TexyEditor('#my-textarea', {
  language: 'cs',
  theme: 'light',
  livePreview: true,
});

Editor si lze vyzkoušet bez instalace na stránce s demem. Balík je na npm jako @nks-hub/texy-editor.

Zdrojový kód

Kód je na GitHubu v repozitáři nks-hub/texy-ts-editor pod licencí MIT.