Recipes

Every demo below is the real Web Component. Editing logs the emitted change detail ({ json, isEmpty }). The Hijri date-picker popover is enabled because @spezutil/hijri-datepicker is loaded on this page.

Default editor

Full toolbar, direction auto-detected per paragraph — type Arabic and Latin text to see it switch.

Loading demo…

Arabic toolbar, RTL

locale="ar" localizes the toolbar; dir="rtl" mirrors it and sets the base direction.

Loading demo…

Dawat content blocks

Pre-loaded via initialHtml with an ayat block, a transliteration pair, and a Hijri date token. Try the toolbar ۞, ت/t, and 📅 buttons to insert more.

Loading demo…

Minimal toolbar

toolbar="history,inline" keeps only undo/redo and inline formatting.

Loading demo…

Read-only

readonly disables editing and hides the toolbar — a lossless renderer for saved content.

Loading demo…