Updated wiki editing system with live-previewing

1 files changed, 43 insertions, 12 deletions

diff --git a/templates/wiki/page_edit.html b/templates/wiki/page_edit.html
index 97a5161c..e83676fd 100644
--- a/templates/wiki/page_edit.html
+++ b/templates/wiki/page_edit.html
@@ -2,19 +2,32 @@
 {% block title %}Wiki | Home{% endblock %}
 {% block og_title %}Wiki | Home{% endblock %}
 {% block og_description %}Landing page for the wiki{% endblock %}
+{% block extra_head %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
+{% endblock %}
 {% block content %}
     <div class="uk-container uk-section">
-        <form action="{{ url_for("wiki.edit", page=page) }}" method="post">
-            <label for="title">Title: </label>
-            <input name="title" id="title" value="{{ title }}" class="uk-input" />
-            <label for="rst">Document: </label>
-            <textarea name="rst" id="rst" class="uk-textarea">{{ rst }}</textarea>
-            <button value="Preview" id="preview">Preview</button>
-            <button type="submit" value="Save">Save</button>
+        <form uk-grid class="uk-grid-small" action="{{ url_for("wiki.edit", page=page) }}" method="post">
+            <div class="uk-width-expand">
+                <input name="title" id="title" placeholder="Page Title" value="{{ title }}" class="uk-input" />
+            </div>
+            <div class="uk-width-auto">
+                <button class="uk-button uk-button-secondary" type="button" value="Preview" id="preview">Preview</button>
+            </div>
+            <div class="uk-width-auto">
+                <button class="uk-button uk-button-primary" type="submit" value="Save">Save</button>
+            </div>
+            <div class="uk-width-1-1">
+{#                <label for="rst">Document: </label>#}
+                <div id="rst" class="uk-textarea" style="resize: vertical; min-height: 10rem;">{{ rst }}</div>
+            </div>
+
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
         </form>
 
-        <div id="preview-div" style="border: 1px solid grey;">
+        <h2 class="uk-h2">Preview</h2>
+
+        <div id="preview-div">
             <p>Preview will appear here.</p>
         </div>
     </div>
@@ -26,15 +39,21 @@
 
         document.getElementById("preview").onclick = function(event) {
             let oReq = new XMLHttpRequest();
-            let data = document.getElementById("rst").value;
 
             oReq.addEventListener("load", function() {
                 let response = JSON.parse(this.responseText);
 
                 if (response.error !== undefined) {
-                    console.log("Error: " + response.error)
+                    if (response.error_lines !== undefined) {
+                        editor.session.setAnnotations(response.error_lines);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>";
+                    } else {
+                        console.log("Error: " + response.error);
+                        document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>";
+                    }
                 } else {
                     document.getElementById("preview-div").innerHTML = response.data;
+                    editor.session.setAnnotations([]);
                 }
             });
 
@@ -43,9 +62,21 @@
             oReq.setRequestHeader("Content-type", "application/json");
             oReq.setRequestHeader("X-CSRFToken", csrf_token);
 
-            oReq.send(JSON.stringify({"data": data}));
+            oReq.send(JSON.stringify({"data": editor.getValue()}));
 
             return false;
-        }
+        };
+
+        let editor = ace.edit("rst");
+        let timer;
+
+        editor.session.setMode("ace/mode/rst");
+        editor.setTheme("ace/theme/iplastic");
+        editor.on("input", function() {
+            if (timer !== undefined) {
+                clearTimeout(timer);
+            }
+            timer = setTimeout(function() {document.getElementById("preview").click()}, 1000);
+        })
     </script>
 {% endblock %}
\ No newline at end of file