[Radical feature] Pre-created templated callouts library

[Mistmage]

Based on my own use, as well as inspired by meta bind plugin:

Right now, this plugins is set to be used via a command, to create a unique callout each time.

I believe that it is not as important, as an ability to insert a pre-set callout.

Library of callouts is good on its own, but an ability to insert them with a shorthand, instead of the full local formatting would also be nice.

Another feature it allows is custom Css aimed on such pre-sets.
Right now it is possible to aim at the icon, and base around that, but it is not perfect.

[akhtsang]

This would be great. This is mainly how I use the old badges plugin. I'm actually a bit hesitant to switch from badges because this implementation is usually more verbose.

Currently I have entries like
[!!check:Booked]

Which would have to be
[!!check|Booked|var(--color-green-rgb)]

It would be great if we can define default colors associated with certain icons, or better yet, a CSS based solution similar to defining new custom callouts.

Really thrilled to see a continuation of the badges plugin though!

[duponter]

Following solution works for me:

Using the slash character, a menu pops up, just type some letters to filter the options and select the badge to insert:

In my case it inserts a badge without a label, but with a predefined color.
Using the 'Modify Inline Callout' command (assign a shortcut for easy access), I customize it further to my needs.

However, it took some time to set up:

1. Custom Commands

First you need to install the Custom Commands community plugin.
Like its name says, this plugin allows to create custom commands, including text insertion.
You can configure this manually, but as it is plain JSON (data.json in .obsidian/plugins/custom-commands), you can easily automate this:

{
  "id": "badge-bookmark",
  "type": "insert", // insert text command
  "name": "Badge: bookmark", // logical name of the created command
  "path": "",
  "templatePath": "",
  "snippet": "`[!!bookmark]`", // your template, e.g. a badge with or without label
  "commandIds": ""
},

2. Slash Commander

Next, install the Slash Commander plugin. Therefore you need the disable the core Slash Command plugin. This plugin shows predefined commands when typing slash.
You can configure this manually, but as it is plain JSON (data.json in .obsidian/plugins/slash-commander), you can easily automate this:

{
  "id": "slash-cmd-badge-bookmark",
  "icon": "bookmark", // Lucide image prefixing name
  "name": "Badge: bookmark", // shown in popup, logical name
  "action": "custom-commands:custom-cmd-badge-bookmark", // link with id of custom command
  "mode": "any",
  "triggerMode": "anywhere",
  "isGroup": false,
  "children": []
},

3. CSS Snippet

Finally, I gave a default color to all predefined badges (with the possibility to override). This can be done simply by adding a css-snippet file (.obsidian/snippets). Do not forget to activate it in the Appearance settings.

/* badge icon shown in gray when no default color defined */
.inline-callout:not([style]) {
  --type-color: var(--color-gray-rgb, 128, 128, 128);
    color: rgba(var(--type-color), 1);
}

/* badge background shown in gray when no default color defined */
.inline-callout:not([style]):has(.inline-callout-label) {
  background-color: rgba(var(--type-color), var(--inline-callout-bg-transparency, 0.1));
}

/* badge (both icon and background) shown in blue when icon is info */
.inline-callout:is([data-inline-callout="info"]) {
  --type-color: var(--color-blue-rgb);
}

/* badge (both icon and background) shown in orange when icon is either bookmark or circle-check-big */
.inline-callout:is([data-inline-callout="bookmark"], [data-inline-callout="circle-check-big"]) {
  --type-color: var(--color-orange-rgb);
}

/*
finally, my first attempt to have different colors for icon and background: in this case the circle-check-big icon is orange and its background is yellow
 */
.inline-callout:is([data-inline-callout="circle-check-big"]):has(.inline-callout-label) {
  background-color: rgba(var(--color-yellow-rgb), var(--inline-callout-bg-transparency, 0.1));
}

Next, I will be experimenting further with badges with different colors defined for icon/label and background.
Also, I want to extend the list with available colors in the plugin.
Maybe even to include all 140 named css colors: https://www.w3schools.com/cssref/css_colors.php