@brevitaz/brv-text-editor 1.0.0 → 1.1.0

package/README.md

@@ -13,9 +13,11 @@ Built on [Tiptap](https://tiptap.dev/) (ProseMirror) + [Lucide React](https://lu
 | **Headings** | H1, H2, H3 via dropdown |
 | **Lists** | Bullet, numbered, task (checkbox) lists |
 | **Blocks** | Blockquote, fenced code block, horizontal rule |
+| **Callouts** | 6 themed callout blocks — Info, Success, Warning, Danger, Tip, Note |
 | **Alignment** | Left, center, right text alignment |
 | **Media** | Insert links (with edit/remove popover) and images by URL |
 | **History** | Undo / Redo (⌘Z / ⌘⇧Z) |
+| **Configurable toolbar** | Enable/disable toolbar groups via the `toolbar` prop |
 | **Word count** | Live character and word count in the footer |
 | **Preview** | `RichTextPreview` renders saved HTML in a Basecamp-style card with tabbed source view and emoji reactions |
 
@@ -27,7 +29,7 @@ Built on [Tiptap](https://tiptap.dev/) (ProseMirror) + [Lucide React](https://lu
 npm install brv-text-editor
 ```
 
-> **Peer dependencies** – React 18+ must already be installed in your project.
+> **Peer dependencies** – React 18 or 19 must already be installed in your project.
 > `react` and `react-dom` are **not** bundled inside the package.
 
 ```bash
@@ -121,6 +123,45 @@ function NotesPage() {
 | `showActions` | `boolean` | `true` | Whether to show the footer Save/Cancel bar |
 | `minHeight` | `number` | `140` | Minimum editor height in pixels |
 | `autofocus` | `boolean` | `false` | Whether to focus the editor on mount |
+| `toolbar` | `object` | `DEFAULT_TOOLBAR` | Toggle toolbar groups (see below) |
+
+#### Toolbar groups
+
+The `toolbar` prop accepts a partial object. Omitted keys default to `true`.
+
+```jsx
+// Show only formatting and callouts
+<RichTextEditor toolbar={{ headings: false, alignment: false, lists: false, blocks: false, media: false, history: false }} />
+
+// Hide callouts only
+<RichTextEditor toolbar={{ callouts: false }} />
+```
+
+| Group | Controls |
+|---|---|
+| `headings` | H1 / H2 / H3 dropdown |
+| `formatting` | Bold, italic, underline, strikethrough, inline code |
+| `alignment` | Left, center, right text alignment |
+| `lists` | Bullet, numbered, task lists |
+| `blocks` | Blockquote, code block, horizontal rule |
+| `callouts` | Callout block dropdown (info, success, warning, danger, tip, note) |
+| `media` | Link and image insert |
+| `history` | Undo / redo |
+
+#### Callout blocks
+
+Six themed callout variants are available via the callout dropdown button in the toolbar. Each callout renders as a colored left-bordered block:
+
+| Type | Color | Use case |
+|---|---|---|
+| `info` | Blue | General information |
+| `success` | Green | Positive outcomes |
+| `warning` | Amber | Caution / attention |
+| `danger` | Red | Critical / breaking |
+| `tip` | Purple | Helpful hints |
+| `note` | Gray | Supplementary notes |
+
+Callouts are stored as `<div data-callout="type">` in the HTML output, so they render correctly in `RichTextPreview` as well.
 
 ### `<RichTextPreview />`
 

package/dist/brv-text-editor.css

@@ -253,6 +253,66 @@ body {
   color: var(--rte-text-muted);
 }
 
+/* ─── Callout blocks ────────────────────────────────────────────────────── */
+
+.rte-root .ProseMirror .rte-callout,
+.rte-root .rtp-content .rte-callout {
+  border-left: 4px solid var(--_callout-color, #64748b);
+  background: var(--_callout-bg, #f8fafc);
+  border-radius: 0 var(--rte-radius) var(--rte-radius) 0;
+  padding: 12px 16px;
+  margin: 0.5em 0;
+  position: relative;
+}
+
+.rte-root .ProseMirror .rte-callout p:last-child,
+.rte-root .rtp-content .rte-callout p:last-child {
+  margin-bottom: 0;
+}
+
+/* Info — blue */
+.rte-root .ProseMirror .rte-callout--info,
+.rte-root .rtp-content .rte-callout--info {
+  --_callout-color: #2563eb;
+  --_callout-bg:    #eff6ff;
+}
+
+/* Success — green */
+.rte-root .ProseMirror .rte-callout--success,
+.rte-root .rtp-content .rte-callout--success {
+  --_callout-color: #16a34a;
+  --_callout-bg:    #f0fdf4;
+}
+
+/* Warning — amber */
+.rte-root .ProseMirror .rte-callout--warning,
+.rte-root .rtp-content .rte-callout--warning {
+  --_callout-color: #d97706;
+  --_callout-bg:    #fffbeb;
+}
+
+/* Danger — red */
+.rte-root .ProseMirror .rte-callout--danger,
+.rte-root .rtp-content .rte-callout--danger {
+  --_callout-color: #dc2626;
+  --_callout-bg:    #fef2f2;
+}
+
+/* Tip — purple */
+.rte-root .ProseMirror .rte-callout--tip,
+.rte-root .rtp-content .rte-callout--tip {
+  --_callout-color: #7c3aed;
+  --_callout-bg:    #faf5ff;
+}
+
+/* Note — gray */
+.rte-root .ProseMirror .rte-callout--note,
+.rte-root .rtp-content .rte-callout--note {
+  --_callout-color: #64748b;
+  --_callout-bg:    #f8fafc;
+}
+
+
 /* Placeholder */
 .rte-root .ProseMirror p.is-editor-empty:first-child::before {
   color: var(--rte-text-placeholder);