Insert Callout Template

[willasm]

I wanted a template to insert a callout that prompts with valid callout types and this is what I came up with.
To use, insert the template in your note and run it with Templater. It will give you the following prompts...

1. The callout type, "Abstract", "Attention", "Bug", etc..
2. The folding state, "Not Foldable", "Default Expanded", "Default Collapsed"
3. Optional Title Text
4. Optional Content Text (Multiline Enabled)

Hope you find this useful.

Tip: You can use QuickAdd plugin to create a macro to insert this template & replace with Templater. This will let you insert a callout with only a couple of keystrokes, or even just one if you assign a hotkey to the macro.

<%_* let calloutType = await tp.system.suggester(["Abstract", "Attention", "Bug", "Caution", "Check", "Cite", "Danger", "Done", "Error", "Example", "Fail", "Failure", "FAQ", "Help", "Hint", "Important", "Info", "Missing","Note", "Question", "Quote", "Success", "Summary", "Tip", "TLDR", "Todo", "Warning"], ["abstract", "attention", "bug", "caution", "check", "cite", "danger", "done", "error", "example", "fail", "failure", "faq", "help", "hint", "important", "info", "missing","note", "question", "quote", "success", "summary", "tip", "tldr", "todo", "warning"], false, "Which type of callout do you want to insert?")%>

<%_* let foldState = await tp.system.suggester(["Not Foldable", "Default Expanded", "Default Collapsed"], ["", "+", "-"], false, "Folding state of callout?")%>

<%_*
  let title = await tp.system.prompt("Optional Title Text", "")
%>

<%_*
  let calloutContent = await tp.system.prompt("Optional Content Text (Shift Enter to Insert New Line)", "", false, true)
  calloutContent = calloutContent.replaceAll("\n", "\n> ")
%>

<%-*
if (calloutType != null) {
  let content = '> [!' + calloutType + ']' + foldState + ' ' + title + '\n> ' + calloutContent + '\n'
  tR+=content
}
%>

[sadkodev]

Simple and functional ! Great !!

[Ton-yi]

thanks

[filmgal]

Love this, thanks!

[JustAnotherSapiens]

I made a cleaner version with some emojis indicating the color and icon of the callout:

<%*
const callouts = {
   note:     '🔵 ✏ Note',
   info:     '🔵 ℹ Info',
   todo:     '🔵 🔳 Todo',
   tip:      '🌐 🔥 Tip / Hint / Important',
   abstract: '🌐 📋 Abstract / Summary / TLDR',
   question: '🟡 ❓ Question / Help / FAQ',
   quote:    '🔘 💬 Quote / Cite',
   example:  '🟣 📑 Example',
   success:  '🟢 ✔ Success / Check / Done',
   warning:  '🟠 ⚠ Warning / Caution / Attention',
   failure:  '🔴 ❌ Failure / Fail / Missing',
   danger:   '🔴 ⚡ Danger / Error',
   bug:      '🔴 🐞 Bug',
};

const type = await tp.system.suggester(Object.values(callouts), Object.keys(callouts), true, 'Select callout type.');
const fold = await tp.system.suggester(['None', 'Expanded', 'Collapsed'], ['', '+', '-'], true, 'Select callout fold option.');

const title = await tp.system.prompt('Title:', '', true);
let content = await tp.system.prompt('Content (New line -> Shift + Enter):', '', true, true);
content = content.split('\n').map(line => `> ${line}`).join('\n')

const calloutHead = `> [!${type}]${fold} ${title}\n`;

tR += calloutHead + content
-%>

[wlai-lp]

i don't know what this is, but i know it's amazing, ty

[Today20092]

Awesome friend!

[biidon]

Hello, can you help me, thank you!

<%*
const callouts = {
question: '問題',
};
-%>

Select 'question' type, -> Select 'fold' -> Input 'title' -> Press the 'enter' button -> Input 'content' -> Click 'submit'

[!question]+ This is 'Input title'
This is 'Input content'

Non-input 'title' -> Press the 'enter' button -> Input 'content' -> Click 'submit'

[!question]+
This is 'Input content'

My question: How to write code if I want to achieve the following situation?
Non-input 'title' -> After pressing the 'enter' button, '問題' automatic input 'title' -> Input 'content' -> Click 'submit'

[!question]+ 問題
This is 'Input content'

[willasm]

Really like your version, much cleaner than my original version. 👍

[Neoniq]

Not mine, found on the internet

<%*
//get selection
noteContent = await tp.file.selection();

// Check if the selected text has one or two strings
let numberOfStrings = noteContent.split('\n').length;
let titre;
let corps;

if (numberOfStrings === 1) {
  // Ingest titre only
  titre = noteContent.match(/.*/g)[0];
  corps = "";
} else if (numberOfStrings > 1) {
  // Ingest titre and corps
  titre = noteContent.match(/.*(?=\n.*)/g)[0];
  corps = noteContent.match(/(?<=.*\n)(.|\n)*/g).join('\n');
}
console.log(corps);
// list callouts
const callouts = {
   note:     '🔵 ✏️ Note',
   info:     '🟢 ℹ️ Info',
   todo:     '🟢 ✔️ Todo',
   asidecleanright: '⚪️ 💬commentaire',
   tip:      '🌐 🔥 Tip / Hint / Important',
   abstract: '🌐 📋 Abstract / Summary / TLDR',
   question: '🟡 ❓ Question / Help / FAQ',
   quote:    '🔘 💬 Quote / Cite',
   example:  '🟣 📑 Example',
   success:  '🟢 ✔️ Success / Check / Done',
   warning:  '🟠 ⚠️ Warning / Caution / Attention',
   failure:  '🔴 ❌ Failure / Fail / Missing',
   danger:   '🔴 ⚡️ Danger / Error',
   resources: 'resources',
   code: 'code',
   code2: 'code version 2',
   proof: 'transparent callout'  
};
// return callout
const type = await tp.system.suggester(Object.values(callouts), Object.keys(callouts), true, 'Select callout type.');
//return fold
const fold = await tp.system.suggester(['None', 'Expanded', 'Collapsed'], ['', '+', '-'], true, 'Select callout fold option.');

//return titler
const title = await tp.system.prompt('Title:', titre , true);

//get array of lines
lines = corps.split('\n');
//make a new string with > prepended to each line
let newContent = "";
lines.forEach(l => {
  newContent += '> ' + l + "\n";
})
//remove the last newline character
newContent = newContent.replace(/\n$/, "");
//define callout header
header = "> [!"+type+"]"+fold + " " + title +"\n";
// Return the complete callout block
return header + newContent;
%>

[HippyCraig]

So im kinda new to useing this type of template what is the diff betwee <%* or <%_* or <%-* I have also see <%+* on other scripts, I tried searching but I dont know what terms to search for. Is there any documenation you can point me at?

[Cryptodarktrader]

Each one is for a different function, the + is to indicate that it is a recurring code, meaning that it must be executed every time the note is opened again. The _ or - are to control whitespace. You have all the information here:

https://silentvoid13.github.io/Templater/commands/dynamic-command.html

https://silentvoid13.github.io/Templater/commands/whitespace-control.html

[HippyCraig]

Thanks I will take a look

[foxthewolf245]

Nice, I'm seeing that this leaves quite a few possibilities.

[stracker-phil]

Here's a slightly modified version.

• Exit the template if no callout-type is selected (pressing ESC in the first prompt)
• Callout types are alphabetically ordered
• When text is selected, that text is used as callout title, without prompting for a title
• The cursor is positioned inside the Callout Content section, instead of prompting for content.

To add content to the callout, press RETURN and continue typing. Otherwise, leave the callout as-is to get a title-only callout.

<%*
const callouts = {
	// Colors: 🟥🟧🟨🟩🟦🟪⬛️⬜️🟫
	"bug":          "🟥 Bug",
	"danger":       "🟥 Danger | Error",
	"fail":         "🟥 Fail | Failure | Missing",
	"warning":      "🟧 Warning | Attention | Caution",
	"help":         "🟧 Help | FAQ | Question",
	"success":      "🟩 Success | Done | Check",
	"abstract":     "🟦 Abstract | Summary | TLDR", 
	"example":      "🟦 Example",
	"hint":         "🟦 Hint | Important | Tip",
	"info":         "🟦 Info",
	"note":         "🟦 Note",
	"todo":         "🟦 Todo",
	"cite":         "⬜️ Cite | Quote",
	
	// Custom types (via Callout Manager)
	"link":         "🟨 Link",
	"presentation": "🟨 Presentation",
	"money":        "🟨 Money",
	"chart":        "🟦 Line Chart",
	"visual":       "🟪 Styled Quote | Visual Quote",
	"visual-img":   "🟪 Styled Image | Visual Image",
	"image":        "🟪 Image",
	"brain":        "🟪 Brain | AI",
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
	.sort() // Remove this line to use predefined order.
	.forEach(key => 
		typeNames.push(key) && typeLabels.push(callouts[key])
	);

let calloutType = await tp.system.suggester(
	typeLabels,
	typeNames,
	false,
	"Select callout type."
);

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
  return;
}

let foldState = await tp.system.suggester(
	["Static", "Expanded", "Collapsed"],
	["", "+", "-"],
	false,
	"Select callout folding option."
);

let title = await tp.file.selection();
if (!title) {
	title = await tp.system.prompt("Title Text", "");
}
_%>

> [!<% calloutType %>]<% foldState %> <% title %><%* tp.file.cursor() %>

[mbbroberg]

Worked perfectly, thank you so much @stracker-phil 👏

[Lagann311]

I modified the version of @stracker-phil so that the selected text is put into the callout content rather than the title.
This allows to wrap multiple lines into the callout in the same manner as the default Insert callout Command.

Summary:

1. Prompt to choose Callout type (custom callouts can be included here)
2. Prompt to enter title
3. Prompt to choose fold type
   -> If text was selected, it is now placed inside the callout content.

<%*
const callouts = {
	// Colors: 🟥🟧🟨🟩🟦🟪⬛️⬜️🟫
	"bug":          "🟥 Bug",
	"danger":       "🟥 Danger | Error",
	"fail":         "🟥 Fail | Failure | Missing",
	"warning":      "🟧 Warning | Attention | Caution",
	"help":         "🟧 Help | FAQ | Question",
	"success":      "🟩 Success | Done | Check",
	"abstract":     "🟦 Abstract | Summary | TLDR", 
	"example":      "🟦 Example",
	"hint":         "🟦 Hint | Important | Tip",
	"info":         "🟦 Info",
	"note":         "🟦 Note",
	"todo":         "🟦 Todo",
	"cite":         "⬜️ Cite | Quote",
	
	// Custom types (via Callout Manager)
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
	.sort() // Remove this line to use predefined order.
	.forEach(key => 
		typeNames.push(key) && typeLabels.push(callouts[key])
	);

let calloutType = await tp.system.suggester(
	typeLabels,
	typeNames,
	false,
	"Select callout type."
);

let title = await tp.system.prompt("Callout Header:")

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
  return;
}

let foldState = await tp.system.suggester(
	["Static", "Expanded", "Collapsed"],
	["", "+", "-"],
	false,
	"Select callout folding option."
);

let content = await tp.file.selection();

// Format each line of content to be part of the callout
const formattedContent = content.split('\n').map(line => `> ${line}`).join('\n');
_%>

> [!<% calloutType %>]<% foldState %> <% title %>
<% formattedContent %> <%* tp.file.cursor() %>