editium 1.0.1

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 ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Editium
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 ADDED
@@ -0,0 +1,424 @@
1
+ <div align="center">
2
+
3
+ # Editium
4
+
5
+ [![npm version](https://img.shields.io/npm/v/editium.svg?style=flat-square)](https://www.npmjs.com/package/editium)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](https://opensource.org/licenses/MIT)
7
+ [![Bundle Size](https://img.shields.io/bundlephobia/minzip/editium?style=flat-square)](https://bundlephobia.com/package/editium)
8
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
9
+
10
+ **Production-ready rich text editor for React and Vanilla JavaScript**
11
+
12
+ Modern • Lightweight • Customizable • Zero Dependencies (Vanilla)
13
+
14
+ [Quick Start](#quick-start) • [Documentation](#documentation) • [Examples](#examples) • [API Reference](#api-reference)
15
+
16
+ </div>
17
+
18
+ ---
19
+
20
+ ## Overview
21
+
22
+ Editium is a flexible rich text editor that works seamlessly in both **React** and **Vanilla JavaScript** environments. Built for developers who need a reliable, feature-rich editor without the complexity.
23
+
24
+ **Why Editium?**
25
+
26
+ - **Dual-Mode Support**: Same powerful features in React (Slate.js) and Vanilla JS (pure JavaScript)
27
+ - **Production Ready**: Battle-tested with comprehensive formatting tools and advanced features
28
+ - **Developer Experience**: Get from npm install to working editor in under 60 seconds
29
+ - **Export Flexibility**: HTML, JSON, and plain text output formats
30
+ - **Fully Customizable**: Configure exactly what you need, hide what you don't
31
+
32
+ ---
33
+
34
+ ## Quick Start
35
+
36
+ ### React
37
+
38
+ ```bash
39
+ npm install editium
40
+ ```
41
+
42
+ ```tsx
43
+ import { Editium } from 'editium';
44
+
45
+ function App() {
46
+ return <Editium placeholder="Start typing..." toolbar="all" />;
47
+ }
48
+ ```
49
+
50
+ ### Vanilla JavaScript
51
+
52
+ **Single file - no build step required:**
53
+
54
+ ```html
55
+ <!DOCTYPE html>
56
+ <html>
57
+ <head>
58
+ <script src="https://unpkg.com/editium@1.0.0/vanilla/editium.bundle.js"></script>
59
+ </head>
60
+ <body>
61
+ <div id="editor"></div>
62
+
63
+ <script>
64
+ const editor = new Editium({
65
+ container: document.getElementById('editor'),
66
+ placeholder: 'Start typing...',
67
+ toolbar: 'all'
68
+ });
69
+ </script>
70
+ </body>
71
+ </html>
72
+ ```
73
+
74
+ **[See live demo →](https://editium.vercel.app/)**
75
+
76
+ ---
77
+
78
+ ## Key Features
79
+
80
+ **Rich Text Editing**
81
+ - Comprehensive formatting: bold, italic, underline, strikethrough, code
82
+ - 8 heading levels, blockquotes, and code blocks
83
+ - Text and background colors
84
+ - Superscript and subscript
85
+
86
+ **Advanced Capabilities**
87
+ - Full table support with dynamic rows/columns
88
+ - Resizable images with custom upload handlers
89
+ - Bulleted and numbered lists with nesting
90
+ - Find and replace with match highlighting
91
+ - Text alignment (left, center, right, justify)
92
+
93
+ **Developer Experience**
94
+ - TypeScript support with full type definitions
95
+ - HTML and JSON export formats
96
+ - Customizable toolbar (show only what you need)
97
+ - Keyboard shortcuts for efficient editing
98
+ - Read-only mode for content display
99
+ - Word and character counting
100
+ - Fullscreen editing mode
101
+
102
+ **Framework Flexibility**
103
+ - **React**: Component-based with hooks support
104
+ - **Vanilla JS**: Zero dependencies, works anywhere
105
+ - Same API and features across both versions
106
+
107
+ ---
108
+
109
+ ## Installation
110
+
111
+ ```bash
112
+ npm install editium
113
+ ```
114
+
115
+ **Peer dependencies (React only):**
116
+ ```bash
117
+ npm install react react-dom
118
+ ```
119
+
120
+ **CDN (Vanilla JS):**
121
+ ```html
122
+ <script src="https://unpkg.com/editium@1.0.0/vanilla/editium.bundle.js"></script>
123
+ ```
124
+
125
+ ---
126
+
127
+ ## Documentation
128
+
129
+ ### React Usage
130
+
131
+ **Basic Example**
132
+
133
+ ```tsx
134
+ import { Editium } from 'editium';
135
+
136
+ function App() {
137
+ return <Editium toolbar="all" placeholder="Start typing..." />;
138
+ }
139
+ ```
140
+
141
+ **With Content Management**
142
+
143
+ ```tsx
144
+ import React, { useState } from 'react';
145
+ import { Editium } from 'editium';
146
+
147
+ function Editor() {
148
+ const [content, setContent] = useState({ html: '', json: [] });
149
+
150
+ return (
151
+ <Editium
152
+ toolbar="all"
153
+ onChange={(html, json) => setContent({ html, json })}
154
+ showWordCount={true}
155
+ />
156
+ );
157
+ }
158
+ ```
159
+
160
+ **Custom Toolbar**
161
+
162
+ ```tsx
163
+ <Editium
164
+ toolbar={[
165
+ 'bold', 'italic', 'underline',
166
+ 'separator',
167
+ 'heading-one', 'heading-two',
168
+ 'separator',
169
+ 'bulleted-list', 'numbered-list',
170
+ 'link', 'image'
171
+ ]}
172
+ />
173
+ ```
174
+
175
+ **[→ Full React Documentation](./react/README.md)**
176
+
177
+ ### Vanilla JavaScript Usage
178
+
179
+ **CDN (Recommended)**
180
+
181
+ ```html
182
+ <script src="https://unpkg.com/editium@1.0.0/vanilla/editium.bundle.js"></script>
183
+
184
+ <div id="editor"></div>
185
+
186
+ <script>
187
+ const editor = new Editium({
188
+ container: document.getElementById('editor'),
189
+ toolbar: 'all',
190
+ placeholder: 'Start typing...'
191
+ });
192
+
193
+ // Get content
194
+ const html = editor.getHTML();
195
+ const json = editor.getJSON();
196
+ </script>
197
+ ```
198
+
199
+ **NPM**
200
+
201
+ ```javascript
202
+ import 'editium/vanilla/editium.css';
203
+ import Editium from 'editium/vanilla/editium.js';
204
+
205
+ const editor = new Editium({
206
+ container: document.getElementById('editor'),
207
+ toolbar: 'all'
208
+ });
209
+ ```
210
+
211
+ **[→ Full Vanilla JS Documentation](./vanilla/README.md)**
212
+
213
+ ---
214
+
215
+ ## API Reference
216
+
217
+ ### React Props
218
+
219
+ | Prop | Type | Default | Description |
220
+ |------|------|---------|-------------|
221
+ | `toolbar` | `ToolbarItem[] \| 'all'` | Basic items | Toolbar configuration |
222
+ | `placeholder` | `string` | `'Start typing...'` | Placeholder text |
223
+ | `onChange` | `(html, json) => void` | - | Content change callback |
224
+ | `initialValue` | `string \| CustomElement[]` | - | Initial content |
225
+ | `readOnly` | `boolean` | `false` | Read-only mode |
226
+ | `showWordCount` | `boolean` | `false` | Show word/character count |
227
+ | `height` | `string \| number` | `'200px'` | Editor height |
228
+ | `onImageUpload` | `(file: File) => Promise<string>` | - | Custom image upload |
229
+
230
+ ### Vanilla JS Options
231
+
232
+ | Option | Type | Default | Description |
233
+ |--------|------|---------|-------------|
234
+ | `container` | `HTMLElement` | required | DOM element for editor |
235
+ | `toolbar` | `string \| array` | `'all'` | Toolbar configuration |
236
+ | `placeholder` | `string` | `''` | Placeholder text |
237
+ | `onChange` | `function` | - | Content change callback |
238
+ | `readOnly` | `boolean` | `false` | Read-only mode |
239
+ | `showWordCount` | `boolean` | `false` | Show word/character count |
240
+ | `height` | `string \| number` | `'200px'` | Editor height |
241
+ | `onImageUpload` | `function` | - | Custom image upload |
242
+
243
+ ### Vanilla JS Methods
244
+
245
+ ```javascript
246
+ editor.getHTML() // Returns HTML string
247
+ editor.getText() // Returns plain text
248
+ editor.getJSON() // Returns JSON structure
249
+ editor.setContent(html) // Set editor content
250
+ editor.clear() // Clear editor
251
+ editor.focus() // Focus editor
252
+ editor.destroy() // Cleanup editor
253
+ ```
254
+
255
+ ### Toolbar Items
256
+
257
+ Available items: `bold`, `italic`, `underline`, `strikethrough`, `code`, `superscript`, `subscript`, `heading-one` through `heading-eight`, `paragraph`, `blockquote`, `code-block`, `bulleted-list`, `numbered-list`, `indent`, `outdent`, `left`, `center`, `right`, `justify`, `text-color`, `bg-color`, `link`, `image`, `table`, `horizontal-rule`, `undo`, `redo`, `find-replace`, `fullscreen`, `view-output`, `separator`
258
+
259
+ ---
260
+
261
+ ## Examples
262
+
263
+ ### Custom Image Upload
264
+
265
+ **React:**
266
+ ```tsx
267
+ const handleImageUpload = async (file: File) => {
268
+ const formData = new FormData();
269
+ formData.append('image', file);
270
+
271
+ const response = await fetch('/api/upload', {
272
+ method: 'POST',
273
+ body: formData
274
+ });
275
+
276
+ const { url } = await response.json();
277
+ return url;
278
+ };
279
+
280
+ <Editium onImageUpload={handleImageUpload} />
281
+ ```
282
+
283
+ **Vanilla JS:**
284
+ ```javascript
285
+ const editor = new Editium({
286
+ container: document.getElementById('editor'),
287
+ onImageUpload: async (file) => {
288
+ const formData = new FormData();
289
+ formData.append('image', file);
290
+ const response = await fetch('/api/upload', {
291
+ method: 'POST',
292
+ body: formData
293
+ });
294
+ const { url } = await response.json();
295
+ return url;
296
+ }
297
+ });
298
+ ```
299
+
300
+ ### Saving Content
301
+
302
+ **React:**
303
+ ```tsx
304
+ function EditorWithSave() {
305
+ const [content, setContent] = useState({ html: '', json: [] });
306
+
307
+ const handleSave = async () => {
308
+ await fetch('/api/save', {
309
+ method: 'POST',
310
+ headers: { 'Content-Type': 'application/json' },
311
+ body: JSON.stringify(content)
312
+ });
313
+ };
314
+
315
+ return (
316
+ <>
317
+ <Editium onChange={(html, json) => setContent({ html, json })} />
318
+ <button onClick={handleSave}>Save</button>
319
+ </>
320
+ );
321
+ }
322
+ ```
323
+
324
+ **Vanilla JS:**
325
+ ```javascript
326
+ const editor = new Editium({
327
+ container: document.getElementById('editor'),
328
+ onChange: (content) => {
329
+ localStorage.setItem('content', JSON.stringify({
330
+ html: content.html,
331
+ json: content.json
332
+ }));
333
+ }
334
+ });
335
+ ```
336
+
337
+ ### Height Configuration
338
+
339
+ ```tsx
340
+ // React
341
+ <Editium height={400} minHeight={200} maxHeight={600} />
342
+
343
+ // Vanilla JS
344
+ new Editium({
345
+ container: document.getElementById('editor'),
346
+ height: '400px',
347
+ minHeight: '200px',
348
+ maxHeight: '600px'
349
+ });
350
+ ```
351
+
352
+ ---
353
+
354
+ ## Keyboard Shortcuts
355
+
356
+ | Shortcut | Action |
357
+ |----------|--------|
358
+ | `Ctrl/Cmd + B` | Bold |
359
+ | `Ctrl/Cmd + I` | Italic |
360
+ | `Ctrl/Cmd + U` | Underline |
361
+ | `Ctrl/Cmd + Z` | Undo |
362
+ | `Ctrl/Cmd + Y` | Redo |
363
+ | `Ctrl/Cmd + K` | Insert link |
364
+ | `F11` | Fullscreen |
365
+ | `Tab` | Indent list |
366
+ | `Shift + Tab` | Outdent list |
367
+
368
+ ---
369
+
370
+ ## Browser Support
371
+
372
+ - Chrome (latest)
373
+ - Firefox (latest)
374
+ - Safari (latest)
375
+ - Edge (latest)
376
+
377
+ ---
378
+
379
+ ## Community & Support
380
+
381
+ **Get Help**
382
+ - [GitHub Issues](https://github.com/NabarupDev/Editium/issues) - Bug reports and feature requests
383
+ - [GitHub Discussions](https://github.com/NabarupDev/Editium/discussions) - Questions and community support
384
+
385
+ **Contributing**
386
+
387
+ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
388
+
389
+ 1. Fork the repository
390
+ 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
391
+ 3. Commit your changes (`git commit -m 'Add amazing feature'`)
392
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
393
+ 5. Open a Pull Request
394
+
395
+ **Code of Conduct**
396
+
397
+ This project follows the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
398
+
399
+ ---
400
+
401
+ ## License
402
+
403
+ MIT License - See [LICENSE](LICENSE) file for details.
404
+
405
+ Copyright © 2025 [Nabarup Dev](https://github.com/NabarupDev)
406
+
407
+ ---
408
+
409
+ ## Acknowledgments
410
+
411
+ - Built with [Slate.js](https://www.slatejs.org/) for the React version
412
+ - Inspired by modern rich text editors: TipTap, ProseMirror, and Quill
413
+
414
+ ---
415
+
416
+ <div align="center">
417
+
418
+ **Made with ❤️ by [Nabarup Dev](https://github.com/NabarupDev)**
419
+
420
+ ⭐ **Star us on [GitHub](https://github.com/NabarupDev/Editium)** if you find this project useful!
421
+
422
+ [NPM](https://www.npmjs.com/package/editium) • [GitHub](https://github.com/NabarupDev/Editium) • [Issues](https://github.com/NabarupDev/Editium/issues)
423
+
424
+ </div>
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { EditiumProps } from './types';
3
+ declare const Editium: React.FC<EditiumProps>;
4
+ export default Editium;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { ImageElement } from './types';
3
+ interface ResizableImageProps {
4
+ element: ImageElement;
5
+ attributes: any;
6
+ children: any;
7
+ }
8
+ declare const ResizableImage: React.FC<ResizableImageProps>;
9
+ export default ResizableImage;
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { TableElement, TableRowElement, TableCellElement } from './types';
3
+ interface TableComponentProps {
4
+ element: TableElement;
5
+ attributes: any;
6
+ children: any;
7
+ }
8
+ export declare const TableComponent: React.FC<TableComponentProps>;
9
+ interface TableRowComponentProps {
10
+ element: TableRowElement;
11
+ attributes: any;
12
+ children: any;
13
+ }
14
+ export declare const TableRowComponent: React.FC<TableRowComponentProps>;
15
+ interface TableCellComponentProps {
16
+ element: TableCellElement;
17
+ attributes: any;
18
+ children: any;
19
+ }
20
+ export declare const TableCellComponent: React.FC<TableCellComponentProps>;
21
+ export {};
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { ToolbarItem } from './types';
3
+ interface ToolbarProps {
4
+ items: ToolbarItem[];
5
+ className?: string;
6
+ onViewOutput?: (type: 'html' | 'json' | 'preview') => void;
7
+ onEditLink?: (linkData: {
8
+ url: string;
9
+ title?: string;
10
+ target?: '_blank' | '_self';
11
+ text: string;
12
+ }) => void;
13
+ searchQuery?: string;
14
+ searchMatches?: Array<{
15
+ path: any;
16
+ offset: number;
17
+ text: string;
18
+ }>;
19
+ currentMatchIndex?: number;
20
+ onSearchQueryChange?: (query: string) => void;
21
+ onSearchMatchesChange?: (matches: Array<{
22
+ path: any;
23
+ offset: number;
24
+ text: string;
25
+ }>) => void;
26
+ onCurrentMatchIndexChange?: (index: number) => void;
27
+ isFullscreen?: boolean;
28
+ onFullscreenToggle?: () => void;
29
+ }
30
+ declare const Toolbar: React.FC<ToolbarProps>;
31
+ export default Toolbar;
@@ -0,0 +1,6 @@
1
+ export { default as Editium } from './Editium';
2
+ export { default as ResizableImage } from './ResizableImage';
3
+ export { TableComponent, TableRowComponent, TableCellComponent } from './TableElement';
4
+ export type { EditiumProps, CustomElement, CustomText, LinkElement, ImageElement, TableElement, TableRowElement, TableCellElement, FormatType, BlockType, ToolbarItem, } from './types';
5
+ export { ALL_TOOLBAR_ITEMS, } from './types';
6
+ export { serializeToHtml, defaultInitialValue, isMarkActive, isBlockActive, toggleMark, toggleBlock, insertLink, isLinkActive, insertTable, addTableRow, removeTableRow, addTableColumn, removeTableColumn, isInTable, setTableAlignment, findAllMatches, navigateToMatch, replaceMatch, replaceAllMatches, } from './utils';