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!!