@qumra/editor

Qumra's rich-text editor — TipTap 3 rebuilt on Qumra design tokens, Arabic-first (automatic RTL/LTR per paragraph, slash menu, find & replace, tables, resizable images, character count).

Kept as a separate package from @qumra/ui on purpose: TipTap pulls in 65 packages, and a page that only needs a button shouldn't carry a full editor.

Requirements

• React 19
• @qumra/ui (peer dependency — shared tokens and types)
• Tailwind CSS v4

Install & setup

npm i @qumra/editor @qumra/ui

@import "tailwindcss";
@import "@qumra/ui/tokens.css";
@import "@qumra/editor/editor.css";
@source "../node_modules/@qumra/ui/dist";
@source "../node_modules/@qumra/editor/dist";

Usage

The public API is exactly one component:

import { Editor } from '@qumra/editor'

<Editor
  content={html}
  onChange={setHtml}
  placeholder="Write the product description…"
  maxChars={5000}
  onPickImage={(insert) => openMediaLibrary(insert)}
/>

• basic — compact toolbar for narrow columns.
• locale — defaults to ar-EG.
• Content goes in and comes out as HTML.

All editor chrome (toolbar, bubble menu, slash menu) is styled with Qumra's semantic tokens, so it follows the host app's theme — including dark mode — with no extra configuration.