Editor Improvements (#278)

* Editor Improvements

- renders sponsors banner and footer server-side by replacing embedded
  custom tags
- changes preview process in editor by refreshing iframe with the
  unpublished body so that tags get embedded
- adds ability to drop images into CodeMirror
- makes CodeMirror the initial default editor instead of tinyMCE
- adds beforeunload warning when there are unsaved editor changes
- adds max-width on resize editor form and preview windows
- scopes sponsors in banner and footer to current website

* use post method on editor update

Co-authored-by: Cody Brooks <[email protected]>

Author: jonsgreen

app/assets/stylesheets/modules/_staff-website-page.scss

@@ -18,6 +18,7 @@
     resize: both;
     border: 1px solid black;
     height: 70vh;
+    max-width: 70vw;
     .inner {
       flex-grow: 1;
       margin: 0;

app/controllers/sponsors_controller.rb

@@ -5,14 +5,4 @@ def show
     @sponsors_by_tier = Sponsor.published.order_by_tier.group_by(&:tier)
     render layout: "themes/#{current_website.theme}"
   end
-
-  def sponsors_footer
-    @sponsors_in_footer = Sponsor.published.with_footer_image.order_by_tier
-    render layout: false
-  end
-
-  def banner_ads
-    @sponsors_in_banner = Sponsor.published.with_banner_ad
-    render layout: false
-  end
 end

app/controllers/staff/pages_controller.rb

@@ -9,7 +9,7 @@ def index
   end
 
   def show
-    @body = @page.unpublished_body || ""
+    @body = params[:preview] || @page.unpublished_body || ""
     render template: 'pages/show', layout: "themes/#{current_website.theme}"
   end
 

app/decorators/website_decorator.rb

@@ -24,4 +24,12 @@ def contact_email
   def closes_at
     event.closes_at(:month_day_year)
   end
+
+  def banner_sponsors
+    event.sponsors.published.with_banner_ad
+  end
+
+  def sponsors_in_footer
+    event.sponsors.published.with_footer_image.order_by_tier
+  end
 end

app/helpers/page_helper.rb

@@ -0,0 +1,14 @@
+module PageHelper
+  TAGS = {
+    "<sponsors-banner-adds></sponsors-banner-adds>" => "sponsors/banner_ads",
+    "<sponsors-footer></sponsors-footer>" => "sponsors/sponsors_footer"
+  }
+
+  def embed(body)
+    body.tap do |body|
+      TAGS.each do |tag, template|
+        body.gsub!(tag, render(template: template, layout: false))
+      end
+    end.html_safe
+  end
+end

app/javascript/controllers/banner_ads_controller.js

@@ -7,17 +7,7 @@ export default class extends Controller {
   }
 
   connect() {
-    const path = `/${this.eventSlugValue}/banner_ads`
-    fetch(path)
-      .then((res) => res.text())
-      .then((html) => {
-        const fragment = document
-          .createRange()
-          .createContextualFragment(html);
-        this.element.appendChild(fragment);
-
-        this.config()
-      })
+    this.config()
   }
 
   config() {

app/javascript/controllers/editor_controller.js

@@ -4,9 +4,10 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'
 
 export default class extends Controller {
   static targets = ['htmlContent', 'wysiwygContent', 'wysiwyg', 'html']
+  static values = { changed: { type: Boolean, default: false } }
 
   initialize () {
-    this.defaults = {
+    this.tinyMCEDefaults = {
       height: 500,
       menubar: false,
       plugins: [
@@ -24,16 +25,14 @@ export default class extends Controller {
       images_file_types: 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp,svg',
       relative_urls: false,
       convert_urls: false,
-      init_instance_callback: function(editor) {
-        var preview = document.getElementById('page-preview');
-        preview.contentWindow.document.getElementById("content").innerHTML = editor.getContent();
-        editor.on('input', function(e) {
-          var preview = document.getElementById('page-preview');
-          preview.contentWindow.document.getElementById("content").innerHTML = e.target.innerHTML;
+      init_instance_callback: (editor) => {
+        editor.on('input', (e) => {
+          this.preview(e.target.innerHTML);
+          this.changedValue = true;
         });
-        editor.on('change', function(e) {
-          var preview = document.getElementById('page-preview');
-          preview.contentWindow.document.getElementById("content").innerHTML = e.target.getContent();
+        editor.on('change', (e) => {
+          this.preview(e.target.getContent());
+          this.changedValue = true;
         });
       }
     }
@@ -44,16 +43,36 @@ export default class extends Controller {
     this.wysiwygTarget.classList.add("hidden");
     this.htmlTarget.classList.remove("hidden");
     this.htmlContentTarget.disabled = false;
+    this.initializeCodeMirror().setValue(this.wysiwygEditor.getContent());
+  }
+
+  initializeCodeMirror() {
     var editor = CodeMirror.fromTextArea(this.htmlContentTarget, {
       mode: "htmlmixed",
       lineWrapping: true,
     });
-    editor.setValue(this.wysiwygEditor.getContent());
     for (var i=0;i<editor.lineCount();i++) { editor.indentLine(i); }
-    editor.on('change', function(e) {
-      var preview = document.getElementById('page-preview');
-      preview.contentWindow.document.getElementById("content").innerHTML = e.getValue();
+    editor.on('change', (e) => {
+      this.changedValue = true;
+      this.preview(e.getValue());
     })
+    editor.on('drop', (e, event) => {
+      event.preventDefault();
+      this.uploadFile(event.dataTransfer.files[0], event, e)
+    })
+    return editor;
+  }
+
+  preview(content) {
+    this.debounce(function() {
+      document.getElementById('hidden-preview').value = content;
+      document.getElementById('preview-form').submit();
+    }, 1000)
+  }
+
+  debounce(func, delay) {
+    if(this.timeout) { clearTimeout(this.timeout) }
+    this.timeout = setTimeout(func, delay);
   }
 
   wysiwyg(e) {
@@ -65,6 +84,28 @@ export default class extends Controller {
     this.htmlEditor.toTextArea();
   }
 
+  uploadFile(file, event, editor) {
+    let url = '/image_uploads'
+    let formData = new FormData()
+
+    formData.append('file', file)
+
+    fetch(url, {
+      method: 'POST',
+      body: formData
+    }).then(response => response.json())
+      .then(data => {
+        let newline = `<img src="${data.location}"/>`
+        let doc= editor.getDoc()
+        editor.focus()
+        let x = event.pageX
+        let y = event.pageY
+        editor.setCursor(editor.coordsChar({left:x,top:y}))
+        let newpos = editor.getCursor()
+        doc.replaceRange(newline, newpos)
+      })
+  }
+
   get wysiwygEditor() {
     return tinyMCE.activeEditor;
   }
@@ -73,9 +114,22 @@ export default class extends Controller {
     return document.querySelector('.CodeMirror').CodeMirror;
   }
 
+  leavingPage(event) {
+    console.log(this.changedValue);
+    if (this.changedValue) {
+      event.returnValue = "Are you sure you want to leave with unsaved changes?";
+      return event.returnValue;
+    }
+  }
+
+  allowFormSubmission(event) {
+    this.changedValue = false;
+  }
+
   connect () {
-    let config = Object.assign({ target: this.wysiwygContentTarget }, this.defaults)
+    let config = Object.assign({ target: this.wysiwygContentTarget }, this.tinyMCEDefaults)
     tinyMCE.init(config)
+    this.initializeCodeMirror();
   }
 
   disconnect () {

app/views/pages/show.html.haml

@@ -1 +1 @@
-= @body.html_safe
+= embed(@body)

app/views/sponsors/banner_ads.html.haml

@@ -1,3 +1,8 @@
-.banner-ad-wrapper
-  - @sponsors_in_banner.each do |sponsor|
-    = link_to image_tag( sponsor.banner_ad, alt: sponsor.name), sponsor.url, target: "_blank", class: "banner-ad-item", data: { 'banner-ads-target': 'ad' }
+%div{ "data-controller" => "banner-ads" }
+  .banner-ad-wrapper
+    - current_website.banner_sponsors.each do |sponsor|
+      = link_to image_tag(sponsor.banner_ad, alt: sponsor.name),
+        sponsor.url,
+        target: "_blank",
+        class: "banner-ad-item",
+        data: { 'banner-ads-target': 'ad' }

app/views/sponsors/sponsors_footer.html.haml

@@ -1,4 +1,6 @@
 %h3.section-title
   Sponsors
 .sponsors-footer-wrapper
-  = render partial: "sponsor_footer", collection: @sponsors_in_footer, as: :sponsor
+  = render partial: "sponsors/sponsor_footer",
+    collection: current_website.sponsors_in_footer,
+    as: :sponsor