@myst-theme/diagrams 1.2.2 → 1.3.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { NodeRenderer } from '@myst-theme/providers';
+import { type NodeRenderer } from '@myst-theme/providers';
 export declare function MermaidRenderer({ id, value, className, }: {
     value: string;
     id: string;

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;AAgB1D,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAiCA;AAED,eAAO,MAAM,mBAAmB,EAAE,YAQjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAe5E,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,eAAO,MAAM,mBAAmB,EAAE,YAQjC,CAAC"}

package/dist/index.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeSwitcher } from '@myst-theme/providers';
 import { useEffect, useId, useState } from 'react';
 import classNames from 'classnames';
 let _mermaid = undefined;
@@ -16,13 +17,13 @@ function loadMermaid() {
         if (_mermaid === undefined) {
             const module = yield import('mermaid');
             _mermaid = module.default;
-            _mermaid.initialize({ startOnLoad: false });
         }
         return _mermaid;
     });
 }
 export function MermaidRenderer({ id, value, className, }) {
     const key = useId();
+    const { isDark } = useThemeSwitcher();
     const [graph, setGraph] = useState();
     const [error, setError] = useState();
     useEffect(() => {
@@ -30,6 +31,7 @@ export function MermaidRenderer({ id, value, className, }) {
             try {
                 const mermaidID = `mermaid-${key.replace(/:/g, '')}`;
                 const mermaid = yield loadMermaid();
+                mermaid.initialize({ startOnLoad: false, theme: isDark ? 'dark' : 'default' });
                 const { svg } = yield mermaid.render(mermaidID, value);
                 setGraph(svg);
                 setError(undefined);
@@ -40,7 +42,7 @@ export function MermaidRenderer({ id, value, className, }) {
             }
         });
         render();
-    }, []);
+    }, [isDark]);
     return (_jsxs("figure", { id: id, className: className, 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, className }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/diagrams",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
-    "@myst-theme/providers": "^1.2.2",
+    "@myst-theme/providers": "^1.3.1",
     "mermaid": "^11.0.0",
     "classnames": "^2.3.2"
   },