Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mermaid diagrams don't render inside closed Details elements #3559

Closed
5 tasks done
lampensau opened this issue Feb 7, 2022 · 2 comments
Closed
5 tasks done

Mermaid diagrams don't render inside closed Details elements #3559

lampensau opened this issue Feb 7, 2022 · 2 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@lampensau
Copy link

lampensau commented Feb 7, 2022

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

I've just noticed that my browsers based on Chromium no longer render a mermaid diagram that is residing inside a ??? note "" block. Diagrams outside of the block are rendered fine as seen in the official documentation.

Note: This problem doesn't seem to affect Firefox 96.

Expected behaviour

Diagrams should be rendered as normal regardless of being inside an admonition or details block.

Actual behaviour

Browsers throw an error inside the console:

grafik

Steps to reproduce

  1. Create an *.md document that contains the following
??? note ""
    ``` mermaid
    graph LR
      A[Start] --> B{Error?};
      B -->|Yes| C[Hmm...];
      C --> D[Debug];
      D --> B;
      B ---->|No| E[Yay!];
    ```
  1. Build the document.
  2. Visit document with chromium-based browser.

Package versions

  • Python: 3.9.2
  • MkDocs: 1.2.3
  • Material: 8.1.10+insiders.4.8.1

Configuration

site_name: My Docs
theme: material
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

  • Operating system: Debian 11, Windows 10
  • Browser: Chrome 98, Edge 98
@squidfunk squidfunk added the needs investigation Issue must be investigated by the maintainers label Feb 7, 2022
@squidfunk
Copy link
Owner

Thanks for reporting. Fixed in 97f8233. The error is only happening for collapsed admonition elements. The reason is that Element.innerText does not return anything when elements are invisible, but Element.textContent seems to do the trick. Since Mermaid blocks are not syntax highlighted, it should be safe to switch to Element.textContent, as there's not markup for Mermaid to choke on.

@squidfunk squidfunk added resolved Issue is resolved, yet unreleased if open bug Issue reports a bug and removed needs investigation Issue must be investigated by the maintainers labels Feb 8, 2022
@squidfunk squidfunk changed the title Mermaid diagrams don't render on Chromium based browsers Mermaid diagrams don't render inside closed Details elements Feb 8, 2022
@squidfunk
Copy link
Owner

squidfunk commented Feb 10, 2022

Released as part of 8.1.11+insiders-4.8.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

2 participants