WIP of new attribute widget

This commit is contained in:
zadam 2020-05-28 00:17:13 +02:00
parent ae934720bc
commit 5aaa429203
6 changed files with 162 additions and 32 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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'))

View File

@ -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);
}

View File

@ -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);
}
}

View File

@ -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') {
rows = [];
}
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);
res(rows.map(row => {
return {
id: '@' + row.notePathTitle,
name: row.notePathTitle,
link: '#' + row.notePath,
notePath: row.notePath,
highlightedNotePathTitle: row.highlightedNotePathTitle
}
}));
});
});
},
@ -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;
},