Blocks : fix multiple summernote in vue

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

@@ -72,23 +72,41 @@
       getImageUrl(data) {
         return this.getFileUrl(data.signed_id, data.filename);
       },
-      handleSummernote() {
-        var config = this.$refs.summernoteInput.getAttribute('data-summernote-config') || 'default';
-        $(this.$refs.summernoteInput).summernote({
+      handleSummernotes() {
+        var $summernoteElements = $('.summernote-vue');
+
+        $summernoteElements.each(function(index){
+          this.initSummernote($summernoteElements.get(index));
+        }.bind(this));
+      },
+      initSummernote(element) {
+        var config = element.getAttribute('data-summernote-config') || 'default';
+
+        $(element).summernote({
           toolbar: window.SUMMERNOTE_CONFIGS[config].toolbar, // Dependent of app/assets/javascripts/admin/plugins/summernote.js
           callbacks: {
             onChange: function(contents, $editable) {
-              this.$refs.summernoteInput.value = contents;
-              this.$refs.summernoteInput.dispatchEvent(new Event('input'));
+              element.value = contents;
+              element.dispatchEvent(new Event('input'));
             }.bind(this)
           }
         });
       }
+      // handleSummernote() {
+      //   var config = this.$refs.summernoteInput.getAttribute('data-summernote-config') || 'default';
+      //   $(this.$refs.summernoteInput).summernote({
+      //     toolbar: window.SUMMERNOTE_CONFIGS[config].toolbar, // Dependent of app/assets/javascripts/admin/plugins/summernote.js
+      //     callbacks: {
+      //       onChange: function(contents, $editable) {
+      //         this.$refs.summernoteInput.value = contents;
+      //         this.$refs.summernoteInput.dispatchEvent(new Event('input'));
+      //       }.bind(this)
+      //     }
+      //   });
+      // }
     },
     mounted: function() {
-      if (this.$refs.summernoteInput) {
-        this.handleSummernote();
-      }
+      this.handleSummernotes();
     }
   });
 

app/views/admin/communication/blocks/templates/chapter/_edit.html.erb

@@ -6,11 +6,25 @@
     </label>
     <div class="summernote">
       <textarea id="text"
-              class="form-control"
+              class="form-control summernote-vue"
               v-model="data.text"
-              ref="summernoteInput"
               data-summernote-config="mini-list"
               placeholder="<%= t '.text_placeholder' %>"></textarea>
     </div>
   </div>
 </div>
+<div class="row">
+  <div class="col-xxl-4 col-md-6">
+    <label  class="form-label"
+            for="notes">
+      <%= t '.notes_label' %>
+    </label>
+    <div class="summernote">
+      <textarea id="notes"
+              class="form-control summernote-vue"
+              v-model="data.notes"
+              data-summernote-config="mini"
+              placeholder="<%= t '.notes_placeholder' %>"></textarea>
+    </div>
+  </div>
+</div>