Color a TODO, WIP, DONE prefix for every list item in the current text note.

[bergercookie]

I'm trying to create a new frontend script, similarly to the word count example, I can add to an existing note of mine as an attribute. This script should add a new button, to the currently edited note, which once clicked, should find all the list items in the current note, find those that start with a certain prefix (TODO, WIP, DONE, WONTDO) and based on the found prefix, change the foreground color for that word.

How would I go about implementing this?

At the moment I can find all the list items in the currently edited note and api.showMessage them to the user but I'm struggling to find how I can edit them.

Can I edit a note via a JS frontend script or do I have to iimplement it as a background script?

[dosubot[bot]]

You can edit note content from a JS frontend script in Trilium by creating a custom widget (a JS frontend note with a #widget label) that adds UI elements like buttons to the note UI. To persistently modify note content (such as coloring TODO, WIP, DONE, WONTDO prefixes in list items), fetch the note's HTML content, process it in JavaScript (e.g., use regex or DOM parsing to wrap the prefixes in a with a style), and then save the modified HTML back using note.save(). Direct DOM changes won't persist—always use the API to update note content. See the custom widget guide and discussion for more details and examples of this workflow.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[bergercookie]

@dosu there's no NoteContextAwareWidget.save method. Not according to the docs at least.

[dosubot[bot]]

You're right—NoteContextAwareWidget does not have a save method, and there isn't a generic note.save() in the frontend API. In Trilium, persistent note content changes from frontend scripts/widgets are done by sending updated content to the backend via the API, not by calling a save method on the widget itself.

To update note content from a frontend script, you have a couple of options:

1. Use the frontend script API's runOnBackend method to execute backend code that updates the note. This is the recommended way to persist changes from a frontend widget. Example usage:

   await api.runOnBackend(function(noteId, newContent) {
     let note = api.getNote(noteId);
     note.content = newContent;
   }, [api.currentNote.noteId, modifiedContent]);

   This runs the function on the backend, where you can safely update the note's content.

2. Directly call the backend REST API (used internally by Trilium widgets) to update note content. For example, you can use the server.put method to send a PUT request to /notes/{noteId}/data with the new content. See how built-in widgets do this here.

There is no direct save method on the widget class because Trilium's design separates UI logic from persistence, and changes are auto-saved or explicitly persisted via backend calls or API requests. For more details, see the frontend script API implementation and how widgets persist changes.

Let me know if you want a concrete code example for your use case!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[bergercookie]

For what it's worth, here's the script I ended up with. It's quite crude, since it operates on the HTML returned by getContent but for now it gets the job done.

/*
 * Custom widget: Colors all the TODO, WIP, BLOCKED, DONE, etc. words that it finds.
 * To activate, label the note (or a parent) with `todoColorizer`.
 */

const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
    <button class="show-lis-btn">Show List Items</button>
</div>`;

class todoColorizer extends api.NoteContextAwareWidget {
    get position() { return 100; }          // position in the center pane (bottom)
    get parentWidget() { return 'center-pane'; }

    doRender() {
        this.$widget = $(TPL);
        this.$button = this.$widget.find('.show-lis-btn');
        this.$button.on('click', async () => {
            const noteId = this.note.noteId;
            await api.runOnBackend(function(frontendNoteId) {
                
                const bNote = api.getNote(frontendNoteId);
                if (!bNote) return;
            
                let html = bNote.getContent();
                if (!html) return;
            
                // keyword → background color
                const map = {
                    TODO: 'orange',
                    WIP: 'lightblue',
                    DONE: 'lightgreen',
                    WONTDO: 'lightgreen',
                    FAILED: 'lightcoral',
                    BLOCKED: 'plum'
                };
                            
                for (const [keyword, color] of Object.entries(map)) {
                    const style = `background-color:${color}; color:black; font-weight:bold`;
                    const regex = new RegExp(`\\b${keyword}\\b`, 'g');
                    html = html.replace(regex, `<span style="${style}">${keyword}</span>`);
                }	
    
                bNote.setContent(html);
            }, [noteId])
        })

        return this.$widget;
    }
    async refreshWithNote(note) {
        if (note.type !== "text" || !note.hasLabel("todoColorizer")) {
            this.toggleInt(false);
            return;
        }

        this.toggleInt(true);
    }

    async entitiesReloadedEvent({ loadResults }) {
        // Refresh if note content changes
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new todoColorizer();