ui wip

src/ttfrog/themes/default/base.html

@@ -16,8 +16,10 @@
 
     {% block nav %}
     {% include "nav.html" %}
+    {% include "breadcrumbs.html" %}
     {% endblock %}
-    <div class='table-wrapper'>
+    <div class='main-aligned'>
+        <div class='content'>
         <main>
             {% for message in g.messages %}
             <div class="alert">
@@ -27,6 +29,7 @@
             {% block content %}{% endblock %}
         </main>
         </div>
+    </div>
     <footer>
         {% block footer %}
         fnord

src/ttfrog/themes/default/breadcrumbs.html

@@ -1,7 +1,3 @@
-<div id='breadcrumbs'>
+<div id='breadcrumbs' class='content-aligned'>
 <a href="{{ url_for('index') }}">Home</a>{% for (uri, name) in breadcrumbs %}.<a href="{{ uri }}">{{ name }}</a>{% endfor %}
-<div id='actions'>
-    <a id='action__edit' data-state='view'>edit</a>
-    <a id='action__save' style='display: none;'>save</a>
-</div>
 </div>

src/ttfrog/themes/default/nav.html

@@ -1,5 +1,5 @@
 <nav>
-    <ul class="container">
+    <ul class="container content-aligned">
         <li><a href='{{ root.uri }}'>Home</a></li>
     {% for subpage in root.members %}
         {% if user.can_read(subpage) %}
@@ -14,24 +14,6 @@
         [<a href="{{ url_for('logout') }}">Logout</a>]
         {% endif %}
     </li>
-    <!--
-    <li class='dropdown'>
-      <a href='#'>Pages <i class="fa fa-angle-down"></i></a>
-      <div class='mega-menu'>
-      	<div class="container">
-          <div class="item">
-              <h3>Home Page</h3>
-              <ul>
-                <li><a href='#'>Home Page No #1</a></li>
-                <li><a href='#'>Home Page No #2</a></li>
-                <li><a href='#'>Home Page No #3</a></li>
-                <li><a href='#'>Home Page No #4</a></li>
-
-              </ul>
-          </div>
-        <</div>
-    </li>
-    -->
     </ul>
 </nav>
 <menu>

src/ttfrog/themes/default/page.html

@@ -1,60 +1,26 @@
 {% extends "base.html" %}
 
 {% block styles %}
-  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+{% if user.can_write(page) %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='editor/editor.css' ) }}">
+{% else %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='viewer/viewer.css' ) }}">
+{% endif %}
 {% endblock %}
 
 {% block content %}
-    {% include "breadcrumbs.html" %}
-    <div id='viewer'></div>
-    <div id='editor'></div>
+    <div id='{% if user.can_write(page) %}editor{% else %}viewer{% endif %}' 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>
+    {% if user.can_write(page) %}
+        <script src="{{ url_for('static', filename='editor/toastui-editor-all.min.js' ) }}"></script>
+        <script src="{{ url_for('static', filename='editor/editor.js' ) }}"></script>
+        <script>initialize();</script>
+    {% else %}
+        <script src="{{ url_for('static', filename='viewer/toastui-editor-viewer.min.js' ) }}"></script>
+        <script src="{{ url_for('static', filename='viewer/viewer.js' ) }}"></script>
+    {% endif %}
 {% endblock %}

src/ttfrog/themes/default/static/editor/editor.css

@@ -0,0 +1,106 @@
+@import 'toastui-editor.min.css';
+
+#editor {
+    display: inline;
+}
+
+.toastui-editor-defaultUI-toolbar {
+    padding: 0px !important;
+    margin: 0px !important;
+    border: 0px !important;
+    background: transparent !important;
+}
+
+.toastui-editor-toolbar {
+    box-shadow: 0px 3px 5px #CCC;
+    margin-bottom: 20px !important;
+}
+
+.toastui-editor-main-container {
+    display: contents;
+}
+
+.toastui-editor,
+.toastui-editor-main,
+.toastui-editor-md-container,
+.toastui-editor-defaultUI, 
+.toastui-editor-contents,
+.toastui-editor-ww-mode,
+.toastui-editor-md-preview,
+.toastui-editor-md, 
+.ProseMirror {
+    border: 0px !important;
+    padding: 0px !important;
+    margin: 0px !important;
+    font-size: var(--default-font-size) !important;
+    font-family: var(--default-font-family) !important;
+}
+
+#editor .toastui-editor-md-container > div > div,
+#editor .toastui-editor-ww-container > div > div {
+    border: 1px dotted #ccc;
+}
+
+#editor .toastui-editor-defaultUI-toolbar {
+    margin-bottom: 20px;
+}
+
+#editor .toastui-editor-toolbar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 99 !important;
+    width: 100% !important;
+    background: #FFF !important;
+}
+
+/* applied to #editor */
+.read-only {
+}
+
+#editor.read-only .toastui-editor-toolbar {
+    box-shadow: none;
+}
+
+#editor.read-only .toastui-editor-ww-container > div > div {
+    background: #FFF;
+}
+
+div.toastui-editor-md-splitter,
+div.toastui-editor-md-preview {
+    display: none !Important;
+}
+
+div.toastui-editor.md-mode {
+    width: 100% !important;
+}
+
+#editor button.toastui-editor-toolbar-icons {
+    filter:unset;
+    pointer-events: all;
+    opacity: 1.0;
+}
+
+#editor.read-only button.toastui-editor-toolbar-icons {
+    filter:saturate(0) !Important;
+    pointer-events: none;
+    opacity: 0.3;
+}
+
+#editor button.actions {
+    background-image: none;
+    margin: 0;
+}
+
+#editor.read-only button.actions {
+    display: none;
+}
+
+#editor.read-only #toggleButton {
+    display: block !important;
+}
+
+
+.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
+    flex: auto;
+    justify-content: flex-end;
+}

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

@@ -0,0 +1,119 @@
+var editor = document.querySelector("#editor");
+
+var toolBar = null;
+var contents = null;
+var pageContent = null;
+var saveButton = null;
+var editorUI = null;
+
+
+isReadOnly = function() {
+    if (editor) {
+        return editor.className == 'read-only';
+    }
+    return undefined;
+}
+
+setReadOnly = function() {
+    pageContent.innerHTML = editorUI.getHTML();
+    editorUI.changeMode('wysiwig');
+    editorUI.blur();
+    editor.classList.add('read-only');
+    pageContent.contentEditable = false;
+}
+
+setEditable = function() {
+    editor.classList.remove('read-only');
+    pageContent.contentEditable = true;
+    editorUI.moveCursorToStart();
+    editorUI.focus();
+}
+
+makeMarkdownButton = function() {
+
+    button = document.createElement('button');
+    button.classList.add("toastui-editor-toolbar-icons");
+    button.classList.add("last");
+    button.ariaLabel = "Toggle Markdown";
+    button.style.backgroundImage = 'none';
+    button.innerHTML = 'MD';
+    button.style.margin = '0';
+    button.addEventListener('click', () => {
+        if (editorUI.isMarkdownMode()) {
+            editorUI.changeMode("wysiwig");
+        } else {
+            editorUI.changeMode("markdown");
+        }
+    });
+    return button;
+};
+
+makeSaveButton = function() {
+    const button = document.createElement('button');
+    button.className = 'actions';
+    button.innerHTML = 'save';
+    button.id = 'saveButton';
+    button.addEventListener('click', () => {
+    });
+    saveButton = button;
+    return button;
+};
+
+toggleButton = function() {
+    const button = document.createElement('button');
+    button.className = 'actions';
+    button.id = 'toggleButton';
+    button.innerHTML = 'edit';
+    button.addEventListener('click', () => {
+        if (isReadOnly()) {
+            setEditable();
+        } else {
+            setReadOnly();
+        }
+    });
+    return button;
+}
+
+handleContentChange = function() {
+}
+
+initialize = function() {
+    return new toastui.Editor({
+        el: editor, 
+        initialEditType: 'wysiwyg',
+        initialValue: "",
+        hideModeSwitch : true,
+        previewStyle: 'vertical',
+        usageStatistics: false,
+        autofocus: false,
+        toolbarItems: [
+            ['heading', 'bold', 'italic' ],
+            ['ul', 'ol', 'indent', 'outdent'],
+            ['table', 'image', 'link'],
+            [ 
+                { el: makeMarkdownButton(), tooltip: 'Toggle MD' },
+            ],
+            [
+                { el: makeSaveButton(), command: 'save', tooltip: 'Save Changes' },
+                { el: toggleButton(), tooltip: 'Toggle Edit Mode' }
+            ],
+        ],
+        events: {
+            'loadUI': function(e) {
+                editorUI = e;
+                pageContent = document.querySelector(".toastui-editor-ww-container > div > div");
+                toolBar = document.querySelector('.toastui-editor-toolbar');
+
+                e.setMarkdown(document.getElementById("data_form__body").value);
+                setReadOnly();
+
+            },
+            'changeMode': function() {
+                if (editor && Array(editor.classList).includes('read-only')) {
+                    setReadOnly();
+                }
+            },
+            'change': handleContentChange,
+        }
+    });
+};

src/ttfrog/themes/default/static/editor/toastui-editor-all.min.js

@@ -0,0 +1,24 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.toastui=t():(e.toastui=e.toastui||{},e.toastui.Editor=t())}(self,(function(){return function(){var e={368:function(e){
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+e.exports=function(){"use strict";function e(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}var t=Object.hasOwnProperty,n=Object.setPrototypeOf,r=Object.isFrozen,o=Object.getPrototypeOf,i=Object.getOwnPropertyDescriptor,s=Object.freeze,a=Object.seal,l=Object.create,c="undefined"!=typeof Reflect&&Reflect,u=c.apply,d=c.construct;u||(u=function(e,t,n){return e.apply(t,n)}),s||(s=function(e){return e}),a||(a=function(e){return e}),d||(d=function(t,n){return new(Function.prototype.bind.apply(t,[null].concat(e(n))))});var p=x(Array.prototype.forEach),h=x(Array.prototype.pop),f=x(Array.prototype.push),m=x(String.prototype.toLowerCase),g=x(String.prototype.match),v=x(String.prototype.replace),y=x(String.prototype.indexOf),b=x(String.prototype.trim),w=x(RegExp.prototype.test),k=C(TypeError);function x(e){return function(t){for(var n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return u(e,t,r)}}function C(e){return function(){for(var t=arguments.length,n=Array(t),r=0;r<t;r++)n[r]=arguments[r];return d(e,n)}}function T(e,t){n&&n(e,null);for(var o=t.length;o--;){var i=t[o];if("string"==typeof i){var s=m(i);s!==i&&(r(t)||(t[o]=s),i=s)}e[i]=!0}return e}function M(e){var n=l(null),r=void 0;for(r in e)u(t,e,[r])&&(n[r]=e[r]);return n}function S(e,t){for(;null!==e;){var n=i(e,t);if(n){if(n.get)return x(n.get);if("function"==typeof n.value)return x(n.value)}e=o(e)}function r(e){return console.warn("fallback value for",e),null}return r}var E=s(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),N=s(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),O=s(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),D=s(["animate","color-profile","cursor","discard","fedropshadow","feimage","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),A=s(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover"]),L=s(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),I=s(["#text"]),R=s(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","xmlns","slot"]),P=s(["accent-height","accumulatLine truncated
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},e(t,n)};function t(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}var o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o.apply(this,arguments)};Object.create;function i(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function s(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}Object.create;function a(e){this.content=e}a.prototype={constructor:a,find:function(e){for(var t=0;t<this.content.length;t+=2)if(this.content[t]===e)return t;return-1},get:function(e){var t=this.find(e);return-1==t?void 0:this.content[t+1]},update:function(e,t,n){var r=n&&n!=e?this.remove(n):this,o=r.find(e),i=r.content.slice();return-1==o?i.push(n||e,t):(i[o+1]=t,n&&(i[o]=n)),new a(i)},remove:function(e){var t=this.find(e);if(-1==t)return this;var n=this.content.slice();return n.splice(t,2),new a(n)},addToStart:function(e,t){return new a([e,t].concat(this.remove(e).content))},addToEnd:function(e,t){var n=this.remove(e).content.slice();return n.push(e,t),new a(n)},addBefore:function(e,t,n){var r=this.remove(t),o=r.content.slice(),i=r.find(e);return o.splice(-1==i?o.length:i,0,t,n),new a(o)},forEach:function(e){for(var t=0;t<this.content.length;t+=2)e(this.content[t],this.content[t+1])},prepend:function(e){return(e=a.from(e)).size?new a(e.content.concat(this.subtract(e).content)):this},append:function(e){return(e=a.from(e)).size?new a(this.subtract(e).content.concat(e.content)):this},subtract:function(e){var t=this;e=a.from(e);for(var n=0;n<e.content.length;n+=2)t=t.remove(e.content[n]);return t},get size(){return this.content.length>>1}},a.from=function(e){if(e instanceof a)return e;var t=[];if(e)for(var n in e)t.push(n,e[n]);return new a(t)};var l=a;function c(e,t,n){for(let r=0;;r++){if(r==e.childCount||r==t.childCount)return e.childCount==t.childCount?null:n;let o=e.child(r),i=t.child(r);if(o!=i){if(!o.sameMarkup(i))return n;if(o.isText&&o.text!=i.text){for(let e=0;o.text[e]==i.text[e];e++)n++;return n}if(o.content.size||i.content.size){let e=c(o.content,i.content,n+1);if(null!=e)return e}n+=o.nodeSize}else n+=o.nodeSize}}function u(e,t,n,r){for(let o=e.childCount,i=t.childCount;;){if(0==o||0==i)return o==i?null:{a:n,b:r};let s=e.child(--o),a=t.child(--i),l=s.nodeSize;if(s!=a){if(!s.sameMarkup(a))return{a:n,b:r};if(s.isText&&s.text!=a.text){let e=0,t=Math.min(s.text.length,a.text.length);for(;e<t&&s.text[s.text.length-e-1]==a.text[a.text.length-e-1];)e++,n--,r--;return{a:n,b:r}}if(s.content.size||a.content.size){let e=u(s.content,a.content,n-1,r-1);if(e)return e}n-=l,r-=l}else n-=l,r-=l}}class d{constructor(e,t){if(this.content=e,this.size=t||0,null==t)for(let t=0;t<e.length;t++)this.size+=e[t].nodeSize}nodesBetween(e,t,n,r=0,o){for(let i=0,s=0;s<t;i++){let a=this.content[i],l=s+a.nodeSize;if(l>e&&!1!==n(a,r+s,o||null,i)&&a.content.size){let o=s+1;a.nodesBetween(Math.max(0,e-o),Math.min(a.content.size,t-o),n,r+o)}s=l}}descendants(e){this.nodesBetween(0,this.size,e)}textBetween(e,t,n,r){let o="",i=!0;return this.nodesBetween(e,t,((s,a)=>{s.isText?(o+=s.text.slice(Math.max(e,a)-a,t-a),i=!n):s.isLeaf?(r?o+="function"==typeof r?r(s):r:s.type.spec.leafText&&(o+=s.type.spec.leafText(s)),i=!n):!i&&s.isBlock&&(o+=n,i=!0)}),0),o}append(e){if(!e.size)return this;if(!this.size)return e;let t=this.lastChild,n=e.firstChild,r=this.content.slice(),o=0;for(t.isText&&t.sameMarkup(n)&&(r[r.length-1]=t.withText(t.text+n.text),o=1);o<e.content.length;o++)r.push(e.content[o]);return new d(r,this.size+e.size)}cut(e,t=this.size){if(0==e&&t==this.size)return this;let n=[],r=0;if(t>e)for(let o=0,i=0;i<t;o++){let s=this.content[o],a=i+s.nodeSize;a>e&&((i<e||a>t)&&(s=s.isText?s.cut(Math.max(0,e-i),Math.min(s.text.length,t-i)):s.cut(Math.max(0,e-i-1),Math.min(s.content.size,t-i-1))),n.push(s),r+=s.nodeSize),i=a}return new d(n,r)}cutByIndex(e,t){return e==t?d.empty:0==e&&t==this.content.length?this:new d(this.content.slice(e,t))}replaceChild(e,t){let n=this.content[e];if(n==t)return this;let r=this.content.slice(),o=this.size+t.nodeSize-n.nodeSize;return r[e]=t,new d(r,o)}addToStart(e){return new d([e].concat(this.content),this.size+e.nodeSize)}addToEnd(e){return new d(this.content.concat(e),this.size+e.nodeSize)}eq(e){if(this.content.length!=e.content.length)return!1;for(let t=0;t<this.content.length;t++)if(!this.content[t].eq(e.content[t]))return!1;return!0}get firstChild(){return 
Line truncated

src/ttfrog/themes/default/static/editor/toastui-editor.min.css

@@ -0,0 +1,6 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */.ProseMirror{word-wrap:break-word;font-feature-settings:"liga" 0;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;position:relative;white-space:pre-wrap;white-space:break-spaces}.ProseMirror pre{white-space:pre-wrap}.ProseMirror li{position:relative}.ProseMirror-hideselection ::selection{background:transparent}.ProseMirror-hideselection ::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{border:2px solid #8cf;bottom:-2px;content:"";left:-32px;pointer-events:none;position:absolute;right:-2px;top:-2px}img.ProseMirror-separator{border:none!important;display:inline!important;margin:0!important}.auto-height,.auto-height .toastui-editor-defaultUI{height:auto}.auto-height .toastui-editor-md-container{position:relative}:not(.auto-height)>.toastui-editor-defaultUI,:not(.auto-height)>.toastui-editor-defaultUI>.toastui-editor-main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:not(.auto-height)>.toastui-editor-defaultUI>.toastui-editor-main{-ms-flex:1;flex:1}.toastui-editor-defaultUI-toolbar:after,.toastui-editor-md-container:after{clear:both;content:"";display:block;height:0}.toastui-editor-main{box-sizing:border-box;height:inherit;min-height:0;position:relative}.toastui-editor-md-container{display:none;height:100%;overflow:hidden}.toastui-editor-md-container .toastui-editor{line-height:1.5;position:relative}.toastui-editor-md-container .toastui-editor,.toastui-editor-md-container .toastui-editor-md-preview{box-sizing:border-box;height:inherit;padding:0}.toastui-editor-md-container .toastui-editor-md-preview{height:100%;overflow:auto;padding:0 25px}.toastui-editor-md-container .toastui-editor-md-preview>p:first-child{margin-top:0!important}.toastui-editor-md-container .toastui-editor-md-preview .toastui-editor-contents{padding-top:8px}.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor,.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor-md-preview{display:none;width:100%}.toastui-editor-main .toastui-editor-md-tab-style>.active{display:block}.toastui-editor-main .toastui-editor-md-vertical-style>.toastui-editor-tabs{display:none}.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor-tabs{display:block}.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor,.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor-md-preview{width:50%}.toastui-editor-main .toastui-editor-md-splitter{background-color:#ebedf2;display:none;height:100%;left:50%;position:absolute;width:1px}.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor-md-splitter{display:block}.toastui-editor-ww-container{background-color:#fff;display:none;height:inherit;overflow:hidden}.auto-height .toastui-editor-main-container{position:relative}.toastui-editor-main-container{color:#222;height:inherit;line-height:1;position:absolute;width:100%}.toastui-editor-ww-container>.toastui-editor{height:inherit;position:relative;width:100%}.toastui-editor-ww-container .toastui-editor-contents{box-sizing:border-box;height:inherit;margin:0;overflow:auto;padding:16px 25px 0}.toastui-editor-ww-container .toastui-editor-contents p{margin:0}.toastui-editor-md-mode .toastui-editor-md-container,.toastui-editor-ww-mode .toastui-editor-ww-container{display:block;z-index:20}.toastui-editor-md-mode .toastui-editor-md-vertical-style{display:-ms-flexbox;display:flex}.toastui-editor-defaultUI.hidden,.toastui-editor-main.hidden{display:none}.toastui-editor-defaultUI .ProseMirror{padding:18px 25px}.toastui-editor-defaultUI{border:1px solid #dadde6;border-radius:4px;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;height:100%;position:relative}.toastui-editor-defaultUI button{border:none;border-radius:2px;color:#333;cursor:pointer;font-size:13px;height:28px}.toastui-editor-defaultUI .toastui-editor-ok-button{background-color:#00a9ff;color:#fff;height:32px;min-width:63px;outline-color:#009bf2}.toastui-editor-defaultUI .toastui-editor-ok-button:hover{background-color:#009bf2}.toastui-editor-defaultUI .toastui-editor-close-button{background-color:#f7f9fc;border:1px solid #dadde6;height:32px;margin-right:5px;min-width:63px;outline-color:#cbcfdb}.toastui-editor-defaultUI .toastui-editor-close-button:hover{border-color:#cbcfdb}.toastui-editor-mode-switch{background-color:#fff;border-radius:0 0 3px 3px;border-top:1px solid #dadde6;font-size:12px;height:28px;padding-right:10px;text-align:right}.toastui-editor-mode-switch .tab-item{background:#f7f9fc;border:1px solid #dadde6;border-radius:0 0 4px 4px;box-sizing:border-box;color:#969aa5;cursor:pointer;display:inline-block;font-weight:500;height:24px;line-height:24px;margin-right:-1px;margin-top:-1px;text-align:center;width:96px}.toastui-editor-mode-switch .tab-item.active{bacLine truncated

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

@@ -9,16 +9,17 @@ html {
 body {
     font-family: var(--default-font-family);
     font-size: var(--default-font-size);
+    background: var(--body-background);
     height: inherit;
     width: 100%;
     margin: 0px;
     box-sizing: border-box;
     overflow-wrap: break-word;
-    overflow-y: scroll;
+    overflow-y: auto;
     scrollbar-gutter: stable;
 }
 
-h1, .toastui-editor-contents h1 {
+h1 {
     font-size: var(--h1-size) !important;
     font-weight: var(--header-weight) !important;
     font-family: var(--header-font) !important;
@@ -31,7 +32,7 @@ h1, .toastui-editor-contents h1 {
 }
 
 
-h2, .toastui-editor-contents h2 {
+h2 {
     font-size: var(--h2-size) !important;
     font-weight: var(--header2-weight) !important;
     font-family: var(--header-font) !important;
@@ -44,7 +45,7 @@ h2, .toastui-editor-contents h2 {
 }
 
 
-h3, .toastui-editor-contents h3 {
+h3 {
     font-size: var(--h3-size) !important;
     font-weight: var(--header3-weight) !important;
     font-family: var(--header-font) !important;
@@ -57,7 +58,7 @@ h3, .toastui-editor-contents h3 {
 }
 
 
-h4, .toastui-editor-contents h4 {
+h4 {
     font-size: var(--h4-size) !important;
     font-weight: var(--header4-weight) !important;
     font-family: var(--header-font) !important;
@@ -70,7 +71,7 @@ h4, .toastui-editor-contents h4 {
 }
 
 
-h5, .toastui-editor-contents h5 {
+h5 {
     font-size: var(--h5-size) !important;
     font-weight: var(--header5-weight) !important;
     font-family: var(--header-font) !important;
@@ -83,7 +84,7 @@ h5, .toastui-editor-contents h5 {
 }
 
 
-h6, .toastui-editor-contents h6 {
+h6 {
     font-size: var(--h6-size) !important;
     font-weight: var(--header6-weight) !important;
     font-family: var(--header-font) !important;
@@ -99,14 +100,15 @@ h6, .toastui-editor-contents h6 {
 a {text-decoration: none;}
 
 nav ul.container {
+    height: 100%;
+    align-content: center;
 	margin: auto;
 }
 
 ul {
-	padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
 	list-style: none;
+	padding-left: 0;
+    margin:0;
 }
 
 nav {
@@ -114,113 +116,64 @@ nav {
     margin: 0px;
     padding: 0px;
     height: var(--nav-height);
-	background: #0ca0d6;
+	background: var(--blue);
 }
 
 nav > ul > li {
 	display: inline-block;
-  	font-size: 14px;
-  	padding: 0 15px;
+  	padding: 0 var(--nav-spacing);
   	position: relative;
 }
 
+nav > ul > li:first-child {
+    padding-left: 0px;
+}
+
 nav > ul > li > a {
-	color: #fff;
+	color: var(--nav-color);
   	display: inline-block;
-  	padding: 20px 0;
-  	border-bottom: 3px solid transparent;
-    transition: all .3s ease;
 }
 nav > ul > li:hover > a {
-	color: #444; 
-  	border-bottom: 3px solid #444;
+	color: var(--nav-hover-color);
 }
 
-.mega-menu {
-	background: #eee;
-  	visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
-  	position: absolute;
-  	left: 0;
-  	width: 100%;
-    padding-bottom: 20px;
-}
-.mega-menu h3 {color: #444;}
-
-.mega-menu .container {
-    display: flex;
-}
-.mega-menu .item {
-	flex-grow: 1;
-    margin: 0 10px;
-}
-.mega-menu .item img {
-    width: 100%;
-}
-.mega-menu a {
-	border-bottom: 1px solid #ddd;
-  	color: #4ea3d8;
-  	display: block;
-  	padding: 10px 0;
-}
-.mega-menu a:hover {color: #2d6a91;}
-
-
 .dropdown {position: static;}
 
-.dropdown:hover .mega-menu {
-    visibility: visible;
-    opacity: 1;
-}
-
-
 #breadcrumbs  {
+    display: block;
+    align-content: center;
     height: var(--breadcrumbs-height);
-    border-bottom: 1px dotted #DEDEDE;
+    width: 100%;
 }
 
 #data_form {
     display: none;
 }
 
-#editor {
-    display: none;
-}
-
-#viewer {
-    display: inline;
-}
-
-#actions {
-    display: flex;
-    float: right;
-}
-
-#actions > a {
-    display: flex;
-    border: 1px solid black;
-    border-radius: 5px;
-    padding: 5px;
-    background: #FFF;
-    color: blue;
-    cursor: pointer;
-    margin-left: 5px;
-
-}
-#actions a:hover {
-    color: white;
-    background: blue;
-}
-
-
-.table-wrapper {
-    padding: 0px;
-    padding-top: var(--wrapper-padding);
-    display: table;
+.main-aligned {
+    display: block;
     margin: auto;
-    width: var(--max-width);
-    max-width: 960px;
+    max-width: var(--max-width);
+    min-width: var(--min-width);
+}
+
+.content-aligned {
+    display: block;
+    margin: auto;
+    max-width: calc(var(--max-width) - (2 * var(--content-padding)));
+    min-width: var(--min-width);
+    padding-left: var(--content-padding); 
+    padding-right: var(--content-padding); 
+}
+
+.content {
+    position: relative;
+    display: table;
+    width: calc(100% - (2 * var(--content-padding)));
+    padding: var(--content-padding);
+    background: var(--content-background);
+    border: var(--content-border);
+    border-radius: var(--content-border-radius);
 }
 
 main {
@@ -231,29 +184,10 @@ main {
 footer {
     display: block;
     position: relative;
-    bottom: 100vh - var(--footer-height);
+    bottom: 0;
+    margin-top: var(--footer-spacing);
     height: var(--footer-height);
-    background-color: #DEDEDE;
-}
-
-.toastui-editor-main-container {
-    display: contents;
-}
-
-.toastui-editor,
-.toastui-editor-main,
-.toastui-editor-md-container,
-.toastui-editor-defaultUI, 
-.toastui-editor-contents,
-.toastui-editor-ww-mode,
-.toastui-editor-md-preview,
-.toastui-editor-md, 
-.ProseMirror {
-    border: 0px !important;
-    padding: 0px !important;
-    margin: 0px !important;
-    font-size: var(--default-font-size) !important;
-    font-family: var(--default-font-family) !important;
+    background-color: var(--footer-background-color);
 }
 
 menu {

src/ttfrog/themes/default/static/theme.css

@@ -12,10 +12,29 @@
     --h6-size: 10.72px;
 
     /* Layout */
+    --content-padding: 20px;
     --nav-height: 50px;
-    --footer-height: 150px;
+    --nav-spacing: 15px;
     --breadcrumbs-height: 50px;
-    --wrapper-padding: 20px;
-    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) + var(--wrapper-padding));
-    --max-width: calc(100vw - 20px);
+    --footer-height: 50px;
+    --footer-spacing: var(--breadcrumbs-height);
+
+    --max-width: 1024px;
+    --min-width: calc(710px + (2 * var(--content-padding)));
+
+    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) - calc(2 * var(--content-padding)) - var(--footer-spacing));
+
+    --content-border-radius: calc(0.5 * var(--content-padding));
+
+    /* colors */
+	--blue: #0ca0d6;
+    --white: #FFF;
+
+    --body-background: #EEE;
+    --nav-color: #000055;
+    --nav-hover-color: #FFF;
+    --content-background: #FFF;
+    --footer-background-color: #DDD;
+
+
 }

src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.css

@@ -0,0 +1,6 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */.ProseMirror{overflow-X:hidden;color:#222;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;font-size:13px;height:calc(100% - 36px);overflow-y:auto}.ProseMirror .placeholder{color:#999}.ProseMirror-selectednode,.ProseMirror:focus{outline:none}.html-block.ProseMirror-selectednode,table.ProseMirror-selectednode{border-radius:2px;outline:2px solid #00a9ff}.toastui-editor-contents{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;font-size:13px;margin:0;padding:0;z-index:20}.toastui-editor-contents :not(table){box-sizing:content-box;line-height:160%}.toastui-editor-contents address,.toastui-editor-contents cite,.toastui-editor-contents dfn,.toastui-editor-contents em,.toastui-editor-contents i,.toastui-editor-contents var{font-style:italic}.toastui-editor-contents strong{font-weight:700}.toastui-editor-contents p{color:#222;margin:10px 0}.toastui-editor-contents>div>div:first-of-type h1,.toastui-editor-contents>h1:first-of-type{margin-top:14px}.toastui-editor-contents h1,.toastui-editor-contents h2,.toastui-editor-contents h3,.toastui-editor-contents h4,.toastui-editor-contents h5,.toastui-editor-contents h6{color:#222;font-weight:700}.toastui-editor-contents h1{border-bottom:3px double #999;font-size:24px;line-height:28px;margin:52px 0 15px;padding-bottom:7px}.toastui-editor-contents h2{border-bottom:1px solid #dbdbdb;font-size:22px;line-height:23px;margin:20px 0 13px;padding-bottom:7px}.toastui-editor-contents h3{font-size:20px;margin:18px 0 2px}.toastui-editor-contents h4{font-size:18px;margin:10px 0 2px}.toastui-editor-contents h3,.toastui-editor-contents h4{line-height:18px}.toastui-editor-contents h5{font-size:16px}.toastui-editor-contents h6{font-size:14px}.toastui-editor-contents h5,.toastui-editor-contents h6{line-height:17px;margin:9px 0 -4px}.toastui-editor-contents del{color:#999}.toastui-editor-contents blockquote{border-left:4px solid #e5e5e5;color:#999;margin:14px 0;padding:0 16px}.toastui-editor-contents blockquote ol,.toastui-editor-contents blockquote p,.toastui-editor-contents blockquote ul{color:#999}.toastui-editor-contents blockquote>:first-child{margin-top:0}.toastui-editor-contents blockquote>:last-child{margin-bottom:0}.toastui-editor-contents code,.toastui-editor-contents pre{border:0;border-radius:0;font-family:Consolas,Courier,Apple SD 산돌고딕 Neo,-apple-system,Lucida Grande,Apple SD Gothic Neo,맑은 고딕,Malgun Gothic,Segoe UI,돋움,dotum,sans-serif}.toastui-editor-contents pre{background-color:#f4f7f8;margin:2px 0 8px;padding:18px}.toastui-editor-contents code{background-color:#f9f2f4;border-radius:2px;color:#c1798b;letter-spacing:-.3px;padding:2px 3px}.toastui-editor-contents pre code{background-color:transparent;color:inherit;padding:0;white-space:pre-wrap}.toastui-editor-contents img{box-sizing:border-box;margin:4px 0 10px;max-width:100%;vertical-align:top}.toastui-editor-contents table{border:1px solid rgba(0,0,0,.1);border-collapse:collapse;box-sizing:border-box;color:#222;margin:12px 0 14px;width:auto}.toastui-editor-contents table td,.toastui-editor-contents table th{border:1px solid rgba(0,0,0,.1);height:32px;padding:5px 14px 5px 12px}.toastui-editor-contents table th{background-color:#555;color:#fff;font-weight:300;padding-top:6px}.toastui-editor-contents th p{color:#fff;margin:0}.toastui-editor-contents td p{margin:0;padding:0 2px}.toastui-editor-contents td.toastui-editor-cell-selected{background-color:#d8dfec}.toastui-editor-contents th.toastui-editor-cell-selected{background-color:#908f8f}.toastui-editor-contents dir,.toastui-editor-contents menu,.toastui-editor-contents ol,.toastui-editor-contents ul{color:#222;display:block;list-style-type:none;margin:6px 0 10px;padding-left:24px}.toastui-editor-contents ol{counter-reset:li;list-style-type:none}.toastui-editor-contents ol>li{counter-increment:li}.toastui-editor-contents ol>li:before,.toastui-editor-contents ul>li:before{display:inline-block;position:absolute}.toastui-editor-contents ul>li:before{background-color:#ccc;border-radius:50%;content:"";height:5px;margin-left:-17px;margin-top:6px;width:5px}.toastui-editor-contents ol>li:before{color:#aaa;content:"." counter(li);direction:rtl;margin-left:-28px;text-align:right;width:24px}.toastui-editor-contents ol ol,.toastui-editor-contents ol ul,.toastui-editor-contents ul ol,.toastui-editor-contents ul ul{margin-bottom:0!important;margin-top:0!important}.toastui-editor-contents ol li,.toastui-editor-contents ul li{position:relative}.toastui-editor-contents ol p,.toastui-editor-contents ul p{margin:0}.toastui-editor-contents hr{border-top:1px solid #eee;margin:16px 0}.toastui-editor-contents a{color:#4b96e6;text-decoration:underline}.toastui-editor-contents a:hover{color:#1f70de}.toastui-editor-contents .image-link{position:relative}.toastui-editor-contents .image-link:hover:before{background:#fff url(datLine truncated

src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.js

@@ -0,0 +1,24 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prosemirror-inputrules"),require("prosemirror-keymap"),require("prosemirror-model"),require("prosemirror-state"),require("prosemirror-view")):"function"==typeof define&&define.amd?define(["prosemirror-inputrules","prosemirror-keymap","prosemirror-model","prosemirror-state","prosemirror-view"],t):"object"==typeof exports?exports.toastui=t(require("prosemirror-inputrules"),require("prosemirror-keymap"),require("prosemirror-model"),require("prosemirror-state"),require("prosemirror-view")):(e.toastui=e.toastui||{},e.toastui.Editor=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(self,(function(e,t,r,n,i){return function(){var o={368:function(e){
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+e.exports=function(){"use strict";function e(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var t=Object.hasOwnProperty,r=Object.setPrototypeOf,n=Object.isFrozen,i=Object.getPrototypeOf,o=Object.getOwnPropertyDescriptor,a=Object.freeze,s=Object.seal,l=Object.create,u="undefined"!=typeof Reflect&&Reflect,c=u.apply,p=u.construct;c||(c=function(e,t,r){return e.apply(t,r)}),a||(a=function(e){return e}),s||(s=function(e){return e}),p||(p=function(t,r){return new(Function.prototype.bind.apply(t,[null].concat(e(r))))});var f=k(Array.prototype.forEach),d=k(Array.prototype.pop),h=k(Array.prototype.push),g=k(String.prototype.toLowerCase),m=k(String.prototype.match),v=k(String.prototype.replace),y=k(String.prototype.indexOf),b=k(String.prototype.trim),w=k(RegExp.prototype.test),x=C(TypeError);function k(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),i=1;i<r;i++)n[i-1]=arguments[i];return c(e,t,n)}}function C(e){return function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return p(e,r)}}function L(e,t){r&&r(e,null);for(var i=t.length;i--;){var o=t[i];if("string"==typeof o){var a=g(o);a!==o&&(n(t)||(t[i]=a),o=a)}e[o]=!0}return e}function T(e){var r=l(null),n=void 0;for(n in e)c(t,e,[n])&&(r[n]=e[n]);return r}function N(e,t){for(;null!==e;){var r=o(e,t);if(r){if(r.get)return k(r.get);if("function"==typeof r.value)return k(r.value)}e=i(e)}function n(e){return console.warn("fallback value for",e),null}return n}var D=a(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),A=a(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),E=a(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),S=a(["animate","color-profile","cursor","discard","fedropshadow","feimage","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),M=a(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover"]),R=a(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),O=a(["#text"]),q=a(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","xmlns","slot"]),F=a(["accent-height","accumulatLine truncated
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},r(e,t)};function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function o(e,t,r){if(r||2===arguments.length)for(var n,i=0,o=t.length;i<o;i++)!n&&i in t||(n||(n=Array.prototype.slice.call(t,0,i)),n[i]=t[i]);return e.concat(n||Array.prototype.slice.call(t))}var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==s.g?s.g:"undefined"!=typeof self?self:{},u={};function c(e,t,r){var n,i,o,a,s,l="";for("string"!=typeof t&&(r=t,t=c.defaultChars),void 0===r&&(r=!0),s=function(e){var t,r,n=u[e];if(n)return n;for(n=u[e]=[],t=0;t<128;t++)r=String.fromCharCode(t),/^[0-9a-z]$/i.test(r)?n.push(r):n.push("%"+("0"+t.toString(16).toUpperCase()).slice(-2));for(t=0;t<e.length;t++)n[e.charCodeAt(t)]=e[t];return n}(t),n=0,i=e.length;n<i;n++)if(o=e.charCodeAt(n),r&&37===o&&n+2<i&&/^[0-9a-f]{2}$/i.test(e.slice(n+1,n+3)))l+=e.slice(n,n+3),n+=2;else if(o<128)l+=s[o];else if(o>=55296&&o<=57343){if(o>=55296&&o<=56319&&n+1<i&&(a=e.charCodeAt(n+1))>=56320&&a<=57343){l+=encodeURIComponent(e[n]+e[n+1]),n++;continue}l+="%EF%BF%BD"}else l+=encodeURIComponent(e[n]);return l}c.defaultChars=";/?:@&=+$,-_.!~*'()#",c.componentChars="-_.!~*'()";var p=c,f={},d={},h={Aacute:"Á",aacute:"á",Abreve:"Ă",abreve:"ă",ac:"∾",acd:"∿",acE:"∾̳",Acirc:"Â",acirc:"â",acute:"´",Acy:"А",acy:"а",AElig:"Æ",aelig:"æ",af:"⁡",Afr:"𝔄",afr:"𝔞",Agrave:"À",agrave:"à",alefsym:"ℵ",aleph:"ℵ",Alpha:"Α",alpha:"α",Amacr:"Ā",amacr:"ā",amalg:"⨿",amp:"&",AMP:"&",andand:"⩕",And:"⩓",and:"∧",andd:"⩜",andslope:"⩘",andv:"⩚",ang:"∠",ange:"⦤",angle:"∠",angmsdaa:"⦨",angmsdab:"⦩",angmsdac:"⦪",angmsdad:"⦫",angmsdae:"⦬",angmsdaf:"⦭",angmsdag:"⦮",angmsdah:"⦯",angmsd:"∡",angrt:"∟",angrtvb:"⊾",angrtvbd:"⦝",angsph:"∢",angst:"Å",angzarr:"⍼",Aogon:"Ą",aogon:"ą",Aopf:"𝔸",aopf:"𝕒",apacir:"⩯",ap:"≈",apE:"⩰",ape:"≊",apid:"≋",apos:"'",ApplyFunction:"⁡",approx:"≈",approxeq:"≊",Aring:"Å",aring:"å",Ascr:"𝒜",ascr:"𝒶",Assign:"≔",ast:"*",asymp:"≈",asympeq:"≍",Atilde:"Ã",atilde:"ã",Auml:"Ä",auml:"ä",awconint:"∳",awint:"⨑",backcong:"≌",backepsilon:"϶",backprime:"‵",backsim:"∽",backsimeq:"⋍",Backslash:"∖",Barv:"⫧",barvee:"⊽",barwed:"⌅",Barwed:"⌆",barwedge:"⌅",bbrk:"⎵",bbrktbrk:"⎶",bcong:"≌",Bcy:"Б",bcy:"б",bdquo:"„",becaus:"∵",because:"∵",Because:"∵",bemptyv:"⦰",bepsi:"϶",bernou:"ℬ",Bernoullis:"ℬ",Beta:"Β",beta:"β",beth:"ℶ",between:"≬",Bfr:"𝔅",bfr:"𝔟",bigcap:"⋂",bigcirc:"◯",bigcup:"⋃",bigodot:"⨀",bigoplus:"⨁",bigotimes:"⨂",bigsqcup:"⨆",bigstar:"★",bigtriangledown:"▽",bigtriangleup:"△",biguplus:"⨄",bigvee:"⋁",bigwedge:"⋀",bkarow:"⤍",blacklozenge:"⧫",blacksquare:"▪",blacktriangle:"▴",blacktriangledown:"▾",blacktriangleleft:"◂",blacktriangleright:"▸",blank:"␣",blk12:"▒",blk14:"░",blk34:"▓",block:"█",bne:"=⃥",bnequiv:"≡⃥",bNot:"⫭",bnot:"⌐",Bopf:"𝔹",bopf:"𝕓",bot:"⊥",bottom:"⊥",bowtie:"⋈",boxbox:"⧉",boxdl:"┐",boxdL:"╕",boxDl:"╖",boxDL:"╗",boxdr:"┌",boxdR:"╒",boxDr:"╓",boxDR:"╔",boxh:"─",boxH:"═",boxhd:"┬",boxHd:"╤",boxhD:"╥",boxHD:"╦",boxhu:"┴",boxHu:"╧",boxhU:"╨",boxHU:"╩",boxminus:"⊟",boxplus:"⊞",boxtimes:"⊠",boxul:"┘",boxuL:"╛",boxUl:"╜",boxUL:"╝",boxur:"└",boxuR:"╘",boxUr:"╙",boxUR:"╚",boxv:"│",boxV:"║",boxvh:"┼",boxvH:"╪",boxVh:"╫",boxVH:"╬",boxvl:"┤",boxvL:"╡",boxVl:"╢",boxVL:"╣",boxvr:"├",boxvR:"╞",boxVr:"╟",boxVR:"╠",bprime:"‵",breve:"˘",Breve:"˘",brvbar:"¦",bscr:"𝒷",Bscr:"ℬ",bsemi:"⁏",bsim:"∽",bsime:"⋍",bsolb:"⧅",bsol:"\\",bsolhsub:"⟈",bull:"•",bullet:"•",bump:"≎",bumpE:"⪮",bumpe:"≏",Bumpeq:"≎",bumpeq:"≏",Cacute:"Ć",cacute:"ć",capand:"⩄",capbrcup:"⩉",capcap:"⩋",cap:"∩",Cap:"⋒",capcup:"⩇",capdot:"⩀",CapitalDifferentialD:"ⅅ",caps:"∩︀",caret:"⁁",caron:"ˇ",Cayleys:"ℭ",ccaps:"⩍",Ccaron:"Č",ccaron:"č",Ccedil:"Ç",ccedil:"ç",Ccirc:"Ĉ",ccirc:"ĉ",Cconint:"∰",ccups:"⩌",ccupssm:"⩐",Cdot:"Ċ",cdot:"ċ",cedil:"¸",Cedilla:"¸",cemptyv:"⦲",cent:"¢",centerdot:"·",CenterDot:"·",cfr:"𝔠",Cfr:"ℭ",CHcy:"Ч",chcy:"ч",check:"✓",checkmark:"✓",Chi:"Χ",chi:"χ",circ:"ˆ",circeq:"≗",circlearrowleft:"↺",circlearrowright:"↻",circledast:"⊛",circledcirc:"⊚",circleddash:"⊝",Line truncated

src/ttfrog/themes/default/static/viewer/viewer.css

@@ -0,0 +1,9 @@
+@import 'toastui-editor-viewer.min.css';
+
+#viewer {
+    display: inline;
+}
+
+.toastui-editor-contents {
+    font-size: var(--default-font-size);
+}

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

@@ -0,0 +1,6 @@
+var viewer = new toastui.Editor({
+    viewer: true,
+    el: document.querySelector("#viewer"),
+    usageStatistics: false,
+});
+viewer.setMarkdown(document.getElementById("data_form__body").value);

src/ttfrog/web.py

@@ -28,15 +28,19 @@ def get_page(path: str, table: str = "Page", create_okay: bool = False):
     uri = relative_uri(path)
 
     if table not in app.db.tables():
+        app.web.logger.debug(f"Table {table} does not exist in {app.db.tables()}.")
         return None
 
     page = app.db.table(table).get(where("uri") == uri, recurse=False)
 
     if not page:
+        app.web.logger.debug("Page does not exist.")
         if not create_okay:
+            app.web.logger.debug("Page does not exist and creating is not okay.")
             return None
         parent = get_parent(table, uri)
-        if not app.authorize(g.user, parent, schema.Permissions.READ):
+        if not app.authorize(g.user, parent, schema.Permissions.WRITE):
+            app.web.logger.debug(f"User {g.user} is not authorized to write {parent}")
             return None
         return getattr(schema, table)(name=uri.split("/")[-1], body="This page does not exist", parent=parent)
 
@@ -111,6 +115,8 @@ def logout():
 @app.web.route(f"{app.config.VIEW_URI}/<path:path>", methods=["GET"], defaults={"table": "Page"})
 def view(table, path):
     parent = get_parent(table, relative_uri())
+    if table not in app.db.tables():
+        table = parent.__class__.__name__ if parent else "Page"
     page = get_page(request.path, table=table, create_okay=(parent and parent.doc_id is not None))
     return rendered(page)
 
@@ -142,6 +148,7 @@ def edit(table, path):
 @app.web.before_request
 def before_request():
     g.messages = []
+    if not request.path.startswith('/static'):
         user_id = session.get("user_id", 1)
         g.user = app.db.User.get(doc_id=user_id)
         session["user_id"] = user_id