only load the viewer when the user cannot write the page

src/ttfrog/themes/default/page.html

@@ -1,19 +1,33 @@
 {% extends "base.html" %}
 
 {% block styles %}
+{% if user.can_write(page) %}
   <link rel="stylesheet" href="/static/toastui-editor.css" />
+{% else %}
+  <link rel="stylesheet" href="/static/toastui-editor-viewer.min.css" />
+{% endif %}
 {% endblock %}
 
 {% block content %}
-    <div id='editor' class='read-only'></div>
+    <div id='{% if user.can_write(page) %}editor{% else %}viewer{% endif %}' class='read-only'></div>
 {% endblock %}
 
 
 
 {% block scripts %}
-    <script src="/static/toastui-editor-all.js"></script>
-    <script src="/static/site.js"></script>
-    <script>
-      initialize();
-    </script>
+    {% if user.can_write(page) %}
+        <script src="/static/toastui-editor-all.min.js"></script>
+        <script src="/static/site.js"></script>
+        <script>initialize();</script>
+    {% else %}
+        <script src="/static/toastui-editor-viewer.min.js"></script>
+        <script>
+            const viewer = new toastui.Editor({
+                viewer: true,
+                el: document.querySelector("#viewer"),
+                usageStatistics: false,
+            });
+            viewer.setMarkdown(document.getElementById("data_form__body").value);
+        </script>
+    {% endif %}
 {% endblock %}

src/ttfrog/themes/default/static/site.js

@@ -1,4 +1,4 @@
-const editor = document.querySelector("#editor");
+var editor = document.querySelector("#editor");
 
 var toolBar = null;
 var contents = null;