@brevitaz/brv-text-editor 1.1.2 → 1.2.0

package/README.md

@@ -1,7 +1,10 @@
-# brv-text-editor
+# @brevitaz/brv-text-editor
 
-A fully-functional React rich text editor and preview component inspired by Basecamp 3.
-Built on [Tiptap](https://tiptap.dev/) (ProseMirror) + [Lucide React](https://lucide.dev/) icons.
+A fully-featured React rich text editor and preview component built on [Tiptap](https://tiptap.dev/) (ProseMirror) + [Lucide React](https://lucide.dev/) icons.
+
+![Editor](./screenshots/editor.png)
+
+![Preview](./screenshots/preview.png)
 
 ---
 
@@ -16,20 +19,21 @@ Built on [Tiptap](https://tiptap.dev/) (ProseMirror) + [Lucide React](https://lu
 | **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) |
+| **History** | Undo / Redo |
 | **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 |
+| **Theming** | Built-in presets + full CSS variable customisation via `createTheme()` |
+| **Preview** | `RichTextPreview` renders saved HTML in a styled card with emoji reactions |
 
 ---
 
 ## Installation
 
 ```bash
-npm install brv-text-editor
+npm install @brevitaz/brv-text-editor
 ```
 
-> **Peer dependencies** – React 19 must already be installed in your project.
+> **Peer dependencies** — React 19 must already be installed in your project.
 > `react` and `react-dom` are **not** bundled inside the package.
 
 ```bash
@@ -45,13 +49,13 @@ npm install react react-dom
 
 ```js
 // main.jsx / main.tsx / _app.jsx
-import 'brv-text-editor/dist/brv-text-editor.css'
+import '@brevitaz/brv-text-editor/dist/brv-text-editor.css'
 ```
 
 ### 2. Use the editor
 
 ```jsx
-import { RichTextEditor } from 'brv-text-editor'
+import { RichTextEditor } from '@brevitaz/brv-text-editor'
 
 function MyPage() {
   const handleSave = (html) => {
@@ -74,16 +78,14 @@ function MyPage() {
 
 ```jsx
 import { useState } from 'react'
-import { RichTextEditor, RichTextPreview } from 'brv-text-editor'
-
-const AUTHOR = { name: 'Jane Doe', initials: 'JD', avatarColor: '#1a6b3c' }
+import { RichTextEditor, RichTextPreview } from '@brevitaz/brv-text-editor'
 
 function NotesPage() {
   const [notes, setNotes] = useState([])
 
   const handleSave = (html) => {
     setNotes(prev => [
-      { id: Date.now(), html, timestamp: new Date().toLocaleString() },
+      { id: Date.now(), html },
       ...prev,
     ])
   }
@@ -93,13 +95,7 @@ function NotesPage() {
       <RichTextEditor onSubmit={handleSave} submitLabel="Post" showActions />
 
       {notes.map(note => (
-        <RichTextPreview
-          key={note.id}
-          html={note.html}
-          author={AUTHOR}
-          timestamp={note.timestamp}
-          onDismiss={() => setNotes(n => n.filter(x => x.id !== note.id))}
-        />
+        <RichTextPreview key={note.id} html={note.html} />
       ))}
     </>
   )
@@ -124,6 +120,9 @@ function NotesPage() {
 | `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) |
+| `theme` | `string` | `'unleashteams'` | Built-in theme preset |
+| `themeVars` | `object` | `{}` | CSS variable overrides for custom theming |
+| `className` | `string` | `''` | Additional class for the root wrapper |
 
 #### Toolbar groups
 
@@ -168,184 +167,76 @@ Callouts are stored as `<div data-callout="type">` in the HTML output, so they r
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `html` | `string` | `''` | Raw HTML string to render |
-| `author` | `{ name, initials, avatarColor? }` | `{ name:'Anonymous', initials:'A' }` | Author info shown in the card header |
-| `timestamp` | `string` | `''` | Human-readable timestamp string |
-| `onDismiss` | `() => void` | — | If provided, shows a × button to remove the card |
 | `showReactions` | `boolean` | `true` | Whether to show the emoji reactions row |
 | `reactions` | `string[]` | `['👍','❤️','🎉','🙌']` | Emoji list for the reactions row |
+| `theme` | `string` | `'unleashteams'` | Built-in theme preset |
+| `themeVars` | `object` | `{}` | CSS variable overrides for custom theming |
 
 ---
 
-## Publishing for your company
-
-You have two options: a **private npm registry** (recommended) or a **direct Git dependency**.
-
----
-
-### Option A — Private npm registry (recommended)
-
-This is the cleanest approach. Developers run a single `npm install` and get the package like any other.
-
-#### Step 1 — Set up a registry
-
-Choose one:
-
-| Option | Notes |
-|---|---|
-| **GitHub Packages** | Free for private repos; scoped package (`@your-org/brv-text-editor`). Good if you already use GitHub. |
-| **npm private registry** | Paid; works with unscoped names. |
-| **Verdaccio** (self-hosted) | Free, runs on your own server/container. Full npm protocol compatible. |
-| **AWS CodeArtifact / JFrog** | Enterprise options; cost depends on usage. |
-
-#### Step 2 — Scope the package (recommended for private registries)
-
-In `package.json`, rename to a scoped name:
-
-```json
-{
-  "name": "@your-org/brv-text-editor"
-}
-```
-
-This prevents name collisions with the public registry.
-
-#### Step 3 — Authenticate and publish
-
-**GitHub Packages example:**
-
-```bash
-# 1. Create a Personal Access Token (PAT) with write:packages scope on GitHub
-
-# 2. Login to the GitHub registry
-npm login --registry=https://npm.pkg.github.com --scope=@your-org
-
-# 3. Build the library
-npm run build:lib
-
-# 4. Publish
-npm publish --registry=https://npm.pkg.github.com
-```
-
-**Verdaccio example:**
-
-```bash
-# 1. Start Verdaccio (or point to your hosted instance)
-npx verdaccio   # → http://localhost:4873
-
-# 2. Create an account (first time only)
-npm adduser --registry http://localhost:4873
-
-# 3. Build and publish
-npm run build:lib
-npm publish --registry http://localhost:4873
-```
-
-#### Step 4 — Configure developers' machines
+## Theming
 
-Developers need to tell npm where to find your scoped packages.
-Create or update `.npmrc` in their project (or the monorepo root):
+Every color, font, border, and spacing value is driven by a CSS custom property. Override them at any scope.
 
-```ini
-# .npmrc – checked into source control
-@your-org:registry=https://npm.pkg.github.com
-# or for Verdaccio:
-# @your-org:registry=http://your-verdaccio-host:4873
-```
-
-They also need to authenticate once:
+### Built-in presets
 
-```bash
-npm login --registry=https://npm.pkg.github.com --scope=@your-org
+```jsx
+<RichTextEditor theme="classic" />
 ```
 
-For CI/CD, use an automation token stored as a secret:
+### Custom overrides via props
 
-```ini
-# .npmrc in CI environment
-//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
-@your-org:registry=https://npm.pkg.github.com
+```jsx
+<RichTextEditor themeVars={{ '--rte-color-primary': '#7c3aed' }} />
 ```
 
-#### Step 5 — Developers install and use it
-
-```bash
-npm install @your-org/brv-text-editor
-```
+### Using `createTheme()`
 
 ```jsx
-import '@your-org/brv-text-editor/dist/brv-text-editor.css'
-import { RichTextEditor, RichTextPreview } from '@your-org/brv-text-editor'
+import { RichTextEditor, createTheme } from '@brevitaz/brv-text-editor'
+
+const myTheme = createTheme({
+  '--rte-color-primary':       '#7c3aed',
+  '--rte-btn-active-bg':       '#ede9fe',
+  '--rte-btn-active-color':    '#7c3aed',
+  '--rte-color-primary-hover': '#faf5ff',
+  '--rte-focus-border':        '#a78bfa',
+  '--rte-focus-ring':          'rgba(124, 58, 237, 0.18)',
+  '--rte-blockquote-border':   '#a78bfa',
+  '--rte-checkbox-accent':     '#7c3aed',
+  '--rte-selection-bg':        '#ede9fe',
+})
+
+<RichTextEditor themeVars={myTheme} />
 ```
 
-#### Step 6 — Publishing updates
-
-```bash
-# Bump the version (choose: patch | minor | major)
-npm version patch
-
-# Rebuild and publish
-npm run build:lib && npm publish --registry <your-registry-url>
-```
+### Available CSS variables
 
-Use semantic versioning:
-- `patch` (1.0.1) — bug fixes
-- `minor` (1.1.0) — new features, backwards-compatible
-- `major` (2.0.0) — breaking changes
+| Variable | Description |
+|---|---|
+| `--rte-color-primary` | Primary action color |
+| `--rte-color-primary-hover` | Primary hover state |
+| `--rte-btn-active-bg` / `--rte-btn-active-color` | Active button styling |
+| `--rte-surface` / `--rte-surface-toolbar` | Background colors |
+| `--rte-border` / `--rte-border-toolbar` | Border colors |
+| `--rte-text` / `--rte-text-muted` / `--rte-text-placeholder` | Text colors |
+| `--rte-code-bg` / `--rte-code-color` | Code styling |
+| `--rte-blockquote-border` / `--rte-blockquote-color` | Blockquote styling |
+| `--rte-checkbox-accent` | Task list checkbox color |
+| `--rte-focus-border` / `--rte-focus-ring` | Focus states |
+| `--rte-font-family` | Font stack |
+| `--rte-radius` / `--rte-radius-sm` / `--rte-radius-lg` | Border radii |
 
 ---
 
-### Option B — Git dependency (no registry needed)
-
-If you just want to share quickly within your organization without setting up a registry, push the repo to your internal Git host and developers install directly from Git:
+## Local development
 
 ```bash
-npm install git+https://github.com/your-org/brv-text-editor.git
-# or SSH:
-npm install git+ssh://git@github.com/your-org/brv-text-editor.git
-```
-
-**Important:** The `dist/` folder must be committed to the repo for this to work, because npm won't run `build:lib` automatically on install.
+# Start the demo app
+npm run dev
 
-```bash
-# Before pushing for the first time (and after each release):
+# Build the distributable library
 npm run build:lib
-git add dist/
-git commit -m "chore: rebuild dist for v1.0.x"
-git push
-```
-
-To pin to a specific version, use a tag:
-
-```bash
-# Tag a release
-git tag v1.0.1
-git push origin v1.0.1
-
-# Install that exact tag
-npm install git+https://github.com/your-org/brv-text-editor.git#v1.0.1
-```
-
----
-
-## Local development / testing the library
-
-```bash
-# In this repo — build the library and create a local link
-npm run build:lib
-npm link
-
-# In your consumer app's folder
-npm link brv-text-editor   # or @your-org/brv-text-editor
-```
-
-Or use `npm pack` to simulate exactly what gets published:
-
-```bash
-npm pack
-# → brv-text-editor-1.0.0.tgz
-
-# In your consumer app:
-npm install /path/to/brv-text-editor-1.0.0.tgz
 ```
 
 ---
@@ -354,16 +245,18 @@ npm install /path/to/brv-text-editor-1.0.0.tgz
 
 ```
 rich-text-editor/
-├── dist/                         ← Library output (git-ignored for private registry flow)
+├── dist/                         ← Library output
 │   ├── brv-text-editor.es.js     ← ES module bundle
 │   ├── brv-text-editor.umd.js    ← UMD/CJS bundle
 │   └── brv-text-editor.css       ← Extracted stylesheet
 ├── src/
 │   ├── index.js                  ← Library entry (exports both components)
-│   ├── index.css                 ← All styles (ProseMirror + preview)
+│   ├── index.css                 ← All styles (editor + preview)
 │   ├── components/
 │   │   ├── RichTextEditor.jsx    ← Editor component
 │   │   └── RichTextPreview.jsx   ← Preview card component
+│   ├── extensions/
+│   │   └── Callout.js            ← Custom callout block extension
 │   ├── App.jsx                   ← Demo application
 │   └── main.jsx                  ← Demo entry point
 ├── vite.config.js                ← Demo app Vite config
@@ -379,11 +272,11 @@ rich-text-editor/
 |---|---|
 | `npm run dev` | Start the demo app dev server |
 | `npm run build` | Build the demo app |
-| `npm run build:lib` | Build the distributable library → `dist/` |
+| `npm run build:lib` | Build the distributable library into `dist/` |
 | `npm run preview` | Preview the built demo app |
 
 ---
 
 ## License
 
-MIT
+MIT — [Brevitaz Systems](https://brevitaz.com)

package/dist/brv-text-editor.css

@@ -22,7 +22,7 @@
  *
  * ─────────────────────────────────────────────────────────────────────────── */
 
-/* Default theme — UnleashTeams teal/cyan palette */
+/* Default theme — Teal palette */
 .rte-root {
   /* ── Brand ───────────────────────────────────────────── */
   --rte-color-primary:        #065666;   /* primary CTA / active icon color   */
@@ -82,7 +82,7 @@
 }
 
 
-/* ─── Classic theme preset (warm Basecamp-inspired palette) ─────────────── */
+/* ─── Classic theme preset (warm earthy palette) ─────────────────────────── */
 .rte-root[data-rte-theme="classic"] {
   --rte-color-primary:        #1a6b3c;
   --rte-color-primary-hover:  #f0fdf4;

package/dist/brv-text-editor.es.js

@@ -23917,9 +23917,9 @@ const DEFAULT_TOOLBAR = {
   history: true
 };
 const RTE_THEMES = {
-  /** Default — UnleashTeams teal/cyan palette */
+  /** Default — Teal palette */
   unleashteams: {},
-  /** Warm Basecamp-inspired palette */
+  /** Warm earthy palette */
   classic: {
     "--rte-color-primary": "#1a6b3c",
     "--rte-color-primary-hover": "#f0fdf4",
@@ -24738,17 +24738,6 @@ function RichTextEditor({
     )
   );
 }
-function formatHtml(html) {
-  let indent = 0;
-  return html.replace(/></g, ">\n<").split("\n").map((line) => {
-    const closing = line.match(/^<\//);
-    const selfClose = line.match(/\/>$/) || line.match(/^<(br|hr|img|input)/);
-    if (closing) indent = Math.max(0, indent - 2);
-    const result = " ".repeat(indent) + line.trim();
-    if (!closing && !selfClose && line.match(/^<[^/]/)) indent += 2;
-    return result;
-  }).join("\n");
-}
 function EmojiReaction({ emoji: emoji2 }) {
   const [count, setCount] = useState(0);
   const [active, setActive] = useState(false);
@@ -24783,30 +24772,13 @@ function EmojiReaction({ emoji: emoji2 }) {
 }
 function RichTextPreview({
   html = "",
-  author = { name: "Anonymous", initials: "A", avatarColor: "#065666" },
-  timestamp = "",
-  onDismiss,
   showReactions = true,
   reactions = ["👍", "❤️", "🎉", "🙌"],
   theme = "unleashteams",
   themeVars = {}
 }) {
-  const [tab, setTab] = useState("preview");
   const presetVars = RTE_THEMES[theme] ?? {};
   const resolvedVars = { ...presetVars, ...themeVars };
-  const tabStyle = (active) => ({
-    padding: "6px 14px",
-    border: "none",
-    borderBottom: active ? "2px solid var(--rte-color-primary)" : "2px solid transparent",
-    background: "none",
-    cursor: "pointer",
-    fontSize: 13,
-    fontFamily: "var(--rte-font-family)",
-    fontWeight: active ? 600 : 400,
-    color: active ? "var(--rte-color-primary)" : "var(--rte-text-muted)",
-    transition: "color 0.15s, border-color 0.15s",
-    marginBottom: -1
-  });
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -24826,98 +24798,14 @@ function RichTextPreview({
       }
     },
     /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          padding: "14px 18px 0",
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "space-between",
-          gap: 10
-        }
-      },
-      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            width: 34,
-            height: 34,
-            borderRadius: "50%",
-            background: author.avatarColor ?? "var(--rte-color-primary)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: 13,
-            fontWeight: 700,
-            color: "#fff",
-            flexShrink: 0,
-            fontFamily: "var(--rte-font-family)"
-          }
-        },
-        author.initials
-      ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 14, fontWeight: 600, color: "var(--rte-text)", lineHeight: 1.3, fontFamily: "var(--rte-font-family)" } }, author.name), /* @__PURE__ */ React.createElement("div", { style: { fontSize: 11, color: "var(--rte-text-muted)", fontFamily: "var(--rte-font-family)" } }, timestamp))),
-      onDismiss && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          onClick: onDismiss,
-          title: "Dismiss",
-          style: {
-            border: "none",
-            background: "none",
-            cursor: "pointer",
-            color: "var(--rte-btn-disabled-color)",
-            fontSize: 20,
-            lineHeight: 1,
-            padding: "2px 4px",
-            borderRadius: "var(--rte-radius-sm)",
-            transition: "color 0.1s"
-          },
-          onMouseEnter: (e) => e.currentTarget.style.color = "var(--rte-text-muted)",
-          onMouseLeave: (e) => e.currentTarget.style.color = "var(--rte-btn-disabled-color)"
-        },
-        "×"
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          gap: 0,
-          padding: "10px 18px 0",
-          borderBottom: "1px solid var(--rte-border-toolbar)"
-        }
-      },
-      /* @__PURE__ */ React.createElement("button", { style: tabStyle(tab === "preview"), onClick: () => setTab("preview") }, "Preview"),
-      /* @__PURE__ */ React.createElement("button", { style: tabStyle(tab === "source"), onClick: () => setTab("source") }, "HTML source")
-    ),
-    tab === "preview" ? /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "rtp-content",
         dangerouslySetInnerHTML: { __html: html },
-        style: { padding: "18px 22px 20px" }
+        style: { padding: "14px 22px 20px" }
       }
-    ) : /* @__PURE__ */ React.createElement(
-      "pre",
-      {
-        style: {
-          margin: 0,
-          padding: "16px 18px",
-          fontSize: 12,
-          fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-all",
-          color: "var(--rte-text-muted)",
-          background: "var(--rte-surface-subtle)",
-          maxHeight: 320,
-          overflowY: "auto",
-          lineHeight: 1.6
-        }
-      },
-      formatHtml(html)
     ),
-    tab === "preview" && showReactions && reactions.length > 0 && /* @__PURE__ */ React.createElement(
+    showReactions && reactions.length > 0 && /* @__PURE__ */ React.createElement(
       "div",
       {
         style: {