Scratchpad per note

[hokutonanto]

Sometimes when I'm writing a note I want to keep track of a few related things which, at the moment of writing, I can't yet find a proper spot for them. This could be a name, a word, a short sentence, an URL, and so on.

Let's say I'm writing an article for my blog. At some point, I need to mention something which is not fully organized in my mind. So, I write down these secondary bits of notes so to speak but I don't want to create sub-notes. Ideally, I'd rather store these bits of information on a side panel so I could quickly peek and at the right moment bring back what I need.

So, the idea is for a sort of scratchpad area where to store temporary information.

[chee]

I've thrown together this scrappy script that adds a widget in the right sidebar which provides a scratchpad for every note. really, it is an editable view on a note label called #scratchpadContent

EDIT: woops, there was a little bug in the one i posted yesterday.

try pasting this into a note and adding the #widget label then reloading. should work well!

let TPL = `
<style>
.scratchpad-widget {
    border: 1px solid var(--main-border-color);
    min-height: 10em;
    resize: vertical;
    width: 100%;
    font-family:var(--font-code); 
}
</style>
<textarea class="scratchpad scratchpad-widget">
</textarea>
`

class ScratchpadWidget extends api.CollapsibleWidget {
    get contentLabelName () {
        return "scratchpadContent"
    }
    
    get contentLabel () {
        return this.note.getLabel(this.contentLabelName)
    }
    
    get hasContentLabel () {
        return this.note.hasLabel(this.contentLabelName)
    }
    
    isEnabled() {
        return super.isEnabled() && !this.note.hasLabel("scratchpadWidgetDisabled")
    }

    get widgetTitle() {
        return "Scratchpad"
    }
    
    get parentWidget() {
        return "right-pane"
    }
    
    async setContent(content = "") {
        let result = await api.runOnBackend((noteId, value) => {
            api.getNote(noteId).setLabel("scratchpadContent", value)
        }, [this.note.noteId, content])
    }

    async doRenderBody() {
        this.$body.html(TPL);
        this.$scratchpad = this.$body.find(".scratchpad")
        this.$scratchpad.on("input", event => {
            // TODO debounce
            this.setContent(this.$scratchpad.prop("value"))
        })
    }

    async refreshWithNote(note) {
        if (this.hasContentLabel) {
            this.$scratchpad.text(this.contentLabel.value)
            this.$scratchpad.prop("value", this.contentLabel.value)
        } else {
            this.$scratchpad.text("")
            this.$scratchpad.prop("value", "")
        }
    }

    entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteReloaded(this.noteId) || loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new ScratchpadWidget()

it's a scrappy little go-getter

here's a screenshot:

[TheBig-O]

Thank you so much for posting this. I have been looking for something like this for a while. The only thing I'm unclear on is whether the text listed in the scratchpad is saved anywhere? Does the widget require a secondary ~rendernote or something like that with a note label #scratchpadContent? Not an issue either way. Just curious if there was a way to show it.

[mofe23]

For anyone trying this in the future: Replace api.CollapsibleWidget with api.RightPanelWidget to make it work. Api changed in version 0.59.1, iirc.

Thx chee for making it and zadam for giving us a platform where hacks like this are even possible :)

[hokutonanto]

Thank you, @chee !
That works great!

[chee]

thanks for requesting it! i never would have noticed i needed it, and i've found it really useful when researching!

[TheNomad11]

wow great perfect., thanks so much!!

[uniquegch]

I am new to Trilium and not a developer. how do I mark it as #Widget? When I create a new note I select JAVA, with JS Frontend I am getting a parsing error right at the beginning "unexpected Token TPL at Line1.

[TheBig-O]

You need to ad #widget to the "Owned Attributes" of the note. Once you do that, you need to reload the frontend.
I'm not sure what you mean when you say you added a "new note I select JAVA." The Note type should be "JS frontend" only.
Don't worry about the "Token TPL" error. It won't affect the performance of the widget.
Hope this helps.

[uniquegch]

Hello TheBig-O,
thanks for the information I was able to follow that and now also learned something about "Owned Attributes" and where to find them.
But I still getting an Parser error message regarding the token.

I did change the different "versions" of quotes "". '', ``. The error message coveres the first quote.

[zerebos]

Reference the wiki https://github.com/zadam/trilium/wiki/Attributes for attributes and how to apply them.

That "error" you are seeing is not a true error and can be safely ignored, just make sure you have the code like you do in the first image. In the second image that is indeed an error.

[uniquegch]

Hello zerebos,
thanks for the link, very helpful. So now I have that widget in place as a note and how do I use it? I am lost here. How to I "trigger" the scratchnote?

[TheBig-O]

So, the scratch pad is linked to the note that was active when the scratch note was made. When you select that note again, if there is a scratchpad note, you'll see it appear in the widget. (It places a label in the "Owned Attributes" named #scratchpadContent.)
I went a bit further and used two things together. I used "Collection Views" with Scratchpad and created a single page that pulls all of the scratchpad notes into a single view.
The base query for the collection is #query="#scratchpadContent"

If you haven't looked into Collection Views, you should!

[xnohat]

An update for this ScratchPad Widget support close & reopen widget from right panel

let TPL = `
<style>
.scratchpad-widget {
    border: 1px solid var(--main-border-color);
    min-height: 10em;
    resize: vertical;
    width: 100%;
    font-family:var(--font-code); 
}
.scratchpad-widget-close {
	position: absolute;
    top: 0;
	right: 0;
}
</style>
<button class="scratchpad-widget-close button-widget bx component icon-action bx-x"></button>
<textarea class="scratchpad scratchpad-widget">
</textarea>
`

class ScratchpadWidget extends api.RightPanelWidget {
    get contentLabelName () {
        return "scratchpadContent"
    }
    
    get contentLabel () {
        return this.note.getLabel(this.contentLabelName)
    }
    
    get hasContentLabel () {
        return this.note.hasLabel(this.contentLabelName)
    }
    
    isEnabled() {
        return super.isEnabled() && !this.note.hasLabel("scratchpadWidgetDisabled")
    }

    get widgetTitle() {
        return "Scratchpad"
    }
    
    get parentWidget() {
        return "right-pane"
    }
    
    async setContent(content = "") {
        let result = await api.runOnBackend((noteId, value) => {
            api.getNote(noteId).setLabel("scratchpadContent", value)
        }, [this.note.noteId, content])
    }

    async doRenderBody() {
        this.$body.html(TPL);
        this.$scratchpad = this.$body.find(".scratchpad")
        this.$scratchpad.on("input", event => {
            // TODO debounce
            this.setContent(this.$scratchpad.prop("value"))
        })
        this.$scratchpad_close_btn = this.$body.find(".scratchpad-widget-close")
        this.$scratchpad_close_btn.on("click", event => {
            this.toggleInt(false); //hide this widget
        	this.triggerCommand('reEvaluateRightPaneVisibility'); //close panel if no widget left
			// Add button show scratchpad to floating buttons bar in middle panel when this widget closed
            if (!document.querySelector(".floating-buttons-children .button-show-scratchpad")) {
                const htmlBtnStr = '<button class="button-widget button-show-scratchpad bx component bx-notepad" data-bs-toggle="tooltip" title="" data-placement="bottom"></button>';
                document.querySelector(".floating-buttons-children").insertAdjacentHTML('afterbegin', htmlBtnStr);
            }
            const this_widget = this;
            document.querySelector('.button-show-scratchpad').addEventListener('click', function() {
                this_widget.toggleInt(true); //show this widget
                this_widget.triggerCommand('reEvaluateRightPaneVisibility'); //reopen panel if closed
            });
            
        })
    }

    async refreshWithNote(note) {
        if (this.hasContentLabel) {
            this.$scratchpad.text(this.contentLabel.value)
            this.$scratchpad.prop("value", this.contentLabel.value)
        } else {
            this.$scratchpad.text("")
            this.$scratchpad.prop("value", "")
        }
    }

    entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteReloaded(this.noteId) || loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new ScratchpadWidget()

[DSSfish]

why does for me it keeps opening when i start writing in my note when i already close?