fix: multiline note with comma text makes crash some diagrams (#264)

* fix: multiline note with comma text makes crash some diagrams * chore: update shiki grammar
hikerpig · Feb 28, 2024 · e1feba4 · e1feba4
1 parent 0fec2d6
commit e1feba4
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 13 deletions.
diff --git a/.changeset/mean-jars-hug.md b/.changeset/mean-jars-hug.md
@@ -0,0 +1,11 @@
+---
+'@pintora/test-shared': patch
+'pintora-website': patch
+'pintora-demo': patch
+'@pintora/cli': patch
+'@pintora/standalone': patch
+'@pintora/target-wintercg': patch
+---
+
+fix: multiline note with comma text makes crash some diagrams
+
diff --git a/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne b/packages/pintora-diagrams/src/activity/parser/activityDiagram.ne
@@ -295,7 +295,7 @@ placement ->
 	| "right" {% (d) => "right" %}
 
 multilineNoteText ->
-    (%WORD|%NL):* %END_NOTE {%
+    (%COMMA|%WORD|%NL):* %END_NOTE {%
       function(d) {
         const v = d[0].map(l => {
           return l.map(o => tv(o))

diff --git a/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js b/packages/pintora-diagrams/src/sequence/__tests__/sequence-parser.spec.js
@@ -52,7 +52,7 @@ sequenceDiagram
     const multilineNoteExample = stripStartEmptyLines(`
 sequenceDiagram
   @start_note right of Pintora
-  aaa note -
+  aaa, note -
   bbb
   @end_note
     `)
@@ -62,7 +62,7 @@ sequenceDiagram
     expect(result.notes.length).toEqual(1)
     // parseMessage will trim text, so this may be somehow strange
     const messageText = result.notes[0].text
-    expect(messageText).toEqual('aaa note -\nbbb')
+    expect(messageText).toEqual('aaa, note -\nbbb')
     expect(result.notes[0].actor).toEqual('Pintora')
   })
 

diff --git a/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne b/packages/pintora-diagrams/src/sequence/parser/sequenceDiagram.ne
@@ -289,7 +289,7 @@ textWithColon -> %COLON _ %REST_OF_LINE {%
 %}
 
 multilineNoteText ->
-    (%WORD|%NL):* %END_NOTE {%
+    (%WORD|%COMMA|%NL):* %END_NOTE {%
       function(d) {
         // console.log('[multiline text]', d)
         const v = d[0].map(l => {

diff --git a/packages/test-shared/example-files/sequence-1.pintora b/packages/test-shared/example-files/sequence-1.pintora
@@ -9,7 +9,7 @@ sequenceDiagram
   deactivate Pintora
   @note over User,Pintora: note over
   @note right of User: note aside actor
-  @note right of User
+  @start_note right of User
   multiline note
   is possible
   @end_note

diff --git a/website/docs/diagrams/activity-diagram.mdx b/website/docs/diagrams/activity-diagram.mdx
@@ -199,7 +199,7 @@ activityDiagram
     :print error;
   endif
 
-  @note left
+  @start_note left
   left multiline note,
   no colon after placement
   @end_note

diff --git a/website/docs/diagrams/sequence-diagram.mdx b/website/docs/diagrams/sequence-diagram.mdx
@@ -31,7 +31,7 @@ sequenceDiagram
     Pintora->>User: Return error message
   end
   deactivate Pintora
-  @note left of Pintora
+  @start_note left of Pintora
   Different output formats according to render targets
   1. In browser side. output SVG or Canvas
   2. In Node.js side. output PNG file
@@ -47,7 +47,7 @@ sequenceDiagram
   Frida-->>Georgia: Flowers are beautiful
   @note over Frida,Georgia: Painters
   @note right of Georgia: Right
-  @note left of Georgia
+  @start_note left of Georgia
   multiline
   note
   @end_note

diff --git a/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx b/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/activity-diagram.mdx
@@ -200,7 +200,7 @@ activityDiagram
     :print error;
   endif
 
-  @note left
+  @start_note left
   左边的
   多行注释
   @end_note

diff --git a/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx b/...i18n/zh-CN/docusaurus-plugin-content-docs/current/diagrams/sequence-diagram.mdx
@@ -31,7 +31,7 @@ sequenceDiagram
     Pintora->>用户: 返回报错信息
   end
   deactivate Pintora
-  @note left of Pintora
+  @start_note left of Pintora
   渲染目标不同，结果媒介会有所不同
   1. 浏览器，可直接渲染到页面上 svg / canvas
   2. Node.js，默认 canvas，输出 PNG 位图
@@ -81,7 +81,7 @@ sequenceDiagram
   Frida-->>Georgia: Flowers are beautiful
   @note over Frida,Georgia: Painters
   @note right of Georgia: Right
-  @note left of Georgia
+  @start_note left of Georgia
   multiline
   note
   @end_note

diff --git a/website/static/data/pintora.tmLanguage.json b/website/static/data/pintora.tmLanguage.json
@@ -527,7 +527,7 @@
             },
             {
               "comment": "(note)(direction)(Actor)(,)?(Actor)?(:)(Message)",
-              "match": "\\s*(note|@note)\\s+((?:left|right)\\sof|over)\\s+(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)(,)?(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)?(:)(?:\\s+([^;#]*))?",
+              "match": "\\s*(note|@note|@start_note)\\s+((?:left|right)\\sof|over)\\s+(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)(,)?(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)?(:)(?:\\s+([^;#]*))?",
               "captures": {
                 "1": {
                   "name": "keyword.control.pintora"
@@ -554,7 +554,7 @@
             },
             {
               "comment": "Multiline note",
-              "begin": "(@note)\\s+((?:left|right)\\sof|over)\\s+(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)(,)?(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)?\\n",
+              "begin": "(@start_note)\\s+((?:left|right)\\sof|over)\\s+(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)(,)?(\\b[\"\\(\\)$&%\\^/#.?!*=<>\\'\\\\\\w\\s]+\\b\\s*)?\\n",
               "end": "(@end_note)",
               "beginCaptures": {
                 "1": {