WIP of new attribute widget

src/public/app/layouts/desktop_main_window_layout.js

@@ -11,6 +11,7 @@ import NoteTreeWidget from "../widgets/note_tree.js";
 import TabCachingWidget from "../widgets/tab_caching_widget.js";
 import NotePathsWidget from "../widgets/note_paths.js";
 import NoteTitleWidget from "../widgets/note_title.js";
+import NoteAttributesWidget from "../widgets/note_attributes.js";
 import RunScriptButtonsWidget from "../widgets/run_script_buttons.js";
 import NoteTypeWidget from "../widgets/note_type.js";
 import NoteActionsWidget from "../widgets/note_actions.js";
@@ -134,6 +135,7 @@ export default class DesktopMainWindowLayout {
                         .child(new NoteTypeWidget().hideInZenMode())
                         .child(new NoteActionsWidget().hideInZenMode())
                     )
+                    .child(new TabCachingWidget(() => new NoteAttributesWidget()))
                     .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
                     .child(new TabCachingWidget(() => new NoteDetailWidget()))
                     .child(...this.customWidgets.get('center-pane'))

src/public/app/services/note_autocomplete.js

@@ -10,13 +10,6 @@ async function autocompleteSource(term, cb) {
         + '?query=' + encodeURIComponent(term)
         + '&activeNoteId=' + appContext.tabManager.getActiveTabNoteId());
 
-    if (result.length === 0) {
-        result.push({
-            notePathTitle: "No results",
-            notePath: ""
-        });
-    }
-
     cb(result);
 }
 

src/public/app/widgets/note_attributes.js

@@ -0,0 +1,148 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import libraryLoader from "../services/library_loader.js";
+import noteAutocompleteService from "../services/note_autocomplete.js";
+import treeCache from "../services/tree_cache.js";
+
+const mentionSetup = {
+    feeds: [
+        {
+            marker: '@',
+            feed: queryText => {
+                return new Promise((res, rej) => {
+                    noteAutocompleteService.autocompleteSource(queryText, rows => {
+                        console.log("rows", rows);
+
+                        res(rows.map(row => {
+                            return {
+                                id: '@' + row.notePathTitle,
+                                name: row.notePathTitle,
+                                link: '#' + row.notePath,
+                                notePath: row.notePath,
+                                highlightedNotePathTitle: row.highlightedNotePathTitle
+                            }
+                        }));
+                    });
+                });
+            },
+            itemRenderer: item => {
+                const itemElement = document.createElement('span');
+
+                itemElement.classList.add('mentions-item');
+                itemElement.innerHTML = `${item.highlightedNotePathTitle} `;
+
+                return itemElement;
+            },
+            minimumCharacters: 0
+        }
+    ]
+};
+
+const TPL = `
+<div class="note-attributes">
+<div class="note-attributes-editor"></div>
+</div>
+`;
+
+export default class NoteAttributesWidget extends TabAwareWidget {
+    constructor() {
+        super();
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$editor = this.$widget.find('.note-attributes-editor');
+        // this.$noteTitle = this.$widget.find(".note-attributes");
+        //
+        // this.$noteTitle.on('input', () => this.spacedUpdate.scheduleUpdate());
+        //
+        // utils.bindElShortcut(this.$noteTitle, 'return', () => {
+        //     this.triggerCommand('focusOnDetail', {tabId: this.tabContext.tabId});
+        // });
+
+        this.initialized = this.initEditor();
+
+        return this.$widget;
+    }
+
+    async initEditor() {
+        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
+
+        // CKEditor since version 12 needs the element to be visible before initialization. At the same time
+        // we want to avoid flicker - i.e. show editor only once everything is ready. That's why we have separate
+        // display of $widget in both branches.
+        this.$widget.show();
+
+        this.textEditor = await BalloonEditor.create(this.$editor[0], {
+            removePlugins: [
+                'Enter',
+                'ShiftEnter',
+                'Heading',
+                'Link',
+                'Autoformat',
+                'Bold',
+                'Italic',
+                'Underline',
+                'Strikethrough',
+                'Code',
+                'Superscript',
+                'Subscript',
+                'BlockQuote',
+                'Image',
+                'ImageCaption',
+                'ImageStyle',
+                'ImageToolbar',
+                'ImageUpload',
+                'ImageResize',
+                'List',
+                'TodoList',
+                'PasteFromOffice',
+                'Table',
+                'TableToolbar',
+                'TableProperties',
+                'TableCellProperties',
+                'Indent',
+                'IndentBlock',
+                'BlockToolbar',
+                'ParagraphButtonUI',
+                'HeadingButtonsUI',
+                'UploadimagePlugin',
+                'InternalLinkPlugin',
+                'MarkdownImportPlugin',
+                'CuttonotePlugin',
+                'TextTransformation',
+                'Font',
+                'FontColor',
+                'FontBackgroundColor',
+                'CodeBlock',
+                'SelectAll',
+                'IncludeNote',
+                'CutToNote'
+            ],
+            toolbar: {
+                items: []
+            },
+            placeholder: "Type the labels and relations here ...",
+            mention: mentionSetup
+        });
+
+        //this.textEditor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());
+    }
+
+    async loadReferenceLinkTitle(noteId, $el) {
+        const note = await treeCache.getNote(noteId, true);
+
+        let title;
+
+        if (!note) {
+            title = '[missing]';
+        }
+        else if (!note.isDeleted) {
+            title = note.title;
+        }
+        else {
+            title = note.isErased ? '[erased]' : `${note.title} (deleted)`;
+        }
+
+        $el.text(title);
+    }
+}

src/public/app/widgets/type_widgets/editable_text.js

@@ -17,28 +17,15 @@ const mentionSetup = {
             feed: queryText => {
                 return new Promise((res, rej) => {
                     noteAutocompleteService.autocompleteSource(queryText, rows => {
-                        if (rows.length === 1 && rows[0].pathTitle === 'No results') {
+                        res(rows.map(row => {
-                            rows = [];
+                            return {
+                                id: '@' + row.notePathTitle,
+                                name: row.notePathTitle,
+                                link: '#' + row.notePath,
+                                notePath: row.notePath,
+                                highlightedNotePathTitle: row.highlightedNotePathTitle
                             }
-
+                        }));
-                        for (const row of rows) {
-                            row.text = row.name = row.noteTitle;
-                            row.id = '@' + row.text;
-                            row.link = '#' + row.path;
-                        }
-
-                        if (queryText.trim().length > 0) {
-                            rows = [
-                                {
-                                    highlightedTitle: `Create and link note "<strong>${queryText}</strong>"`,
-                                    id: 'create',
-                                    title: queryText
-                                },
-                                ...rows
-                            ];
-                        }
-
-                        res(rows);
                     });
                 });
             },
@@ -46,7 +33,7 @@ const mentionSetup = {
                 const itemElement = document.createElement('span');
 
                 itemElement.classList.add('mentions-item');
-                itemElement.innerHTML = `${item.highlightedTitle} `;
+                itemElement.innerHTML = `${item.highlightedNotePathTitle} `;
 
                 return itemElement;
             },