feat: display template name in variable input dialog

Author: nishantwrp

src/index.ts

@@ -2,7 +2,7 @@ import joplin from "api";
 import { SettingItemType } from "api/types";
 import { Parser } from "./parser";
 import { DateAndTimeUtils } from "./utils/dateAndTime";
-import { doesFolderExist } from "./utils/folders";
+import { doesFolderExist, Note } from "./utils/folders";
 import { getTemplateFromId, getUserTemplateSelection } from "./utils/templates";
 import { setDefaultTemplatesView } from "./views/defaultTemplates";
 import { JoplinCommand } from "./types";
@@ -50,15 +50,15 @@ joplin.plugins.register({
 
 
         // Utility Functions
-        const executeCommandWithParsedTemplate = async (command: JoplinCommand, template: string | null) => {
+        const executeCommandWithParsedTemplate = async (command: JoplinCommand, template: Note | null) => {
             const parsedTemplate = await parser.parseTemplate(template);
             if (parsedTemplate) {
                 await joplin.commands.execute(command, parsedTemplate);
             }
         }
 
         const getTemplateAndExecuteCommand = async (command: JoplinCommand) => {
-            const template = await getUserTemplateSelection(templatesFolderId);
+            const template: Note = JSON.parse(await getUserTemplateSelection(templatesFolderId));
             await executeCommandWithParsedTemplate(command, template);
         }
 
@@ -133,7 +133,7 @@ joplin.plugins.register({
             execute: async () => {
                 const template = await getTemplateFromId(await joplin.settings.value("defaultNoteTemplateId"));
                 if (template) {
-                    return await executeCommandWithParsedTemplate(JoplinCommand.NewNote, template.body);
+                    return await executeCommandWithParsedTemplate(JoplinCommand.NewNote, template);
                 }
                 await joplin.views.dialogs.showMessageBox("No default note template is set.");
             }
@@ -145,7 +145,7 @@ joplin.plugins.register({
             execute: async () => {
                 const template = await getTemplateFromId(await joplin.settings.value("defaultTodoTemplateId"));
                 if (template) {
-                    return await executeCommandWithParsedTemplate(JoplinCommand.NewTodo, template.body);
+                    return await executeCommandWithParsedTemplate(JoplinCommand.NewTodo, template);
                 }
                 await joplin.views.dialogs.showMessageBox("No default to-do template is set.");
             }

src/parser.ts

@@ -1,6 +1,7 @@
 import joplin from "api";
 import * as Handlebars from "handlebars/dist/handlebars";
 import { DateAndTimeUtils } from "./utils/dateAndTime";
+import { Note } from "./utils/folders";
 import { setTemplateVariablesView } from "./views/templateVariables";
 
 // Can't use import for this library because the types in the library
@@ -55,12 +56,12 @@ export class Parser {
         return variableValues;
     }
 
-    private async getVariableInputs(variables: Record<string, string>) {
+    private async getVariableInputs(title: string, variables: Record<string, string>) {
         if (Object.keys(variables).length == 0) {
             return {};
         }
 
-        await setTemplateVariablesView(this.dialog, variables);
+        await setTemplateVariablesView(this.dialog, title, variables);
         const dialogResponse = (await joplin.views.dialogs.open(this.dialog));
 
         if (dialogResponse.id === "cancel") {
@@ -71,16 +72,16 @@ export class Parser {
         return this.mapUserResponseToVariables(variables, userResponse);
     }
 
-    public async parseTemplate(template: string | null): Promise<string | null> {
+    public async parseTemplate(template: Note | null): Promise<string | null> {
         if (!template) {
             return null;
         }
 
         try {
-            const processedTemplate = frontmatter(template);
+            const processedTemplate = frontmatter(template.body);
             const templateVariables = processedTemplate.attributes;
 
-            const variableInputs = await this.getVariableInputs(templateVariables);
+            const variableInputs = await this.getVariableInputs(template.title, templateVariables);
             if (variableInputs === null) {
                 return null;
             }

src/utils/templates.ts

@@ -3,12 +3,20 @@ import { getAllNotesInFolder, Note } from "./folders";
 
 type NoteProperty = "body" | "id" | "title";
 
-export const getUserTemplateSelection = async (templatesFolderId: string, property: NoteProperty = "body"): Promise<string | null> => {
+export const getUserTemplateSelection = async (templatesFolderId: string, property?: NoteProperty): Promise<string | null> => {
     const templates = await getAllNotesInFolder(templatesFolderId);
     const templateOptions = templates.map(note => {
+        let optionValue;
+
+        if (!property) {
+            optionValue = JSON.stringify(note);
+        } else {
+            optionValue = note[property];
+        }
+
         return {
             label: note.title,
-            value: note[property]
+            value: optionValue
         };
     });
 

src/views/templateVariables.ts

@@ -76,7 +76,7 @@ const getVariableHtml = (variable: string, type: string): string => {
     return `<div class="invalidVariable"><i>${encode(variable)} has an invalid type.</i></div>`;
 }
 
-export const setTemplateVariablesView = async (viewHandle: string, variables: Record<string, string>): Promise<void> => {
+export const setTemplateVariablesView = async (viewHandle: string, title: string, variables: Record<string, string>): Promise<void> => {
     await joplin.views.dialogs.addScript(viewHandle, "./views/webview.css");
 
     const variablesFormInputHtml = Object.keys(variables).map(variable => {
@@ -86,7 +86,7 @@ export const setTemplateVariablesView = async (viewHandle: string, variables: Re
     await joplin.views.dialogs.setHtml(
         viewHandle,
         `
-        <h2> Template variables </h2>
+        <h2> ${encode(title)} </h2>
         <form name="variables">
             ${variablesFormInputHtml.join("")}
         </form>