jadmadi.net Crosscurrent Code
Islamic Tech & Waqf In Development v1.2.0 2026 WaqfDPL-Isnad 1.0

WaqfTech Markdown Editor

by @JadMadi

Lightweight React markdown editor with natural Arabic Islamic typography and guided Quran insertion

React ComponentTypeScriptRTL TypographyIslamic FormattingComark Enginenpm Package
WaqfTech Markdown Editor editorial woodblock artwork
WaqfTech Markdown Editor Islamic Tech & Tools · 2026
Linux & macOS
pnpm add @waqftech/markdown-editor comark @comark/react lucide-react
Windows (PowerShell)
pnpm add @waqftech/markdown-editor comark @comark/react lucide-react
Domain Islamic Tech & Waqf
Languages TypeScript, React, CSS
License WaqfDPL-Isnad 1.0
Status In Development
Visit Website / Platform GitHub Repository Documentation Package / Registry Agent .md Share on 𝕏
The Problem

Why This Was Built

Standard markdown editors treat Arabic as plain bidirectional text, lacking native handling of Quranic punctuation, Aya numbering brackets, Hadith quotation conventions, and classical Arabic ligature abbreviations.

The Solution

The Architectural Answer

An intelligent React editor with real-time text normalization that formats Quranic verse brackets ﴿ ﴾, Hadith quotation marks « », and honorific ligatures on typing, paired with a guided surah and ayah lookup palette.

Capabilities

Key Features & Architecture

Two-row modular toolbar: standard markdown formatting plus dedicated Islamic text insertion
Automatic conversion of verse syntax to classical ornamental brackets ﴿ ... ﴾ and Hadith quotes « ... »
Guided interactive Quran search palette (/quran and \) with single ayah, range, or full surah insertion
Cursor-following floating popover positioning using mirror-div caret calculation
Semantic tag transformation for structured <aya ref="..."> and <hadith grading="..."> blocks
Direct insertion of classical Islamic honorific ligatures (ﷺ, ﷻ, ﷽, ۞, ﷲ)
Built-in safe renderer (DefaultMarkdownRenderer) powered by Comark with Edit/Preview toggling
Auto-expanding textarea height with customizable minimum and maximum bounds
Engineering

Technical Specifications

Primary Languages
TypeScriptReactCSS
Frameworks & Tooling
ReactComarkLucide IconsViteTailwind CSS
Architecture & Execution Model
Client-side typography transforms, two-row modular toolbar, Comark AST pipeline, 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 along with peer dependencies (comark, @comark/react, lucide-react) using pnpm add @waqftech/markdown-editor comark @comark/react lucide-react, import the stylesheet @waqftech/markdown-editor/styles.css, and render <MarkdownField />.

Does it support Quran verse search offline or via API?

It supports both: direct syntax lookup like /quran 1:2 and a guided search palette powered by the high-performance kv-quran edge API on Cloudflare Workers.

What license governs this package?

It is released under the Waqf Digital Public License (WaqfDPL-Isnad 1.0), dedicated as continuous digital endowment (Waqf) for the sake of Allah with attribution required.