[pull] develop from mermaid-js:develop

.changeset/tired-rockets-rule.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Fix invalid syntax between state and '{'

docs/syntax/classDiagram.md

@@ -1165,6 +1165,12 @@ It is possible to hide the empty members box of a class node.
 
 This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
 
+### Possible configuration parameters:
+
+| Parameter           | Description                                                  | Default value |
+| ------------------- | ------------------------------------------------------------ | ------------- |
+| hideEmptyMembersBox | Hides the empty members box of a class node when set to true | false         |
+
 ```mermaid-example
 ---
   config:

packages/mermaid/src/diagrams/state/parser/state-parser.spec.js

@@ -14,6 +14,40 @@ describe('state parser can parse...', () => {
     stateDiagram.parser.yy.clear();
   });
 
+  describe('invalid name between state and curly bracket', () => {
+    describe('valid syntax', () => {
+      it('should only accept 1 word', () => {
+        const diagramText = `stateDiagram-v2
+        state valid { X }`;
+
+        stateDiagram.parser.parse(diagramText);
+
+        const states = stateDiagram.parser.yy.getStates();
+        expect(states.get('valid')).not.toBeUndefined();
+      });
+    });
+
+    describe('invalid syntax', () => {
+      it('should throw error with 2 words', () => {
+        const diagramText = `stateDiagram-v2
+        state invalid syntax { Y }`;
+
+        expect(() => {
+          stateDiagram.parser.parse(diagramText);
+        }).toThrow('Error: State name must be a single word.');
+      });
+
+      it('should also throw with more than 2 words', () => {
+        const diagramText = `stateDiagram-v2
+        state invalid syntax with more than 2 words { Z }`;
+
+        expect(() => {
+          stateDiagram.parser.parse(diagramText);
+        }).toThrow('Error: State name must be a single word.');
+      });
+    });
+  });
+
   describe('states with id displayed as a (name)', () => {
     describe('syntax 1: stateID as "name in quotes"', () => {
       it('stateID as "some name"', () => {

packages/mermaid/src/diagrams/state/parser/stateDiagram.jison

@@ -130,6 +130,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <STATE_ID>[^\n\{]*         { if (!processId()) return; this.popState(); /* console.log('STATE_ID', yytext); */ return "ID"; }
 <STATE_STRING>["]          { this.popState(); }
 <STATE_STRING>[^"]*        { /* console.log('Long description:', yytext); */ return "STATE_DESCR"; }
+<STATE>\w+\s+\w+.*?\{      { throw new Error('Error: State name must be a single word. Found: "' + yytext.trim() + '"'); }
 <STATE>[^\n\s\{]+          { /* console.log('COMPOSIT_STATE', yytext); */ return 'COMPOSIT_STATE'; }
 <STATE>\n                  { this.popState(); }
 <INITIAL,STATE>\{          { this.popState(); this.pushState('struct'); /* console.log('begin struct', yytext); */ return 'STRUCT_START'; }
@@ -349,4 +350,4 @@ notePosition
     | right_of
     ;
 
-%%
+%%

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -768,6 +768,12 @@ It is possible to hide the empty members box of a class node.
 
 This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
 
+### Possible configuration parameters:
+
+| Parameter           | Description                                                  | Default value |
+| ------------------- | ------------------------------------------------------------ | ------------- |
+| hideEmptyMembersBox | Hides the empty members box of a class node when set to true | false         |
+
 ```mermaid-example
 ---
   config: