customise-text-editor 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +156 -45
- package/dist/customise-text-editor.es.js +139 -14578
- package/dist/customise-text-editor.umd.js +73 -139
- package/dist/index.d.ts +38 -0
- package/package.json +7 -15
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 kanhaiya-dct
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,70 +1,181 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# 💎 Customise-Text-Editor
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/customise-text-editor)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://bundlephobia.com/package/customise-text-editor)
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
- **Dynamic Theming**: Full control over colors, borders, and radius via a single theme object.
|
|
9
|
-
- **Rich Toolbar**: Bold, Italic, Underline, Lists, Links, Blockquotes, Code, and more.
|
|
10
|
-
- **Built-in Color Pickers**: Real-time color selection for both text and highlights.
|
|
11
|
-
- **Ultra-Lightweight**: Highly optimized modular architecture (every component < 60 lines).
|
|
12
|
-
- **Responsive**: Horizontally scrollable toolbar with hidden scrollbars for mobile.
|
|
13
|
-
- **Type-Safe**: Full TypeScript support out of the box.
|
|
9
|
+
**A highly customizable, production-ready Rich Text Editor for React, built on the solid foundation of Tiptap.**
|
|
14
10
|
|
|
15
|
-
|
|
11
|
+
---
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
## ✨ Features at a Glance
|
|
15
|
+
|
|
16
|
+
| Feature | Description |
|
|
17
|
+
| :--- | :--- |
|
|
18
|
+
| 🎨 **Premium UI** | Modern, sleek design with smooth transitions and glassmorphism support. |
|
|
19
|
+
| 🔢 **Real-time Stats** | Automatic footer with character counting when `maxLength` is enabled. |
|
|
20
|
+
| 📝 **Dual Output** | Seamlessly switch between `HTML` and clean `Plain Text` exports. |
|
|
21
|
+
| 🔗 **Hooks-First** | First-class support for `react-hook-form` via standard `Controller` APIs. |
|
|
22
|
+
| 💅 **Total Control** | Custom width, alignment, margins, and branding-specific themes. |
|
|
23
|
+
| ⚡ **Ultra-Light** | Meticulously optimized bundle (only **~11KB**) with zero bloated dependencies. |
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 📦 Installation
|
|
28
|
+
|
|
29
|
+
Get started in seconds:
|
|
16
30
|
|
|
17
31
|
```bash
|
|
18
32
|
npm install customise-text-editor
|
|
19
|
-
# or
|
|
20
|
-
yarn add customise-text-editor
|
|
21
33
|
```
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
> [!IMPORTANT]
|
|
36
|
+
> Since this is a library, ensure you import the CSS in your main entry file (e.g., `App.tsx` or `main.tsx`) to enable the premium aesthetics.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import 'customise-text-editor/style.css';
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🚀 Quick Start
|
|
45
|
+
|
|
46
|
+
Creating a powerful editor has never been easier:
|
|
24
47
|
|
|
25
48
|
```tsx
|
|
26
49
|
import { CustomEditor } from 'customise-text-editor';
|
|
50
|
+
import 'customise-text-editor/style.css';
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
const handleSave = (content) => {
|
|
54
|
+
console.log('Editor Content:', content);
|
|
55
|
+
};
|
|
27
56
|
|
|
28
|
-
function MyEditor() {
|
|
29
57
|
return (
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
58
|
+
<div className="container">
|
|
59
|
+
<CustomEditor
|
|
60
|
+
config={{
|
|
61
|
+
width: '800px',
|
|
62
|
+
align: 'center',
|
|
63
|
+
placeholder: 'Start writing your story...',
|
|
64
|
+
maxLength: 1000,
|
|
65
|
+
outputFormat: 'html',
|
|
66
|
+
onChange: handleSave,
|
|
67
|
+
theme: {
|
|
68
|
+
primaryColor: '#6366f1',
|
|
69
|
+
borderRadius: '12px'
|
|
70
|
+
}
|
|
71
|
+
}}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
43
74
|
);
|
|
44
75
|
}
|
|
45
76
|
```
|
|
46
77
|
|
|
47
|
-
|
|
78
|
+
---
|
|
48
79
|
|
|
49
|
-
|
|
50
|
-
| :--- | :--- | :--- |
|
|
51
|
-
| `primaryColor` | Brand color for active states & borders | `#3b82f6` |
|
|
52
|
-
| `backgroundColor` | Editor and toolbar background | `#ffffff` |
|
|
53
|
-
| `textColor` | Main text color | `#0f172a` |
|
|
54
|
-
| `borderColor` | Border color for the container | `#e2e8f0` |
|
|
55
|
-
| `borderRadius` | Main corner radius | `0.75rem` |
|
|
80
|
+
## 🏗️ Advanced Integration: React Hook Form
|
|
56
81
|
|
|
57
|
-
|
|
82
|
+
We built this editor with form libraries in mind. It integrates perfectly with `Controller` and validation rules.
|
|
58
83
|
|
|
59
|
-
|
|
84
|
+
```tsx
|
|
85
|
+
import { useForm, Controller } from 'react-hook-form';
|
|
86
|
+
import { CustomEditor } from 'customise-text-editor';
|
|
60
87
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
88
|
+
const BlogEditor = () => {
|
|
89
|
+
const { control, handleSubmit, formState: { errors } } = useForm({
|
|
90
|
+
defaultValues: { postContent: '' }
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
const onSubmit = (data) => console.log('Payload:', data);
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
97
|
+
<Controller
|
|
98
|
+
name="postContent"
|
|
99
|
+
control={control}
|
|
100
|
+
rules={{
|
|
101
|
+
required: 'Please write something before publishing',
|
|
102
|
+
minLength: { value: 50, message: 'Your post is too short (min 50 chars)' }
|
|
103
|
+
}}
|
|
104
|
+
render={({ field }) => (
|
|
105
|
+
<CustomEditor
|
|
106
|
+
config={{
|
|
107
|
+
initialContent: field.value,
|
|
108
|
+
onChange: (val) => field.onChange(val),
|
|
109
|
+
maxLength: 5000,
|
|
110
|
+
placeholder: 'Write your masterpiece...'
|
|
111
|
+
}}
|
|
112
|
+
/>
|
|
113
|
+
)}
|
|
114
|
+
/>
|
|
115
|
+
{errors.postContent && <p className="error">{errors.postContent.message}</p>}
|
|
116
|
+
<button type="submit">Publish Masterpiece</button>
|
|
117
|
+
</form>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## 📑 Detailed API Configuration
|
|
125
|
+
|
|
126
|
+
### `EditorConfig` Props
|
|
127
|
+
|
|
128
|
+
| Prop | Type | Default | Description |
|
|
129
|
+
| :--- | :--- | :--- | :--- |
|
|
130
|
+
| `width` | `string \| number` | `'100%'` | Width of the editor (e.g., `'800px'`, `'100%'`). |
|
|
131
|
+
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Alignment of the editor container. |
|
|
132
|
+
| `outputFormat` | `'html' \| 'text'` | `'html'` | Content format sent to the `onChange` callback. |
|
|
133
|
+
| `maxLength` | `number` | - | Character limit. Enables the live-counter footer auto-magically. |
|
|
134
|
+
| `placeholder` | `string` | `'Write here...'` | Placeholder text when the editor is empty. |
|
|
135
|
+
| `theme` | `ThemeConfig` | - | Custom theme object for colors and styling (see below). |
|
|
136
|
+
| `features` | `string[]` | All | Array of enabled toolbar features (bold, italic, etc.). |
|
|
137
|
+
|
|
138
|
+
### `ThemeConfig` Options
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
{
|
|
142
|
+
primaryColor: string; // Accent color for icons & progress
|
|
143
|
+
borderRadius: string; // Control the "roundness" (e.g., '16px')
|
|
144
|
+
backgroundColor: string; // Background of the editor area
|
|
145
|
+
textColor: string; // Color of the content text
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## 🛠️ Troubleshooting: Vite Configuration
|
|
152
|
+
|
|
153
|
+
If you encounter issues like **"Outdated Optimize Dep"** or React version mismatches while using this package, you must add the following aliases to your **consumer project's** `vite.config.ts`. This ensures that both your project and the editor use the same instance of React.
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
import { defineConfig } from 'vite';
|
|
157
|
+
import react from '@vitejs/plugin-react';
|
|
158
|
+
import path from 'path';
|
|
159
|
+
|
|
160
|
+
export default defineConfig({
|
|
161
|
+
plugins: [react()],
|
|
162
|
+
resolve: {
|
|
163
|
+
alias: {
|
|
164
|
+
'react': path.resolve(__dirname, 'node_modules/react'),
|
|
165
|
+
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
});
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
67
172
|
|
|
68
173
|
## 📄 License
|
|
174
|
+
Proudly open-source under the **MIT License**. Created by [kanhaiya-dct](https://github.com/kanhaiya-dct).
|
|
175
|
+
|
|
176
|
+
---
|
|
69
177
|
|
|
70
|
-
|
|
178
|
+
<div align="center">
|
|
179
|
+
<h3>Show your support! ⭐</h3>
|
|
180
|
+
<p>If you find this editor useful, please consider giving it a star on GitHub!</p>
|
|
181
|
+
</div>
|