web ui checkpoint

src/ttfrog/themes/default/page.html

@@ -5,14 +5,9 @@
 {% endblock %}
 
 {% block content %}
-<form id="editor_form">
-
- <h1><input name='title' type='text' value="{{ page.title }}"></h1>
-{% include "breadcrumbs.html" %}
-
-<div id='page_body'></div>
-
-</form>
+    {% include "breadcrumbs.html" %}
+    <div id='viewer'></div>
+    <div id='editor'></div>
 {% endblock %}
 
 
@@ -20,15 +15,46 @@
 {% block scripts %}
   <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
   <script>
+    const viewerEl = document.querySelector("#viewer");
+    const editorEl = document.querySelector("#editor");;
+
+    const initialValue = (
+        "# " + document.getElementById("data_form__title").value + 
+        "\n" +
+        document.getElementById("data_form__body").value
+    );
 
     const editor = new toastui.Editor({
-        el: document.querySelector('#page_body'),
+        el: editorEl,
         initialEditType: 'wysiwyg',
-        initialValue: document.getElementById("data_form__body").value,
+        initialValue: initialValue,
+        minHeight: '500px',
         previewStyle: 'tab',
         usageStatistics: false
     });
-    editor.getMarkdown();
-    console.log(editor);
+
+    const edit_btn = document.querySelector("#action__edit");
+    const save_btn = document.querySelector("#action__save");
+
+    toggleEditor = function() {
+        if (edit_btn.dataset.state == 'view') {
+            edit_btn.dataset.state = 'edit';
+            edit_btn.innerText = "discard draft";
+            viewerEl.style['display'] = "none";
+            editorEl.style['display'] = "inline";
+            save_btn.style['display'] = 'inline-block';
+        } else {
+            edit_btn.dataset.state = 'view';
+            edit_btn.innerText = "edit";
+            editorEl.style['display'] = "none";
+            viewerEl.style['display'] = "inline";
+            save_btn.style['display'] = 'none';
+        }
+    };
+
+    edit_btn.addEventListener('click', toggleEditor)
+    viewerEl.innerHTML = editor.getHTML();
+    
+
   </script>
 {% endblock %}