From 50e7563ba57cda0b369e0a3cd2a884ac101c1100 Mon Sep 17 00:00:00 2001
From: Yufan You <ouuansteve@gmail.com>
Date: Thu, 14 Apr 2022 15:04:07 +0800
Subject: [PATCH] feat(GrammarRuleTree): display strings in quotes in <code>

---
 src/components/GameRuleDialog.vue | 6 ++++--
 src/grammar/GrammarRuleTree.vue   | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/GameRuleDialog.vue b/src/components/GameRuleDialog.vue
index b0a6338..a22c0ff 100644
--- a/src/components/GameRuleDialog.vue
+++ b/src/components/GameRuleDialog.vue
@@ -74,8 +74,9 @@
         What's more, you can click on a node, either in the node type list or in the AST,
         to see the grammar structure of the corresponding node type.
         In the grammar structure, green nodes are node types in the AST,
-        blue nodes are strings or regex patterns,
-        and yellow nodes are "node types" which are not displayed in the AST.
+        yellow nodes are "node types" which are not displayed in the AST.
+        Strings are shown as <n-text code>"string"</n-text> or <n-text code>'string'</n-text>,
+        and regex patterns are shown as <n-text code>/pattern/</n-text>.
       </n-p>
       <n-p>
         It could be troublesome to edit a subtree of your code in the original code editor.
@@ -117,6 +118,7 @@ import {
   NUl,
   NP,
   NScrollbar,
+  NText,
 } from 'naive-ui';
 import { HelpCircle } from '@vicons/ionicons5';
 
diff --git a/src/grammar/GrammarRuleTree.vue b/src/grammar/GrammarRuleTree.vue
index af41da1..9daf80b 100644
--- a/src/grammar/GrammarRuleTree.vue
+++ b/src/grammar/GrammarRuleTree.vue
@@ -75,7 +75,7 @@ function grammarTreeOption(rule: Rule | undefined, key: string, aliased: boolean
     case 'PATTERN':
       return {
         key,
-        prefix: () => h(NText, { type: 'info' }, () => RegExp(rule.value).toString()),
+        prefix: () => h(NText, { code: true }, () => RegExp(rule.value).toString()),
       };
     case 'REPEAT':
       return {
@@ -106,7 +106,11 @@ function grammarTreeOption(rule: Rule | undefined, key: string, aliased: boolean
     case 'STRING':
       return {
         key,
-        prefix: () => h(NText, { type: 'info' }, () => rule.value),
+        prefix: () => h(NText, { code: true }, () => {
+          const { value } = rule;
+          if (!value.includes('"') || value.includes("'")) return JSON.stringify(value);
+          return `'${JSON.stringify(value.replace(/"/g, "'")).replace(/'/g, '"').slice(1, -1)}'`;
+        }),
       };
     case 'SYMBOL':
       if (GRAMMAR.inline?.includes(rule.name)) {