customise-text-editor 1.0.0 → 1.0.2

package/README.md

@@ -4,13 +4,27 @@ A highly customizable, production-ready Rich Text Editor for React, powered by T
 
 ## 💎 Features
 
-- **3 Layout Modes**: `top-bar`, `bottom-bar`, and selection-triggered `bubble-only`.
-- **Dynamic Theming**: Full control over colors, borders, and radius via a single theme object.
-- **Rich Toolbar**: Bold, Italic, Underline, Lists, Links, Blockquotes, Code, and more.
-- **Built-in Color Pickers**: Real-time color selection for both text and highlights.
-- **Ultra-Lightweight**: Highly optimized modular architecture (every component < 60 lines).
-- **Responsive**: Horizontally scrollable toolbar with hidden scrollbars for mobile.
-- **Type-Safe**: Full TypeScript support out of the box.
+- **Rich Text Formatting**:
+  - `Bold`, `Italic`, `Underline`, `Strikethrough` - Essential text styling.
+  - `Code`, `Code Block` - Inline and multi-line code support with syntax highlighting.
+  - `Headings` (H1, H2, H3) - Structured hierarchy for your content.
+- **Advanced Tools**:
+  - `Links` - Easy URL management and persistent hyperlinks.
+  - `Text Color` & `Highlight` - Full spectrum color pickers for text and backgrounds.
+  - `Blockquote` - Stylish quote blocks.
+  - `Horizontal Rule` - Clean content separators.
+- **Layout & UX**:
+  - **Toolbar Placement**: Choose between `top-bar` or `bottom-bar` layout.
+  - **Floating Menu**: Optional bubble menu for quick styling on selection.
+  - **Responsive Design**: Mobile-friendly toolbar with smooth horizontal scrolling.
+- **Customization**:
+  - **Dynamic Theming**: Control primary colors, border styles, and border radius via a simple `theme` object.
+  - **Feature Toggling**: Choose exactly which tools to show using the `features` array.
+  - **Placeholders**: Custom placeholder text for empty states.
+- **Pro Features**:
+  - **Character Count**: Built-in tracking with optional character limits.
+  - **Undo/Redo**: Full history management.
+  - **Type Safety**: Built with TypeScript for 100% type coverage.
 
 ## 🚀 Installation
 
@@ -24,6 +38,7 @@ yarn add customise-text-editor
 
 ```tsx
 import { CustomEditor } from 'customise-text-editor';
+import 'customise-text-editor/style.css'; // Don't forget to import styles!
 
 function MyEditor() {
   return (
@@ -37,34 +52,63 @@ function MyEditor() {
         },
         layout: 'top-bar',
         placeholder: 'Start typing...',
-        features: ['bold', 'italic', 'underline', 'link', 'highlight', 'undo', 'redo']
+        features: ['bold', 'italic', 'underline', 'link', 'highlight', 'undo', 'redo'],
+        onChange: (content) => console.log(content)
       }}
     />
   );
 }
 ```
 
-## 🎨 Theme Configuration
+## 🛠️ Configuration (Props)
 
+The `CustomEditor` component accepts a `config` object with the following properties:
+
+### Main Config
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `layout` | `'top-bar' \| 'bottom-bar'` | Position of the toolbar. |
+| `features` | `string[]` | Array of tools to display (e.g., `['bold', 'italic', 'link']`). |
+| `theme` | `ThemeConfig` | Custom theme object (see section below). |
+| `title` | `string` | Optional editor title. |
+| `showTitle` | `boolean` | Toggle title visibility. |
+| `placeholder` | `string` | Custom placeholder text. |
+| `width` | `string \| number` | Number or string (e.g., `800` or `'100%'`). |
+| `maxLength` | `number` | Maximum character limit. |
+| `initialContent` | `string` | Initial HTML content for the editor. |
+| `onChange` | `(content: string) => void` | Callback when content changes (returns HTML). |
+| `onCharacterCountChange` | `(count: number) => void` | Callback when character count changes. |
+
+### 🎨 Theme Configuration
 | Property | Description | Default |
 | :--- | :--- | :--- |
 | `primaryColor` | Brand color for active states & borders | `#3b82f6` |
+| `secondaryColor` | Secondary brand color | - |
 | `backgroundColor` | Editor and toolbar background | `#ffffff` |
 | `textColor` | Main text color | `#0f172a` |
+| `accentColor` | Background for hovered buttons | `#f8fafc` |
 | `borderColor` | Border color for the container | `#e2e8f0` |
 | `borderRadius` | Main corner radius | `0.75rem` |
+| `fontFamily` | Custom font family | `'Inter', sans-serif` |
 
-## 🛠️ Props
+## 🛠️ Troubleshooting
 
-The `CustomEditor` component accepts a `config` object:
+### "Invalid hook call" or "Double React"
+If you encounter an "Invalid hook call" error while using `npm link`, it's likely because React is being loaded twice (once from your project and once from the library's `node_modules`).
 
-- `layout`: `'top-bar' | 'bottom-bar' | 'bubble-only'`
-- `features`: Array of tools to display (e.g., `['bold', 'italic', 'link']`)
-- `title`: Optional editor title
-- `showTitle`: Toggle title visibility
-- `placeholder`: Custom placeholder text
-- `width`: Number or string (e.g., `800` or `'100%'`)
+**Fix:** Update your project's `vite.config.ts` to alias React to your local version:
 
-## 📄 License
+```typescript
+// vite.config.ts
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'react': path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+    },
+  },
+});
+```
 
-MIT © [Your Name]