Put root page on uri "", make parent() a method

src/ttfrog/themes/default/page.html

@@ -18,7 +18,7 @@
     {% 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>
+        <script>initialize("{{ app.config.VIEW_URI }}");</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>

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

@@ -5,8 +5,26 @@ var contents = null;
 var pageContent = null;
 var saveButton = null;
 var editorUI = null;
+var VIEW_URI = null;;
 
 APIv1 = {
+    get: function(doc_id, callback) {
+        (async () => {
+            const raw = await fetch('/_/v1/get/' + doc_id, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                }
+            });
+            const res = await raw.json();
+            if (res['code'] != 200) {
+                console.error("APIv1 error: ", res)
+            }
+            callback(res);
+        })();
+    },
+
     put: function(data, callback) {
         (async () => {
             const raw = await fetch('/_/v1/put/' + window.location.pathname, {
@@ -26,6 +44,26 @@ APIv1 = {
             callback(res);
         })();
     },
+
+    search: function(space, query, callback) {
+        (async () => {
+            const raw = await fetch('/_/v1/search/' + space, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    'body': query
+                }),
+            });
+            const res = await raw.json();
+            if (res['code'] != 200) {
+                console.error("APIv1 error: ", res)
+            }
+            callback(res);
+        })();
+    },
 };
 
 isReadOnly = function() {
@@ -108,8 +146,54 @@ toggleButton = function() {
 handleContentChange = function() {
 }
 
-initialize = function() {
-    return new toastui.Editor({
+autoComplete = function(search_string, matches, callback) {
+    id = `_ac_${search_string}`;
+    el = document.getElementById(id);
+    var addEl = false;
+    if (!el) {
+        el = document.createElement("ul");
+        el.id = id;
+        addEl = true;
+    }
+    el.className = 'autocomplete';
+    el.innerHTML = "";
+    el.addEventListener("keyup", function(e) {
+        // do navigation / selection
+    });
+
+    matches.forEach(match => {
+        var text = match.uri;
+        for (pos = 0; pos < match.uri.length - search_string.length; pos++) {
+            var substr = match.name.substring(pos, search_string.length);
+            if (substr.toLowerCase() == search_string.toLowerCase()) {
+                text = match.name.substring(0, pos) + "<strong>" + substr + "</strong>" + match.name.substr(pos + substr.length);
+                break;
+            }
+        }
+        var option = document.createElement("li");
+        option.innerHTML = text;
+        option.addEventListener("click", function(e) {
+            // do selection
+        });
+        el.appendChild(option);
+    });
+    if (addEl) {
+        var selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+            var range = selection.getRangeAt(0);
+            range.insertNode(el);
+        }
+    }
+}
+
+
+initialize = function(base_uri) {
+
+    const macro_rule = /@(\S{3,})/;
+
+    VIEW_URI = base_uri;
+
+    const ed = new toastui.Editor({
         el: editor, 
         initialEditType: 'wysiwyg',
         initialValue: "",
@@ -129,6 +213,23 @@ initialize = function() {
                 { el: toggleButton(), tooltip: 'Toggle Edit Mode' }
             ],
         ],
+        widgetRules: [ ],
+
+        /*
+            {
+                rule: macro_rule, toDOM(text) {
+                    const matched = text.match(macro_rule);
+                    const search_string = matched[1];
+
+                    var replacement = "";
+
+                    });
+                    console.log(replacement);
+                    return replacement;
+                },
+            },
+        ],
+        */
         events: {
             'loadUI': function(e) {
                 editorUI = e;
@@ -147,4 +248,48 @@ initialize = function() {
             'change': handleContentChange,
         }
     });
+
+    var searchPos = null;
+    ed.on('keyup', (editorType, ev) => {
+        const [start, end] = editorUI.getSelection();
+        console.log(start, end);
+        if (ev.key === '@') {
+            searchPos = start;
+            console.log(`Setting search position to ${searchPos}`);
+            return;
+        }
+        if (searchPos === null) {
+            return;
+        }
+
+        var range = window.getSelection().getRangeAt(0);
+        range.selectNodeContents(editor);
+        range.setStart(editor, 0);
+        range.setEnd(editor, end);
+        var search_string = range.toString();
+        console.log(search_string);
+
+
+
+        /*
+        APIv1.search("", search_string, (res) => {
+            if (res.code == 404) {
+                return;
+            }
+            const matches = res.response;
+            if (matches.length == 1) {
+                replacement = document.createElement('span');
+                replacement.innerHTML = `<a class="tooltip-preview" data-uri="${matches[0].uri}" href="${VIEW_URI}${matches[0].uri}">${matches[0].name}</a>`;
+                return;
+            }
+
+            autoComplete(search_string, matches, (selection) => {
+                console.log(`Selected ${selection}`);
+                document.remove(options.id);
+            });
+        };
+        */
+    });
+
+    return ed;
 };