Follow the Stanford example for selectively importing the ace editor - …

…sul-dlss/purl#765 - Use stimilus to activate the editor on connect() with a data-controller. This allows us to appropiately use ImportMap, ditch public/ace, and have everything work with turbo with no need for a hard load.

.version

@@ -1 +1 @@
-2.4.3
+2.5.0

app/javascript/preview_application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+// This is just for preview to separate out its JS imports.
+import "preview_controllers"

app/javascript/preview_controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/preview_controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "preview_controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("preview_controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/javascript/preview_controllers/preview_controller.js

@@ -0,0 +1,21 @@
+import ace from 'ace-builds';
+
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/');
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/eclipse");
+    editor.session.setMode("ace/mode/xml");
+
+    document.querySelector('#editor').addEventListener('change', (event) => {
+      //$("#raw_xml").val(editor.getSession().getValue().trim());
+      document.getElementById("raw_xml").value = editor.getSession().getValue().trim();
+    });
+
+    document.getElementById('validate_button').onclick = function(){
+      $("#content").css({visibility:"visible", opacity: 100}).animate({opacity: 0}, 500);
+    };
+  }
+}

app/views/collections/edit.html.haml

@@ -4,7 +4,7 @@
   %li.nav-item
     %a.nav-link.active{"aria-current" => "page", href: "#"} Metadata
   %li.nav-item
-    %a.nav-link{"data-turbo" => "false", href:  xml_editor_path(params[:id])} XML
+    %a.nav-link{href:  xml_editor_path(params[:id])} XML
 
 = bootstrap_form_tag url: collection_path(params[:id]), method: :patch do |f|
   = bootstrap_fields_for :collection do |c|

app/views/xml/editor.html.haml

@@ -1,4 +1,5 @@
-%script{:charset => "utf-8", :src => "/ace/ace.js", :type => "text/javascript"}
+- content_for :head do
+  = javascript_import_module_tag "preview_application"
 
 %h3.py-3
   Edit raw XML for
@@ -20,27 +21,11 @@
       .col
         #editor<
           = @raw_xml
-      .col#content
+      .col#content{"data-controller" => "preview"}
         = @mods.html_safe
     .row
       .well.p-3.my-3.rounded-3
         %input#validate_button.btn.btn-primary{:name => "commit", :type => "submit", :value => "Validate + Preview", remote: true}/
         %input#save_button.btn.btn-success{"data-disable-with" => "Please wait...", :name => "commit", :type => "submit", :value => "Save", :formaction => xml_update_path}/
         %a.btn.btn-warning{"data-toggle" => "modal", :href => "#cancelEditModal"}
           Cancel
-
-:javascript
-  document.addEventListener("DOMContentLoaded", function(){
-    var editor = ace.edit("editor");
-    editor.setTheme("ace/theme/eclipse");
-    editor.session.setMode("ace/mode/xml");
-
-    document.querySelector('#editor').addEventListener('change', (event) => {
-      //$("#raw_xml").val(editor.getSession().getValue().trim());
-      document.getElementById("raw_xml").value = editor.getSession().getValue().trim();
-    });
-
-    document.getElementById('validate_button').onclick = function(){
-      $("#content").css({visibility:"visible", opacity: 100}).animate({opacity: 0}, 500);
-    };
-  });

config/importmap.rb

@@ -15,5 +15,9 @@
 pin "@github/auto-complete-element", to: "https://cdn.skypack.dev/@github/auto-complete-element"
 pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/[email protected]/dist/umd/popper.min.js"
 pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.js"
+pin "ace-builds", to: "https://ga.jspm.io/npm:[email protected]/src-noconflict/ace.js"
 
 pin_all_from "app/javascript/cerberus", under: "cerberus"
+pin_all_from "app/javascript/preview_controllers", under: "preview_controllers"
+# Preview is a separate application to avoid loading ace-builds for every page
+pin 'preview_application'