Blog
Inline Checkbox Plugin
author avatar image
Published by Stefanos Togoulidis April 16, 2024
Last changed 6 months ago
   views

name

Inline Checkbox

Information

description

Inline checkbox to be controlled by direct interaction with the checkbox; no editing needed. Can be used in a table cell too.

NB: this is not a "task" as far as Amplenote is concerned, and won't appear in the Tasks mode or Calendar; you've been warned πŸ˜‡


icon

rule


instructions

open_in_new

Use the {checkbox} expression to insert a new checkbox somewhere.

Tap on the checkbox to make the dialog pop up (it's a regular Rich Footnote one for that matter)

Use the "Checkbox: tick" or "Checkbox: untick" buttons inside the dialog to change the state of the checkbox.

Also works on regular links if they include the checkbox in the link name πŸŽ‰! Suggestion: add the checkbox emoji to the name of note to automatically have it when referencing the note via inline tags. Changing the state of the checkbox in inline tags won't change the parent note's name, just the reference's! Great way to make habit trackers!

Please remember: this is a hack and the user experience is not particularly awesome. You might want to look at the Checklist plugin by David Trappο»Ώ for a different implementation that might suit you better.


setting

Unticked checkmark (leave empty for πŸ”²)


setting

Ticked checkmark (leave empty for βœ”)


linkVersion History

10 April 2024: Hello world

14 April 2024: Able to toggle the checkbox mark via the Rich footnote button.

15 April 2024: Minor fixes and cleanups


linkCode Block

{
defaultUnchecked: "πŸ”²",
defaultChecked: "βœ”",
 
checkmark(app, checked) {
const key = checked ? "Ticked checkmark (leave empty for βœ”)" : "Unticked checkmark (leave empty for πŸ”²)";
return app.settings[key] || (checked ? this.defaultChecked : this.defaultUnchecked); },
},
 
markdown(fullmark) {
return `[${fullmark}][^1]\n[^1]:[${fullmark}]()\nClick the button below to toggle the checkbox.`; },
},
 
footnote(app, checked) {
// build a rich footnote in markdown
const mark = this.checkmark(app, checked);
return this.markdown(mark); },
},
 
startsWith: async function(app, mark) {
// check if the footnote corresponds a checkbox.
const floatingPattern = new RegExp(`^#*? *?\\[${mark}.*\\]`);
const inTablePattern = new RegExp(`^\\| \\|\n\\|-\\|\n\\|\\[${mark}.*\\]`);
return floatingPattern.test(app.context.selectionContent)
|| inTablePattern.test(app.context.selectionContent); // also check if inside a table
},
 
isChecked: async function(app, checked) {
// check if the footnote corresponds to checked or unchecked state.
 
const mark = this.checkmark(app, checked);
return this.startsWith(app, mark); },
},
 
insertText: {
"checkbox": {
run: async function(app) {
await app.context.replaceSelection(this.footnote(app, false)); // using replaceSelection() to parse markdown.
} } },
} },
},
 
linkOption: {
"tick": {
check: async function(app, link) {
// console.log(app.context.selectionContent);
return await this.isChecked(app, false); },
},
 
run: async function(app, link) {
const text = app.context.selectionContent.match(new RegExp(`\\[${this.checkmark(app, false)}(.*?)\\]`), 'g')[1];
const fullmark = this.checkmark(app, true) + text;
await app.context.replaceSelection(this.markdown(fullmark)); } },
} },
},
 
"untick": {
check: async function(app, link) {
return await this.isChecked(app, true); },
},
 
run: async function(app, link) {
const text = app.context.selectionContent.match(new RegExp(`\\[${this.checkmark(app, true)}(.*?)\\]`), 'g')[1];
const fullmark = this.checkmark(app, false) + text;
await app.context.replaceSelection(this.markdown(fullmark));
}
}
}
}