rich-html-editor 0.2.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.
Files changed (13) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +263 -0
  3. package/dist/chunk-ZDGUOGND.mjs +441 -0
  4. package/dist/chunk-ZDGUOGND.mjs.map +1 -0
  5. package/dist/index.d.mts +73 -0
  6. package/dist/index.d.ts +73 -0
  7. package/dist/index.js +1896 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/index.mjs +1439 -0
  10. package/dist/index.mjs.map +1 -0
  11. package/dist/state-CZIMHTJ3.mjs +25 -0
  12. package/dist/state-CZIMHTJ3.mjs.map +1 -0
  13. package/package.json +62 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Akshay
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,263 @@
1
+ # rich-html-editor
2
+
3
+ A framework-agnostic, plug-and-play rich HTML editor library for adding WYSIWYG editing capabilities to your web applications.
4
+
5
+ ## Features
6
+
7
+ - 📝 **Rich Text Editing** - Bold, italic, underline, text alignment, font selection
8
+ - 🎨 **Formatting Tools** - Color pickers for text and highlight colors
9
+ - 🔗 **Links & URLs** - Built-in link insertion with XSS protection
10
+ - ↩ī¸ **Undo/Redo** - Full undo/redo support with snapshot management
11
+ - 🛠ī¸ **Sticky Toolbar** - Always-visible formatting toolbar
12
+ - 🔒 **Security** - URL sanitization to prevent XSS attacks
13
+ - đŸ“Ļ **Small Bundle** - ~13KB minified (ESM format)
14
+
15
+ ## Changelog
16
+
17
+ See the full changelog in [CHANGELOG.md](CHANGELOG.md). Recent fixes and UX improvements are documented under the Unreleased section.
18
+
19
+ ## Installation
20
+
21
+ ### From npm (once published)
22
+
23
+ ```bash
24
+ npm install rich-html-editor
25
+ ```
26
+
27
+ ### From GitHub
28
+
29
+ ```bash
30
+ npm install github:akshaypatil1/rich-html-editor
31
+ ```
32
+
33
+ ## Usage
34
+
35
+ ```typescript
36
+ import { initRichEditor, getCleanHTML } from "rich-html-editor";
37
+
38
+ // Initialize editor on an iframe
39
+ const iframe = document.querySelector("iframe");
40
+ initRichEditor(iframe);
41
+
42
+ // Get cleaned HTML content
43
+ const html = getCleanHTML();
44
+ ```
45
+
46
+ ## Demo / Examples
47
+
48
+ Below are quick examples to get the editor running in various environments. These show minimal integrations for a host page or framework.
49
+
50
+ Vanilla JavaScript
51
+
52
+ ```html
53
+ <iframe id="editor" srcdoc="<body><div class=\"editable\">Edit me</div></body>"></iframe>
54
+ <script type="module">
55
+ import { initRichEditor } from './dist/index.mjs';
56
+ const iframe = document.getElementById('editor');
57
+ initRichEditor(iframe);
58
+ </script>
59
+ ```
60
+
61
+ React (functional component)
62
+
63
+ ```jsx
64
+ import { useEffect, useRef } from "react";
65
+ import { initRichEditor } from "rich-html-editor";
66
+
67
+ export default function Editor() {
68
+ const iframeRef = useRef(null);
69
+ useEffect(() => {
70
+ if (iframeRef.current) initRichEditor(iframeRef.current);
71
+ }, []);
72
+ return (
73
+ <iframe
74
+ ref={iframeRef}
75
+ srcDoc={'<body><div class="editable">Edit me</div></body>'}
76
+ />
77
+ );
78
+ }
79
+ ```
80
+
81
+ Angular (simple component)
82
+
83
+ ```ts
84
+ // in component template
85
+ // <iframe #editor [srcdoc]="'<body><div class=\"editable\">Edit me</div></body>'"></iframe>
86
+
87
+ // in component.ts
88
+ import { AfterViewInit, ViewChild, ElementRef } from "@angular/core";
89
+ import { initRichEditor } from "rich-html-editor";
90
+
91
+ export class MyEditorComponent implements AfterViewInit {
92
+ @ViewChild("editor") editor!: ElementRef<HTMLIFrameElement>;
93
+ ngAfterViewInit() {
94
+ initRichEditor(this.editor.nativeElement);
95
+ }
96
+ }
97
+ ```
98
+
99
+ Vue 3 (Composition API)
100
+
101
+ ```vue
102
+ <template>
103
+ <iframe ref="editor" :srcdoc="srcdoc"></iframe>
104
+ </template>
105
+ <script setup>
106
+ import { onMounted, ref } from "vue";
107
+ import { initRichEditor } from "rich-html-editor";
108
+
109
+ const editor = ref(null);
110
+ const srcdoc = '<body><div class="editable">Edit me</div></body>';
111
+ onMounted(() => {
112
+ if (editor.value) initRichEditor(editor.value);
113
+ });
114
+ </script>
115
+ ```
116
+
117
+ Notes:
118
+
119
+ - The toolbar is injected into the iframe document and uses inline styles by default. For theming, replace or override the `#editor-toolbar` element inside the iframe or modify the `injectToolbar` function.
120
+ - Accessibility: toolbar exposes ARIA attributes and keyboard navigation (Arrow keys, Enter/Space). Keyboard shortcuts are available for Bold (Ctrl/Cmd+B), Italic (Ctrl/Cmd+I), Underline (Ctrl/Cmd+U), Undo (Ctrl/Cmd+Z), Redo (Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z).
121
+
122
+ ## API
123
+
124
+ ### `initRichEditor(iframe: HTMLIFrameElement): void`
125
+
126
+ Initializes the rich HTML editor on the target iframe element.
127
+
128
+ **Parameters:**
129
+
130
+ # rich-html-editor
131
+
132
+ A framework-agnostic, plug-and-play rich HTML editor library for adding WYSIWYG editing capabilities to web applications (vanilla JS, React, Vue, Angular, etc.).
133
+
134
+ ## Quick Start
135
+
136
+ Install from npm (when published):
137
+
138
+ ```bash
139
+ npm install rich-html-editor
140
+ ```
141
+
142
+ Install directly from GitHub (dist is included in this repo — no build required on install):
143
+
144
+ ```bash
145
+ npm install github:akshaypatil1/rich-html-editor
146
+ ```
147
+
148
+ Or install a specific release/tag:
149
+
150
+ ```bash
151
+ npm install github:akshaypatil1/rich-html-editor#v0.1.0
152
+ ```
153
+
154
+ This repository includes built `dist/` artifacts so consumers installing from Git do not need to run a build step.
155
+
156
+ ## Usage (quick)
157
+
158
+ ```typescript
159
+ import {
160
+ initRichEditor,
161
+ getCleanHTML,
162
+ getSanitizedHTML,
163
+ } from "rich-html-editor";
164
+
165
+ const iframe = document.querySelector("iframe") as HTMLIFrameElement | null;
166
+ if (iframe) {
167
+ initRichEditor(iframe);
168
+ // later...
169
+ const raw = getCleanHTML(); // full document HTML (raw)
170
+ const safe = getSanitizedHTML(); // sanitized HTML safe for untrusted contexts
171
+ }
172
+ ```
173
+
174
+ ## Examples
175
+
176
+ Vanilla JavaScript (module import):
177
+
178
+ ```html
179
+ <iframe id="editor" srcdoc="<body><div class=\"editable\">Edit me</div></body>"></iframe>
180
+ <script type="module">
181
+ import { initRichEditor } from 'rich-html-editor';
182
+ const iframe = document.getElementById('editor');
183
+ if (iframe instanceof HTMLIFrameElement) initRichEditor(iframe);
184
+ </script>
185
+ ```
186
+
187
+ React (functional component):
188
+
189
+ ```jsx
190
+ import { useEffect, useRef } from "react";
191
+ import { initRichEditor } from "rich-html-editor";
192
+
193
+ export default function Editor() {
194
+ const iframeRef = useRef(null);
195
+ useEffect(() => {
196
+ if (iframeRef.current) initRichEditor(iframeRef.current);
197
+ }, []);
198
+ return (
199
+ <iframe
200
+ ref={iframeRef}
201
+ srcDoc={'<body><div class="editable">Edit me</div></body>'}
202
+ />
203
+ );
204
+ }
205
+ ```
206
+
207
+ Vue 3 (Composition API):
208
+
209
+ ```vue
210
+ <template>
211
+ <iframe ref="editor" :srcdoc="srcdoc"></iframe>
212
+ </template>
213
+ <script setup>
214
+ import { onMounted, ref } from "vue";
215
+ import { initRichEditor } from "rich-html-editor";
216
+
217
+ const editor = ref(null);
218
+ const srcdoc = '<body><div class="editable">Edit me</div></body>';
219
+ onMounted(() => {
220
+ if (editor.value) initRichEditor(editor.value);
221
+ });
222
+ </script>
223
+ ```
224
+
225
+ Angular (component):
226
+
227
+ ```ts
228
+ // template: <iframe #editor [srcdoc]="'<body><div class=\"editable\">Edit me</div></body>'"></iframe>
229
+ import { AfterViewInit, ViewChild, ElementRef } from "@angular/core";
230
+ import { initRichEditor } from "rich-html-editor";
231
+
232
+ export class MyEditorComponent implements AfterViewInit {
233
+ @ViewChild("editor") editor!: ElementRef<HTMLIFrameElement>;
234
+ ngAfterViewInit() {
235
+ initRichEditor(this.editor.nativeElement);
236
+ }
237
+ }
238
+ ```
239
+
240
+ ## API
241
+
242
+ - `initRichEditor(iframe: HTMLIFrameElement, config?)` — Initialize the editor on the provided iframe.
243
+ - `getCleanHTML(): string` — Returns the full document HTML (raw). Use only in trusted contexts or for internal storage.
244
+ - `getSanitizedHTML(): string` — Returns a sanitized HTML string suitable for exporting to untrusted contexts (uses the library sanitizer).
245
+
246
+ Notes:
247
+
248
+ - The package provides ESM, CJS and TypeScript declaration files (`dist/*.mjs`, `dist/*.js`, `dist/*.d.ts`).
249
+ - This library is framework-agnostic; you can integrate it with any frontend framework — the consumer is responsible for framework-specific lifecycle integration.
250
+
251
+ ## Security
252
+
253
+ - `getCleanHTML()` returns raw HTML from the editor and may contain unsafe attributes or elements. Sanitize before inserting into other pages.
254
+ - Prefer `getSanitizedHTML()` when exporting user content for untrusted contexts. Server-side sanitization is recommended as a second line of defense.
255
+
256
+ ## Notes for Consumers
257
+
258
+ - Because this repo includes prebuilt `dist/` artifacts, installing from GitHub will not require the consumer to run a build step.
259
+ - If you instead rely on source-only installs and `prepare` scripts, ensure `devDependencies` (build tools) are available on the install environment.
260
+
261
+ ## License
262
+
263
+ MIT