@diplodoc/mermaid-extension 0.0.9 → 1.1.0

package/Readme.md

@@ -5,7 +5,7 @@ This is extension for Diplodoc platform which adds support for Mermaid diagrams.
 Extension contains some parts:
 - [Prepared Mermaid runtime](#prepared-mermaid-runtime)
 - [MarkdownIt transform plugin](#markdownit-transform-plugin)
-- [React hook for smart control of Mermaid](#react-hook-for-smart-control-of-mermaid)
+- [React hook_and_component for smart control of Mermaid](#react-hook-for-smart-control-of-mermaid)
 
 ## Quickstart
 Attach plugin to transformer
@@ -78,12 +78,28 @@ window.mermaidJsonp.push((mermaid) => {
 });
 ```
 
+### Custom initialize options
+
+Exposed `mermaid.initialize` method has extra configuration options:
+
+- `zoom` - Enable diagram *zoom and explore* feature. Can be boolean or object with inner props.<br>
+  (Default: false)<br>
+  - `showMenu` - Show navigation menu.<br>
+    (Default: false)
+  - `bindKeys` - Enable `wasd` controls.<br>
+    Use `w/a/s/d` to explore diagram, `e/q` to zoom in/out and `r` to reset diagram position.<br>
+    (Default: false)
+  - `maximumScale` - Maximum zoom scale.<br>
+    (Default: 5)
+  - `resetOnBlur` - Reeset diagram position on outher click.<br>
+    (Default: false)
+
 ## MarkdownIt transform plugin
 
 Plugin for [@diplodoc/transform](https://github.com/diplodoc-platform/transform) package.
 
 Configuration:
-- `runtime` - name on runtime script which will be exposed in results `script` section.<br>
+- `runtime` - name of runtime script which will be exposed in results `script` section.<br>
   (Default: `_assets/mermaid-extension.js`)<br>
 
 - `bundle` - boolean flag to enable/disable copying of bundled runtime to target directory.<br>
@@ -93,19 +109,56 @@ Configuration:
 - `classes` - additional classes which will be added to Mermaid's diagrams.<br>
   Example: `my-own-class and-other-class`<br>
 
-## React hook for smart control of Mermaid
+## React hook and component for smart control of Mermaid
 
 Simplifies Mermaid control with react
 
-```ts
-import React, { useEffect } from 'react'
-import { useMermaid } from '@diplodoc/mermaid-extension/hooks'
+```tsx
+import React from 'react'
+import { transform } from '@diplodoc/transform'
+import mermaid from '@diplodoc/mermaid-extension/plugin'
+import { MermaidRuntime } from '@diplodoc/mermaid-extension/react'
+
+const MERMAID_RUNTIME = 'extension:mermaid';
+
+const Doc: React.FC = ({ content }) => {
+    const result = transform(content, {
+      plugins: [
+        // Initialize plugin for client/server rendering
+        mermaid.transform({
+          // Do not touch file system
+          bundle: false,
+          // Set custom runtime name for searching in result scripts
+          runtime: MERMAID_RUNTIME
+        })
+      ]
+    })
+  
+    // Load mermaid only if one or more diagram should be rendered
+    if (result.script.includes(MERMAID_RUNTIME)) {
+      // Load oversized mermaid runtime asyncronously
+      import('@diplodoc/mermaid-extension/runtime')
+    }
+  
+    return <div dangerouslySetInnerHTML={{ __html: result.html }} />
+}
 
 export const App: React.FC = ({ theme }) => {
-    const renderMermaid = useMermaid()
-
-    useEffect(() => {
-      renderMermaid({ theme })
-    }, [ theme, renderMermaid ])
+    return <>
+        <Doc content={`
+            \`\`\`mermaid
+            graph TD
+                A[Christmas] -->|Get money| B(Go shopping)
+                B --> C{Let me think}
+            \`\`\`
+        `}/>
+        <MermaidRuntime
+            zoom={{
+              showMenu: true,
+              bindKeys: true,
+              resetOnBlur: true,
+            }}
+        />
+    </>
 }
 ```

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@diplodoc/mermaid-extension",
-  "version": "0.0.9",
+  "version": "1.1.0",
   "description": "Mermaid plugin for Diplodoc transformer and builder",
   "main": "plugin/index.js",
   "types": "plugin/index.d.ts",
   "exports": {
     ".": "./plugin/index.js",
+    "./plugin": "./plugin/index.js",
     "./runtime": "./runtime/index.js",
-    "./hooks": "./hooks/index.js"
+    "./react": "./react/index.js",
+    "./hooks": "./react/index.js"
   },
   "scripts": {
     "build": "run-p build:*",
-    "build:plugin": "./esbuild/plugin.sh",
-    "build:hooks": "./esbuild/hooks.sh",
-    "build:runtime": "./esbuild/runtime.sh",
+    "build:js": "./esbuild/build.js",
     "build:declarations": "tsc --emitDeclarationOnly --outDir .",
     "prepublishOnly": "npm run build",
     "test": "jest"
@@ -39,10 +39,12 @@
   },
   "devDependencies": {
     "@doc-tools/transform": "^2.16.4",
+    "@types/d3": "^7.4.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^20.3.2",
     "@types/react": "^18.0.35",
     "esbuild": "^0.17.12",
+    "esbuild-inline-sass": "^0.4.1",
     "jest": "^29.5.0",
     "markdown-it": "^13.0.1",
     "npm-run-all": "^4.1.5",
@@ -50,6 +52,7 @@
     "typescript": "^5.0.2"
   },
   "dependencies": {
+    "@gravity-ui/icons": "^2.3.0",
     "mermaid": "^10.0.2",
     "ts-dedent": "^2.2.0"
   }