New Button to Include Current Note as Preview to Children

[lhx332251335]

Introduction

This script adds a new button to Trilium Notes that allows you to include the current note's preview into all of its child notes.

Usage Instructions

1. Create a Script Note:

   • Create a new note in Trilium and change its type to JS Frontend.

2. Copy the Script:

   • Copy the following script into the newly created note:

class AddPreviewToChildrenButton extends api.NoteContextAwareWidget {
    get parentWidget() {
        return 'center-pane';
    }

    doRender() {
        this.$widget = $(`<style type="text/css">
            .add-preview-icon.ribbon-tab-title-icon.bx:before {
                content: "\\1F517"; 
            }
        </style>`);
        return this.$widget;
    }

    async refreshWithNote() {
        $(document).ready(() => {
            if (!$("div.component.note-split:not(.hidden-ext) div.ribbon-tab-title").hasClass('add-preview-button')) {
                $("div.component.note-split:not(.hidden-ext) .ribbon-tab-title:not(.backToHis)").last().after(`
                    <div class="add-preview-button ribbon-tab-spacer"></div>
                    <div class="add-preview-button ribbon-tab-title">
                        <span class="add-preview-icon ribbon-tab-title-icon bx" title="Add Preview to Children"></span>
                    </div>
                `);
            }
            $('div.component.note-split:not(.hidden-ext) div.add-preview-button').off("click", addPreviewToChildren);
            $('div.component.note-split:not(.hidden-ext) div.add-preview-button').on("click", addPreviewToChildren);
        });
    }
}

var addPreviewToChildren = function () {
    const currentNote = api.getActiveContextNote();
    const currentNoteId = currentNote.noteId;
    
    api.runAsyncOnBackendWithManualTransactionHandling(async (noteId) => {
        const note = api.getNote(noteId);
        const childNotes = note.getChildNotes();
        let modifiedNotes = [];

        const currentDate = new Date().toISOString().slice(0, 16).replace('T', ' ');
        const parentTitle = note.title;

        const insertContent = `
<section class="include-note" data-note-id="${noteId}" data-box-size="medium">
    &nbsp;
</section>`;

        for (const childNote of childNotes) {
            if (childNote.type === 'text') {
                let content = await childNote.getContent();
                if (!content.includes(`data-note-id="${noteId}"`)) {
                    content += `\n\n${insertContent}`;
                    await childNote.setContent(content);
                    modifiedNotes.push({
                        id: childNote.noteId,
                        title: childNote.title
                    });
                }
            }
        }

        return {
            totalChildren: childNotes.length,
            modifiedNotes: modifiedNotes
        };
    }, [currentNoteId]).then(result => {
        const modifiedCount = result.modifiedNotes.length;
        let message = `Modified ${modifiedCount} out of ${result.totalChildren} child notes.\n\nModified notes:`;
        result.modifiedNotes.forEach(note => {
            message += `\n- ${note.title}`;
        });
        api.showMessage(message);
        
        console.log('Modified notes:', result.modifiedNotes);
    }).catch(error => {
        console.error('Error adding content to child notes:', error);
        api.showMessage('Error adding content to child notes. Please check the console.');
    });
};

module.exports = new AddPreviewToChildrenButton();

3. Add Widget Attribute:

   • In the Owned Attributes section of the note, add #widget.

4. Refresh Trilium:

   • Press Ctrl+Shift+R to refresh Trilium Notes and apply the script.

5. Using the Script:

   • Navigate to any note that has child notes.
   • Look for the new link icon (🔗) in the top toolbar.
   • Click the icon to add the current note's preview to all child notes.
   • A message will appear showing which notes were modified.