auto-expanding editor

src/ttfrog/themes/default/page.html

@@ -1,26 +1,34 @@
 {% extends "base.html" %}
 
-{% block menu %}
-    {% for member in page.members %}
-    <li><a href="{{ app.config.VIEW_URI }}{{ member.uri }}">{{ member.name }}</a></li>
-    {% endfor %}
+{% block styles %}
+  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
 {% endblock %}
+
 {% block content %}
-    <form method='POST'>
-        <input type="hidden" name="uid" value="{{ page.uid }}">
-        <h1>{{ page.doc_id }}: <input name='title' type='text' value="{{ page.title }}"></h1>
-            <h3>{{ app.config.VIEW_URI }}{{ page.parent.uri if page.parent else "/" }} <input name='stub' type='text' value='{{ page.stub }}'></h3>
-        <textarea name='body'>{{ page.body }}</textarea>
-        <input type=submit>
-    </form>
+<form id="editor_form">
 
-    <pre>
-    {{ page }}
-    </pre>
-    
-    <pre>
-    {{ app.web.config }}
-    </pre>
+ <h1><input name='title' type='text' value="{{ page.title }}"></h1>
+{% include "breadcrumbs.html" %}
 
+<div id='page_body'></div>
+
+</form>
 {% endblock %}
 
+
+
+{% block scripts %}
+  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+  <script>
+
+    const editor = new toastui.Editor({
+        el: document.querySelector('#page_body'),
+        initialEditType: 'wysiwyg',
+        initialValue: document.getElementById("data_form__body").value,
+        previewStyle: 'tab',
+        usageStatistics: false
+    });
+    editor.getMarkdown();
+    console.log(editor);
+  </script>
+{% endblock %}