linking notes through CKEditor mentiones

src/public/javascripts/services/note_autocomplete.js

@@ -12,7 +12,7 @@ async function autocompleteSource(term, cb) {
 
     if (result.length === 0) {
         result.push({
-            title: "No results",
+            pathTitle: "No results",
             path: ""
         });
     }
@@ -91,10 +91,10 @@ function initNoteAutocomplete($el, options) {
     }, [
         {
             source: autocompleteSource,
-            displayKey: 'title',
+            displayKey: 'pathTitle',
             templates: {
                 suggestion: function(suggestion) {
-                    return suggestion.highlighted;
+                    return suggestion.highlightedTitle;
                 }
             },
             // we can't cache identical searches because notes can be created / renamed, new recent notes can be added

src/public/javascripts/services/note_detail_text.js

@@ -50,29 +50,27 @@ class NoteDetailText {
                                 feed: queryText => {
                                     return new Promise((res, rej) => {
                                         noteAutocompleteService.autocompleteSource(queryText, rows => {
-                                            rows = rows.slice(0, 10);
+                                            if (rows.length === 1 && rows[0].title === 'No results') {
+                                                rows = [];
+                                            }
 
                                             for (const row of rows) {
-                                                row.name = row.title;
+                                                row.text = row.name = row.noteTitle;
+                                                row.id = '@' + row.text;
+                                                row.link = '#' + row.path;
                                             }
 
+                                            console.log(rows.slice(0, Math.min(5, rows.length)));
+
                                             res(rows);
                                         });
                                     });
                                 },
                                 itemRenderer: item => {
-                                    const itemElement = document.createElement( 'span' );
+                                    const itemElement = document.createElement('span');
 
-                                    itemElement.classList.add( 'custom-item' );
-                                    itemElement.id = `mention-list-item-id-${ item.userId }`;
-                                    itemElement.textContent = `${ item.name } `;
-
-                                    const usernameElement = document.createElement( 'span' );
-
-                                    usernameElement.classList.add( 'custom-item-username' );
-                                    usernameElement.textContent = item.id;
-
-                                    itemElement.appendChild( usernameElement );
+                                    itemElement.classList.add('mentions-item');
+                                    itemElement.innerHTML = `${item.highlightedTitle} `;
 
                                     return itemElement;
                                 },

src/public/stylesheets/style.css

@@ -879,4 +879,19 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 .toast-header {
     background-color: var(--more-accented-background-color) !important;
     color: var(--main-text-color) !important;
+}
+
+.mentions-item {
+    font-size: var(--main-font-size) !important;
+}
+
+.mentions-item.ck-on {
+    background-color: var(--active-item-background-color) !important;
+    color: var(--active-item-text-color) !important;
+}
+
+.mentions-item b {
+    font-weight: bold !important;
+    color: inherit !important;
+    vertical-align: baseline !important;
 }

src/routes/api/autocomplete.js

@@ -58,8 +58,9 @@ async function getRecentNotes(activeNoteId) {
 
         return {
             path: rn.notePath,
-            title: title,
-            highlighted: title
+            pathTitle: title,
+            highlightedTitle: title,
+            noteTitle: noteCacheService.getNoteTitleFromPath(rn.notePath)
         };
     });
 }

src/services/note_cache.js

@@ -68,19 +68,19 @@ function highlightResults(results, allTokens) {
     allTokens.sort((a, b) => a.length > b.length ? -1 : 1);
 
     for (const result of results) {
-        result.highlighted = result.title;
+        result.highlightedTitle = result.pathTitle;
     }
 
     for (const token of allTokens) {
         const tokenRegex = new RegExp("(" + utils.escapeRegExp(token) + ")", "gi");
 
         for (const result of results) {
-            result.highlighted = result.highlighted.replace(tokenRegex, "{$1}");
+            result.highlightedTitle = result.highlightedTitle.replace(tokenRegex, "{$1}");
         }
     }
 
     for (const result of results) {
-        result.highlighted = result.highlighted
+        result.highlightedTitle = result.highlightedTitle
             .replace(/{/g, "<b>")
             .replace(/}/g, "</b>");
     }
@@ -161,11 +161,14 @@ async function findNotes(query) {
     });
 
     const apiResults = results.slice(0, 200).map(res => {
+        const notePath = res.pathArray.join('/');
+
         return {
             noteId: res.noteId,
             branchId: res.branchId,
-            path: res.pathArray.join('/'),
-            title: res.titleArray.join(' / ')
+            path: notePath,
+            pathTitle: res.titleArray.join(' / '),
+            noteTitle: getNoteTitleFromPath(notePath)
         };
     });
 
@@ -252,6 +255,17 @@ function isArchived(noteId) {
     return isNotePathArchived(notePath);
 }
 
+function getNoteTitleFromPath(notePath) {
+    const pathArr = notePath.split("/");
+
+    if (pathArr.length === 1) {
+        return getNoteTitle(pathArr[0], 'root');
+    }
+    else {
+        return getNoteTitle(pathArr[pathArr.length - 1], pathArr[pathArr.length - 2]);
+    }
+}
+
 function getNoteTitle(noteId, parentNoteId) {
     const prefix = prefixes[noteId + '-' + parentNoteId];
 
@@ -512,6 +526,7 @@ module.exports = {
     findNotes,
     getNotePath,
     getNoteTitleForPath,
+    getNoteTitleFromPath,
     isAvailable,
     isArchived,
     load,