feat: support Mermaid charts in rich text parsing

[wsxiaolin]

Motivation

• Enable rendering of Mermaid diagrams inside user-submitted rich text so pages can display flowcharts and other diagrams inline.
• Avoid conflicts between Mermaid rendering and code syntax highlighting by excluding Mermaid blocks from highlight.js processing.
• Keep the parser resilient by rendering diagrams only when possible and preserving original code blocks on failure.

Description

• Add mermaid runtime dependency in package.json and update package-lock.json to include Mermaid and its transitive dependencies.
• Extend src/services/pltxt2htm/advancedParser.ts to import mermaid, initialize it once via ensureMermaidInitialized, and add renderMermaidDiagrams which finds pre code.language-mermaid blocks and replaces them with rendered SVGs when possible.
• Call renderMermaidDiagrams before syntax highlighting and change the highlight selector to pre code:not(.language-mermaid) to prevent double-processing of Mermaid blocks.
• Fall back to leaving the original code block intact when Mermaid rendering throws an error to avoid breaking the UI.

Testing

• Ran npm install mermaid which completed successfully and updated package-lock.json.
• Ran npm run build which completed successfully with a production build created.
• Ran npm run eslint which finished with existing warnings and no new errors introduced by the change.

---

Codex Task

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7078e7910b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep Mermaid in strict mode for untrusted rich-text input

This parser renders user-provided rich text and then injects Mermaid SVG via innerHTML, so switching Mermaid to securityLevel: "loose" removes the default safety posture (HTML encoding and disabled click behavior) for untrusted diagram content. In contexts like message/comment rendering, this materially increases XSS/scriptable-content risk compared with Mermaid’s default strict mode and should be treated as a security regression unless the input is fully trusted and separately sanitized.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Generate collision-free Mermaid render IDs

The render ID uses Date.now() plus per-call index, which is not globally unique across separate parse() executions; multiple components rendering Mermaid diagrams in the same millisecond can produce identical IDs. Mermaid requires a unique ID per diagram, so collisions can cause intermittent broken rendering or duplicated SVG ID references when several rich-text blocks mount together.

Useful? React with 👍 / 👎.