Touch up JS editor

assets/js/js-editor.js

@@ -21,19 +21,23 @@ $(document).ready(()=> {
     cm.setValue(og_text);
     code_ex0.parent().hide();
 
-    const cm_resp = CodeMirror(wrapper.find(".response").get(0), {
-      mode: 'javascript',
-      json: false,
-      readOnly: true,
-      gutters: ["CodeMirror-lint-markers"]
-    });
-
     wrapper.find(".reset-button").click((evt) => {
       cm.setValue(og_text);
+      wrapper.find(".response").empty();
     });
 
     wrapper.find(".run-button").click((evt) => {
-      cm_resp.setValue("");
+      // Wipe the results area and make a new response CodeMirror
+      const resp = wrapper.find(".response");
+      resp.empty().append("<p><strong>Output</strong></p>");
+      // TODO: make "Response" translatable
+      const cm_resp = CodeMirror(resp.get(0), {
+        mode: 'javascript',
+        json: false,
+        readOnly: true,
+        gutters: ["CodeMirror-lint-markers"]
+      });
+
       const oldconsole = console;
       console = {
         log: (...args) => {

dactyl-config.yml

@@ -1459,8 +1459,7 @@ pages:
         funnel: Build
         doc_type: Tutorials
         category: Get Started
-        # template: template-landing-children.html
-        template: template-doc.html #TEMP
+        template: template-doc.html
         blurb: Get up and running with some of the resources you'll use to work with the XRP Ledger.
         filters:
             - js_editor

tool/filter_js_editor.py

@@ -36,7 +36,6 @@ END_REPL = """
   <button type="button" class="btn btn-primary run-button">Run</button>
   <button type="reset" class="btn btn-secondary-outline reset-button">Reset</button>
 </p>
-<h3>Output</h3>
 <div class="response"></div>
 </div>"""
 

tool/template-base.html

@@ -43,6 +43,13 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 
+    {% if "js_editor" in currentpage.filters %}
+    <script src="assets/vendor/jshint.js"></script>
+    <script src="assets/vendor/codemirror-js-json-lint.min.js"></script>
+    <script src="assets/vendor/cm-javascript-lint.js"></script>
+    <script src="assets/js/js-editor.js"></script>
+    {% endif %}
+
     {% block head %}
 
     {% endblock %}

tool/template-doc.html

@@ -13,14 +13,6 @@
         });
     </script>
 
-    {% if "js_editor" in currentpage.filters %}
-    <script src="assets/vendor/jshint.js"></script>
-    <script src="assets/vendor/codemirror-js-json-lint.min.js"></script>
-    <script src="assets/vendor/cm-javascript-lint.js"></script>
-    <script src="assets/js/js-editor.js"></script>
-    {% endif %}
-
-
 {% endblock %}
 
 {% block main %}