@diplodoc/mermaid-extension 1.4.2 → 2.0.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 (10) hide show
  1. package/README.md +83 -67
  2. package/build/runtime/index-node.css +2 -0
  3. package/build/runtime/index-node.css.map +7 -0
  4. package/build/runtime/index-node.js +235 -235
  5. package/build/runtime/index-node.js.map +4 -4
  6. package/build/runtime/index.css +82 -0
  7. package/build/runtime/index.css.map +7 -0
  8. package/build/runtime/index.js +7 -37
  9. package/build/runtime/index.js.map +3 -3
  10. package/package.json +13 -11
package/README.md CHANGED
@@ -1,13 +1,19 @@
1
1
  # Diplodoc Mermaid extension
2
2
 
3
3
  [![NPM version](https://img.shields.io/npm/v/@diplodoc/mermaid-extension.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/mermaid-extension)
4
+ [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_mermaid-extension&metric=alert_status)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_mermaid-extension)
5
+ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_mermaid-extension&metric=coverage)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_mermaid-extension)
6
+ [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_mermaid-extension&metric=sqale_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_mermaid-extension)
7
+ [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_mermaid-extension&metric=reliability_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_mermaid-extension)
8
+ [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_mermaid-extension&metric=security_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_mermaid-extension)
4
9
 
5
10
  This is extension for Diplodoc platform which adds support for Mermaid diagrams.
6
11
 
7
12
  Extension contains some parts:
13
+
8
14
  - [Prepared Mermaid runtime](#prepared-mermaid-runtime)
9
15
  - [MarkdownIt transform plugin](#markdownit-transform-plugin)
10
- - [React hook_and_component for smart control of Mermaid](#react-hook-for-smart-control-of-mermaid)
16
+ - [React hook and component for smart control of Mermaid](#react-hook-and-component-for-smart-control-of-mermaid)
11
17
 
12
18
  ## Quickstart
13
19
 
@@ -17,37 +23,38 @@ Attach plugin to transformer
17
23
  import mermaid from '@diplodoc/mermaid-extension';
18
24
  import transform from '@diplodoc/transform';
19
25
 
20
- const {result} = await transform(`
26
+ const {result} = await transform(
27
+ `
21
28
  \`\`\`mermaid
22
29
  graph TD
23
30
  A[Christmas] -->|Get money| B(Go shopping)
24
31
  \`\`\`
25
- `, {
26
- plugins: [
27
- mermaid.transform({ bundle: false })
28
- ]
29
- });
32
+ `,
33
+ {
34
+ plugins: [mermaid.transform({bundle: false})],
35
+ },
36
+ );
30
37
  ```
31
38
 
32
39
  Add mermaid runtime to your final page
33
40
 
34
41
  ```html
35
42
  <html>
36
- <head>
37
- <!-- Read more about '_assets/mermaid-extension.js' in 'MarkdownIt transform plugin' section -->
38
- <script src="_assets/mermaid-extension.js" async />
39
- </head>
40
- <body style="background: #000">
41
- ${result.html}
42
- <script>
43
- // Read more about 'mermaidJsonp' in 'Prepared Mermaid runtime' section
44
- window.mermaidJsonp = window.mermaidJsonp || [];
45
- window.mermaidJsonp.push((mermaid) => {
46
- mermaid.initialize({ theme: 'dark' });
47
- mermaid.run();
48
- });
49
- </script>
50
- </body>
43
+ <head>
44
+ <!-- Read more about '_assets/mermaid-extension.js' in 'MarkdownIt transform plugin' section -->
45
+ <script src="_assets/mermaid-extension.js" async />
46
+ </head>
47
+ <body style="background: #000">
48
+ ${result.html}
49
+ <script>
50
+ // Read more about 'mermaidJsonp' in 'Prepared Mermaid runtime' section
51
+ window.mermaidJsonp = window.mermaidJsonp || [];
52
+ window.mermaidJsonp.push((mermaid) => {
53
+ mermaid.initialize({theme: 'dark'});
54
+ mermaid.run();
55
+ });
56
+ </script>
57
+ </body>
51
58
  </html>
52
59
  ```
53
60
 
@@ -62,22 +69,24 @@ We disable Mermaid's `startOnLoad` option to precise control render step.
62
69
  Then we add `mermaidJsonp` global callback to handle Mermaid's loading.
63
70
 
64
71
  Also, we limit exposed Mermaid API by two methods:
72
+
65
73
  - `initialize` - configure mermaid before next render
66
74
  - `run` - start diagrams rendering
67
75
 
68
76
  Usage example:
77
+
69
78
  ```js
70
79
  window.mermaidJsonp = window.mermaidJsonp || [];
71
80
 
72
81
  // This callback will be called when runtime is loaded
73
82
  window.mermaidJsonp.push((mermaid) => {
74
- mermaid.initialize({ theme: 'dark' });
75
- mermaid.run();
83
+ mermaid.initialize({theme: 'dark'});
84
+ mermaid.run();
76
85
  });
77
86
 
78
- // You can configure more that one callback
87
+ // You can configure more than one callback
79
88
  window.mermaidJsonp.push((mermaid) => {
80
- console.log('Render diagrams');
89
+ console.log('Render diagrams');
81
90
  });
82
91
  ```
83
92
 
@@ -85,7 +94,7 @@ window.mermaidJsonp.push((mermaid) => {
85
94
 
86
95
  Exposed `mermaid.initialize` method has extra configuration options:
87
96
 
88
- - `zoom` - Enable diagram *zoom and explore* feature. Can be boolean or object with inner props.<br>
97
+ - `zoom` - Enable diagram _zoom and explore_ feature. Can be boolean or object with inner props.<br>
89
98
  (Default: false)<br>
90
99
  - `showMenu` - Show navigation menu.<br>
91
100
  (Default: false)
@@ -94,7 +103,7 @@ Exposed `mermaid.initialize` method has extra configuration options:
94
103
  (Default: false)
95
104
  - `maximumScale` - Maximum zoom scale.<br>
96
105
  (Default: 5)
97
- - `resetOnBlur` - Reeset diagram position on outher click.<br>
106
+ - `resetOnBlur` - Reset diagram position on outer click.<br>
98
107
  (Default: false)
99
108
 
100
109
  ## MarkdownIt transform plugin
@@ -102,11 +111,12 @@ Exposed `mermaid.initialize` method has extra configuration options:
102
111
  Plugin for [@diplodoc/transform](https://github.com/diplodoc-platform/transform) package.
103
112
 
104
113
  Configuration:
114
+
105
115
  - `runtime` - name of runtime script which will be exposed in results `script` section.<br>
106
116
  (Default: `_assets/mermaid-extension.js`)<br>
107
117
 
108
118
  - `bundle` - boolean flag to enable/disable copying of bundled runtime to target directory.<br>
109
- Where target directore is `<transformer output option>/<plugin runtime option>`<br>
119
+ Where target directory is `<transformer output option>/<plugin runtime option>`<br>
110
120
  Default: true<br>
111
121
 
112
122
  - `classes` - additional classes which will be added to Mermaid's diagrams.<br>
@@ -117,51 +127,57 @@ Configuration:
117
127
  Simplifies Mermaid control with react
118
128
 
119
129
  ```tsx
120
- import React from 'react'
121
- import { transform } from '@diplodoc/transform'
122
- import mermaid from '@diplodoc/mermaid-extension/plugin'
123
- import { MermaidRuntime } from '@diplodoc/mermaid-extension/react'
130
+ import React from 'react';
131
+ import {transform} from '@diplodoc/transform';
132
+ import mermaid from '@diplodoc/mermaid-extension/plugin';
133
+ import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';
124
134
 
125
135
  const MERMAID_RUNTIME = 'extension:mermaid';
126
136
 
127
- const Doc: React.FC = ({ content }) => {
128
- const result = transform(content, {
129
- plugins: [
130
- // Initialize plugin for client/server rendering
131
- mermaid.transform({
132
- // Do not touch file system
133
- bundle: false,
134
- // Set custom runtime name for searching in result scripts
135
- runtime: MERMAID_RUNTIME
136
- })
137
- ]
138
- })
139
-
140
- // Load mermaid only if one or more diagram should be rendered
141
- if (result.script.includes(MERMAID_RUNTIME)) {
142
- // Load oversized mermaid runtime asyncronously
143
- import('@diplodoc/mermaid-extension/runtime')
144
- }
145
-
146
- return <div dangerouslySetInnerHTML={{ __html: result.html }} />
147
- }
148
-
149
- export const App: React.FC = ({ theme }) => {
150
- return <>
151
- <Doc content={`
137
+ const Doc: React.FC = ({content}) => {
138
+ const result = transform(content, {
139
+ plugins: [
140
+ // Initialize plugin for client/server rendering
141
+ mermaid.transform({
142
+ // Do not touch file system
143
+ bundle: false,
144
+ // Set custom runtime name for searching in result scripts
145
+ runtime: MERMAID_RUNTIME,
146
+ }),
147
+ ],
148
+ });
149
+
150
+ // Load mermaid only if one or more diagram should be rendered
151
+ if (result.script.includes(MERMAID_RUNTIME)) {
152
+ // Load oversized mermaid runtime asynchronously
153
+ import('@diplodoc/mermaid-extension/runtime');
154
+ }
155
+
156
+ return <div dangerouslySetInnerHTML={{__html: result.html}} />;
157
+ };
158
+
159
+ export const App: React.FC = ({theme}) => {
160
+ return (
161
+ <>
162
+ <Doc
163
+ content={`
152
164
  \`\`\`mermaid
153
165
  graph TD
154
166
  A[Christmas] -->|Get money| B(Go shopping)
155
167
  B --> C{Let me think}
156
168
  \`\`\`
157
- `}/>
158
- <MermaidRuntime
159
- zoom={{
160
- showMenu: true,
161
- bindKeys: true,
162
- resetOnBlur: true,
163
- }}
164
- />
169
+ `}
170
+ />
171
+ <MermaidRuntime
172
+ zoom={{
173
+ showMenu: true,
174
+ bindKeys: true,
175
+ resetOnBlur: true,
176
+ }}
177
+ />
165
178
  </>
166
- }
179
+ );
180
+ };
167
181
  ```
182
+
183
+ For detailed information about architecture, development, and contributing, see [AGENTS.md](./AGENTS.md).
package/build/runtime/index-node.css ADDED
@@ -0,0 +1,2 @@
1
+ :root{--mermaid-zoom-control-size: 20px;--mermaid-zoom-control-pad: 5px;--mermaid-zoom-control-color: #000}[data-mermaid-zoom-enabled="1"]{position:relative}[data-mermaid-zoom-enabled="1"]>svg{outline:solid 1px var(--mermaid-zoom-control-color)}@keyframes mermaid-zoom-menu-controls-fadein{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.mermaid-zoom-menu{position:sticky;top:0;height:calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);overflow:hidden}.mermaid-zoom-menu-controls{position:absolute;right:0;top:0;height:calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);width:calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);animation:mermaid-zoom-menu-controls-fadein ease .2s}.mermaid-zoom-menu-control{position:absolute;width:var(--mermaid-zoom-control-size);height:var(--mermaid-zoom-control-size);pointer-events:all;cursor:pointer;transition:all .2s}.mermaid-zoom-menu-control:hover{transform:scale(1.3)}.mermaid-zoom-menu-control:active{transform:scale(1)}.mermaid-zoom-menu-control[data-action=up]{right:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);bottom:calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3)}.mermaid-zoom-menu-control[data-action=down]{right:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);bottom:var(--mermaid-zoom-control-pad)}.mermaid-zoom-menu-control[data-action=reset]{right:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);bottom:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2)}.mermaid-zoom-menu-control[data-action=left]{right:calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3);bottom:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2)}.mermaid-zoom-menu-control[data-action=right]{right:var(--mermaid-zoom-control-pad);bottom:calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2)}.mermaid-zoom-menu-control[data-action=zoomout]{right:calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3);bottom:calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3)}.mermaid-zoom-menu-control[data-action=zoomin]{right:var(--mermaid-zoom-control-pad);bottom:calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3)}.mermaid-zoom-menu-control svg{color:var(--mermaid-zoom-control-color);width:var(--mermaid-zoom-control-size);height:var(--mermaid-zoom-control-size)}
2
+ /*# sourceMappingURL=index-node.css.map */
package/build/runtime/index-node.css.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/zoom.scss"],
4
+ "sourcesContent": [":root {\n --mermaid-zoom-control-size: 20px;\n --mermaid-zoom-control-pad: 5px;\n --mermaid-zoom-control-color: #000;\n}\n\n[data-mermaid-zoom-enabled='1'] {\n position: relative;\n\n & > svg {\n outline: solid 1px var(--mermaid-zoom-control-color);\n }\n}\n\n@keyframes mermaid-zoom-menu-controls-fadein {\n from {\n transform: translateY(-100%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n.mermaid-zoom-menu {\n position: sticky;\n top: 0;\n height: calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);\n overflow: hidden;\n\n &-controls {\n position: absolute;\n right: 0;\n top: 0;\n height: calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);\n width: calc(var(--mermaid-zoom-control-size) * 3 + var(--mermaid-zoom-control-pad) * 4);\n animation: mermaid-zoom-menu-controls-fadein ease 0.2s;\n }\n\n &-control {\n position: absolute;\n width: var(--mermaid-zoom-control-size);\n height: var(--mermaid-zoom-control-size);\n pointer-events: all;\n cursor: pointer;\n transition: all 0.2s;\n\n &:hover {\n transform: scale(1.3);\n }\n\n &:active {\n transform: scale(1);\n }\n\n &[data-action='up'] {\n right: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n bottom: calc(\n var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3\n );\n }\n\n &[data-action='down'] {\n right: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n bottom: var(--mermaid-zoom-control-pad);\n }\n\n &[data-action='reset'] {\n right: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n bottom: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n }\n\n &[data-action='left'] {\n right: calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3);\n bottom: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n }\n\n &[data-action='right'] {\n right: var(--mermaid-zoom-control-pad);\n bottom: calc(var(--mermaid-zoom-control-size) + var(--mermaid-zoom-control-pad) * 2);\n }\n\n &[data-action='zoomout'] {\n right: calc(var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3);\n bottom: calc(\n var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3\n );\n }\n\n &[data-action='zoomin'] {\n right: var(--mermaid-zoom-control-pad);\n bottom: calc(\n var(--mermaid-zoom-control-size) * 2 + var(--mermaid-zoom-control-pad) * 3\n );\n }\n\n svg {\n color: var(--mermaid-zoom-control-color);\n width: var(--mermaid-zoom-control-size);\n height: var(--mermaid-zoom-control-size);\n }\n }\n}\n"],
5
+ "mappings": "AAAA,MACI,6BAAA,KACA,4BAAA,IACA,8BAAA,KAGJ,CAAA,+BACI,SAAA,SAEA,CAAA,8BAAA,CAAA,IACI,QAAA,MAAA,IAAA,IAAA,8BAIR,WAAA,kCACI,GACI,UAAA,WAAA,OAGJ,GACI,UAAA,WAAA,IAIR,CAAA,kBACI,SAAA,OACA,IAAA,EACA,OAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GACA,SAAA,OAEA,CAAA,2BACI,SAAA,SACA,MAAA,EACA,IAAA,EACA,OAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GACA,MAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GACA,UAAA,kCAAA,KAAA,IAGJ,CAAA,0BACI,SAAA,SACA,MAAA,IAAA,6BACA,OAAA,IAAA,6BACA,eAAA,IACA,OAAA,QACA,WAAA,IAAA,IAEA,CARJ,yBAQI,OACI,UAAA,MAAA,KAGJ,CAZJ,yBAYI,QACI,UAAA,MAAA,GAGJ,CAhBJ,yBAgBI,CAAA,gBACI,MAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GACA,OAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GAKJ,CAvBJ,yBAuBI,CAAA,kBACI,MAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GACA,OAAA,IAAA,4BAGJ,CA5BJ,yBA4BI,CAAA,mBACI,MAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GACA,OAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GAGJ,CAjCJ,yBAiCI,CAAA,kBACI,MAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GACA,OAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GAGJ,CAtCJ,yBAsCI,CAAA,mBACI,MAAA,IAAA,4BACA,OAAA,KAAA,IAAA,6BAAA,EAAA,IAAA,4BAAA,EAAA,GAGJ,CA3CJ,yBA2CI,CAAA,qBACI,MAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GACA,OAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GAKJ,CAlDJ,yBAkDI,CAAA,oBACI,MAAA,IAAA,4BACA,OAAA,KAAA,IAAA,6BAAA,EAAA,EAAA,EAAA,IAAA,4BAAA,EAAA,GAKJ,CAzDJ,0BAyDI,IACI,MAAA,IAAA,8BACA,MAAA,IAAA,6BACA,OAAA,IAAA",
6
+ "names": []
7
+ }