Quick Link & Command System Guide

Using Command Functions in the Editor

The Editor provides a set of command functions that make it easy to insert various elements into your documents. This guide will walk you through how to use these commands and how to update or add new ones.

Commands are triggered by typing [[ and a key letter. For example, to insert a button, you would type [[btn]] in the editor. This will trigger the button command and prompt you to enter the button text and URL. This same fuctionality can insert files, images, and other elements into your documents.

The available commands are defined in the commands.js file, where you can customize or add new commands as needed.

This same functionality can be used in the Obsidian editor, allowing you to quickly insert elements into your documents with minimal effort.

Available Commands

Insert Button

Trigger: btn
Description: Inserts a styled button.
How to Use:
Type [[btn]] in the editor.
A prompt will appear asking for the button text and URL.
Fill in the details and the button will be inserted.

Insert QR Code

Trigger: qr
Description: Inserts a QR code image.
How to Use:
Type [[qr]] in the editor.
A QR code will be generated and inserted at the cursor position.

Insert Admonition

Trigger: adm
Description: Inserts an admonition block (e.g., note, warning).
How to Use:
Type [[adm]] in the editor.
A prompt will appear asking for the type, title, and content of the admonition.
Fill in the details and the admonition block will be inserted.

Insert Annotation

Trigger: ann
Description: Inserts an annotation with Markdown support.
How to Use:
Type [[ann]] in the editor.
A prompt will appear asking for the text to annotate and the annotation content.
Fill in the details and the annotation will be inserted.

Insert 4-Card Grid

Trigger: grid4
Description: Inserts a grid with 4 cards.
How to Use:
Type [[grid4]] in the editor.
A prompt will appear asking for the titles and contents of the four cards.
Fill in the details and the grid will be inserted.

Insert Blog Front Matter

Trigger: blogfm
Description: Inserts a basic blog front matter template.
How to Use:
Type [[blogfm]] in the editor.
A prompt will appear asking for the author's name.
Fill in the details and the front matter will be inserted.

Updating Commands

To update or add new commands, follow these steps:

Open the 'commands.js' File: - Navigate to the commands.js file in your project.

Add or Modify Commands:

Each command is defined as an object within the defaultCommands array.

To add a new command, create a new object with the following structure:

{
  trigger: "newTrigger",
  name: "New Command Name",
  template: "Template for the new command",
  description: "Description of the new command",
  params: [
    { name: "param1", prompt: "Prompt for parameter 1" },
    { name: "param2", prompt: "Prompt for parameter 2" }
  ]
}

Example:

{
  trigger: "example",
  name: "Insert Example",
  template: "Example content with $param1$ and $param2$",
  description: "Inserts example content",
  params: [
    { name: "param1", prompt: "Enter first parameter" },
    { name: "param2", prompt: "Enter second parameter" }
  ]
}

Save the File:

Save the changes to the commands.js file.

Reload the Editor:

Reload the editor to apply the changes to the command functions.
To reload, you need to down and rebuild the docker container labeled change-maker-v[insert version #]-frontend.
This will apply the changes to the editor and make the new commands available for use.

Rebuild Application:

If reloading editor does not push updates, you can rebuild application using ./start.sh in the root directory.

Backup Your Data Before Rebuilding

Do not forget to backup your data before rebuilding the application. Critical is that you backup your listmonk data and all your customizations in the Listmonk container. Specifically ensure that your subscribers are backed up before proceeding.

Run commands in root folder:

docker-compose down
./start.sh