WaqfTech Markdown Editor
Lightweight Markdown editor with auto-formatting for Islamic texts and typography
RTL TypographyMarkdown EditorIslamic Formattingnpm Package
The Problem
Why This Was Built
Standard markdown editors treat Arabic as plain bidirectional text, lacking native handling of Quranic punctuation, Aya numbering brackets, and classical Arabic ligature abbreviations.
The Solution
The Architectural Answer
An intelligent editor with text replacement rules that automatically normalizes Quranic brackets, Hadith quotation marks, and typography on typing.
Capabilities
Key Features & Architecture
Two-row toolbar: standard markdown formatting plus dedicated Islamic text insertion
Automatic conversion of verse syntax to classical ornamental brackets ﴿ ... ﴾ and Hadith quotes « ... »
Guided surah and ayah search palette with autocomplete (/quran and \)
Semantic tag transformation for structured <aya ref="..."> and <hadith grading="..."> blocks
Direct insertion of Islamic honorific ligatures (ﷺ, ﷻ)
Clean export to standard Markdown, HTML, and print-ready PDF
Engineering
Technical Specifications
- Primary Languages
- TypeScriptReact
- Frameworks & Tooling
- ReactLucide IconsViteTailwind CSS
- Architecture & Execution Model
- Client-side typography transforms, Lucide UI, and zero server persistence
- Licensing Model
- WaqfDPL-Isnad 1.0 (waqf)
- Release & Lineage
- Active release cycle since 2026 · Maintained by @JadMadi
Knowledge
Frequently Asked Questions
Can I use this component in React projects?
Yes. Install `@waqftech/markdown-editor` with `pnpm add @waqftech/markdown-editor` and import `<WaqfEditor />`.