Update config-editor directive

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>

app/javascript/packs/codemirror.js

@@ -1,4 +1,5 @@
 import CodeMirror from 'codemirror/lib/codemirror'
+import 'lodash/lodash'
 
 // See: http://codemirror.net/doc/manual.html#modeapi
 // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
@@ -75,16 +76,15 @@ $(function(){
 });
 
 Vue.directive('config-editor', {
-  bind: function(){
-    var $parent = this.vm;
+  bind: function(el, binding, vnode, oldVnode){
     // NOTE: needed delay for waiting CodeMirror setup
     _.delay(function(textarea){
-      var cm = codemirrorify(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){
         // bridge Vue - CodeMirror world
-        $parent.editContent = code_mirror.getValue();
+        el.dataset.content = code_mirror.getValue();
       });
-    }, 0, this.el);
+    }, 0, el);
   }
 });

app/javascript/packs/settings.js

@@ -5,8 +5,7 @@ $(document).ready(() => {
     data: function() {
       return {
         mode: 'default',
-        processing: false,
-        editContent: null
+        processing: false
       };
     },
     created: function() {
@@ -33,13 +32,14 @@ $(document).ready(() => {
       onSubmit: function(ev) {
         const token = document.getElementsByName("csrf-token")[0].getAttribute('content');
         this.processing = true;
+        this.content = $(`#${this.id} textarea.form-control`)[0].dataset.content;
         $.ajax({
           url: this.endpoint,
           method: "POST",
           data: {
             _method: "PATCH",
             id: this.id,
-            content: this.editContent
+            content: this.content
           },
           headers: {
             'X-CSRF-Token': token
@@ -56,7 +56,6 @@ $(document).ready(() => {
       initialState: function(){
         this.processing = false;
         this.mode = 'default';
-        this.editContent = this.content;
       },
       destroy: function(){
         const token = document.getElementsByName("csrf-token")[0].getAttribute('content');

app/views/shared/vue/_setting.html.erb

@@ -11,7 +11,7 @@
   <div class="card-body collapse" v-bind:id="id">
     <pre v-if="mode != 'edit'">{{ content }}</pre>
     <p v-if="mode == 'edit'">
-      <textarea v-config-editor class="form-control" v-model="editContent" v-bind:disabled="processing"></textarea>
+      <textarea v-config-editor class="form-control" v-model="content" v-bind:disabled="processing"></textarea>
     </p>
     <p class="float-right">
       <button v-if="mode != 'edit'" class="btn btn-secondary" v-on:click="onEdit"><%= t('terms.edit') %></button>