@richhtmleditor/react 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/README.md +139 -132
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,132 +1,139 @@
|
|
|
1
|
-
# @richhtmleditor/react
|
|
2
|
-
|
|
3
|
-
React component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). Drop-in WYSIWYG with toolbar presets, dark mode, custom React toolbar tools, and enterprise plugin support.
|
|
4
|
-
|
|
5
|
-
**Current release: 1.
|
|
6
|
-
|
|
7
|
-
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
-
|
|
9
|
-
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
-
|
|
11
|
-
### What's in 1.
|
|
12
|
-
|
|
13
|
-
- **`RichHtmlEditor`** — React wrapper around `createEditor` with lifecycle-safe mount/destroy
|
|
14
|
-
- **Controlled content** — `content` prop syncs HTML into the editor instance
|
|
15
|
-
- **Custom tools** — `customToolIds` + `renderTool` for React-rendered toolbar buttons
|
|
16
|
-
- **Plugins** — pass `plugins` for AI, comments, workflows, and collab
|
|
17
|
-
- Re-exports all public symbols from `@richhtmleditor/core`
|
|
18
|
-
|
|
19
|
-
> Ships as ESM with TypeScript declarations. Peer deps: `react` and `react-dom` ^18 \|\| ^19. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in your app entry.
|
|
20
|
-
|
|
21
|
-
**Keywords:** `richhtmleditor` `react` `wysiwyg` `rich-text-editor` `component`
|
|
22
|
-
|
|
23
|
-
## Install
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install @richhtmleditor/react @richhtmleditor/themes
|
|
27
|
-
# Adds @richhtmleditor/core automatically.
|
|
28
|
-
# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Usage — component
|
|
32
|
-
|
|
33
|
-
```tsx
|
|
34
|
-
import { useState } from "react";
|
|
35
|
-
import { RichHtmlEditor } from "@richhtmleditor/react";
|
|
36
|
-
import "@richhtmleditor/themes/richhtmleditor.css";
|
|
37
|
-
|
|
38
|
-
export function EditorDemo() {
|
|
39
|
-
const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<RichHtmlEditor
|
|
43
|
-
content={html}
|
|
44
|
-
toolbar={{ preset: "standard" }}
|
|
45
|
-
features={{ tables: true, media: true }}
|
|
46
|
-
onChange={(c) => setHtml(c.html)}
|
|
47
|
-
/>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Usage — custom React toolbar tool
|
|
53
|
-
|
|
54
|
-
```tsx
|
|
55
|
-
<RichHtmlEditor
|
|
56
|
-
toolbar={{
|
|
57
|
-
preset: "standard",
|
|
58
|
-
layout: ["bold", "italic", "|", "approve"]
|
|
59
|
-
}}
|
|
60
|
-
customToolIds={["approve"]}
|
|
61
|
-
renderTool={(tool) => (
|
|
62
|
-
<button type="button" onClick={() => alert("Approved!")}>
|
|
63
|
-
Approve
|
|
64
|
-
</button>
|
|
65
|
-
)}
|
|
66
|
-
/>
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## Usage — enterprise plugins
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
import { createAiPlugin } from "@richhtmleditor/ai";
|
|
73
|
-
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
74
|
-
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
|
|
75
|
-
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
76
|
-
|
|
77
|
-
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
78
|
-
|
|
79
|
-
<RichHtmlEditor
|
|
80
|
-
toolbar={{ preset: "full" }}
|
|
81
|
-
features={gate.features}
|
|
82
|
-
plugins={[
|
|
83
|
-
createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
|
|
84
|
-
createCommentsPlugin({ author: "Reviewer" }),
|
|
85
|
-
createWorkflowsPlugin({ actor: "Legal", role: "editor" })
|
|
86
|
-
]}
|
|
87
|
-
/>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
## API
|
|
91
|
-
|
|
92
|
-
### `RichHtmlEditor` props
|
|
93
|
-
|
|
94
|
-
| Prop | Type | Description |
|
|
95
|
-
| --- | --- | --- |
|
|
96
|
-
| `content` | `string` | Controlled HTML content. |
|
|
97
|
-
| `editable` | `boolean` | Enable editing (default `true`). |
|
|
98
|
-
| `dark` | `boolean` | Dark theme tokens. |
|
|
99
|
-
| `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
|
|
100
|
-
| `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
|
|
101
|
-
| `features` | `EditorFeatureFlags` | Feature gates. |
|
|
102
|
-
| `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
|
|
103
|
-
| `customToolIds` | `string[]` | Tool IDs to render with `renderTool`. |
|
|
104
|
-
| `renderTool` | `(tool, defaultRender) => ReactNode` | Custom React toolbar renderer. |
|
|
105
|
-
| `onChange` | `(content: EditorContent) => void` | Fired on document edits. |
|
|
106
|
-
| `onSave` | `(content: EditorContent) => void` | Fired on save command. |
|
|
107
|
-
| `className` | `string` | Wrapper class name. |
|
|
108
|
-
| `style` | `CSSProperties` | Wrapper inline styles. |
|
|
109
|
-
|
|
110
|
-
### React vs Angular naming
|
|
111
|
-
|
|
112
|
-
| React | Angular |
|
|
113
|
-
| --- | --- |
|
|
114
|
-
| `<RichHtmlEditor />` | `<richhtmleditor>` |
|
|
115
|
-
| `onChange` | `(contentChange)` |
|
|
116
|
-
| `onSave` | `(save)` |
|
|
117
|
-
| `content` | `[content]` |
|
|
118
|
-
|
|
119
|
-
## Related packages
|
|
120
|
-
|
|
121
|
-
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
|
|
122
|
-
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
123
|
-
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
|
|
124
|
-
- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
|
|
125
|
-
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
|
|
126
|
-
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
|
|
127
|
-
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
|
|
128
|
-
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
[
|
|
1
|
+
# @richhtmleditor/react
|
|
2
|
+
|
|
3
|
+
React component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). Drop-in WYSIWYG with toolbar presets, dark mode, custom React toolbar tools, and enterprise plugin support.
|
|
4
|
+
|
|
5
|
+
**Current release: 1.1.0** — Depends on `@richhtmleditor/core` **^1.1.0**.
|
|
6
|
+
|
|
7
|
+
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
+
|
|
9
|
+
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
+
|
|
11
|
+
### What's in 1.1.0
|
|
12
|
+
|
|
13
|
+
- **`RichHtmlEditor`** — React wrapper around `createEditor` with lifecycle-safe mount/destroy
|
|
14
|
+
- **Controlled content** — `content` prop syncs HTML into the editor instance
|
|
15
|
+
- **Custom tools** — `customToolIds` + `renderTool` for React-rendered toolbar buttons
|
|
16
|
+
- **Plugins** — pass `plugins` for AI, comments, workflows, and collab
|
|
17
|
+
- Re-exports all public symbols from `@richhtmleditor/core`
|
|
18
|
+
|
|
19
|
+
> Ships as ESM with TypeScript declarations. Peer deps: `react` and `react-dom` ^18 \|\| ^19. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in your app entry.
|
|
20
|
+
|
|
21
|
+
**Keywords:** `richhtmleditor` `react` `wysiwyg` `rich-text-editor` `component`
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @richhtmleditor/react @richhtmleditor/themes
|
|
27
|
+
# Adds @richhtmleditor/core automatically.
|
|
28
|
+
# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage — component
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { useState } from "react";
|
|
35
|
+
import { RichHtmlEditor } from "@richhtmleditor/react";
|
|
36
|
+
import "@richhtmleditor/themes/richhtmleditor.css";
|
|
37
|
+
|
|
38
|
+
export function EditorDemo() {
|
|
39
|
+
const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<RichHtmlEditor
|
|
43
|
+
content={html}
|
|
44
|
+
toolbar={{ preset: "standard" }}
|
|
45
|
+
features={{ tables: true, media: true }}
|
|
46
|
+
onChange={(c) => setHtml(c.html)}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Usage — custom React toolbar tool
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<RichHtmlEditor
|
|
56
|
+
toolbar={{
|
|
57
|
+
preset: "standard",
|
|
58
|
+
layout: ["bold", "italic", "|", "approve"]
|
|
59
|
+
}}
|
|
60
|
+
customToolIds={["approve"]}
|
|
61
|
+
renderTool={(tool) => (
|
|
62
|
+
<button type="button" onClick={() => alert("Approved!")}>
|
|
63
|
+
Approve
|
|
64
|
+
</button>
|
|
65
|
+
)}
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Usage — enterprise plugins
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { createAiPlugin } from "@richhtmleditor/ai";
|
|
73
|
+
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
74
|
+
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
|
|
75
|
+
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
76
|
+
|
|
77
|
+
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
78
|
+
|
|
79
|
+
<RichHtmlEditor
|
|
80
|
+
toolbar={{ preset: "full" }}
|
|
81
|
+
features={gate.features}
|
|
82
|
+
plugins={[
|
|
83
|
+
createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
|
|
84
|
+
createCommentsPlugin({ author: "Reviewer" }),
|
|
85
|
+
createWorkflowsPlugin({ actor: "Legal", role: "editor" })
|
|
86
|
+
]}
|
|
87
|
+
/>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## API
|
|
91
|
+
|
|
92
|
+
### `RichHtmlEditor` props
|
|
93
|
+
|
|
94
|
+
| Prop | Type | Description |
|
|
95
|
+
| --- | --- | --- |
|
|
96
|
+
| `content` | `string` | Controlled HTML content. |
|
|
97
|
+
| `editable` | `boolean` | Enable editing (default `true`). |
|
|
98
|
+
| `dark` | `boolean` | Dark theme tokens. |
|
|
99
|
+
| `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
|
|
100
|
+
| `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
|
|
101
|
+
| `features` | `EditorFeatureFlags` | Feature gates. |
|
|
102
|
+
| `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
|
|
103
|
+
| `customToolIds` | `string[]` | Tool IDs to render with `renderTool`. |
|
|
104
|
+
| `renderTool` | `(tool, defaultRender) => ReactNode` | Custom React toolbar renderer. |
|
|
105
|
+
| `onChange` | `(content: EditorContent) => void` | Fired on document edits. |
|
|
106
|
+
| `onSave` | `(content: EditorContent) => void` | Fired on save command. |
|
|
107
|
+
| `className` | `string` | Wrapper class name. |
|
|
108
|
+
| `style` | `CSSProperties` | Wrapper inline styles. |
|
|
109
|
+
|
|
110
|
+
### React vs Angular naming
|
|
111
|
+
|
|
112
|
+
| React | Angular |
|
|
113
|
+
| --- | --- |
|
|
114
|
+
| `<RichHtmlEditor />` | `<richhtmleditor>` |
|
|
115
|
+
| `onChange` | `(contentChange)` |
|
|
116
|
+
| `onSave` | `(save)` |
|
|
117
|
+
| `content` | `[content]` |
|
|
118
|
+
|
|
119
|
+
## Related packages
|
|
120
|
+
|
|
121
|
+
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
|
|
122
|
+
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
123
|
+
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
|
|
124
|
+
- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
|
|
125
|
+
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
|
|
126
|
+
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
|
|
127
|
+
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
|
|
128
|
+
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
|
|
129
|
+
- [`@richhtmleditor/collab`](https://www.npmjs.com/package/@richhtmleditor/collab) — Yjs collaboration plugin.
|
|
130
|
+
- [`@richhtmleditor/diagrams`](https://www.npmjs.com/package/@richhtmleditor/diagrams) — Mermaid diagrams plugin.
|
|
131
|
+
- [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
|
|
132
|
+
- [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF/HTML export plugin.
|
|
133
|
+
- [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — real-time spell check plugin.
|
|
134
|
+
- [`@richhtmleditor/templates`](https://www.npmjs.com/package/@richhtmleditor/templates) — document templates plugin.
|
|
135
|
+
- [`@richhtmleditor/mentions`](https://www.npmjs.com/package/@richhtmleditor/mentions) — @ mentions plugin.
|
|
136
|
+
|
|
137
|
+
## License
|
|
138
|
+
|
|
139
|
+
[MIT](./LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@richhtmleditor/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React wrapper for Rich HTML Editor.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"prepack": "node ../../scripts/assert-pack-ready.mjs"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@richhtmleditor/core": "^1.
|
|
24
|
+
"@richhtmleditor/core": "^1.1.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^18.0.0 || ^19.0.0",
|