customise-text-editor 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# Customise Text Editor 🚀
+
+A highly customizable, production-ready Rich Text Editor for React, powered by Tiptap and Lucide Icons. Designed for developers who need full control over their editor's look, feel, and features without the bloat.
+
+## 💎 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.
+
+## 🚀 Installation
+
+```bash
+npm install customise-text-editor
+# or
+yarn add customise-text-editor
+```
+
+## 💻 Usage
+
+```tsx
+import { CustomEditor } from 'customise-text-editor';
+
+function MyEditor() {
+  return (
+    <CustomEditor
+      config={{
+        theme: {
+          primaryColor: '#3b82f6',
+          backgroundColor: '#ffffff',
+          textColor: '#1e293b',
+          borderRadius: '12px'
+        },
+        layout: 'top-bar',
+        placeholder: 'Start typing...',
+        features: ['bold', 'italic', 'underline', 'link', 'highlight', 'undo', 'redo']
+      }}
+    />
+  );
+}
+```
+
+## 🎨 Theme Configuration
+
+| Property | Description | Default |
+| :--- | :--- | :--- |
+| `primaryColor` | Brand color for active states & borders | `#3b82f6` |
+| `backgroundColor` | Editor and toolbar background | `#ffffff` |
+| `textColor` | Main text color | `#0f172a` |
+| `borderColor` | Border color for the container | `#e2e8f0` |
+| `borderRadius` | Main corner radius | `0.75rem` |
+
+## 🛠️ Props
+
+The `CustomEditor` component accepts a `config` object:
+
+- `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%'`)
+
+## 📄 License
+
+MIT © [Your Name]

package/dist/customise-text-editor.css

@@ -0,0 +1,2 @@
+:root{--cte-primary:#3b82f6;--cte-primary-foreground:#fff;--cte-background:#fff;--cte-foreground:#0f172a;--cte-muted:#f1f5f9;--cte-muted-foreground:#64748b;--cte-border:#e2e8f0;--cte-accent:#f8fafc;--cte-accent-foreground:#0f172a;--cte-radius:.75rem;--cte-font-family:"Inter", system-ui, sans-serif;--cte-shadow-sm:0 1px 2px 0 #0000000d;--cte-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--cte-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a}.cte-editor-container{background-color:var(--cte-background);color:var(--cte-foreground);border:1px solid var(--cte-border);border-radius:var(--cte-radius);font-family:var(--cte-font-family);width:var(--cte-width,100%);max-width:100%;box-shadow:var(--cte-shadow);flex-direction:column;margin:0 auto;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.cte-editor-container:focus-within{border-color:var(--cte-primary);box-shadow:0 0 0 2px #3b82f61a, var(--cte-shadow-md)}.cte-title-bar{border-bottom:1px solid var(--cte-border);background-color:var(--cte-background);color:var(--cte-text);padding:1rem 1.25rem;font-size:1.125rem;font-weight:600}.cte-title-input{color:inherit;border:none;border-bottom:1px solid var(--cte-border);background-color:#0000;outline:none;padding:1rem 1.25rem;font-size:1.25rem;font-weight:700}.cte-title-input::placeholder{color:var(--cte-muted-foreground);opacity:.5}.cte-toolbar{border-bottom:1px solid var(--cte-border);background-color:var(--cte-background);white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex;overflow-x:auto}.cte-toolbar.cte-bottom{border-bottom:none;border-top:1px solid var(--cte-border)}.cte-toolbar::-webkit-scrollbar{display:none}.cte-toolbar-group{border-right:1px solid var(--cte-border);align-items:center;gap:.25rem;padding-right:.5rem;display:flex}.cte-toolbar-group:last-child{border-right:none}.cte-toolbar-btn{background-color:var(--cte-toolbar-btn-bg,transparent);width:2rem;height:2rem;color:var(--cte-foreground);cursor:pointer;border:none;border-radius:.375rem;justify-content:center;align-items:center;transition:all .2s;display:inline-flex}.cte-toolbar-btn:hover{background-color:var(--cte-accent)}.cte-toolbar-btn:active,.cte-toolbar-btn.is-active{background-color:var(--cte-primary);color:var(--cte-primary-foreground);transform:scale(.95)}.cte-toolbar-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.cte-toolbar-btn svg{width:1.25rem;height:1.25rem}.cte-color-swatch{border:1px solid #0000001a;border-radius:50%;width:.875rem;height:.875rem;transition:transform .2s}.cte-toolbar-btn:hover .cte-color-swatch{transform:scale(1.2)}.cte-content-area{cursor:text;outline:none;min-height:200px;padding:1.5rem 1.25rem}.ProseMirror{outline:none}.ProseMirror p{margin-bottom:.75rem}.ProseMirror blockquote{border-left:3px solid var(--cte-primary);color:var(--cte-muted-foreground);margin:1rem 0;padding-left:1rem;font-style:italic}.ProseMirror pre{background:var(--cte-muted);color:var(--cte-foreground);border:1px solid var(--cte-border);border-radius:.5rem;padding:1rem;font-family:Fira Code,monospace;overflow-x:auto}.cte-footer{color:var(--cte-muted-foreground);background-color:var(--cte-muted);border-top:1px solid var(--cte-border);justify-content:flex-end;padding:.5rem 1rem;font-size:.75rem;display:flex}.cte-char-limit-bar{background-color:var(--cte-primary);height:2px;transition:width .3s}.cte-content-area::-webkit-scrollbar{width:6px}.cte-content-area::-webkit-scrollbar-track{background:0 0}.cte-content-area::-webkit-scrollbar-thumb{background:var(--cte-muted-foreground);border-radius:3px}.cte-content-area::-webkit-scrollbar-thumb:hover{background:var(--cte-primary)}
+/*$vite$:1*/