@richhtmleditor/diagrams 1.1.0 → 1.1.2
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 +87 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @richhtmleditor/diagrams
|
|
2
|
+
|
|
3
|
+
Mermaid diagram plugin for Rich HTML Editor. Adds an **Insert Diagram** toolbar tool that opens a code editor with live Mermaid preview — flowcharts, sequence diagrams, class diagrams, and more. Built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).
|
|
4
|
+
|
|
5
|
+
**Current release: 1.1.2** — Depends on `@richhtmleditor/core` **^1.1.2**.
|
|
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)
|
|
10
|
+
|
|
11
|
+
### What's in 1.1.2
|
|
12
|
+
|
|
13
|
+
- **`createDiagramsPlugin`** — registers the `insertDiagram` toolbar tool
|
|
14
|
+
- **Mermaid live preview** — code editor with real-time SVG rendering
|
|
15
|
+
- **Diagram types** — flowchart, sequence, class, state, entity-relationship, gantt, pie, and more
|
|
16
|
+
- **DOCX/PDF export** — diagrams rasterize to PNG for DOCX; PDF uses full preview CSS
|
|
17
|
+
- **Dark mode** — diagram panel respects editor dark mode tokens
|
|
18
|
+
|
|
19
|
+
> Enterprise feature — requires enterprise licence.
|
|
20
|
+
|
|
21
|
+
**Keywords:** `richhtmleditor` `diagrams` `mermaid` `flowchart` `wysiwyg`
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @richhtmleditor/diagrams
|
|
27
|
+
# Requires @richhtmleditor/core (via framework wrapper or direct install).
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { createEditor } from "@richhtmleditor/core";
|
|
34
|
+
import { createDiagramsPlugin } from "@richhtmleditor/diagrams";
|
|
35
|
+
|
|
36
|
+
const editor = createEditor({
|
|
37
|
+
element: host,
|
|
38
|
+
toolbar: { preset: "full" },
|
|
39
|
+
plugins: [createDiagramsPlugin()]
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Angular
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { createDiagramsPlugin } from "@richhtmleditor/diagrams";
|
|
47
|
+
|
|
48
|
+
plugins = [createDiagramsPlugin()];
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### React
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { RichHtmlEditor } from "@richhtmleditor/react";
|
|
59
|
+
import { createDiagramsPlugin } from "@richhtmleditor/diagrams";
|
|
60
|
+
|
|
61
|
+
const plugins = [createDiagramsPlugin()];
|
|
62
|
+
|
|
63
|
+
<RichHtmlEditor toolbar={{ preset: "full" }} plugins={plugins} />
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API
|
|
67
|
+
|
|
68
|
+
### `createDiagramsPlugin(options?)`
|
|
69
|
+
|
|
70
|
+
Returns an `EditorPlugin` that registers the `insertDiagram` toolbar tool.
|
|
71
|
+
|
|
72
|
+
| Option | Type | Description |
|
|
73
|
+
| --- | --- | --- |
|
|
74
|
+
| `mermaidVersion` | `string?` | CDN version of Mermaid to load (default: latest). |
|
|
75
|
+
|
|
76
|
+
## Related packages
|
|
77
|
+
|
|
78
|
+
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and plugins API.
|
|
79
|
+
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
80
|
+
- [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
|
|
81
|
+
- [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF export plugin.
|
|
82
|
+
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
|
|
83
|
+
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
[MIT](./LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@richhtmleditor/diagrams",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Mermaid / flowchart diagram blocks plugin for Rich HTML Editor.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"prepack": "node ../../scripts/assert-pack-ready.mjs"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@richhtmleditor/core": "^1.1.
|
|
21
|
+
"@richhtmleditor/core": "^1.1.1"
|
|
22
22
|
},
|
|
23
23
|
"keywords": ["richhtmleditor", "diagrams", "mermaid", "flowchart", "technical-docs"],
|
|
24
24
|
"license": "MIT",
|