working UI

src/ttfrog/themes/default/page.html

@@ -1,60 +1,19 @@
 {% extends "base.html" %}
 
 {% block styles %}
-  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+  <link rel="stylesheet" href="/static/toastui-editor.css" />
 {% endblock %}
 
 {% block content %}
-    {% include "breadcrumbs.html" %}
-    <div id='viewer'></div>
-    <div id='editor'></div>
+    <div id='editor' class='read-only'></div>
 {% endblock %}
 
 
 
 {% 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: editorEl,
-        initialEditType: 'wysiwyg',
-        initialValue: initialValue,
-        minHeight: '500px',
-        previewStyle: 'tab',
-        usageStatistics: false
-    });
-
-    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>
+    <script src="/static/toastui-editor-all.js"></script>
+    <script src="/static/site.js"></script>
+    <script>
+      initialize();
+    </script>
 {% endblock %}