{"_id":"@allem-ui/rich-text","name":"@allem-ui/rich-text","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@allem-ui/rich-text","version":"0.0.2","description":"Lightweight rich text editor for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/rich-text"},"keywords":["allem-ui","rich-text","editor","wysiwyg","contenteditable","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/rich-text@0.0.2","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-Wla2TuBIhZRKvx0fwMZoOY1ygv8TaUZMHqVeW+z0uTHWsvEnYX6WMaXGcFag3o52KbcMIVYHoHg8ejoTmpFa4g==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/9aff6e107907505e386e17a75f2fd0f8/allem-ui-rich-text-0.0.2.tgz","_from":"file:allem-ui-rich-text-0.0.2.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-Wla2TuBIhZRKvx0fwMZoOY1ygv8TaUZMHqVeW+z0uTHWsvEnYX6WMaXGcFag3o52KbcMIVYHoHg8ejoTmpFa4g==","shasum":"ac80504517e5977e011d55fbf27cb4f9e3278506","tarball":"https://registry.npmjs.org/@allem-ui/rich-text/-/rich-text-0.0.2.tgz","fileCount":8,"unpackedSize":137662,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBlMHUU9zqMAJduuIda5KQNKzdoyTC3+m0Vr7wxXEveFAiBY30OdRIqUQrx+DJGf8HB7AwDeiupEXuEOFMDCoyBYOg=="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rich-text_0.0.2_1779581032269_0.7418139010595373"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-24T00:03:52.090Z","0.0.2":"2026-05-24T00:03:52.414Z","modified":"2026-05-24T00:03:52.649Z"},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"description":"Lightweight rich text editor for Allem UI","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","rich-text","editor","wysiwyg","contenteditable","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/rich-text"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"license":"MIT","readme":"# @allem-ui/rich-text\n\nLightweight rich text editor for [Allem UI](https://github.com/kingofmit/allem-ui) — a zero-dependency WYSIWYG editor built on `contentEditable` with a formatting toolbar, keyboard shortcuts, and dark mode.\n\n## Install\n\n```bash\nnpm install @allem-ui/rich-text @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/rich-text\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport { RichTextEditor } from \"@allem-ui/rich-text\";\n\nfunction App() {\n  return (\n    <RichTextEditor\n      initialValue=\"<p>Hello world</p>\"\n      onChange={(html) => console.log(html)}\n      placeholder=\"Start writing...\"\n      minHeight={200}\n    />\n  );\n}\n```\n\n## Components\n\n### RichTextEditor\n\nAll-in-one editor combining the toolbar and content area.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `initialValue` | `string` | `\"\"` | Initial HTML content |\n| `onChange` | `(html: string) => void` | — | Called on content change |\n| `placeholder` | `string` | `\"Start writing...\"` | Placeholder text |\n| `readOnly` | `boolean` | `false` | Read-only mode |\n| `minHeight` | `number` | `120` | Minimum editor height (px) |\n| `maxHeight` | `number` | `400` | Maximum editor height (px) |\n| `hideToolbar` | `boolean` | `false` | Hide the formatting toolbar |\n| `className` | `string` | — | Additional CSS classes |\n\n### RichTextToolbar\n\nStandalone formatting toolbar — use with `useRichText` for custom layouts.\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `activeFormats` | `ActiveFormats` | Current active format states |\n| `onBold` | `() => void` | Toggle bold |\n| `onItalic` | `() => void` | Toggle italic |\n| `onUnderline` | `() => void` | Toggle underline |\n| `onStrikethrough` | `() => void` | Toggle strikethrough |\n| `onHeading` | `(level: 1\\|2\\|3) => void` | Toggle heading level |\n| `onOrderedList` | `() => void` | Toggle ordered list |\n| `onUnorderedList` | `() => void` | Toggle bullet list |\n| `onBlockquote` | `() => void` | Toggle blockquote |\n| `onCodeBlock` | `() => void` | Toggle code block |\n| `onLink` | `(url: string) => void` | Insert link |\n| `onRemoveLink` | `() => void` | Remove link |\n\n### RichTextContent\n\nStandalone editable content area — use with `useRichText` for custom layouts.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `editorRef` | `RefObject<HTMLDivElement>` | — | Ref from `useRichText` |\n| `initialValue` | `string` | `\"\"` | Initial HTML |\n| `placeholder` | `string` | `\"Start writing...\"` | Placeholder |\n| `readOnly` | `boolean` | `false` | Read-only mode |\n| `minHeight` | `number` | `120` | Min height (px) |\n| `maxHeight` | `number` | `400` | Max height (px) |\n| `onInput` | `() => void` | — | Input handler from hook |\n\n### useRichText\n\nHook for programmatic control and custom editor layouts.\n\n```tsx\nconst {\n  editorRef,           // Attach to contentEditable div\n  html,                // Current HTML string\n  activeFormats,       // { bold, italic, underline, ... }\n  handleInput,         // Input event handler\n  toggleBold,          // ⌘B\n  toggleItalic,        // ⌘I\n  toggleUnderline,     // ⌘U\n  toggleStrikethrough,\n  toggleOrderedList,\n  toggleUnorderedList,\n  toggleHeading,       // (level: 1 | 2 | 3)\n  toggleBlockquote,\n  toggleCodeBlock,\n  insertLink,          // (url: string)\n  removeLink,\n} = useRichText({\n  initialValue: \"<p>Hello</p>\",\n  onChange: (html) => save(html),\n});\n```\n\n## Formatting\n\n| Format | Toolbar | Keyboard Shortcut |\n|--------|---------|-------------------|\n| Bold | **B** | ⌘B / Ctrl+B |\n| Italic | *I* | ⌘I / Ctrl+I |\n| Underline | U | ⌘U / Ctrl+U |\n| Strikethrough | ~~S~~ | — |\n| Heading 1 | H1 | — |\n| Heading 2 | H2 | — |\n| Heading 3 | H3 | — |\n| Bullet List | • | — |\n| Numbered List | 1. | — |\n| Blockquote | \" | — |\n| Code Block | </> | — |\n| Link | 🔗 | — |\n\n## Features\n\n- Formatting toolbar with active state indicators\n- Keyboard shortcuts (⌘B, ⌘I, ⌘U)\n- Headings (H1, H2, H3)\n- Bullet and numbered lists\n- Blockquotes and code blocks\n- Link insertion with URL popover\n- Placeholder text when empty\n- Read-only mode\n- Auto-growing content area\n- Prose typography styling\n- Dark mode support\n- Zero dependencies — uses native `contentEditable` and `execCommand`\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-776b90559f7ed7d553667c196328a659"}