@richhtmleditor/diagrams 1.1.2 → 1.1.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 (2) hide show
  1. package/README.md +87 -87
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,87 +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)
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.3** — Depends on `@richhtmleditor/core` **^1.1.3**.
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.3
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.2",
3
+ "version": "1.1.3",
4
4
  "description": "Mermaid / flowchart diagram blocks plugin for Rich HTML Editor.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",