CodeMirror in blocks

app/assets/javascripts/admin/appstack.js

@@ -13,8 +13,6 @@
 //= require slug/slug
 //= require cocoon
 //= require codemirror/lib/codemirror
-//= require codemirror/mode/css/css
-//= require codemirror/mode/sass/sass
 //= require_self
 //= require_tree ./commons
 //= require_tree ../application/plugins

app/assets/javascripts/admin/plugins/codemirror.js

+//= require codemirror/mode/xml/xml
+//= require codemirror/mode/javascript/javascript
+//= require codemirror/mode/css/css
+//= require codemirror/mode/htmlmixed/htmlmixed
+//= require codemirror/mode/sass/sass
+
 /*global CodeMirror */
 
 // Add [data-provider="codemirror"] to textarea.

app/assets/javascripts/admin/pure.js

@@ -14,8 +14,6 @@
 //= require slug/slug
 //= require cocoon
 //= require codemirror/lib/codemirror
-//= require codemirror/mode/css/css
-//= require codemirror/mode/sass/sass
 //= require_self
 //= require_tree ./commons
 //= require_tree ../application/plugins

app/views/admin/communication/blocks/components/_edit.html.erb

@@ -19,6 +19,7 @@ placeholder ||= t "#{i18n_component}.placeholder", default: ''
 hint ||= t "#{i18n_component}.hint", default: ''
 none ||= t "#{i18n_component}.none", default: ''
 summernote_config ||= "mini-list"
+codemirror_mode ||= "htmlmixed"
 partial = "admin/communication/blocks/components/#{component.kind}/edit"
 
 local_assigns[:template] = template
@@ -31,5 +32,6 @@ local_assigns[:placeholder] = placeholder
 local_assigns[:hint] = hint
 local_assigns[:none] ||= t "#{i18n_component}.none", default: ''
 local_assigns[:summernote_config] ||= summernote_config
+local_assigns[:codemirror_mode] ||= codemirror_mode
 %>
 <%= render partial, **local_assigns %>

app/views/admin/communication/blocks/components/code/_edit.html.erb

@@ -4,7 +4,8 @@
   <%= label %>
 </label>
 <textarea :id="<%= dom_id.html_safe %>"
-          class="form-control mb-3"
+          class="form-control mb-3 codemirror-vue"
+          data-codemirror-mode="<%= codemirror_mode %>"
           rows="<%= rows %>"
           v-model="<%= model %>.<%= property %>"
           placeholder="<%= placeholder %>"></textarea>

app/views/admin/communication/blocks/edit.html.erb

@@ -71,9 +71,9 @@
         this.uploadFile(event.target, files[0], object, key);
       },
       uploadFile(input, file, object, key) {
-        var size = Math.round(file.size / 1024 / 1024), 
+        var size = Math.round(file.size / 1024 / 1024),
             sizeLimit = <%= Communication::Block::IMAGE_MAX_SIZE %>,
-            sizeLimitMo = 0, 
+            sizeLimitMo = 0,
             controller;
         if (input.hasAttribute('data-size-limit')) {
           sizeLimit = input.getAttribute('data-size-limit');
@@ -107,6 +107,13 @@
           this.initSummernote($summernoteElements.get(index));
         }.bind(this));
       },
+      handleCodemirrors() {
+        var $codemirrorElements = $('.codemirror-vue');
+
+        $codemirrorElements.each(function(index){
+          this.initCodemirror($codemirrorElements.get(index));
+        }.bind(this));
+      },
       initSummernote(element) {
         var config = element.getAttribute('data-summernote-config') || 'default';
         $(element).summernote({
@@ -121,10 +128,22 @@
             }.bind(this)
           }
         });
+      },
+      initCodemirror(element) {
+        console.log(element.getAttribute('data-codemirror-mode'));
+        CodeMirror.fromTextArea(element, {
+            lineNumbers: true,
+            styleActiveLine: true,
+            indentUnit: 2,
+            viewportMargin: Infinity,
+            mode: element.getAttribute('data-codemirror-mode')
+        });
       }
     },
     mounted: function() {
       this.handleSummernotes();
+      // Use Timeout to prevent display issues
+      setTimeout(this.handleCodemirrors.bind(this), 0);
     }
   });