addtags textarea has now autocomplete for placeholders. see #183

pages/addtags/mzta-add-tags.css

@@ -1,15 +1,3 @@
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #1C1B22;
-        color: rgb(251, 251, 254);
-    }
-    
-    a:link { color: #409EFF; }   
-    a:visited { color: #409EFF; }  
-    a:hover { color: #66B1FF; }   
-    a:active { color: #66B1FF; }
-}
-
 #addtags_prompt_container{
     width: 90%;
     margin: 20px auto;
@@ -40,4 +28,68 @@
 
 #addtags_info_limit_num{
     display: none;
+}
+
+.autocomplete-container {
+    position: relative;
+}
+
+.autocomplete-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: small;
+}
+
+.autocomplete-list li {
+    padding: 8px;
+    cursor: pointer;
+}
+
+.autocomplete-list li:hover {
+    background-color: #f0f0f0;
+}
+
+.autocomplete-list li.active {
+    background-color: #ddd;
+}
+
+.hidden {
+    display: none;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1C1B22;
+        color: rgb(251, 251, 254);
+    }
+    
+    a:link { color: #409EFF; }   
+    a:visited { color: #409EFF; }  
+    a:hover { color: #66B1FF; }   
+    a:active { color: #66B1FF; }
+    a:active { color: #66B1FF; }
+
+    .autocomplete-list {
+        background-color: #2E2F36;
+        border: 1px solid #2E2F36;
+    }
+    
+    .autocomplete-list li:hover {
+        background-color: #4c4e58;
+    }
+    
+    .autocomplete-list li.active {
+        background-color: #4c4e58;
+    }
 }

pages/addtags/mzta-add-tags.html

@@ -14,7 +14,11 @@
     <div id="addtags_prompt_container">
         __MSG_AddTags_prompt_text_title__
         <br><span class="infoline">__MSG_prefs_OptionText_btnManagePrompts_infoline__ <a href="https://micz.it/thunderbird-addon-thunderai/data-placeholders/">__MSG_customPrompts_managePrompts_help__</a></span>
-        <br><textarea id="addtags_prompt_text" rows="15"></textarea>
+        <br>
+        <div class="autocomplete-container">
+            <textarea id="addtags_prompt_text" rows="15"></textarea>
+            <ul class="autocomplete-list hidden"></ul>
+        </div>
         <div id="addtags_info_limit_num"></div>
         <div class="btn_div"><button id="btn_save_prompt" disabled>__MSG_save__</button></div>
     </div>

pages/addtags/mzta-add-tags.js

@@ -17,13 +17,18 @@
  */
 
 import { getSpecialPrompts, setSpecialPrompts } from "../../js/mzta-prompts.js";
+import { getPlaceholders } from "../../js/mzta-placeholders.js";
+import { textareaAutocomplete } from "../../js/mzta-placeholders-autocomplete.js";
+
+let autocompleteSuggestions = [];
 
 document.addEventListener('DOMContentLoaded', async () => {
 
     let specialPrompts = await getSpecialPrompts();
     let addtags_prompt = specialPrompts.find(prompt => prompt.id === 'prompt_add_tags');
+    let addtags_textarea = document.getElementById('addtags_prompt_text');
     addtags_prompt.text = browser.i18n.getMessage(addtags_prompt.text);
-    document.getElementById('addtags_prompt_text').value = addtags_prompt.text;
+    addtags_textarea.value = addtags_prompt.text;
 
     let prefs_maxt = await browser.storage.sync.get({add_tags_maxnum: 3});
     if(prefs_maxt.add_tags_maxnum > 0){
@@ -32,5 +37,8 @@ document.addEventListener('DOMContentLoaded', async () => {
         el_tag_limit.style.display = 'block';
     }
 
+    autocompleteSuggestions = (await getPlaceholders(true)).filter(p => !(p.id === 'selected_text' || p.id === 'additional_text')).map(p => ({command: '{%'+p.id+'%}', type: p.type}));
+    textareaAutocomplete(addtags_textarea, autocompleteSuggestions, 1);    // type_value = 1, only when reading an email
+
     i18n.updateDocument();
 });