Fixed an issue with flowchart rendering. Remember to render html, securityLevel='loose' must be set by the siteConfig. The default securityLevel as of now is 'strict'. This causes html to be url encoded.

2025-09-23 09:20:03 +02:00 · 2020-07-27 05:29:21 -04:00
parent c8f652aaa8
commit 38d4b5be1a
19 changed files with 1258 additions and 833 deletions
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -3,6 +3,7 @@ import { logger } from '../../logger';
 import { getConfig } from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
+import mermaidAPI from '../../mermaidAPI';

 const MERMAID_DOM_ID_PREFIX = 'classid-';

@@ -14,6 +15,10 @@ let classCounter = 0;

 let funs = [];

+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(statement, context, type);
+};
+
 const splitClassNameAndType = function(id) {
  let genericType = '';
  let className = id;
@@ -288,6 +293,7 @@ const setupToolTips = function(element) {
 funs.push(setupToolTips);

 export default {
+  parseDirective,
  addClass,
  bindFunctions,
  clear,
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -7,8 +7,18 @@
 /* lexical grammar */
 %lex
 %x string generic struct
+// Directive states
+%x open_directive type_directive arg_directive
+

 %%
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
 \%\%[^\n]*\n*           /* do nothing */
 \n+                     return 'NEWLINE';
 \s+                     /* skip whitespace */
@@ -24,7 +34,7 @@


 "class"               return 'CLASS';
-//"click"               return 'CLICK';
+//"click"             return 'CLICK';
 "callback"            return 'CALLBACK';
 "link"                return 'LINK';
 "<<"                  return 'ANNOTATION_START';
@@ -130,7 +140,10 @@

 %% /* language grammar */

-mermaidDoc: graphConfig;
+mermaidDoc
+    : graphConfig
+    | directive mermaidDoc
+    ;

 graphConfig
    : CLASS_DIAGRAM NEWLINE statements EOF
@@ -149,6 +162,11 @@ className
    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
    ;

+directive
+    : openDirective typeDirective closeDirective 'NEWLINE'
+    | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
+    ;
+
 statement
    : relationStatement       { yy.addRelation($1); }
    | relationStatement LABEL { $1.title =  yy.cleanupLabel($2); yy.addRelation($1);        }
@@ -156,6 +174,7 @@ statement
    | methodStatement
    | annotationStatement
    | clickStatement
+    | directive
    ;

 classStatement
@@ -219,4 +238,21 @@ textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFA
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;

 alphaNumToken  : UNICODE_TEXT | NUM | ALPHA;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
+  ;
+
 %%
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -35,13 +35,14 @@ export const sanitizeText = (text, config) => {
  if (
    config.flowchart &&
    (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
-  )
+  ) {
    htmlLabels = false;
+  }

  if (htmlLabels) {
-    var level = config.securityLevel;
+    const level = config.securityLevel;

-    if (level == 'antiscript') {
+    if (level === 'antiscript') {
      txt = removeScript(txt);
    } else if (level !== 'loose') {
      // eslint-disable-line
--- a/src/diagrams/er/erDb.js
+++ b/src/diagrams/er/erDb.js
@@ -2,6 +2,7 @@
 *
 */
 import { logger } from '../../logger';
+import mermaidAPI from '../../mermaidAPI';

 let entities = {};
 let relationships = [];
@@ -19,6 +20,10 @@ const Identification = {
  IDENTIFYING: 'IDENTIFYING'
 };

+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(statement, context, type);
+};
+
 const addEntity = function(name) {
  if (typeof entities[name] === 'undefined') {
    entities[name] = name;
@@ -67,6 +72,7 @@ const clear = function() {
 export default {
  Cardinality,
  Identification,
+  parseDirective,
  addEntity,
  getEntities,
  addRelationship,
--- a/src/diagrams/er/parser/erDiagram.jison
+++ b/src/diagrams/er/parser/erDiagram.jison
@@ -1,8 +1,17 @@
 %lex

 %options case-insensitive
+%x open_directive type_directive arg_directive

 %%
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
+[\n]+                     return 'NEWLINE';
 \s+                       /* skip whitespace */
 [\s]+                     return 'SPACE';
 \"[^"]*\"                 return 'WORD';
@@ -29,21 +38,36 @@ o\{                       return 'ZERO_OR_MORE';

 start
    : 'ER_DIAGRAM' document 'EOF' { /*console.log('finished parsing');*/ }
+  	| directive start
    ;

 document
-    : /* empty */
-    | document statement
-    ;
+	: /* empty */ { $$ = [] }
+	| document line {$1.push($2);$$ = $1}
+	;
+
+line
+	: SPACE statement { $$ = $2 }
+	| statement { $$ = $1 }
+	| NEWLINE { $$=[];}
+	| EOF { $$=[];}
+	;
+
+directive
+  : openDirective typeDirective closeDirective 'NEWLINE'
+  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
+  ;

 statement
-    : entityName relSpec entityName ':' role
+    : directive
+    | entityName relSpec entityName ':' role
      {
-          yy.addEntity($1); 
-          yy.addEntity($3); 
+          yy.addEntity($1);
+          yy.addEntity($3);
          yy.addRelationship($1, $5, $3, $2);
          /*console.log($1 + $2 + $3 + ':' + $5);*/
-      };
+      }
+    ;

 entityName
    : 'ALPHANUM' { $$ = $1; /*console.log('Entity: ' + $1);*/ }
@@ -62,7 +86,7 @@ cardinality
    | 'ZERO_OR_MORE'                 { $$ = yy.Cardinality.ZERO_OR_MORE; }
    | 'ONE_OR_MORE'                  { $$ = yy.Cardinality.ONE_OR_MORE; }
    | 'ONLY_ONE'                     { $$ = yy.Cardinality.ONLY_ONE; }
-    ; 
+    ;

 relType
    : 'NON_IDENTIFYING'              { $$ = yy.Identification.NON_IDENTIFYING;  }
@@ -73,4 +97,21 @@ role
    : 'WORD'      { $$ = $1.replace(/"/g, ''); }
    | 'ALPHANUM'  { $$ = $1; }
    ;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
+  ;
+
 %%
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { logger } from '../../logger'; // eslint-disable-line
 import utils from '../../utils';
 import { getConfig } from '../../config';
 import common from '../common/common';
+import mermaidAPI from '../../mermaidAPI';

 // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = '';
@@ -20,6 +20,10 @@ let direction;
 // Functions to be run after graph rendering
 let funs = [];

+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(statement, context, type);
+};
+
 /**
 * Function called by parser when a node definition has been found
 * @param id
@@ -617,6 +621,7 @@ const destructLink = (_str, _startStr) => {
 };

 export default {
+  parseDirective,
  addVertex,
  addLink,
  updateLinkInterpolate,
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -9,8 +9,16 @@
 %x string
 %x dir
 %x vertex
+%x open_directive type_directive arg_directive
+
 %%
-\%\%[^\n]*\n*           /* do nothing */
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%[^\n]*                      { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -193,7 +201,10 @@

 %% /* language grammar */

-mermaidDoc: graphConfig document;
+mermaidDoc
+  : graphConfig document
+  | directive mermaidDoc
+  ;

 document
 	: /* empty */
@@ -207,14 +218,18 @@ document
 	;

 line
-	: statement
-	{$$=$1;}
+	: statement {$$=$1;}
 	| SEMI
 	| NEWLINE
 	| SPACE
 	| EOF
 	;

+directive
+    : openDirective typeDirective closeDirective separator
+    | openDirective typeDirective ':' argDirective closeDirective separator
+    ;
+
 graphConfig
    : SPACE graphConfig
    | NEWLINE graphConfig
@@ -274,6 +289,7 @@ statement
    // {$$=yy.addSubGraph($3,$5,$3);}
    | subgraph separator document end
    {$$=yy.addSubGraph(undefined,$3,undefined);}
+    | directive
    ;

 separator: NEWLINE | SEMI | EOF ;
@@ -298,8 +314,8 @@ verticeStatement: verticeStatement link node
        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
    |  verticeStatement link node spaceList
        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
-    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
-    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+    | node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+    | node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
    ;

 node: vertex
@@ -346,7 +362,7 @@ vertex:  idString SQS text SQE

 link: linkStatement arrowText
    {$1.text = $2;$$ = $1;}
-    | linkStatement TESTSTR SPACE
+    | linkStatement STR SPACE
    {$1.text = $2;$$ = $1;}
    | linkStatement arrowText SPACE
    {$1.text = $2;$$ = $1;}
@@ -365,24 +381,16 @@ arrowText:
    {$$ = $2;}
    ;

-text: textToken
-    {$$=$1;}
-    | text textToken
-    {$$=$1+''+$2;}
-    | STR
-    {$$=$1;}
+text: textToken {$$=$1;}
+    | text textToken {$$=$1+''+$2;}
    ;

-
-
 keywords
    : STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP;


-textNoTags: textNoTagsToken
-    {$$=$1;}
-    | textNoTags textNoTagsToken
-    {$$=$1+''+$2;}
+textNoTags: textNoTagsToken {$$=$1;}
+    | textNoTags textNoTagsToken {$$=$1+''+$2;}
    ;


@@ -424,54 +432,42 @@ linkStyleStatement
          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
    ;

-numList: NUM
-        {$$ = [$1]}
-    | numList COMMA NUM
-        {$1.push($3);$$ = $1;}
+numList
+    : NUM {$$ = [$1]}
+    | numList COMMA NUM {$1.push($3);$$ = $1;}
    ;

-stylesOpt: style
-        {$$ = [$1]}
-    | stylesOpt COMMA style
-        {$1.push($3);$$ = $1;}
+stylesOpt: style {$$ = [$1]}
+    | stylesOpt COMMA style {$1.push($3);$$ = $1;}
    ;

 style: styleComponent
-    |style styleComponent
-    {$$ = $1 + $2;}
+    | style styleComponent {$$ = $1 + $2;}
    ;

 styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;

 /* Token lists */

-textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
+textToken      : textNoTagsToken | STR {$$=$1;} | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;

 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;

 idString
-    :idStringToken
-    {$$=$1}
-    | idString idStringToken
-    {$$=$1+''+$2}
+    : idStringToken {$$=$1}
+    | idString idStringToken {$$=$1+''+$2}
    ;

 alphaNum
-    : alphaNumStatement
-    {$$=$1;}
-    | alphaNum alphaNumStatement
-    {$$=$1+''+$2;}
+    : alphaNumStatement {$$=$1;}
+    | alphaNum alphaNumStatement {$$=$1+''+$2;}
    ;

 alphaNumStatement
-    : DIR
-        {$$=$1;}
-    | alphaNumToken
-        {$$=$1;}
-    | DOWN
-        {$$='v';}
-    | MINUS
-        {$$='-';}
+    : DIR {$$=$1;}
+    | alphaNumToken {$$=$1;}
+    | DOWN {$$='v';}
+    | MINUS {$$='-';}
    ;

 alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
@@ -479,4 +475,21 @@ alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA |
 idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;

 graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
+  ;
+
 %%
--- a/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -13,34 +13,29 @@
 %options case-insensitive

 // Special states for recognizing aliases
-%x ID
-%x ALIAS
+// A special state for grabbing text up to the first comment/newline
+%x ID ALIAS LINE

 // Directive states
-%x OPEN_DIRECTIVE
-%x TYPE_DIRECTIVE
-%x ARG_DIRECTIVE
-
-// A special state for grabbing text up to the first comment/newline
-%x LINE
+%x open_directive type_directive arg_directive

 %%

-\%\%\{                                                          { this.begin('OPEN_DIRECTIVE'); return 'open_directive'; }
-<OPEN_DIRECTIVE>((?:(?!\}\%\%)[^:.])*)                          { this.begin('TYPE_DIRECTIVE'); return 'type_directive'; }
-<TYPE_DIRECTIVE>":"                                             { this.popState(); this.begin('ARG_DIRECTIVE'); return ':'; }
-<TYPE_DIRECTIVE,ARG_DIRECTIVE>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<ARG_DIRECTIVE>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-[\n]+                                                           return 'NL';
-\s+                                                             /* skip all whitespace */
-<ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
-<INITIAL,ID,ALIAS,LINE,ARG_DIRECTIVE,TYPE_DIRECTIVE,OPEN_DIRECTIVE>\#[^\n]*   /* skip comments */
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
+[\n]+                                                           return 'NEWLINE';
+\s+                                                             /* skip all whitespace */
+<ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
+<INITIAL,ID,ALIAS,LINE,arg_directive,type_directive,open_directive>\#[^\n]*   /* skip comments */
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 <ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)           { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
-<ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NL'; }
+<ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
 "rect"                                                          { this.begin('LINE'); return 'rect'; }
 "opt"                                                           { this.begin('LINE'); return 'opt'; }
@@ -60,7 +55,7 @@
 "sequenceDiagram"                                               return 'SD';
 "autonumber" 			                                              return 'autonumber';
 ","                                                             return ',';
-";"                                                             return 'NL';
+";"                                                             return 'NEWLINE';
 [^\+\->:\n,;]+                                                  { yytext = yytext.trim(); return 'ACTOR'; }
 "->>"                                                           return 'SOLID_ARROW';
 "-->>"                                                          return 'DOTTED_ARROW';
@@ -71,7 +66,7 @@
 ":"(?:(?:no)?wrap:)?[^#\n;]+                                    return 'TXT';
 "+"                                                             return '+';
 "-"                                                             return '-';
-<<EOF>>                                                         return 'NL';
+<<EOF>>                                                         return 'NEWLINE';
 .                                                               return 'INVALID';

 /lex
@@ -84,7 +79,7 @@

 start
 	: SPACE start
-	| NL start
+	| NEWLINE start
 	| directive start
 	| SD document { yy.apply($2);return $2; }
 	;
@@ -97,23 +92,23 @@ document
 line
 	: SPACE statement { $$ = $2 }
 	| statement { $$ = $1 }
-	| NL { $$=[]; }
+	| NEWLINE { $$=[]; }
 	;

 directive
-  : openDirective typeDirective closeDirective 'NL'
-  | openDirective typeDirective ':' argDirective closeDirective 'NL'
+  : openDirective typeDirective closeDirective 'NEWLINE'
+  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
  ;

 statement
-	: 'participant' actor 'AS' restOfLine 'NL' {$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant' actor 'NL' {$$=$2;}
-	| signal 'NL'
+	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant' actor 'NEWLINE' {$$=$2;}
+	| signal 'NEWLINE'
 	| autonumber {yy.enableSequenceNumbers()}
-	| 'activate' actor 'NL' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
-	| 'deactivate' actor 'NL' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
-	| note_statement 'NL'
-	| title text2 'NL' {$$=[{type:'setTitle', text:$2}]}
+	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
+	| 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
+	| note_statement 'NEWLINE'
+	| title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]}
 	| 'loop' restOfLine document end
 	{
 		$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});
--- a/src/diagrams/user-journey/parser/journey.jison
+++ b/src/diagrams/user-journey/parser/journey.jison
@@ -7,20 +7,19 @@
 %options case-insensitive

 // Directive states
-%x OPEN_DIRECTIVE
-%x TYPE_DIRECTIVE
-%x ARG_DIRECTIVE
+%x open_directive type_directive arg_directive
+

 %%

-\%\%\{                                                          { this.begin('OPEN_DIRECTIVE'); return 'open_directive'; }
-<OPEN_DIRECTIVE>((?:(?!\}\%\%)[^:.])*)                          { this.begin('TYPE_DIRECTIVE'); return 'type_directive'; }
-<TYPE_DIRECTIVE>":"                                             { this.popState(); this.begin('ARG_DIRECTIVE'); return ':'; }
-<TYPE_DIRECTIVE,ARG_DIRECTIVE>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<ARG_DIRECTIVE>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
-[\n]+                   return 'NL';
+[\n]+                   return 'NEWLINE';
 \s+                     /* skip whitespace */
 \#[^\n]*                /* skip comments */

@@ -54,13 +53,13 @@ document
 line
 	: SPACE statement { $$ = $2 }
 	| statement { $$ = $1 }
-	| NL { $$=[];}
+	| NEWLINE { $$=[];}
 	| EOF { $$=[];}
 	;

 directive
-  : openDirective typeDirective closeDirective 'NL'
-  | openDirective typeDirective ':' argDirective closeDirective 'NL'
+  : openDirective typeDirective closeDirective 'NEWLINE'
+  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
  ;

 statement
@@ -86,4 +85,4 @@ closeDirective
  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
  ;

-
+%%