rich-html-editor 1.2.2 → 1.2.3

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 (9) hide show
  1. package/README.md +59 -25
  2. package/dist/index.global.js +4 -0
  3. package/dist/index.global.js.map +1 -1
  4. package/dist/index.js +4 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +4 -0
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +2 -2
  9. package/CHANGELOG.md +0 -240
package/README.md CHANGED
@@ -1,6 +1,13 @@
1
1
  # rich-html-editor
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/rich-html-editor.svg)](https://www.npmjs.com/package/rich-html-editor) [![license](https://img.shields.io/npm/l/rich-html-editor.svg)](LICENSE)
3
+ [![npm version](https://img.shields.io/npm/v/rich-html-editor?logo=npm)](https://www.npmjs.com/package/rich-html-editor)
4
+ [![license](https://img.shields.io/npm/l/rich-html-editor?logo=open-source-initiative)](LICENSE)
5
+ [![downloads](https://img.shields.io/npm/dm/rich-html-editor?logo=npm)](https://www.npmjs.com/package/rich-html-editor)
6
+ [![Playground](https://img.shields.io/badge/demo-live_playground-blue?logo=google-chrome)](https://akshaypatil1.github.io/rich-html-editor/)
7
+ [![Documentation](https://img.shields.io/badge/docs-documentation-success?logo=read-the-docs)](https://akshaypatil1.github.io/rich-html-editor/docs/)
8
+ ![TypeScript](https://img.shields.io/badge/types-TypeScript-blue?logo=typescript)
9
+ ![Framework Agnostic](https://img.shields.io/badge/framework-agnostic-green)
10
+ ![Bundle Size](https://img.shields.io/bundlephobia/minzip/rich-html-editor)
4
11
 
5
12
  > **Edit HTML templates safely — without breaking layout or CSS.**
6
13
 
@@ -9,7 +16,23 @@ It enables **controlled, template-driven editing**, not free-form WYSIWYG chaos.
9
16
 
10
17
  ---
11
18
 
12
- ## 🎥 Demo
19
+ ## 🎥 Demo & Playground
20
+
21
+ ### ▶️ Live Playground (Try it yourself)
22
+
23
+ 👉 **https://akshaypatil1.github.io/rich-html-editor/**
24
+
25
+ Use the playground to:
26
+
27
+ - Edit real HTML inside an iframe
28
+ - Apply formatting safely
29
+ - Export clean HTML instantly
30
+
31
+ > No install. No build. Runs directly in the browser.
32
+
33
+ ---
34
+
35
+ ### 📽️ Video Demo
13
36
 
14
37
  Below is a short demo showing how **rich-html-editor** allows inline editing of an HTML template using a toolbar embedded inside an iframe.
15
38
 
@@ -33,6 +56,14 @@ Most rich text editors allow users to edit _anything_ — which often leads to b
33
56
 
34
57
  ---
35
58
 
59
+ ## Documentation
60
+
61
+ Explore guides, concepts, API reference, and examples:
62
+
63
+ 👉 **https://akshaypatil1.github.io/rich-html-editor/docs/**
64
+
65
+ ---
66
+
36
67
  ## 🚀 Features
37
68
 
38
69
  ### ✏️ Text Formatting
@@ -85,36 +116,39 @@ yarn add rich-html-editor
85
116
 
86
117
  ---
87
118
 
88
- ## ⚡ Quick Start (Browser / iframe)
119
+ ## Quick Start (Browser / iframe)
89
120
 
90
121
  The editor initializes on an `HTMLIFrameElement`.
91
122
 
92
123
  > ⚠️ The iframe must be **same-origin**. Use `srcdoc` for safety.
93
124
 
94
125
  ```html
95
- <script type="module">
96
- import {
97
- initRichEditor,
98
- getCleanHTML,
99
- editorEventEmitter,
100
- } from "rich-html-editor";
101
-
102
- const iframe = document.createElement("iframe");
103
- iframe.srcdoc =
104
- "<!doctype html><html><head></head><body><div>Edit me</div></body></html>";
105
-
106
- document.body.appendChild(iframe);
107
-
108
- initRichEditor(iframe, { maxStackSize: 50 });
109
-
110
- const off = editorEventEmitter.on("contentChanged", (event) => {
111
- console.log("Content changed:", event);
126
+ <!-- CDN (browser) -->
127
+ <script src="https://unpkg.com/rich-html-editor@latest"></script>
128
+
129
+ <iframe id="frame"></iframe>
130
+
131
+ <script>
132
+ const iframe = document.getElementById("frame");
133
+
134
+ iframe.srcdoc = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><div>Edit me</div></body></html>`;
135
+
136
+ const EditorClass =
137
+ (window.RichHtmlEditor &&
138
+ (window.RichHtmlEditor.RichHtmlEditor || window.RichHtmlEditor)) ||
139
+ undefined;
140
+ let editor;
141
+
142
+ iframe.addEventListener("load", () => {
143
+ if (!EditorClass) {
144
+ console.warn(
145
+ "RichHtmlEditor not found on window. Did you load the CDN script?"
146
+ );
147
+ return;
148
+ }
149
+ editor = new EditorClass({ iframe, highlightEditable: true });
150
+ editor.init();
112
151
  });
113
-
114
- const html = getCleanHTML();
115
- console.log(html);
116
-
117
- // off(); // unsubscribe when needed
118
152
  </script>
119
153
  ```
120
154
 
package/dist/index.global.js CHANGED
@@ -2317,6 +2317,8 @@ var RichHtmlEditor = (() => {
2317
2317
  const fileInput = doc.createElement("input");
2318
2318
  fileInput.type = "file";
2319
2319
  fileInput.accept = "image/*";
2320
+ fileInput.style.width = "100%";
2321
+ fileInput.style.boxSizing = "border-box";
2320
2322
  uploadPane.appendChild(fileInput);
2321
2323
  const uploadMsg = doc.createElement("div");
2322
2324
  uploadMsg.className = "rhe-img-msg";
@@ -2327,6 +2329,8 @@ var RichHtmlEditor = (() => {
2327
2329
  const urlInput = doc.createElement("input");
2328
2330
  urlInput.type = "url";
2329
2331
  urlInput.placeholder = "https://example.com/image.jpg";
2332
+ urlInput.style.width = "100%";
2333
+ urlInput.style.boxSizing = "border-box";
2330
2334
  urlPane.appendChild(urlInput);
2331
2335
  const urlMsg = doc.createElement("div");
2332
2336
  urlMsg.className = "rhe-img-msg";