beautification of editor

code/templates/editor.html

@@ -1,21 +1,34 @@
 {% extends "layout.html" %}
 {% block body %}
-<div id=index_menu>
+<script src="{{ url_for('static', filename='js/remarkable.min.js') }}"></script>
+<div id=editor_container>
   Edit text file in share: <a href="{{ url_for('list_view',name = name) }}">{{ name|safe  }}</a>
-  <div id=editor_form>
+
+    <div id=editor_form>
     <form action={{ url_for('paste',name=name) }} method=post enctype=multipart/form-data>
-      <input type=hidden name=from_gui value="true" />
-      <input id="paste_filename" type=text name=filename
+      <div id=editor_form_header>
+        <input type=hidden name=from_gui value="true" />
+        <input id="editor_filename" type=text name=filename
                    title="File name to write. Must end in .txt to later edit."
                    value="{{ filename | safe }}" onclick="clear_text(this.id,'paste.txt')">
-     <br>
-     <input type=submit value=Submit>
-     <a class="href_button" href="{{ url_for('list_view',name = name) }}">Cancel</a>
-     <br>
-     <textarea rows="25" cols="80" name="paste" id="paste_paste" autofocus>{{ content | safe }}</textarea>
+        <br>
+        <input type=submit value=Save>
+        <a class="href_button" onclick="previewToggle()" title="Toggle preview window">Preview</a>
+        <a class="href_button" href="{{ url_for('list_view',name = name) }}" title="Forget all changes">Cancel</a>
+      </div>
+      <div id=editor_floats>
+        <textarea rows="25" name="paste" id="editor_area" autofocus oninput="updateEditorPreview()">{{ content | safe }}</textarea>
+        <div id=editor_preview style="display: block;"></div>
+      </div>
+    </form>
+    </div>
 
-  </form>
-  </div>
 </div>
-<script type="text/javascript">changeTitle("{{ name | safe }} - Editor");</script>
+<script type="text/javascript">
+  changeTitle("{{ name | safe }} - Editor");
+  var md = new Remarkable({
+    linkify: true
+  });
+  updateEditorPreview();
+</script>
 {% endblock %}