From 2ff91e4d2b79c6106be85fd8187eee422b9ebdbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Gaya?= <sebastien.gaya@gmail.com>
Date: Fri, 10 Mar 2023 14:21:52 +0100
Subject: [PATCH] CodeMirror in blocks
---
app/assets/javascripts/admin/appstack.js | 2 --
.../javascripts/admin/plugins/codemirror.js | 6 +++++
app/assets/javascripts/admin/pure.js | 2 --
.../blocks/components/_edit.html.erb | 2 ++
.../blocks/components/code/_edit.html.erb | 3 ++-
.../admin/communication/blocks/edit.html.erb | 23 +++++++++++++++++--
6 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/app/assets/javascripts/admin/appstack.js b/app/assets/javascripts/admin/appstack.js
index 8621f71e5..288469caa 100644
--- a/app/assets/javascripts/admin/appstack.js
+++ b/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
diff --git a/app/assets/javascripts/admin/plugins/codemirror.js b/app/assets/javascripts/admin/plugins/codemirror.js
index 07a2bcddd..bfb64ac97 100644
--- a/app/assets/javascripts/admin/plugins/codemirror.js
+++ b/app/assets/javascripts/admin/plugins/codemirror.js
@@ -1,3 +1,9 @@
+//= 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.
diff --git a/app/assets/javascripts/admin/pure.js b/app/assets/javascripts/admin/pure.js
index 8a2392187..94017fb5f 100644
--- a/app/assets/javascripts/admin/pure.js
+++ b/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
diff --git a/app/views/admin/communication/blocks/components/_edit.html.erb b/app/views/admin/communication/blocks/components/_edit.html.erb
index b2bc336a1..f3c6a8352 100644
--- a/app/views/admin/communication/blocks/components/_edit.html.erb
+++ b/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 %>
diff --git a/app/views/admin/communication/blocks/components/code/_edit.html.erb b/app/views/admin/communication/blocks/components/code/_edit.html.erb
index 378a26d41..c21538631 100644
--- a/app/views/admin/communication/blocks/components/code/_edit.html.erb
+++ b/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>
diff --git a/app/views/admin/communication/blocks/edit.html.erb b/app/views/admin/communication/blocks/edit.html.erb
index d57c344ba..b045b155e 100644
--- a/app/views/admin/communication/blocks/edit.html.erb
+++ b/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);
}
});
--
GitLab