Note Title Widget

This is an example of a note context-aware widget, which reacts to the currently opened note and refreshes automatically as the user navigates through the notes.

In this example, the title of the note is displayed. It works best on the horizontal layout.

const TPL = `\
<div style="
    display: flex;
    height: 53px;
    width: fit-content;
    font-size: 0.75em;
    contain: none;
    align-items: center;
    flex-shrink: 0;
    padding: 0 1em;
"></div>`;

class NoteTitleWidget extends api.NoteContextAwareWidget {
    doRender() {
        this.$widget = $(TPL);
    }

    async refreshWithNote(note) {
        this.$widget.text(note.title);
    }
}

module.exports = new NoteTitleWidget();