Mermaid option not working

[jtsternberg]

Any issue will be ignored if you don't provide the following detailed information.

I reported this issue here: https://wordpress.org/support/topic/on-by-default-and-mermaid-option-not-working/

Describe the bug

The bug I found is that the mermaid option isn't currently working due to the fact that the pre tag has a child code tag, and that seems to be throwing mermaid.js off.

Also, there is a JS error in the console related to the Clipboard JS functionality conflicting with the mermaid code blocks:

TypeError: codeClass.indexOf is not a function

If I add my hack to remove the code tag (and put the language-mermaid class on the pre tag, it starts working (though there the JS errors, more on that in a bit):

Here is my hack to remove the code tag, so you can see for yourself:

add_filter( 'the_content', function( $content ) {
    while ( preg_match( '/<pre><code class="language-mermaid">/', $content ) ) {
        $location = strpos( $content, '<pre><code class="language-mermaid">' );
        $end = strpos( $content, '</code></pre>', $location );
        $code = substr( $content, $location, $end - $location + strlen( '</code></pre>' ) );
        $code = str_replace( '<pre><code class="language-mermaid">', '<pre class="language-mermaid">', $code );
        $code = str_replace( '</code></pre>', '</pre>', $code );
        $content = substr_replace( $content, $code, $location, $end - $location + strlen( '</code></pre>' ) );
    }

    return $content;
}, 10, 1 );

This hack is not a good final solution — it would be better to fix it at the source.

The JS error can be fixed by changing var codeClass = pre[i].children[0].className; to var codeClass = pre[i].className === "mermaid" ? "language-mermaid" : pre[i].children[0].className; (assuming the pre tag change is made).

To reproduce

Steps to reproduce the behavior:

1. Go to Plugin settings page, then the Modules tab
2. Turn on Syntax Highlight prism.js
   • Enable Line Number setting
3. Turn on Copy to Clipboard clipboard.js
4. Turn on Image Paste
5. Turn on Mermaid mermaid.js
6. Turn on Flow Chart flowchart.js (I don't know if it's necessary to turn these all on to reproduce, but want to give the version that I'm using)
7. Save Changes

8. Add the following to a new post/page:

   ```mermaid
   pie title Pets adopted by volunteers
       "Dogs" : 386
       "Cats" : 85
       "Rats" : 15
   \```
   ---
   ```mermaid
   flowchart LR
       A([Prepare the Dough])
       B([Let it Rise])
       C([Preheat Oven])
       D([Prepare Toppings])
       E([Assemble Pizza])
       F([Bake Pizza])
       G([Serve])
   
       A --> B
       B --> C
       C --> D
       D --> E
       E --> F
       F --> G
   \```

   (remove the \ -- that's needed to prevent breaking the code block on github)

9. Publish the post/page.
10. View the post/page.
11. See the prism error, Syntax error in graph mermaid version 9.4.3
12. See the JS error in the console, TypeError: codeClass.indexOf is not a function

Expected behavior

The mermaid charts should render correctly. And the JS error should not be present.

Server environment

• WordPress version: 6.5.2
• WP Githuber MD plugin version: 1.16.3
• PHP version: 8.0.22

User environment

• OS: MacOS
• Browser: Chrome

Additional context

https://wordpress.org/support/topic/on-by-default-and-mermaid-option-not-working/

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.