@richhtmleditor/vue 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.
Files changed (2) hide show
  1. package/README.md +145 -138
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,138 +1,145 @@
1
- # @richhtmleditor/vue
2
-
3
- Vue 3 component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). WYSIWYG authoring with toolbar presets, slot-based custom tools, and enterprise plugin support.
4
-
5
- **Current release: 1.0.0** — Depends on `@richhtmleditor/core` **^1.0.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.0.0
12
-
13
- - **`RichHtmlEditor`** — Vue 3 `defineComponent` wrapper around `createEditor`
14
- - **Props** — `content`, `editable`, `dark`, `theme`, `toolbar`, `features`, `plugins`
15
- - **Custom tools** — `customToolIds` with `#tool-{id}` or default `#tool` slots
16
- - **Events** — `@change` and `@save` emit `EditorContent`
17
- - Re-exports all public symbols from `@richhtmleditor/core`
18
-
19
- > Ships as ESM with TypeScript declarations. Peer dep: `vue` ^3.5. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in your app entry.
20
-
21
- **Keywords:** `richhtmleditor` `vue` `vue3` `wysiwyg` `rich-text-editor`
22
-
23
- ## Install
24
-
25
- ```bash
26
- npm install @richhtmleditor/vue @richhtmleditor/themes
27
- # Adds @richhtmleditor/core automatically.
28
- # Peer dep: vue ^3.5.
29
- ```
30
-
31
- ## Usage — component
32
-
33
- ```vue
34
- <script setup lang="ts">
35
- import { ref } from "vue";
36
- import { RichHtmlEditor } from "@richhtmleditor/vue";
37
- import "@richhtmleditor/themes/richhtmleditor.css";
38
-
39
- const html = ref("<p>Hello <strong>world</strong></p>");
40
-
41
- function onChange(content: { html: string }) {
42
- html.value = content.html;
43
- }
44
- </script>
45
-
46
- <template>
47
- <RichHtmlEditor
48
- :content="html"
49
- toolbar="standard"
50
- :features="{ tables: true, media: true }"
51
- @change="onChange"
52
- />
53
- </template>
54
- ```
55
-
56
- ## Usage — custom tool slot
57
-
58
- ```vue
59
- <RichHtmlEditor
60
- :toolbar="{ preset: 'standard', layout: ['bold', 'italic', '|', 'approve'] }"
61
- :custom-tool-ids="['approve']"
62
- >
63
- <template #tool-approve="{ tool }">
64
- <button type="button" @click="approve">Approve</button>
65
- </template>
66
- </RichHtmlEditor>
67
- ```
68
-
69
- ## Usage — enterprise plugins
70
-
71
- ```vue
72
- <script setup lang="ts">
73
- import { createAiPlugin } from "@richhtmleditor/ai";
74
- import { createCommentsPlugin } from "@richhtmleditor/comments";
75
- import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
76
- import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
77
-
78
- const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
79
-
80
- const plugins = [
81
- createAiPlugin(),
82
- createCommentsPlugin({ author: "Reviewer" }),
83
- createWorkflowsPlugin({ actor: "Legal", role: "editor" })
84
- ];
85
- </script>
86
-
87
- <template>
88
- <RichHtmlEditor
89
- toolbar="full"
90
- :features="gate.features"
91
- :plugins="plugins"
92
- />
93
- </template>
94
- ```
95
-
96
- ## API
97
-
98
- ### `RichHtmlEditor` props
99
-
100
- | Prop | Type | Description |
101
- | --- | --- | --- |
102
- | `content` | `string` | HTML content. |
103
- | `editable` | `boolean` | Enable editing (default `true`). |
104
- | `dark` | `boolean` | Dark theme tokens. |
105
- | `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
106
- | `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
107
- | `features` | `EditorFeatureFlags` | Feature gates. |
108
- | `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
109
- | `customToolIds` | `string[]` | Tool IDs with matching `#tool-{id}` slots. |
110
-
111
- ### `RichHtmlEditor` events
112
-
113
- | Event | Payload | Description |
114
- | --- | --- | --- |
115
- | `change` | `EditorContent` | Fired on document edits. |
116
- | `save` | `EditorContent` | Fired on save command. |
117
-
118
- ### Slots
119
-
120
- | Slot | Props | Description |
121
- | --- | --- | --- |
122
- | `tool-{id}` | `{ tool: ResolvedToolbarTool }` | Custom toolbar UI for a tool ID in `customToolIds`. |
123
- | `tool` | `{ tool: ResolvedToolbarTool }` | Fallback slot when no `tool-{id}` slot exists. |
124
-
125
- ## Related packages
126
-
127
- - [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
128
- - [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
129
- - [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
130
- - [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
131
- - [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
132
- - [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
133
- - [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
134
- - [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
135
-
136
- ## License
137
-
138
- [MIT](./LICENSE)
1
+ # @richhtmleditor/vue
2
+
3
+ Vue 3 component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). WYSIWYG authoring with toolbar presets, slot-based custom 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`** — Vue 3 `defineComponent` wrapper around `createEditor`
14
+ - **Props** — `content`, `editable`, `dark`, `theme`, `toolbar`, `features`, `plugins`
15
+ - **Custom tools** — `customToolIds` with `#tool-{id}` or default `#tool` slots
16
+ - **Events** — `@change` and `@save` emit `EditorContent`
17
+ - Re-exports all public symbols from `@richhtmleditor/core`
18
+
19
+ > Ships as ESM with TypeScript declarations. Peer dep: `vue` ^3.5. Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in your app entry.
20
+
21
+ **Keywords:** `richhtmleditor` `vue` `vue3` `wysiwyg` `rich-text-editor`
22
+
23
+ ## Install
24
+
25
+ ```bash
26
+ npm install @richhtmleditor/vue @richhtmleditor/themes
27
+ # Adds @richhtmleditor/core automatically.
28
+ # Peer dep: vue ^3.5.
29
+ ```
30
+
31
+ ## Usage — component
32
+
33
+ ```vue
34
+ <script setup lang="ts">
35
+ import { ref } from "vue";
36
+ import { RichHtmlEditor } from "@richhtmleditor/vue";
37
+ import "@richhtmleditor/themes/richhtmleditor.css";
38
+
39
+ const html = ref("<p>Hello <strong>world</strong></p>");
40
+
41
+ function onChange(content: { html: string }) {
42
+ html.value = content.html;
43
+ }
44
+ </script>
45
+
46
+ <template>
47
+ <RichHtmlEditor
48
+ :content="html"
49
+ toolbar="standard"
50
+ :features="{ tables: true, media: true }"
51
+ @change="onChange"
52
+ />
53
+ </template>
54
+ ```
55
+
56
+ ## Usage — custom tool slot
57
+
58
+ ```vue
59
+ <RichHtmlEditor
60
+ :toolbar="{ preset: 'standard', layout: ['bold', 'italic', '|', 'approve'] }"
61
+ :custom-tool-ids="['approve']"
62
+ >
63
+ <template #tool-approve="{ tool }">
64
+ <button type="button" @click="approve">Approve</button>
65
+ </template>
66
+ </RichHtmlEditor>
67
+ ```
68
+
69
+ ## Usage — enterprise plugins
70
+
71
+ ```vue
72
+ <script setup lang="ts">
73
+ import { createAiPlugin } from "@richhtmleditor/ai";
74
+ import { createCommentsPlugin } from "@richhtmleditor/comments";
75
+ import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
76
+ import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
77
+
78
+ const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
79
+
80
+ const plugins = [
81
+ createAiPlugin(),
82
+ createCommentsPlugin({ author: "Reviewer" }),
83
+ createWorkflowsPlugin({ actor: "Legal", role: "editor" })
84
+ ];
85
+ </script>
86
+
87
+ <template>
88
+ <RichHtmlEditor
89
+ toolbar="full"
90
+ :features="gate.features"
91
+ :plugins="plugins"
92
+ />
93
+ </template>
94
+ ```
95
+
96
+ ## API
97
+
98
+ ### `RichHtmlEditor` props
99
+
100
+ | Prop | Type | Description |
101
+ | --- | --- | --- |
102
+ | `content` | `string` | HTML content. |
103
+ | `editable` | `boolean` | Enable editing (default `true`). |
104
+ | `dark` | `boolean` | Dark theme tokens. |
105
+ | `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
106
+ | `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
107
+ | `features` | `EditorFeatureFlags` | Feature gates. |
108
+ | `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
109
+ | `customToolIds` | `string[]` | Tool IDs with matching `#tool-{id}` slots. |
110
+
111
+ ### `RichHtmlEditor` events
112
+
113
+ | Event | Payload | Description |
114
+ | --- | --- | --- |
115
+ | `change` | `EditorContent` | Fired on document edits. |
116
+ | `save` | `EditorContent` | Fired on save command. |
117
+
118
+ ### Slots
119
+
120
+ | Slot | Props | Description |
121
+ | --- | --- | --- |
122
+ | `tool-{id}` | `{ tool: ResolvedToolbarTool }` | Custom toolbar UI for a tool ID in `customToolIds`. |
123
+ | `tool` | `{ tool: ResolvedToolbarTool }` | Fallback slot when no `tool-{id}` slot exists. |
124
+
125
+ ## Related packages
126
+
127
+ - [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
128
+ - [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
129
+ - [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
130
+ - [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
131
+ - [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence and feature gates.
132
+ - [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
133
+ - [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
134
+ - [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
135
+ - [`@richhtmleditor/collab`](https://www.npmjs.com/package/@richhtmleditor/collab) — Yjs collaboration plugin.
136
+ - [`@richhtmleditor/diagrams`](https://www.npmjs.com/package/@richhtmleditor/diagrams) — Mermaid diagrams plugin.
137
+ - [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
138
+ - [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF/HTML export plugin.
139
+ - [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — real-time spell check plugin.
140
+ - [`@richhtmleditor/templates`](https://www.npmjs.com/package/@richhtmleditor/templates) — document templates plugin.
141
+ - [`@richhtmleditor/mentions`](https://www.npmjs.com/package/@richhtmleditor/mentions) — @ mentions plugin.
142
+
143
+ ## License
144
+
145
+ [MIT](./LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@richhtmleditor/vue",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Vue 3 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.0.0"
24
+ "@richhtmleditor/core": "^1.1.0"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "vue": "^3.5.0"