From 3e11fd77be1fd8e4b265d00a5f9e81b2a2559a0e Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 21 Aug 2018 10:26:36 +0900
Subject: [PATCH 1/2] Fix style

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/codemirror.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/javascript/packs/codemirror.js b/app/javascript/packs/codemirror.js
index 5ed331821..2f06697e4 100644
--- a/app/javascript/packs/codemirror.js
+++ b/app/javascript/packs/codemirror.js
@@ -6,23 +6,23 @@ import "lodash/lodash";
 // See: http://codemirror.net/doc/manual.html#modeapi
 // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
 
-CodeMirror.defineMode("fluentd", function(){
+CodeMirror.defineMode("fluentd", function() {
   return {
-    startState: function(aa){
+    startState: function(aa) {
       return { "context" : null };
     },
-    token: function(stream, state){
-      if(stream.eatWhile(/[ \t]/)){
+    token: function(stream, state) {
+      if (stream.eatWhile(/[ \t]/)) {
         // ignore indenting spaces
         stream.skipTo(stream.peek());
         return;
       }
-      if(stream.eol()){
+      if (stream.eol()) {
         // reached end of line
         return;
       }
 
-      switch(stream.peek()){
+      switch (stream.peek()) {
       case "#":
         stream.skipToEnd();
         return "comment";
@@ -35,7 +35,7 @@ CodeMirror.defineMode("fluentd", function(){
         state.context = "inner-definition";
         return "keyword";
       default:
-        switch(state.context){
+        switch (state.context) {
         case "inner-bracket":
           stream.eat(/[^#<>]+/);
           return "keyword";
@@ -66,18 +66,18 @@ function codemirrorify(el) {
 }
 
 $(function(){
-  $(".js-fluentd-config-editor").each(function(_, el){
+  $(".js-fluentd-config-editor").each(function(_, el) {
     codemirrorify(el);
   });
 });
 
 Vue.directive("config-editor", {
-  bind: function(el, binding, vnode, oldVnode){
+  bind: function(el, binding, vnode, oldVnode) {
     // NOTE: needed delay for waiting CodeMirror setup
-    _.delay(function(textarea){
+    _.delay(function(textarea) {
       let cm = codemirrorify(textarea);
       // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
-      cm.on("change", function(code_mirror){
+      cm.on("change", function(code_mirror) {
         // bridge Vue - CodeMirror world
         el.dataset.content = code_mirror.getValue();
       });

From 533651c25bd4a57b408b2a9f95974bce51ffb430 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 21 Aug 2018 12:09:58 +0900
Subject: [PATCH 2/2] Fix visualization error with "\#"

Close #202

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/codemirror.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/javascript/packs/codemirror.js b/app/javascript/packs/codemirror.js
index 2f06697e4..3380dd360 100644
--- a/app/javascript/packs/codemirror.js
+++ b/app/javascript/packs/codemirror.js
@@ -44,7 +44,15 @@ CodeMirror.defineMode("fluentd", function() {
           state.context =  "inner-definition-keyword-appeared";
           return "variable";
         case "inner-definition-keyword-appeared":
-          stream.eatWhile(/[^#]/);
+          let eatBuiltin = function(stream, state) {
+            stream.eatWhile(/[^#]/);
+            if (stream.current().match(/\\$/)) {
+              stream.next() && eatBuiltin(stream, state);
+            } else {
+              return;
+            }
+          };
+          eat(stream, state);
           state.context = "inner-definition";
           return "builtin";
         default: