From bedba1e27ff6b4a020488e62a1f9e0353e8bc138 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sat, 14 Nov 2020 08:15:54 +0100
Subject: [PATCH] Improve link search

- Fix the query string
- Make menu bigger
- Create new page with label
---
 editor/src/editor.js   | 60 +++++++++++++++++++++---------------------
 editor/src/fuse.js     |  5 +++-
 editor/src/menu.js     |  5 ++--
 editor/src/styles.scss |  3 ++-
 templates/layout.html  | 10 -------
 5 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/editor/src/editor.js b/editor/src/editor.js
index 9130b0d..1a3a3ce 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -123,22 +123,24 @@ function showSearchResultsExtended(element, template, searchTool, query, input,
             $lc.offset(pos)
         }
 
-        let templateText = he.decode(document.getElementById(template).innerHTML);
-        let rendered = Mustache.render(templateText, {
-            page: value.trim().replace(/\s+/g, '_'),
-            results: results
-        }, {}, ['[[', ']]']);
+        let selectedPos = 0;
         let selected = $lc.find('li.selected');
         if (selected) {
-            let selectedPos = $lc.find('li').index(selected[0])
-            rendered = $(rendered)
-            const $lis = $lc.find('li')
-            if ($lis.length >= 1) {
-                selectedPos = Math.min(selectedPos, $lis.length - 1)
-                rendered.find('li')[selectedPos].classList.add('selected')
-            }
+            selectedPos = $lc.find('li').index(selected[0])
         }
-        $lc.html(rendered).fadeIn()
+
+        let $ul = el('ul',
+            _.map(results, (hit, i) => {
+                console.log(hit)
+                const li = el('li', [document.createTextNode(hit.item.label || hit.item.title)])
+                if (selectedPos === i) li.classList.add('selected')
+                li.dataset['new_page'] = hit.item.title
+                return li
+            })
+        )
+
+        $lc.html($ul).fadeIn()
+
         return results
     })
 }
@@ -425,7 +427,7 @@ function Editor(holder, input) {
                 if (resultType === 'link') {
                     let start = value.lastIndexOf("[[", end)
                     end += 2
-                    let startAndLink = value.substring(0, start) + "[[" + linkName + "]]"
+                    let startAndLink = value.substring(0, start) + "[[" + _.trim(element[0].dataset['new_page']) + "]]"
                     input.value = startAndLink + value.substring(end)
                     input.selectionStart = startAndLink.length
                     input.selectionEnd = startAndLink.length
@@ -585,7 +587,7 @@ function Editor(holder, input) {
                     })
                     return true
                 } else if (insideLink) {
-                    let query = value.substring(start + 2, end);
+                    let query = value.substring(start, end);
                     showSearchResults(titleSearch, query, input, value, 'link');
                     return true
                 } else {
@@ -607,21 +609,19 @@ function Editor(holder, input) {
 
             Promise.any([
                 match(query, /{{query(!?):\s*([^}]+)}}/)
-            ])
-                .then(res => {
-                    if (res[1] === '!') {
-                        return search.startQuery(res[2])
-                            .then(hits => _.uniqBy(_.flatMap(hits, formatTitleResult), _.property('text')))
-                            .then(results => editor.replaceChildren(id, results))
-                            .finally(() => editor.render())
-                    } else {
-                        return search.startQuery(res[2])
-                            .then(hits => _.flatMap(hits, formatLineResult))
-                            .then(results => editor.replaceChildren(id, results))
-                            .finally(() => editor.render())
-                    }
-                })
-                .catch(() => console.log('match error'))
+            ]).then(res => {
+                if (res[1] === '!') {
+                    return search.startQuery(res[2])
+                        .then(hits => _.uniqBy(_.flatMap(hits, formatTitleResult), _.property('text')))
+                        .then(results => editor.replaceChildren(id, results))
+                        .finally(() => editor.render())
+                } else {
+                    return search.startQuery(res[2])
+                        .then(hits => _.flatMap(hits, formatLineResult))
+                        .then(results => editor.replaceChildren(id, results))
+                        .finally(() => editor.render())
+                }
+            }).catch(() => console.log('match error'))
         });
         return editor
     })
diff --git a/editor/src/fuse.js b/editor/src/fuse.js
index 3ef2f47..53cc482 100644
--- a/editor/src/fuse.js
+++ b/editor/src/fuse.js
@@ -28,7 +28,10 @@ function createTitleSearch() {
                     documents,
                     titleSearch: query => {
                         return new Promise((resolve, reject) => {
-                            resolve(titleFuse.search(query))
+                            let search = titleFuse.search(query);
+                            search.unshift({item: {title: query, label: "Create page '" + query + "'"}})
+                            search = search.slice(0, 25)
+                            resolve(search)
                         })
                     },
                     commandSearch: query => {
diff --git a/editor/src/menu.js b/editor/src/menu.js
index 0ef9336..4021848 100644
--- a/editor/src/menu.js
+++ b/editor/src/menu.js
@@ -2,13 +2,12 @@ import $ from 'jquery'
 import 'jquery-contextmenu'
 import copy from 'copy-text-to-clipboard'
 
-function renderTree(tree)
-{
+function renderTree(tree) {
     if (!tree) return []
 
     let recRenderTree = (tree, indent) => {
         return _.flatMapDeep(tree, (item) => [
-            _.repeat("    ", item.indented-indent) + item.text,
+            _.repeat("    ", item.indented - indent) + item.text,
             recRenderTree(item.children, indent),
         ])
     }
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index 0544d18..932cf50 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -296,7 +296,7 @@ mark {
 }
 #link-complete {
   z-index: 1;
-  width: 217px;
+  width: 280px;
   overflow-x: hidden;
   overflow-y: auto;
   height: 300px;
@@ -308,6 +308,7 @@ mark {
 
 #link-complete li {
   padding: 4px 16px;
+  white-space: nowrap;
 }
 #link-complete li.selected {
   background: lightblue;
diff --git a/templates/layout.html b/templates/layout.html
index db81ba3..f66f8fd 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -83,16 +83,6 @@
         <li><a href="/edit/[[page]]">Create a page</a></li>
     </ul>
 </div>
-<div id="link-template" class="hide">
-    <ul>
-        [[#results]]
-        <li>[[item.title]]</li>
-        [[/results]]
-        [[^results]]
-        <li>No results</li>
-        [[/results]]
-    </ul>
-</div>
 <script async src="/public/vendors.bundle.js"></script>
 <script async src="/public/index.bundle.js"></script>
 </body>