Config does not work with docusaurus

[layershifter]

Version

1.3.2

Describe the bug

The issue started as "dark theme does not work".

To Reproduce

1. Open https://stackblitz.com/edit/github-pwuwsv-hvqsdq
2. Open "Tutorial" page that uses mermaid
3. See a graph.

Expected behavior

Uses dark theme.

Actual behavior

Uses light theme.

Additional context

I debugged it a bit and it seems that configSrc there is always undefined:

mdx-mermaid/src/Mermaid.tsx

Line 43 in 5b22959

const config: Config = useMemo(() => typeof configSrc === 'string' ? JSON.parse(configSrc) : configSrc, [configSrc])

This does not seem correct, so in microsoft/griffel#217 I monkey patched it and then it worked, but this does not seem like a proper solution.

Please let me know if it's a setup problem, but in sandbox (https://stackblitz.com/edit/github-pwuwsv-hvqsdq) I have a config exactly like in docs.

[JPeer264]

Hey I am facing the same issue, according to the patch you attached it seems that the config is always undefined, thus it will never enter the initialize where the dark theme is attached here.

A quickfix for your (or in general every setup) could be to have following in the docusaurus config [mdxMermaid.default, {}] (as seen here: https://stackblitz.com/edit/github-pwuwsv-kx6yjx?file=docusaurus.config.js).

But to fix the actual problem is to have either a default for the config or allow empty configs here in the useEffect as well. If @sjwall agrees in initializing mermaid without config then I can add a PR

[slorber]

FYI official Docusaurus support is coming with facebook/docusaurus#7490 (with proper dark theme support)