Loading
Issue #3616088: Support code blocks (language-mermaid) in addition to the [mermaid] shortcode
Issue: https://www.drupal.org/project/mermaid/issues/3616088
The filter only recognises the [mermaid]...[/mermaid] shortcode. That is not what any editor produces: CKEditor 5's Code Block plugin emits
, and so does every Markdown converter
for a ```mermaid fence. A site using the standard editor has to hand-write
the shortcode in source view, and content pasted or generated as Markdown
never renders.
Adds the code block form alongside the shortcode. Both go through
processMermaid() and produce the same markup, so no JS
change is needed.
Three details worth calling out for review:
1. The element deliberately does not survive into the output. Sites
that also run a highlight.js integration call hljs.highlightAll(), which
walks every "pre code" in the document and auto-detects a language no
matter what the filter order is. Leaving the in place would get
the diagram source syntax-highlighted underneath the rendered graph, and
would make the highlighter request a "mermaid" grammar that highlight.js
does not ship, producing a 404 on every page with a diagram. Replacing
the whole pair avoids both.
2. processMermaid() concatenated the %%{init}%% directive straight onto the
diagram source. That happened to work for the shortcode, whose captured
text starts with the newline after [mermaid], but it breaks for a code
block whose content starts at the diagram keyword: the directive and the
keyword end up on the same line and Mermaid fails to parse. The directive
now always ends with a newline, and the source is trimmed.
3. The libraries were attached unconditionally, so every page rendering
filtered text pulled the Mermaid bundle (around 1 MB) whether or not it
contained a diagram. They are now attached only when a diagram was
actually found, which is the pattern highlightjs_input_filter uses.
Verified on Drupal 10.6 with both syntaxes rendering to SVG on the same
page, a PHP code block on that page keeping its normal highlighting, no
console errors, and no library attached on pages without a diagram.
Closes #3616088