Diagram with `%%-----` in comments freezes browser

a-vishar commented 6 months ago

Description

When I paste a specific diagram (below) into the editor, the editor freezes when using Chrome. There is no freezing when using Safari.

Steps to reproduce

1) Paste the code below into the editor

Screenshots

No response

Code Sample

%% LINK: https://develop.git.mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg

%% CODE:

graph TD
   A -->|Data Sync| B[Storage]

   %%----- Generic Styling Classes -----%%

   %% Deep Azure Blue
   classDef Azure fill:#005A9E,stroke:#333,stroke-width:2px;

   %%----- Generic Styling Classes -----%%

   class A,B;

Setup

Mermaid version: V11.0.0 & V10.9.0
Browser and Version: Chrome - Version 122.0.6261.128 (Official Build) (x86_64)

Additional Context

No response

sidharthv96 commented 6 months ago

Issue is with the comments, and is present in Chrome and Firefox, but not Safari (Validated).

Adding %%----- Generic Styling Classes -----%% breaks the diagram, works fine without the comments.

Suspect that the ---- part is interfering with yaml parsing.

sidharthv96 commented 6 months ago

This is not an issue with mermaid, but how monaco editor's highlighting works, based on the config provided. Disabling the initEditor(monaco); call fixes the issue. So we need to investigate which rule is causing the issue. Analysing the profile revealed that it's an issue with tokenization.

mermaid-js / mermaid-live-editor