Quick toggle between different custom checkboxes

[celnda]

What it is about

If you use our own custom set of checkboxes and find manual typing tedious you are at the right place. Instead of the selection from dialog you can bind the following script to hotkey and get the desired checkbox case with few key presses.

The code

• I am using "//NOTE -" tags to annotate whats going on.
• this here is edited for my use case (the lesser amount of chars the faster you go through them)
• I am no JS guru so if you find something worth improving let me know.

<%*
/* This is the simple obsidian templater script for quick toggling of checkboxes
 * created by Dixiw @ 25.10.2023 inspired from dmych
 */
// NOTE - order members in the list in way you want to cycle through
let chars = ['[ ]',
'[/]',
'[x]',
'[!]',
'[-]',
'[>]',
'[<]'];

// NOTE - matching patterns setup
let re = /(^\s*|^\t*)(-\s\[ \]\s|-\s\[.\]\s|\*\s|-\s|\d*\.\s|\*\s|\b|^)([^\n\r]*)/gim;
let re_char = /\[.\]/; //BEWARE really simple way to detect

// NOTE - get the text in line where the cursor is 
let editor = app.workspace.activeLeaf.view.editor;
let cursor = editor.getCursor("from");
let text = editor.getLine(cursor.line);

// NOTE - detect the presence of the bracket section 
let captured_char = text.match(re_char);
if (!captured_char) 
{
	alert(' INFO: nothing was matched');
	return;
}
//alert(' DEBUG: "' + captured_char[0] +'"');
// NOTE - get the next element in the list
//      - next is looped around using %
let new_char_index = chars.indexOf(captured_char[0]);
if (new_char_index === -1)
{
	alert(' ERR: "'+ captured_char[0] + '" not found in chars');
	return;
}
let new_char = chars[(new_char_index + 1) % chars.length];

// NOTE - replace the text in the line and set it
// TODO - design more clever way of replacing only the box
text = text.replace(re, (match, spaces, startText, sentence) => { return spaces + '- '+new_char+' ' + sentence });
editor.setLine(cursor.line, text);
%>

Origins

I've taken inspiration from this example. If you need dialog the go there.

Discussed in #991

^{Originally posted by dmych January 12, 2023}
Minimal theme allows us to use checkboxes with more than two states. It's good for Bullet Journal for instance.
Here is a quite simple Templater script which allows you to select a checkbox value from a menu. It is recommended to assign a template to a hotkey or a button in the mobile toolbar. Save the template as .md file to your Templater scripts folder. You can customize the list of available checkboxes in the suggester.

[stracker-phil]

Nice template!

Here's a modified version, with a few changes:

• General: Code is a bit cleaner
• General: I've defined all AnuPpuccin checkbox states
• New logic: Show a list of all checkbox states to choose from, instead of toggling though the defined list (can be disabled by setting promptUser = false in the top)
• New logic: If the current line is no checkbox, the template automatically adds an unchecked checkbox
• New logic: The last item in the checkbox-state list is '' which removes the checkbox again and turns the line into plain text
• New logic: Preserve numbered lists, i.e. 1. [ ] Task does not change to - [x] Task anymore

<%*
// List of all defined checkbox states. Adjust to match your setup.
const states = {
	' ': 'Unchecked | Pending',
	'x': 'Checked | Done',
	'>': 'Rescheduled',
	'<': 'Scheduled',
	'!': 'Important',
	'-': 'Cancelled',
	'/': 'In Progress',
	'?': 'Question',
	'*': 'Star',
	'n': 'Note',
	'l': 'Location',
	'i': 'Information',
	'I': 'Idea',
	'S': 'Amount | Price | Money',
	'p': 'Pro | Good',
	'c': 'Con | Bad',
	'b': 'Bookmark',
	'"': 'Quote',
	'u': 'Up | Like',
	'd': 'Down | Dislike',
	'w': 'Win',
	'k': 'Key',
	'f': 'Fire | Hot',
	'':  'Clear Checkbox | Reset'
};

// Whether to show the new-state input dialog.
// When set to false, the checkbox loops though all defined states.
let promptUser = true;

// Default state if this line: Undone checkbox.
// This state is used, if the current line is no checkbox yet, or if
// it's current state is unknown.
const defaultState = ' ';

// -- end of configuration.

// Helper functions.
const getLabel = key => (key ? `[${key}] ` : '') + `${states[key]}`;
const stateByListType = (listNumber, key) => key 
	? (listNumber ? `${listNumber} [${key}] ` : `- [${key}] `) 
	: '';
const setState = (key, line) => line.replace(
	/^(\s*)(-|\*|(\d\.))?(\s+\[.\])?\s*/,
	(...match) => match[1] + stateByListType(match[3], key)
);

// Prepare vars, inspect current editor line.
const stateKeys = Object.keys(states);
const editor = app.workspace.activeLeaf.view.editor;
const cursor = editor.getCursor('from');
const currentLine = editor.getLine(cursor.line);
const stateMatch = currentLine.match(/^[\s-\*]+\s\[(.)\]\s/);
const currentState = stateMatch?.[1] || '';
let newState = defaultState;

// We found a valid checkbox state. Let's find the next state in the queue.
if (currentState) {
	let nextIndex = stateKeys.indexOf(currentState) + 1
	if (nextIndex >= stateKeys.length) {
		nextIndex = 0;
	}
	newState = stateKeys[nextIndex];
}

// Optional branch: Let the user choose the new state.
if (promptUser) {
	// Display the "next state" as first option, so it's auto-selected.
	const suggestLabels = [getLabel(newState)];
	const suggestKeys = [newState];
	
	stateKeys.map(key => {
		if (key === newState) {
			return;
		}
		suggestLabels.push(getLabel(key))
		suggestKeys.push(key)
	});
	
	newState = await tp.system.suggester(
		suggestLabels,
		suggestKeys,
		false,
		"Select new checkbox state"
	);
}

if ('string' === typeof newState) {
	editor.setLine(cursor.line, setState(newState, currentLine));
}
%>

[jskherman]

Do you have another template that uses a variable or constant states? It worked for me and I don't have other templates. Maybe try replacing all the instances of the constant states in the template with something else that's unique. Maybe bulletStates, bullets, etc.?

[francisHugo]

Yeah, you are right. I did had another template also have a constant states. I deleted it, now it is only one template note has it, however, still no lucky.

now the error like this:

[jskherman]

This warning about inner-spin-button might be unrelated to this template on checkboxes.

Is appearance a CSS property? If so, it might be related to this.

[hmnijp]

There is another bug here as to why the numeric lists don't switch:

const setState = (key, line) => line.replace(
	/^(\s*)(-|\*|(\d\.))?(\s+\[.\])?\s*/,
-	'$1' + stateByListType('$3', key)
);

'$3' is evaluated as a string literal in this case, and listNumber = '$3'

const stateByListType = (listNumber, key) => key 
-	? (listNumber ? `${listNumber} [${key}] ` : `- [${key}] `) 
	: '';

so this expression will be true all the time.

In this case you need to use a replacer-function that receives all capture groups of a regular expression:
line.replace( regexp , stateByListType ) → const stateByListType = (match, p1, p2, p3, p4, offset, string)
I also fixed regexp's for lists longer than 9 and a couple of other small things:

<%*
// List of all defined checkbox states. Adjust to match your setup.
const states = {
	' ': 'Unchecked | Pending',
	'x': 'Checked | Done',
	'>': 'Rescheduled',
	'<': 'Scheduled',
	'!': 'Important',
	'-': 'Cancelled',
	'/': 'In Progress',
	'?': 'Question',
	'*': 'Star',
	'':  'Clear Checkbox | Reset'
};

// Whether to show the new-state input dialog.
// When set to false, the checkbox loops though all defined states.
let promptUser = false;

// Default state if this line: Undone checkbox.
// This state is used, if the current line is no checkbox yet, or if
// it's current state is unknown.
const defaultState = ' ';

// -- end of configuration.

// Helper functions.
const getLabel = key => (key ? `[${key}] ` : '') + `${states[key]}`;
const stateByListType = (match, sps, ptr, num, key, offset, string) => {
	if (newState != '') {
		if (num) {
			return (sps + num + ' ['+newState+'] ');
		} else {
			return ('- [' + newState + '] ');
		};		
	} else {
		return (sps + (num?num:'') + ' ');
	}
};
const setState = (key, line) => line.replace(
	/^(\s*)(-|\*|(\d+\.))?(\s+\[.\])?\s*/,	stateByListType
);

// Prepare vars, inspect current editor line.
const stateKeys = Object.keys(states);
const editor = app.workspace.activeLeaf.view.editor;
const cursor = editor.getCursor('from');
const currentLine = editor.getLine(cursor.line);
const stateMatch = currentLine.match(/^(?:\s*)(?:-|\*|\d+\.)+\s\[(.)\]\s/);
const currentState = stateMatch?.[1] || '';
let newState = defaultState;

// We found a valid checkbox state. Let's find the next state in the queue.
if (currentState) {
	let nextIndex = stateKeys.indexOf(currentState) + 1;
	if (nextIndex >= stateKeys.length) {
		nextIndex = 0;
	}
	newState = stateKeys[nextIndex];
}

// Optional branch: Let the user choose the new state.
if (promptUser) {
	// Display the "next state" as first option, so it's auto-selected.
	const suggestLabels = [getLabel(newState)];
	const suggestKeys = [newState];
	
	stateKeys.map(key => {
		if (key === newState) {
			return;
		}
		suggestLabels.push(getLabel(key))
		suggestKeys.push(key)
	});
	
	newState = await tp.system.suggester(
		suggestLabels,
		suggestKeys,
		false,
		"Select new checkbox state"
	);
}

if ('string' === typeof newState) {
	editor.setLine(cursor.line, setState(newState, currentLine));
}
%>

[stracker-phil]

@hmnijp you are right - I've forgotten to update the script above.
(I've just adjusted the code in my initial comment above. It should now work as expected)

The correct function that I use in my script is:

const setState = (key, line) => line.replace(
	/^(\s*)(-|\*|(\d\.))?(\s+\[.\])?\s*/,
	(...match) => match[1] + stateByListType(match[3], key)
);