From 15ca55bca735c04fe3c02b01227e3f8cf5fe4752 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Sun, 8 Sep 2024 21:17:41 +0200
Subject: [PATCH] add: template editor name edit improvements

---
 addon/chrome/content/templateEditor.xhtml |  38 ++++++-
 addon/locale/en-US/addon.ftl              |   5 +
 addon/locale/en-US/templateEditor.ftl     |  14 +++
 addon/locale/it-IT/addon.ftl              |   5 +
 addon/locale/it-IT/templateEditor.ftl     |  14 +++
 addon/locale/ru-RU/addon.ftl              |   5 +
 addon/locale/ru-RU/templateEditor.ftl     |  14 +++
 addon/locale/tr-TR/addon.ftl              |   5 +
 addon/locale/tr-TR/templateEditor.ftl     |  14 +++
 addon/locale/zh-CN/addon.ftl              |  11 +-
 addon/locale/zh-CN/templateEditor.ftl     |  14 +++
 src/modules/template/editorWindow.ts      | 125 ++++++++++++++++------
 12 files changed, 224 insertions(+), 40 deletions(-)

diff --git a/addon/chrome/content/templateEditor.xhtml b/addon/chrome/content/templateEditor.xhtml
index 068b483..ca08b64 100644
--- a/addon/chrome/content/templateEditor.xhtml
+++ b/addon/chrome/content/templateEditor.xhtml
@@ -128,6 +128,11 @@
         margin: 0 auto;
         padding: 0px;
       }
+      .help-button {
+        appearance: auto;
+        -moz-default-appearance: -moz-mac-help-button;
+        min-width: 0;
+      }
     </style>
     <link
       rel="stylesheet"
@@ -146,10 +151,39 @@
         orient="horizontal"
       ></xul:splitter>
       <xul:hbox class="viewport editor-viewport">
-        <div style="display: flex; align-items: center">
+        <xul:hbox align="center">
+          <div style="flex-shrink: 0" data-l10n-id="templateType"></div>
+          <xul:menulist id="editor-type" native="true">
+            <xul:menupopup>
+              <xul:menuitem
+                data-l10n-id="templateType-unknown"
+                value="unknown"
+              ></xul:menuitem>
+              <xul:menuitem
+                data-l10n-id="templateType-system"
+                value="system"
+                hidden="true"
+              ></xul:menuitem>
+              <xul:menuitem
+                data-l10n-id="templateType-item"
+                value="item"
+              ></xul:menuitem>
+              <xul:menuitem
+                data-l10n-id="templateType-text"
+                value="text"
+              ></xul:menuitem>
+            </xul:menupopup>
+          </xul:menulist>
+          <button
+            id="templateType-help"
+            data-l10n-id="templateType-help"
+            class="help-button"
+          ></button>
+        </xul:hbox>
+        <xul:hbox align="center">
           <div style="flex-shrink: 0" data-l10n-id="templateName"></div>
           <input id="editor-name" type="text" style="width: 100%" />
-        </div>
+        </xul:hbox>
         <div style="display: flex; flex-direction: column; height: 100%">
           <iframe
             id="editor"
diff --git a/addon/locale/en-US/addon.ftl b/addon/locale/en-US/addon.ftl
index 9fbe0fd..6df150e 100644
--- a/addon/locale/en-US/addon.ftl
+++ b/addon/locale/en-US/addon.ftl
@@ -35,6 +35,11 @@ templateEditor-templateDisplayType =
     .text = Text
     .unknown = ?
 
+templateEditor-templateHelp =
+    .system = For specific purposes, e.g., generating note link.
+    .item = Can generate note fragments from one or more selected items as input.
+    .text = Can generate note fragments. It doesn't require any input.
+
 editor-resizeImage-title = Resize Image
 editor-resizeImage-prompt = Resize image width to:
 editor-previewImage-title = Preview Image
diff --git a/addon/locale/en-US/templateEditor.ftl b/addon/locale/en-US/templateEditor.ftl
index 5042424..4acb3fa 100644
--- a/addon/locale/en-US/templateEditor.ftl
+++ b/addon/locale/en-US/templateEditor.ftl
@@ -1,5 +1,19 @@
 title = Template Editor
 
+templateType = Template Type
+
+templateType-item =
+    .label = Item
+templateType-text =
+    .label = Text
+templateType-system =
+    .label = Builtin
+templateType-unknown =
+    .label = ?
+templateType-help =
+    .label = About...
+    .title = Detailed explanation of template types
+
 templateName = Template Name
 
 previewContainer = 
diff --git a/addon/locale/it-IT/addon.ftl b/addon/locale/it-IT/addon.ftl
index 07440df..0ea13ef 100644
--- a/addon/locale/it-IT/addon.ftl
+++ b/addon/locale/it-IT/addon.ftl
@@ -35,6 +35,11 @@ templateEditor-templateDisplayType =
     .text = Text
     .unknown = ?
 
+templateEditor-templateHelp =
+    .system = For specific purposes, e.g., generating note link.
+    .item = Can generate note fragments from one or more selected items as input.
+    .text = Can generate note fragments. It doesn't require any input.
+
 syncManager-noteName = Nome nota
 syncManager-lastSync = Ultima sincronizzazione
 syncManager-filePath = Percorso MarkDown
diff --git a/addon/locale/it-IT/templateEditor.ftl b/addon/locale/it-IT/templateEditor.ftl
index 464aa8a..2bdc793 100644
--- a/addon/locale/it-IT/templateEditor.ftl
+++ b/addon/locale/it-IT/templateEditor.ftl
@@ -1,5 +1,19 @@
 title = Editor dei template
 
+templateType = Template Type
+
+templateType-item =
+    .label = Item
+templateType-text =
+    .label = Text
+templateType-system =
+    .label = Builtin
+templateType-unknown =
+    .label = ?
+templateType-help =
+    .label = About...
+    .title = Detailed explanation of template types
+
 templateName = Nome template
 
 previewContainer = 
diff --git a/addon/locale/ru-RU/addon.ftl b/addon/locale/ru-RU/addon.ftl
index 0cdf310..c7580dd 100644
--- a/addon/locale/ru-RU/addon.ftl
+++ b/addon/locale/ru-RU/addon.ftl
@@ -35,6 +35,11 @@ templateEditor-templateDisplayType =
     .text = Text
     .unknown = ?
 
+templateEditor-templateHelp =
+    .system = For specific purposes, e.g., generating note link.
+    .item = Can generate note fragments from one or more selected items as input.
+    .text = Can generate note fragments. It doesn't require any input.
+
 editor-resizeImage-title = Resize Image
 editor-resizeImage-prompt = Resize image width to:
 editor-previewImage-title = Preview Image
diff --git a/addon/locale/ru-RU/templateEditor.ftl b/addon/locale/ru-RU/templateEditor.ftl
index b67a905..4869f03 100644
--- a/addon/locale/ru-RU/templateEditor.ftl
+++ b/addon/locale/ru-RU/templateEditor.ftl
@@ -1,5 +1,19 @@
 title = Редактор шаблонов
 
+templateType = Template Type
+
+templateType-item =
+    .label = Item
+templateType-text =
+    .label = Text
+templateType-system =
+    .label = Builtin
+templateType-unknown =
+    .label = ?
+templateType-help =
+    .label = About...
+    .title = Detailed explanation of template types
+
 templateName = Имя шаблона
 
 previewContainer = 
diff --git a/addon/locale/tr-TR/addon.ftl b/addon/locale/tr-TR/addon.ftl
index 8569eea..99bd53c 100644
--- a/addon/locale/tr-TR/addon.ftl
+++ b/addon/locale/tr-TR/addon.ftl
@@ -35,6 +35,11 @@ templateEditor-templateDisplayType =
     .text = Text
     .unknown = ?
 
+templateEditor-templateHelp =
+    .system = For specific purposes, e.g., generating note link.
+    .item = Can generate note fragments from one or more selected items as input.
+    .text = Can generate note fragments. It doesn't require any input.
+
 editor-resizeImage-title = Resmi Boyutlandır
 editor-resizeImage-prompt = Resmi Şuna Boyutlandır:
 editor-previewImage-title = Resmi Önizle
diff --git a/addon/locale/tr-TR/templateEditor.ftl b/addon/locale/tr-TR/templateEditor.ftl
index 8e4d191..109bca1 100644
--- a/addon/locale/tr-TR/templateEditor.ftl
+++ b/addon/locale/tr-TR/templateEditor.ftl
@@ -1,5 +1,19 @@
 title = Şablon Düzenleyici
 
+templateType = Template Type
+
+templateType-item =
+    .label = Item
+templateType-text =
+    .label = Text
+templateType-system =
+    .label = Builtin
+templateType-unknown =
+    .label = ?
+templateType-help =
+    .label = About...
+    .title = Detailed explanation of template types
+
 templateName = Şablon Adı
 
 previewContainer = 
diff --git a/addon/locale/zh-CN/addon.ftl b/addon/locale/zh-CN/addon.ftl
index 186273a..161ff0d 100644
--- a/addon/locale/zh-CN/addon.ftl
+++ b/addon/locale/zh-CN/addon.ftl
@@ -30,11 +30,16 @@ templateEditor-templateDisplayName =
     .ExportMDFileContent = Export MD File Content (导出MD正文)
 
 templateEditor-templateDisplayType =
-    .system = Builtin
-    .item = Item
-    .text = Text
+    .system = 内置
+    .item = 条目
+    .text = 文本
     .unknown = ?
 
+templateEditor-templateHelp =
+    .system = 用于特定目的，例如生成笔记链接。
+    .item = 可以从一个或多个选定的条目生成笔记片段。
+    .text = 可以生成笔记片段。不需要任何输入。
+
 editor-resizeImage-title = 缩放图片
 editor-resizeImage-prompt = 缩放图片宽度为：
 editor-previewImage-title = 预览图片
diff --git a/addon/locale/zh-CN/templateEditor.ftl b/addon/locale/zh-CN/templateEditor.ftl
index 709584b..9424b29 100644
--- a/addon/locale/zh-CN/templateEditor.ftl
+++ b/addon/locale/zh-CN/templateEditor.ftl
@@ -1,5 +1,19 @@
 title = 模板编辑器
 
+templateType = 模板类型
+
+templateType-item =
+    .label = 条目
+templateType-text =
+    .label = 文本
+templateType-system =
+    .label = 内置
+templateType-unknown =
+    .label = ?
+templateType-help =
+    .label = 关于...
+    .title = 模板类型的详细解释
+
 templateName = 模板名称
 
 previewContainer = 
diff --git a/src/modules/template/editorWindow.ts b/src/modules/template/editorWindow.ts
index 7dbe365..2bf88bc 100644
--- a/src/modules/template/editorWindow.ts
+++ b/src/modules/template/editorWindow.ts
@@ -109,6 +109,31 @@ export async function showTemplateEditor() {
         return div;
       })
       .render();
+    _window.document
+      .querySelector("#templateType-help")
+      ?.addEventListener("click", (ev) => {
+        new addon.data.ztoolkit.Guide().highlight(_window.document, {
+          title: "About Template Types",
+          description: ["system", "item", "text"]
+            .map(
+              (type) =>
+                `${getString(
+                  "templateEditor-templateDisplayType",
+                  type,
+                )}: ${getString("templateEditor-templateHelp", type)}`,
+            )
+            .join("\n"),
+          onNextClick: () => {
+            Zotero.launchURL(
+              "https://github.com/windingwind/zotero-better-notes/blob/master/docs/about-note-template.md",
+            );
+          },
+          showButtons: ["next", "close"],
+          nextBtnText: "Learn more",
+          closeBtnText: "OK",
+          position: "center",
+        });
+      });
     _window.document
       .querySelector("#create")
       ?.addEventListener("click", (ev) => {
@@ -185,6 +210,12 @@ async function refresh() {
 
 function getRowData(index: number) {
   const rowData = addon.data.template.editor.templates[index];
+  if (!rowData) {
+    return {
+      name: "",
+      type: "unknown",
+    };
+  }
   let templateType = "unknown";
   let templateDisplayName = rowData;
   if (addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(rowData)) {
@@ -230,42 +261,44 @@ function updateTable(selectId?: number) {
 
 function updateEditor() {
   const name = getSelectedTemplateName();
+  const { type, name: displayName } = getRowData(getSelectedIndex());
   const templateText = addon.api.template.getTemplateText(name);
+  const win = addon.data.template.editor.window;
+  if (!win) {
+    return;
+  }
 
-  const header = addon.data.template.editor.window?.document.getElementById(
-    "editor-name",
+  const templateType = win.document.querySelector(
+    "#editor-type",
+  ) as XUL.MenuList;
+  const templateName = win.document.querySelector(
+    "#editor-name",
   ) as HTMLInputElement;
-  const editor = addon.data.template.editor.window?.document.getElementById(
-    "editor",
-  ) as HTMLIFrameElement;
-  const saveTemplate =
-    addon.data.template.editor.window?.document.getElementById(
-      "save",
-    ) as XUL.Button;
-  const deleteTemplate =
-    addon.data.template.editor.window?.document.getElementById(
-      "delete",
-    ) as XUL.Button;
-  const resetTemplate =
-    addon.data.template.editor.window?.document.getElementById(
-      "reset",
-    ) as XUL.Button;
+  const editor = win?.document.getElementById("editor") as HTMLIFrameElement;
+  const saveTemplate = win?.document.getElementById("save") as XUL.Button;
+  const deleteTemplate = win?.document.getElementById("delete") as XUL.Button;
+  const resetTemplate = win?.document.getElementById("reset") as XUL.Button;
   if (!name) {
-    header.value = "";
-    header.setAttribute("disabled", "true");
+    templateType.value = "unknown";
+    templateType.setAttribute("disabled", "true");
+    templateName.value = "";
+    templateName.setAttribute("disabled", "true");
     editor.hidden = true;
     saveTemplate.setAttribute("disabled", "true");
     deleteTemplate.setAttribute("disabled", "true");
     deleteTemplate.hidden = false;
     resetTemplate.hidden = true;
   } else {
-    header.value = name;
+    templateType.value = type;
+    templateName.value = displayName;
     if (!addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name)) {
-      header.removeAttribute("disabled");
+      templateType.removeAttribute("disabled");
+      templateName.removeAttribute("disabled");
       deleteTemplate.hidden = false;
       resetTemplate.hidden = true;
     } else {
-      header.setAttribute("disabled", "true");
+      templateType.setAttribute("disabled", "true");
+      templateName.setAttribute("disabled", "true");
       deleteTemplate.setAttribute("disabled", "true");
       deleteTemplate.hidden = true;
       resetTemplate.hidden = false;
@@ -292,15 +325,19 @@ async function updatePreview() {
 }
 
 function getSelectedTemplateName() {
-  const selectedTemplate = addon.data.template.editor.templates.find(
-    (v, i) =>
-      addon.data.template.editor.tableHelper?.treeInstance.selection.isSelected(
-        i,
-      ),
-  );
+  const selectedTemplate =
+    addon.data.template.editor.templates[getSelectedIndex()];
   return selectedTemplate || "";
 }
 
+function getSelectedIndex() {
+  const selectedIndex =
+    addon.data.template.editor.tableHelper?.treeInstance.selection.selected
+      .values()
+      .next().value;
+  return selectedIndex;
+}
+
 function createTemplate() {
   const template: NoteTemplate = {
     name: `New Template: ${new Date().getTime()}`,
@@ -327,14 +364,32 @@ async function importNoteTemplate() {
 }
 
 function saveSelectedTemplate() {
-  const name = getSelectedTemplateName();
-  const header = addon.data.template.editor.window?.document.getElementById(
-    "editor-name",
+  const win = addon.data.template.editor.window;
+  if (!win) {
+    return;
+  }
+
+  const templateType = win.document.querySelector(
+    "#editor-type",
+  ) as XUL.MenuList;
+  const templateName = win.document.querySelector(
+    "#editor-name",
   ) as HTMLInputElement;
 
+  const name = getSelectedTemplateName();
+  const type = templateType.value;
+  let modifiedName: string;
+  if (type === "system") {
+    modifiedName = name;
+  } else if (type === "unknown") {
+    modifiedName = templateName.value;
+  } else {
+    modifiedName = `[${type}]${templateName.value}`;
+  }
+
   if (
     addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name) &&
-    header.value !== name
+    modifiedName !== name
   ) {
     showHint(
       `Template ${name} is a system template. Modifying template name is not allowed.`,
@@ -343,7 +398,7 @@ function saveSelectedTemplate() {
   }
 
   const template = {
-    name: header.value,
+    name: modifiedName,
     text: addon.data.template.editor.editor.getValue() as string,
   };
   if (
@@ -362,10 +417,10 @@ function saveSelectedTemplate() {
   }
 
   addon.api.template.setTemplate(template);
-  if (name !== template.name) {
+  if (name !== modifiedName) {
     addon.api.template.removeTemplate(name);
   }
-  showHint(`Template ${template.name} saved.`);
+  showHint(`Template ${modifiedName} saved.`);
   const selectedId =
     addon.data.template.editor.tableHelper?.treeInstance.selection.selected
       .values()