@myst-theme/diagrams 0.9.2 → 0.9.3

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAY1D,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,2CA0B3E;AAED,eAAO,MAAM,mBAAmB,EAAE,YAEjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAY1D,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,2CA6B3E;AAED,eAAO,MAAM,mBAAmB,EAAE,YAEjC,CAAC"}

package/dist/index.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 function parse(id, text) {
     return __awaiter(this, void 0, void 0, function* () {
         const { default: mermaid } = yield import('mermaid');
@@ -20,10 +20,11 @@ function parse(id, text) {
     });
 }
 export function MermaidRenderer({ id, value }) {
+    const key = useId();
     const [graph, setGraph] = useState();
     const [error, setError] = useState();
     useEffect(() => {
-        parse(id, value)
+        parse(`mermaid-${key.replace(/:/g, '')}`, value)
             .then((svg) => {
             setGraph(svg);
             setError(undefined);
@@ -33,8 +34,8 @@ export function MermaidRenderer({ id, value }) {
             setError(err);
         });
     }, []);
-    return (_jsxs("figure", { className: "", children: [graph && _jsx("div", { dangerouslySetInnerHTML: { __html: graph } }), error && (_jsxs("pre", { children: ["Error parsing mermaid graph.", '\n\n', value] }))] }));
+    return (_jsxs("figure", { id: id, children: [graph && _jsx("div", { dangerouslySetInnerHTML: { __html: graph } }), error && (_jsxs("pre", { children: ["Error parsing mermaid graph.", '\n\n', error.message, '\n\n', value] }))] }));
 }
 export const MermaidNodeRenderer = ({ node }) => {
-    return _jsx(MermaidRenderer, { id: node.key, value: node.value });
+    return _jsx(MermaidRenderer, { id: node.html_id || node.identifier, value: node.value });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/diagrams",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,7 +20,7 @@
     "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
-    "@myst-theme/providers": "^0.9.2",
+    "@myst-theme/providers": "^0.9.3",
     "mermaid": "^9.3.0"
   },
   "peerDependencies": {